Современные технологии не стоят на месте, и вот уже перед веб-ресурсами стоит задача не только подстраиваться под пользователя, но и адаптироваться под его гаджет. Мария Смирнова рассказывает, что адаптивный сайт – это набор «умных» интернет-страниц, которые распознают тип устройства, с которых на них заходят, и подстраивают внешний вид контента под особенности экрана.

К 2014 году большая доля веб-трафика будет приходиться на мобильные устройства. Готовы ли веб-сайты к этому?

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

Дело в том, что большинство сайтов ориентированы на стандартное разрешение экрана 1024х768. Такие сайты на мониторах планшетов, смартфонов, мобильных телефонов и smart телевизоров становятся крайне неудобными для просмотра и использования.

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

Примеры сайтов с адаптивным дизайном можно посмотреть здесь.

Адаптивный дизайн VS мобильные приложения и мобильные версии сайта

Мобильные приложения для пользователей таких популярных гаджетов как iPad, iPhone, гаджеты на ОС Андройд также решают проблему просмотра интернет-ресурса на мобильном устройстве.

Однако под каждый тип операционной системы нужно делать свое приложение или версию сайта. Это дополнительные ресурсы, как с точки зрения денег, так и времени! Поэтому сегодня создание мобильной версии сайта или мобильного приложения для подавляющего большинства компаний - непозволительная роскошь.

Кроме того, пользователи экономят память телефона и трафик, необходимый на загрузку приложения, поэтому обычно загружают приложения, только если собираются им периодически пользоваться, и не будут грузить приложение ради единичного просмотра ресурса. Это значит, что для сайтов компаний (корпоративных, визиток) или не раскрученных интернет-магазинов и сервисов вариант с созданием приложения – не вариант.

Важно упомянуть также о таком минусе мобильных приложений и отдельных версий сайта как падение показателей поведенческого фактора так необходимых при продвижении сайта. Весь трафик ресурса будет разделен на трафик сайта и трафик приложения, а поисковые системы об этом не догадаются и будут полагать, что трафик ресурса по каким-то причинам все время падает.

И еще важный момент – это неудобство наполнения и обработки заказов или обратной связи с веб-ресурса, расположенного как на сайте, так и на мобильном приложении. Для публикации материалов нужно или делать двойную работу по наполнению или обеспечить интеграцию контента, что требует ресурсов на доработку сайта и приложения. Усложняется и обработка заказов в интернет-магазинах, их нужно или собирать отдельно с сайта и приложения или интегрировать в единую базу, что также требует участия программиста.

Адаптивный сайт – это один URL сайта, один дизайн, один контент и один код сайта!

Есть ли минусы у адаптивного дизайна сайтов?

Безусловно, есть. Основной минус состоит в том, что это новая технология и еще сыроватая. Крайне мало специалистов, знающих как делать адаптивный дизайн и имеющих опыт. По этой причине адаптивный дизайн сейчас практикуют в основном крупные студии, имеющие ресурсы на освоение новых технологий.

В нешей компании, "Интернет-клиент" мы тоже только изучаем эту технологию и запускаем первые проекты. Отсутствие богатого опыта не позволяет нам тарифицировать эту работу, поэтому первые 5 адаптивных сайтов мы делаем без взимания платы за работы связанные с адаптацией, а это порядка 50% от стоимости дизайн-макетов и верстки. Спешите, осталось 3 места!

Адаптивный дизайн очень связан с контентом. Нельзя набить в страницу все что угодно, нужно всегда сразу задумываться о том будет ли уместен и поместится ли контент в блоки, разворачиваемые на мобильной версии. Поэтому не стоит делать адаптивный сайт, не имея в штате или на аутсорсе грамотного контенщика.

Технология создания адаптивного дизайна

Mobile first

Для оптимизации отображения страниц сайта на мониторах мобильных устройств, дизайнеры отрисовывают мобильные версии сайтов с адаптивным дизайном на базе принципа «mobile first».

Основная цель процесса – сохранение правильного смысла и посыла при просмотре содержимого ресурса в формате одной колонки, как это бывает при работе с монитором мобильного телефона. На данном этапе важное значение приобретает работа с контентом. Его необходимо сократить, ликвидировать лишние блоки, оставляя самые важные элементы информации.

Дизайн и верстка

Дизайнерами разрабатывается от 5 до 10 макетов сайта для отображения на устройствах разного формата и разрешения: мобильных телефонах, планшетах, коммуникаторах, мониторах ноутбуков и нетбуков. При этом главной задачей ставится сохранение качества изображений и контента. Готовые макеты передается для верстки программистам.

Адаптация к девайсам

Готовый сайт с адаптивным дизайном автоматически распознает формат, тип и разрешение экрана устройства, с которого на него заходит посетитель. Подключение/отключение элементов страницы, изменение ширины блоков и размера шрифтов, включение или отключение анимации происходит автоматически. В итоге страница с responsive design адаптируется к устройству и отображается с учетом специфики гаджета.

Тестирование

Готовый сайт необходимо протестировать на популярных девайсах и браузерах. Это существенный момент, так как далеко не все студии имеют в наличии необходимый арсенал гаджетов и технологию тестирования удобства адаптивного сайта.

***

Кратко резюмируя тему, стоит отметить, что сегодня адаптивный дизайн - это отличная технология для обеспечения возможности просмотра сайта со всех типов девайсов. У этой технологии целый перечень преимуществ по сравнению с мобильными приложениями и отдельными версиями сайта.

Однако сегодня технология еще дороговата и сыровата из-за отсутствия у студий опыта и обкатанных технологий. Наверняка, это минус временный.

Орфография и пунктуация в данном тексте сохранены в том виде, в котором они были предложены автором.