Адаптация сайта к мобильным устройствам. Вступление

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

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

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

Адаптивный или вариативный дизайн

Полная версия статьи.

Если коротко, то смысл такого подхода — одна версия сайта для всех устройств. Преимущества такого подхода очевидны: посетитель всегда видит один и тот же сайт, по которому ему несложно передвигаться и пользоваться им. Адрес мобильной версии сайта остаётся прежним, что существенно может облегчить продвижение.

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

Если вы будете делать один дизайн сайта для всех версий, то также крайне не рекомендуется нагружать его большим количеством JavaScript-сценариев. В противном случае вы можете получить неполноценную загрузку сайта, чаще всего неоправданно долгую, а в особо запущенных случаях — вылеты мобильных браузеров. Также не забывайте, что мобильный интернет, по сравнению с ЕС и США, у нас в зачаточном состоянии, большое количество людей еще в глаза не видело мобильного 3G-интернета, поэтому нужно вспоминать при вёрстке про оптимизацию сайта, а не рассчитывать на многомегабитное интернет-соединение на настольном ПК.

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

CSS media-запрос для разрешения экрана до 620 пикселей

CSS media-запрос для разрешения экрана до 620 пикселей

Также перед загрузкой можно определить по user-agent мобильный браузер и показывать/не показывать соответствующие блоки с рекламой или элементами навигации. В качестве примера можно привести небольшой региональный новостной сайт oboz.ks.ua:

oboz.ks.ua - стандартная версия

oboz.ks.ua — стандартная версия

oboz.ks.ua - мобильная версия

oboz.ks.ua — мобильная версия

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

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

Полная версия статьи

Если у вас есть крупный и посещаемый ресурс, у которого есть постоянная аудитория посетителей, то можно ограничиться созданием отдельной версии сайта. Именно так и поступают «тяжеловесы» рунета и уанета.

Habrahabr - мобильная версия

Habrahabr — мобильная версия

Обычно, создаваемая таким образом мобильная версия имеет очень ограниченную функциональность и крайне схематичный дизайн в стиле «привет из 90-х». Многие из вебмастеров этих сайтов используют перенаправление на мобильную версию по user-agent, что не совсем хорошо. Ведь если у вас топовый смартфон с отличным экраном — наблюдать такую версию крайне уныло.

Rozetka - мобильная версия

Rozetka — мобильная версия

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

Фреймворки

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

Создавать мобильные версии сайтов с помощью jQuery Mobile просто и легко, есть даже много онлайновых инструментов, которые позволяют даже новичку создать мобильный сайт с помощью Drag’n’Drop.

Создание сайта на jQuery Mobile с помощью Drag'n'Drop

Создание сайта на jQuery Mobile с помощью Drag’n’Drop

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

Мобильная версия сайта Стэндфорского университета на jQuery Mobile

Мобильная версия сайта Стэндфорского университета на jQuery Mobile

Элементы интерфейса для мобильного дизайна

Здесь наблюдается полный разброд и шатание. Каждая из крупных корпораций пытается внедрить свои руководства по созданию интерфейсов. Первыми здесь являются Microsoft, они первыми начали движение в сторону стандартизации интерфейсов и элементов управления как на мобильных телефонах, так и на настольных ПК, планшетах и игровых приставках. Их сборник документов «Design guidance for Metro style apps» применим не только при разработке Metro-приложений, но и вполне подходит с некоторыми оговорками для руководства по созданию сайтов, которые ориентированы под работу на touch-устройствах.

Следом за Microsoft начали публиковать свои гайдлайны Apple и Google. Неважно, кто из этих двух корпораций был первым, важен тот факт, что Microsoft опубликовал свои инструкции практически одновременно с выпуском первой операционной системы с новой концепцией — Windows Phone 7. Другие два IT-гиганта начали публиковать и редактировать свои гайдлайны уже после того, как их магазины приложений были наполнены, что создало полный хаос в дизайне приложений под соответствующие платформы. Эти документы носят название «User Interface Guidelines» для Google и «iOS Human Interface Guidelines» для Apple, соответственно.

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

Главня страница Bing - отличный пример сайта в Metro-стиле

Главня страница Bing — отличный пример сайта в Metro-стиле

Особенности при адаптации для конкретных платформ

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

Если в двух словах, то в текущий момент на рынке мобильных сайтов правит бал оптимизация исключительно под браузеры на основе WebKit: Safari, Android Browser, Google Chrome. Это произошло не без объективных причин. На текущий момент они поддерживают наиболее полно новые спецификации W3C, даже те, которые до сих пор находятся в черновиках. Особо ярким примером может служить поддержка Touch Events, спецификация которой в данный момент находиться в состоянии Working Draft.

Адаптация сайтов под Opera Mobile(до версии 12.0), Android Browser 2.3, а особенно под Opera  Mini может стать ночным кошмаром любого веб-разработчика. Достаточно посмотреть таблицу поддержки свойств CSS, JS API, DOM, HTML5, SVG и Canvas.

Особую пикантность адаптации сайтов под Opera добавляет фирменная технология Opera Turbo, которая передаёт на мобильное устройство уже сжатую копию страницы. В итоге сайт может выглядеть и работать совсем не так, как рассчитано.

Немного особняком стоят мобильные браузеры от Microsoft в операционных системах Windows Phone 7 и 8. По непонятной мне причине в браузере WP7 также нет поддержки Touch Events, что не позволяет пока рассматривать мобильную платформу от Microsoft как наравне стоящую с лидерами индустрии iOS и Android для web-разработчика. О следующем поколении мобильной операционной системы от Microsoft пока есть только ничем не подтверждённые слухи. Но в предварительной версии десктопного браузера IE10 уже есть частичная поддержка обработки касаний, поэтому я надеюсь что и во всех существующих мобильных устройствах с WP7 она также появиться, после того как они получат следующее важное обновление.

Что ждёт нас в будущем?

По моему скромному мнению, в будущем нас ждёт уход от привычного нам веба. Постепенно грань между приложениями и сайтами начинает исчезать. Особенно это заметно в предварительных версиях Windows 8— там уже особо не видно разницы работы с веб-сервисом и приложением. Всё работает быстро и плавно в полноэкранном режиме, не отвлекая от текущей задачи.

Windows 8 Release Preview - Приложение "Wikipedia"

Windows 8 Release Preview — Приложение «Wikipedia»

С постепенным распространением и удешевлением облачных технологий все тяжёлые операции на сайтах могут быть перенесены «в облака». Поэтому уже будет безразлично с какого устройства вы используете сайт или приложение: смартфон, ноутбук, планшет, телевизор, игровая консоль. Вы везде получите нужный результат за самое короткое время. Рано или поздно, но все разработчики браузеров внедрят спецификации W3C, возможно кто-то добавит свои эксклюзивные технологии, которые будет усиленно продвигать. «Браузерные холивары» вряд ли прекратятся, скорее больше перейдут в плоскость споров об операционных системах. Самым главным параметром в IT уже скоро может стать не количество оперативной памяти, мощность процессора и количество шейдерных блоков на видеокарте, а стабильность и скорость интернет-соединения.

Постоянный адрес статьи Пинги запрещены.