Создание сайтов. Мобильная версия сайта .

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

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

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

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

   • Динамическая загрузка контента. Страница одна, URL один, но устройствам, с которого заходит визитеры, отдаются разные варианты HTML-кода.

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

   • Отд ельная мобильная версия. Фактически безальтернативный в недалеком прошлом и по сей день широко распространенный вариант. По-хорошему, это отдельный сайт, обычно расположенный на поддомене основного. Создается в большинстве случаев на его базе, но с учетом ограничений мобильных устройств доступная в Вебе функциональность урезается. Зато заказчик и разработчик вольны в деталях продумать, к каким именно возможностям и в каких конкретно местах дать доступ «мобильным» посетителям, и попутно до разумного предела снизить вес страниц.

   Делать отдельные мобверсии начали, еще когда смартфонов не было и в помине. До сих пор периодически под старые телефоны создают максимально лаконичные WAP– и PDA-версии (см., например, на сайте издательского дома «Коммерсантъ», www.kommersant.ru). Впрочем, по адресу wap.yoursite.ru и pda.yoursite.ru может жить и обычная, общая для любых гаджетов ипостась веб-проекта.

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

   • Львиная доля «мобильных» пользователей использует аппараты с сенсорным экраном, или тачскрином (англ. touch-screen). Поэтому не задействуйте в мобверсии сценариев работы, которые требуют манипуляций мышью. Заменяйте их общепринятыми «жестами» (прижившаяся в русском языке калька с англ. gestures): например, выбор – касание пальцем, промотка страницы вниз или прокрутка слайдера с фотографиями – листающее движение в нужном направлении и т. д. По той же причине откажитесь от показа информации по наведению на нее указателя; так часто оформляют справки. Пусть все интерактивные элементы будут крупными: кнопки, веб-формы, поля, где нужно ставить галочки, и т. д.

   • Не заставляйте посетителя вводить данные с клавиатуры без крайней на то необходимости. Отнюдь не все набирают буквы на сенсорном экране с той же быстротой и непринужденностью, как на ноутбуке. Используйте корот кие URL: в мобильных браузерах люди реже вводят что-либо в адресную строку, однако иногда им приходится вбивать туда название страницы напрямую. Чем проще формы, нуждающиеся в заполнении, тем лучше, и не беда, если в веб-версии полей десять против трех в мобильной: лучше собрать меньше информации о пользователе, но довести его до звонка или заказа, чем остаться ни с чем. Используйте автозаполнение полей, где только возможно. И вообще храните максимум информации, оставляемой посетителем.

   • Используйте аппаратные возможности гаджетов разумно. Хотя современные смартфоны и планшетники – фактически мини-компьютеры, мощности у них не запредельные, вдобавок от интенсивной нагрузки быстрее садится батарея. В частности, лучше отказаться от использования технологий JavaScript, Flash и AJAX в мобильной версии. Не только потому, что они ресурсоемкие, но и потому, что не все гаджеты поддерживают их по умолчанию.

   • «Минимизируйте это». И то. И все, что тол ько удастся. Помните и о том, что скорость мобильного Интернета даже в мегаполисах оставляет желать лучшего. Да здравствуют здоровые сдержанность и аскетизм. Не бойтесь ущемить аудиторию, урезая функциональность веб-версии для вывода на гаджеты: наоборот, оставляя на странице самое главное, вы способны повысить ее конверсионный коэффициент. «В ограничении лишь познается мастер», – писал Гете. Минимум ссылок, уровней навигации, элементов управления.

 

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