Разработка мобильной версии сайта

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

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

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

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

На текущий момент мобильные версии делаются по одному из трёх принципов.

Впрочем, с известной степенью вероятности распознавание гаджета осуществляется ошибочно, и в таком случае посетитель вынужден пытаться работать с форматом отображения сайта, ужасающе выглядящим на его смартфоне или планшетнике. И не властен переключиться на более удобный вид, как было бы возможно при наличии раздельных мобильной и обычной версий (см. следующий пункт). Вдобавок такой способ «мобилизации» годится не для каждой площадки – в большей степени для онлайн-СМИ и блогов.

• Адаптивный дизайн. Ещё несколько лет назад эта методика отсутствовала как класс, но чем дальше, тем более она популярна. И кстати, всячески пропагандируется Google. Суть её в том, что в зависимости от того, на каком устройстве осуществляется просмотр, комбинируются и видоизменяются элементы вёрстки с подстройкой под ширину окна браузера.
   

  В адаптивном, или «отзывчивом», веб-дизайне принят также метод mobile first – дословно «сперва [под] мобильный»: сайт изначально проектируется с акцентом на том, что он будет выводиться на экраны гаджетов, ввиду чего делается умеренно аскетичным, с «подвижными» блоками. Адрес у страницы один, просто в её макет исходно благодаря технологии CSS3 Media Queries заложена вариативность: смотря по обстоятельствам меняется число колонок, размер текста, величина управляющих элементов и их взаимное расположение и т. д.

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

• Динамическая загрузка контента. Страница одна, URL один, но устройствам, с которого заходит визитеры, отдаются разные варианты HTML-кода.
• Отдельная мобильная версия сайта. Фактически безальтернативный в недалеком прошлом и посей день широко распространенный вариант. По-хорошему, это отдельный сайт, обычно расположенный на поддомене основного. Создается в большинстве случаев на его базе, но с учётом ограничений мобильных устройств доступная в интернете функциональность урезается. Зато заказчик и разработчик вольны в деталях продумать, к каким именно возможностям и в каких конкретно местах дать доступ «мобильным» посетителям, и попутно до разумного предела снизить вес страниц сайта.
  
  Делать отдельные мобверсии начали, ещё когда смартфонов не было и в помине. До сих пор периодически под старые телефоны создают максимально лаконичные WAP– и PDA-версии. Впрочем, по адресу wap.yoursite.ru и pda.yoursite.ru может жить и обычная, общая для любых гаджетов ипостась веб-проекта.

При адаптации интернет-ресурса под современные мобильные устройства в обязательном порядке нужно держать в уме ряд их особенностей.

• Львиная доля «мобильных» пользователей использует аппараты с сенсорным экраном, или тачскрином (англ. touch-screen). Поэтому не задействуйте в мобверсии сценариев работы, которые требуют манипуляций мышью. Заменяйте их общепринятыми «жестами» (прижившаяся в русском языке калька с англ. gestures): например, выбор – касание пальцем, промотка страницы вниз или прокрутка слайдера с фотографиями – листающее движение в нужном направлении и т. д.
  
  По той же причине откажитесь от показа информации по наведению на неё указателя; так часто оформляют справки. Пусть все интерактивные элементы будут крупными: кнопки, веб-формы, поля, где нужно ставить галочки, и т. д.
• Не заставляйте посетителя вводить данные с клавиатуры без крайней на то необходимости. Отнюдь не все набирают буквы на сенсорном экране с той же быстротой и непринужденностью, как на ноутбуке. Используйте короткие URL: в мобильных браузерах люди реже вводят что-либо в адресную строку, однако иногда им приходится вбивать туда название страницы напрямую.
  
  Чем проще формы, нуждающиеся в заполнении, тем лучше, и не беда, если в веб-версии полей десять против трёх в мобильной: лучше собрать меньше информации о пользователе, но довести его до звонка или заказа, чем остаться ни с чем. Используйте автозаполнение полей, где только возможно. И вообще храните максимум информации, оставляемой посетителем.
   
• Используйте аппаратные возможности гаджетов разумно. Хотя современные смартфоны и планшетники – фактически мини-компьютеры, мощности у них не запредельные, вдобавок от интенсивной нагрузки быстрее садится батарея. В частности, лучше отказаться от использования технологий JavaScript, Flash и AJAX в мобильной версии. Не только потому, что они ресурсоёмкие, но и потому, что не все гаджеты поддерживают их по умолчанию.
• «Минимизируйте это». И то. И всё, что только удастся. Помните и о том, что скорость мобильного Интернета даже в мегаполисах оставляет желать лучшего. Да здравствуют здоровые сдержанность и аскетизм. Не бойтесь ущемить аудиторию, урезая функциональность веб-версии сайта для вывода на гаджеты: наоборот, оставляя на странице самое главное, вы способны повысить ее конверсионный коэффициент. «В ограничении лишь познается мастер», – писал Гёте. Минимум ссылок, уровней навигации, элементов управления.

Также по возможности организуйте контент так, чтобы информация подгружалась не вся сразу, а по мере скроллинга страницы. Самые важные текстовые пассажи и интерактивные элементы располагайте на первом экране. Картинки должны быть легче и, само собой, меньше, чем в основной версии. Компоненты CSS и JavaScript пусть сжимаются с помощью gzip (грубо говоря, это обычная архивация, осуществляемая «на лету»).

Вместо тяжёлой графики, где это допускает дизайн, применяйте стили CSS. Широкие блоки, грозящие «порвать» верстку и принудить посетителя к горизонтальной прокрутке страницы, либо не вставляйте в мобильную версию, либо тонко подстраивайте под минимальный размер экрана. Так, таблицу с перечислением достоинств продукта ничто не мешает заменить вертикальным списком с красноречивыми иконками. Разметка – одноколоночная, и только одноколоночная. Исключения возможны разве что для планшетников.