Адаптивный сайт

За последние два года коренным образом изменилась модель работы в сети: люди всё чаще и чаще заходят на сайты прямо с сотовых телефонов, планшетов и других подобных устройств (электронных книг, плееров и даже фотоаппаратов). В будущем эта тенденция только усилится.

Создание мобильного сайта под все системы

Не секрет, что раньше разработка мобильных сайтов велась следующим образом: создавался основной ресурс, где размещался полноценный сайт — и рядом запускалась его крайне облегченная версия, содержащая только выжимку из необходимой информации. Предполагалось, что у пользователя мобильного устройства достаточно медленный доступ к Интернету, плюс профиль потребления касается только поиска контактов или чего-то подобного.

Как происходит создание мобильного сайта сегодня?

Сегодня наступило время, когда интернет на телефоне может иметь ту же скорость, что и на обычном компьютере (причём даже в дороге), и требования к мобильному сайту касаются только размеров экрана устройства. То есть вопрос уже не в том, чтобы донести основную информацию, а в том, как удобнее представить сайт на клиентском устройстве.

Какие технические проблемы есть при создании мобильной версии сайта?

Если говорить о старой модели с переключением между полной и облегчённой версией, то следует найти ответы на несколько вопросов:

• Если разрешение экрана телефона больше разрешения экрана ноутбука — какую версию надо показывать?
• На планшетах нужна полная версия или мобильная? А если это new iPad, где разрешение раза в два минимум превышает стандартное настольного монитора?
• Как использовать скриптовую часть: ведь есть целый «зоопарк» систем, где части кода могут не работать.
• И главный вопрос: как определить, что за устройство у пользователя? Ведь мобильных гаджетов уже столько, что подстраиваться под каждый просто невозможно — да и они далеко не всегда сообщают точную информацию о себе.

Как сделать мобильную версию сайта в таких условиях?

Ответ только один: не сервер должен решать, какую версию нужно отдавать пользователю, а должна быть одна адаптивная версия сайта для всех систем и всех устройств.

Как создать мобильную версию сайта в адаптивном виде?

Для начала — использовать специальные свойства кода, позволяющие делать логическую разбивку элементов. То есть, грубо говоря, каждая часть сайта будет выглядеть у пользователя оптимально для его устройства. Код сайта будет содержать все необходимые инструкции, чтобы устройство «поняло», как лучше его отобразить — и сдеало это на своё усмотрение. Результат — дизайн мобильной версии сайта является и дизайном «настольной»: макет адаптируется под конкретную систему, конкретный размер экрана и даже положение (вертикальное или горизонтальное) этого экрана.

Насколько это сложно?

Разработка мобильной версии сайта требует решения многих технических вопросов. Например, версия сайта для мобильных устройств не может содержать специфические скрипты: например, встраивание видео для настольных компьютеров делается средствами Flash (это удобнее), а версия сайта для мобильных телефонов использует средства HTML5 и JavaScript, поскольку это работает на нужных платформах. Разумеется, разработка сайтов для мобильных устройств и «больших» компьютеров требует большей работы, но результат того стоит: можно не думать о том, как сайт будет смотреться на любых системах несколько лет. Адаптивный сайт просто не устаревает технически и всегда смотрится если не идеально, то нормально на любом устройстве.