Пример реализации адаптивного дизайна

02 февраля 2013

в разделе Дизайн

Не так давно наша Студия завершила работу по разработке нового сайта-представительства в США. Учитывая тот факт, что уровень проникновения мобильного интернета в данной стране составляет 81%, сразу была обусловлена необходимость адаптации внешнего вида сайта под мобильные устройства.

Пример реализации адаптивного дизайна

Адаптивный дизайн и его роль в мобильных устройствах

Итак, давайте для начала поймём, в чём именно заключается проблема с отображением сайтов на мобильных устройствах?

Большинство мобильных платформ при отображении ресурса, контент которого не может быть отображён в реальном масштабе, используют масштабирование. Примерно так это выглядит на телефоне:

Сайт на мобильном телефоне

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

В процессе разработки сайта, есть ряд решений проблемы организации удобного взаимодействия с сайтом на мобильных устройствах. Итак, варианты следующие:

  1. Разработка отдельной мобильной версии веб-сайта — такой вариант подходит в том случае, если оптимизировать стационарную версию сайта сложно, или же невозможно (к примеру, при разработке промо-сайтов — см. сайт ТМ Green Day)
  2. Разработка отдельного приложения под каждую из мобильных платформ — такой вариант подходит в случае разработки порталов, или же социальных сетей, ибо более сложный и требует дополнительных вложений. Собственно говоря, у многих владельцев iOS или Android устройств есть клиенты для ВКонтакте, Facebook или Instagram. 
  3. Адаптация основной версии сайта (адаптивный дизайн) под мобильное устройство с учётом признаков платформы и разрешения экрана. Именно этот метод мы и использовали.

Итак, в чём же заключается адаптация?

Во-первых, определив, что пользователь зашёл с мобильного устройства, мы можем перенастроить работу основных скриптов так, чтобы они корректно срабатывали при прикосновении к экрану (как пример — реализация Parallax-scrolling на iOS), и в то же время не «грузили» процессор мобильного устройства.

Отличия мобильной версии

Во-вторых, определив разрешение экрана устройства, мы принудительно отключаем масштабирование на мобильных устройствах и берём управление в свои руки (на всякий случай — делается это при помощи Meta-тега viewport)

Теперь наша задача — добавив определённый класс всей странице, переверстать контент на сайте таким образом, чтобы он корректно отображался на всю ширину экрана мобильного устройства. В результате мы получаем следующую ситуацию (слева — версия для ПК, справа — та же страница, открытая на iPhone 4)

Сравнение версий

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

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

Среди других стоит отметить:

Если же у Вас нет желания разбираться с данной технологией, обращайтесь за разработкой мобильной версии сайта в нашу Студию — с удовольствием поможем :)

Узнайте, почему клиентам так нравится работать с нами