07.01.2016
Разработка мобильной версии сайта
По сути веб– и мобильная версии сайта одного поля ягоды: они обе открываются в браузере, предполагают близкие сценарии работы. Разница в их организации обусловлена по большей части различиями между средствами ввода-вывода у больших компьютеров и «карманных» устройств. В отличие от приложения, мобверсия не требует от пользователя дополнительных манипуляций. Достаточно зайти на сайт с гаджета – и, при условии, что веб-мастер не намудрил с настройками, посетителю по умолчанию будет показана мобильная версия.
Одно из главных достоинств мобверсии заключается в том, что она не требует кардинально различных между собой исполнений под разные операционные системы и платформы; учить ещё один язык программирования, чтобы сделать ваш сайт доступным на 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. Широкие блоки, грозящие «порвать» верстку и принудить посетителя к горизонтальной прокрутке страницы, либо не вставляйте в мобильную версию, либо тонко подстраивайте под минимальный размер экрана. Так, таблицу с перечислением достоинств продукта ничто не мешает заменить вертикальным списком с красноречивыми иконками. Разметка – одноколоночная, и только одноколоночная. Исключения возможны разве что для планшетников.
Источник