Кутырь Сергей

Кутырь Сергей


МЕНЕДЖЕР ПО РАЗВИТИЮ СТУДИИ FRESH DESIGN

Со-основатель студии, на протяжении последних 7 лет занимался веб-дизайном, фронт-енд и бек-енд разработкой веб-сайтов и мобильных приложений

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

02 Фев 2013 в разделе
Дизайн

Не так давно наша Студия завершила работу по разработке нового сайта-представительства в США. Учитывая тот факт, что уровень проникновения мобильного интернета в данной стране составляет 81%, сразу была обусловлена необходимость адаптации внешнего вида сайта под мобильные устройства. Результаты работы Вы можете оценить, зайдя на сайт http://fresh-development.com с компьютера и мобильного телефона.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Похожие статьи

pic

Типографика: смайлики, кавычки и тире с дефисом...

Читать далее
pic

Мобайлгеддон, или Google улучшает мобильный поиск...

Читать далее
pic

8 особенностей хорошего лендинга...

Читать далее