Адаптивный дизайн и его роль в мобильных устройствах
Итак, давайте для начала поймём, в чём именно заключается проблема с отображением сайтов на мобильных устройствах?
Большинство мобильных платформ при отображении ресурса, контент которого не может быть отображён в реальном масштабе, используют масштабирование. Примерно так это выглядит на телефоне:
В результате, для того, чтобы прочитать какую-либо информацию, пользователю необходимо использовать масштабирование, и перемещаться по странице, как по пано — не только скроллить вверх и вниз, а так же смещать страницу в горизонтальном направлении.
В процессе разработки сайта, есть ряд решений проблемы организации удобного взаимодействия с сайтом на мобильных устройствах. Итак, варианты следующие:
- Разработка отдельной мобильной версии веб-сайта — такой вариант подходит в том случае, если оптимизировать стационарную версию сайта сложно, или же невозможно (к примеру, при разработке промо-сайтов — см. сайт ТМ Green Day)
- Разработка отдельного приложения под каждую из мобильных платформ — такой вариант подходит в случае разработки порталов, или же социальных сетей, ибо более сложный и требует дополнительных вложений. Собственно говоря, у многих владельцев iOS или Android устройств есть клиенты для ВКонтакте, Facebook или Instagram.
- Адаптация основной версии сайта (адаптивный дизайн) под мобильное устройство с учётом признаков платформы и разрешения экрана. Именно этот метод мы и использовали.
Итак, в чём же заключается адаптация?
Во-первых, определив, что пользователь зашёл с мобильного устройства, мы можем перенастроить работу основных скриптов так, чтобы они корректно срабатывали при прикосновении к экрану (как пример — реализация Parallax-scrolling на iOS), и в то же время не «грузили» процессор мобильного устройства.
Во-вторых, определив разрешение экрана устройства, мы принудительно отключаем масштабирование на мобильных устройствах и берём управление в свои руки (на всякий случай — делается это при помощи Meta-тега viewport)
Теперь наша задача — добавив определённый класс всей странице, переверстать контент на сайте таким образом, чтобы он корректно отображался на всю ширину экрана мобильного устройства. В результате мы получаем следующую ситуацию (слева — версия для ПК, справа — та же страница, открытая на iPhone 4)
Таким образом, чуть перекомпоновав страницу для мобильной версии, мы получаем отличную читаемость текста, удобное размещение элементов навигации, наглядное меню — другими словами — обеспечиваем комфортное взаимодействие пользователя с сайтом.
Стоит отметить, что на сегодняшний день существует большое количество CSS-движков, поддерживающих адаптивный дизайн, одним из наиболее популярных является Twitter Bootstrap.
Среди других стоит отметить:
Если же у Вас нет желания разбираться с данной технологией, обращайтесь за разработкой мобильной версии сайта в нашу Студию — с удовольствием поможем :)
