Нужна ли мобильная версия для сайта?

С каждым днём количество пользователей, которые заходят на сайты с мобильных устройств, увеличивается. Клиенты, в свою очередь, всё чаще настаивают на необходимости корректного отображения сайта на планшетных устройствах. В общем, мобильная версия нужна — это очевидно.

Вопрос лишь в том, как её сделать правильно.

Возможные варианты реализации

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

1. Отдельная мобильная версия сайта — по сути, отдельный сайт, с другой структурой и зачастую очень урезанной функциональностью, на отдельном поддомене (чаще всего это m. или mobile., например m.facebook.com)

Полная (united.com) и мобильная версия (mobile.united.com) сайта United Airlines.Полная (united.com) и мобильная версия (mobile.united.com) сайта United Airlines. В меню полной версии сайта по десятку вложенных пунктов, в мобильной же версии большей части этой информации попросту нет.

2. Мобильное приложение — отдельный клиент для каждой мобильной операционной системы, например Android или iOS. Позволяет задействовать уникальные особенности системы или устройства, будь то особое управление жестами или голосом или интеграция с системой для вывода уведомлений прямо на экран блокировки.

Мобильные приложения Facebook для iOS и Android используют нативный дизайн и управление этих ОС. Мобильные приложения Facebook для iOS и Android используют нативный дизайн и управление этих ОС.

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

Так что же выбрать и какие есть преимущества у каждого из подходов? Все зависит от сложности и функциональности сайта, его целей.

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

Разработка адаптивного дизайна требует меньших временных затрат и является более универсальным методом — вы можете создать распрекрасный клиент для iOS, но ваш преданный пользователь и счастливый обладатель телефона Blackberry, увы, попадет на абсолютно неудобную для него «настольную» версию сайта.

Кроме того, адаптивная версия сайта является хорошим инструментом для «быстрого старта». Часто невозможно загодя сказать, какой будет стратегия развития проекта. Будет ли он популярен среди пользователей Android или у него будет больше пользователей с системой iOS? Создание отдельных решений для каждого из них часто обходится слишком дорого. Адаптивная версия — это отличная альтернатива.

Адаптивный веб-дизайн

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

1. Резиновые сетки — компоновка страницы, при которой размер блоков и элементов пропорционально меняется в зависимости от разрешения экрана. Подробнее об этой технике можно прочесть в статье Итана Маркотта «Fluid Grids»

2. Резиновые (адаптивные) изображения — техника масштабирования изображений, по сути — трюк с использованием CSS-свойства max-width, который заставляет изображения занимать ровно столько пространства, сколько позволяет его обертка. Подробнее об этой технике можно прочесть в статье Итана Маркотта «Fluid Images»

3.Media Queries — назначение свойств CSS-блокам в зависимости от параметров устройства. На правах самопиара — подробности и список параметров можно найти в статье «Приправь свой сайт магией CSS3»

Итан Маркотт (Ethan Marcotte) — веб-дизайнер и font-end-разработчик, автор нескольких книг, последняя на сегодняшний день — «Адаптивный веб-дизайн» (Responsive web-design). Считается, что именно Маркотт, объединив несколько идей вместе, стал автором адаптивного дизайна как понятия.

Как применять адаптивность?

Как же должен вести себя сайт, если экран по ширине меньше 500 px? Опять же — никуда не денешься от уникальности отдельно взятого сайта, но давайте попробуем показать базовые приемы. А от них уже можно и отталкиваться, и комбинировать, и все что душе угодно делать.

Расположение контента

Паттерн под кодовым названием Mondrian Паттерн под кодовым названием Mondrian.

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

Галерея

Применяется до безобразия просто — мы уменьшаем количество колонок.

Галерея

Перемешивание

Перемешивание

Поведение меню

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

Выпадающий список

Первый способ заключается в простой замене меню на выпадающий список select. Выглядит это примерно так:

Замена меню на выпадающий список select

При нажатии на меню в Android OS или iOS вы увидите список пунктов меню, отображенный в стандартном для системы виде.

Сворачивание в иконку

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

Сворачивание в иконку Сворачивание в иконку

Вывод

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