Как и зачем адаптировать сайт для мобильных устройств — Инструкция основателя студии eski.mobi17.02.2016 15:22

1. Вступление.
2. Правильный подход.
3. Поисковая выдача.
4. Конверсия.
5. Технологии.
6. Адаптивный.
7. Обычный.
8. Динамический JS.
9. Динамический показ.
10. Плагин.
11. Разные URL.
12. Отдельная CMS.
13. API.
14. Конструктор.
15. Правильный выбор.
16. Особенности адаптации.
17. Изображения.
18. Таблицы.
19. Иконка Web App.
20. Баннер Web App.
21. Геолокация.
22. Пуш-уведомления.
23. Масштабирование.
24. Плавная прокрутка.
25. Тестирование.
26. Ошибки дизайнеров.

Вступление

После запуска более 100 мобильных сайтов за последние три года, включая такие крупные проекты, как Ozon, «Эльдорадо», «Леруа Мерлен», «Финам» и многие другие, я все еще часто вижу у разрабочиков и руководителей непонимание адаптации — как стратегическое, так и практическое. Чтобы сэкономить время, определите с помощью этой схемы, в какой группе вы находитесь, и перейдите сразу к разделам «Технологии» или «Ошибки дизайнеров». Или просто продолжайте читать.

Правильный подход

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

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

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

Спустя какое-то время в портфолио студии Лебедева начали появляться работы для клиентов, которым, судя по его заявлению, «некуда деньги девать», — для «Русского стандарта» и не только. В общем, если есть спрос — будет и предложение. А буквально недавно Лебедев признался, что мобильные сайты все-таки нужны.

Скачок произошел, и все, кто связан с интернетом, маркетингом или разработкой, начали жить в другой реальности. На любой конференции теперь есть секция о мобайле во всех его проявлениях. Рынок мобильной рекламы окончательно сформировался, и многие бренды это осознали. Интерактивной и видеорекламой при подключении к Wi-Fi-сети в метро уже никого не удивишь.

Мобильная аудитория выросла очень быстро, и многие не были к этому готовы. Даже сайты, которые считаются непродвинутыми и неподходящими для просмотра с мобильных, ощутили на себе рост новой аудитории. Рост десктопных версий остановился, и дальше будет только рост мобильных устройств — это подтверждают многочисленные исследования.

Сайт пенсионного фонда с ежемесячной посещаемостью 300 тысяч пользователей

К чему вся эта предыстория? Три вывода:

• Нужно обращать меньше внимания на высказывания отдельных личностей по поводу глобальных тенденций. Чтобы видеть будущее, лучше следите за такими глобальными игроками, как Google, а еще лучше — читайте блог Chromium.
• Теперь как минимум каждый третий посетитель сайта — пользователь мобильного устройства. Повод задуматься.
• Если вы не знаете, как сделать удобный мобильный UX, — это не значит, что не нужно делать мобильный сайт. Найдите хорошие примеры и следуйте им.

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

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

Поисковая выдача

Еще с апреля 2015 года Google лучше ранжирует сайты, у которых есть мобильная версия. В результатах поиска подобные сайты помечаются лейблом «Для мобильных». Чтобы понять, соответствует ли ваш сайт требованиям поисковой системы, попробуйте этот инструмент.

Лояльность

Этот как раз тот параметр, который невозможно измерить без тщательного исследования, хотя в Google попробовали (результаты исследования на картинке сверху). Для сравнения можно взять два магазина: в одном вам нагрубили — во втором обошлись вежливо. Мне приятнее заходить на сайт, которым удобнее пользоваться, и этот бренд вызовет у меня больше доверия. Именно это субъективное состояние приводит к следующему шагу — конверсии.

Конверсия

Единственная цель, ради которой имеет смысл оптимизировать свой сайт для мобильных, — увеличить конверсию среди аудитории пользователей смартфонов. В наших первых ecommerce-проектах после запуска мобильной версии мы наблюдали взрывной рост конверсии — на 50%. Западные кейсы эту тенденцию подтверждают.

Итак, вы согласны с тем, что корректная работа и отображение сайта на смарфтонах важны, но этой уверенности недостаточно. С этого момента вам нужно иначе смотреть на любой веб-проект — думать сначала о мобильных юзерах, а затем уже о десктопных. Такой подход называется mobile first. Подробнее об этом подходе вы можете прочитать в блоге Люка Врублевски или в его книге Mobile First.

После знакомства с подходом люди разделяются на три группы:

1. Полностью согласны с подходом.
2. Видят в нем смысл, но считают его технически невозможным.
3. Не видят в нем смысла.

Первой и второй группе советую сразу перейти к разделу «Технологии», выбрав подходящий вариант для своего проекта.

Третья группа — это, как правило, либо разработчики, которые не изменяют своим устаревшим убеждениям, либо совершенно далекие от разработки менеджеры, также не готовые меняться. Слова mobile first и вправду звучат прикольно, но реализовать их на практике бывает гораздо сложнее. Основная сложность в том, что человек боится меняться, — в итоге новые технологии внедряются долго и мучительно. Рано или поздно такие люди незаметно для себя примут этот подход, как это произошло с отказом от технологии Flash пару лет назад.

Применяя mobile first, вы решаете задачу адаптации на все 100%. Важно использовать его абсолютно везде: планируете email-рассылку — сначала проектируем шаблон для смартфонов, нужен лендинг — сперва создаем прототип для маленького экрана, есть идея редизайна главной страницы — рисуем ее для экрана смартфона и только затем для десктопа. Постепенно это превратится в полезную привычку, которой можно и нужно заражать других.

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

Технологии

На простой вопрос о выборе технологии для создания адаптивного (или мобильного, формулировка не имеет значения) сайта не всегда легко найти ответ. С нынешним обилием доступных инструментов можно легко запутаться или выбрать неверный путь.

В технологиях создания мобильного UX есть три глобальных способа:

• адаптивный дизайн;
• динамический показ;
• разные URL.

Адаптивный

Обычный

Название говорит само за себя. Это чистый адаптивный дизайн, который меняет отображение на разных экранах с помощью CSS Media Queries. HTML на всех устройствах единый, а за отображение элементов отвечают CSS-стили. Дополнительно возможно использовать JavaScript, который может менять отображение и поведение страницы в зависимости от устройства. Подход mobile first подразумевает использование именно этой технологии: вы проектируете, верстаете сначала для мобильных, а затем добавляете стили для десктопов.

Как реализовать: согласитесь с подходом mobile first, прочитайте книгу Responsive Web Design и начинайте процесс создания нового сайта (или редизайна) с ширины экрана айфона (320 пикселей). Когда у вас будет готова верстка для этой ширины, добавьте Media Query для следующей ширины экрана (допустим, 768 пикселей) и так далее, пока не будете удовлеворены результатом. Кому-то хватает двух брейкпоинтов: для смартфонов и десктопов, кто-то хочет предусмотреть и планшеты вплоть до разного отображения в вертикальном и горизонтальном положении. Если вы используете JavaScript, то эти файлы также загрузятся для всех пользователей, а уже внутри JavaScript возможно выполнять различные функции в зависимости от устройства.

Динамический JS

В этой конфигурации (Dynamically-served JavaScript) все устройства загружают одинаковый HTML-код, который содержит ссылку на внешний JS-файл. В зависимости от юзер-агента JS-файл выполняет ту или иную функцию, то есть работает динамически. Например, если устройство — смартфон, изменится порядок блоков в HTML-коде или удалится неиспользуемый в мобильной версии контент.

Этот подход мы в eski.mobi используем при адаптации сайтов. Мы выбрали именно его, поскольку он позволяет получить контроль над DOM сайта еще до рендеринга в браузере. Благодаря этому подходу вы можете полностью менять отображение десктопной версии сайта на мобильном устройстве при сохранении оригинального HTML. Более подробно все преимущества подхода динамического JS описаны здесь.

Как реализовать: изучите документацию бибилиотеки mobify.js, которая позволяет манипулировать DOM сайта в зависомости от юзер-агента.

Динамический показ

Плагин

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

Как реализовать: если у вас WordPress, то вы просто устанавливаете WPtouch, Mobile Pack или Mobile Edition. Попробуйте каждый, чтобы найти самый удобный и подходящий вариант. Для других CMS есть другие плагины, но суть сводится к тому, чтобы максимально облегчить процесс «мобилизации», сделав минимум усилий. Мобильный сайт будет открываться на субдомене (m.site.ru) или без редиректа — все зависит от настроек.

Разные URL

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

Отдельная CMS

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

Как реализовать: создайте поддомен m.site.ru и разместите там систему управления для мобильного сайта. Учтите, что это сайт только для мобильных устройств, поэтому все стили и контент должны быть оптимизированы именно для смартфонов. Когда сайт будет готов, включите определение мобильных устройств и перенаправление на другой домен. Вот готовое решение для этой задачи: просто скачайте версию в нужном языке программирования и вставьте в шаблон основного сайта сразу после < head >. Замените последнюю строку редиректа на адрес вашего мобильного сайта.

API

Это оболочка, которая получает контент основного сайта по API и отображает мобильную версию в совершенно другом дизайне. Этот метод используют такие крупные проекты, как Facebook, Twitter и «ВКонтакте», и все, кому нужен полный контроль над мобильной версией при сохранении единого контента. Это самый сложный способ реализации и поддержки, и его используют только те, кто точно понимает, что хочет получить в итоге.

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

Конструктор

Самый простой способ получить мобильную версию сайта за минимальное время и усилия. Конструктор анализирует структуру основного сайта, расположение меню, цветовую схему и контент, после чего формирует уникальный шаблон, который вы можете кастомизировать по своему усмотрению. Прелесть решения в том, что удобный drag-and-drop-интерфейс конструктора позволяет с легкостью управлять внешним видом мобильной версии и добавлять такие уникальные элементы, как геолокация, click-to-call для звонка в одно нажатие, интерактивные галереи и многое другое.

Как реализовать: просто «скармливаете» конструктору адрес своего сайта — и через пару секунд получаете готовый мобильный сайт и синхронизированный контент. Для завершения установки потребуется лишь установить одну строчку кода в head основного сайта и оплатить подписку.

Правильный выбор

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

Будете работать с подрядчиком? Независимо от выбранной технологии перед началом сотрудничества убедитесь, что исполнитель хорош и способен решить вашу задачу:

1. Изучите портфолио мобильных сайтов (желательно не менее десяти). Именно сайтов, а не одностраничных лендингов. Обязательно посетите все сайты из портфолио. Если какой-то из сайтов недоступен — вероятно, подрядчик вводит вас в заблуждение и преувеличивает свои заслуги.
2. Обратите внимание на скорость работы и дизайн сайтов из портфолио. Много ли там практических ошибок?
3. Попросите подрядчика рассказать о способах адаптации, которые ему известны. Спросите, почему он использует тот или иной способ, какие может привести аргументы «за» и «против».
4. Зафиксируйте в договоре сроки создания мобильного сайта и предусмотрите штрафные санкции в случае просрочки. При этом старайтесь всегда быстро предоставлять обратную связь, если она требуется исполнителю для продолжения работы.
5. Оговорите формат и условия дальнейшей технической поддержки. Начало работы с мобильной аудиторией — ответственный и, вероятно, новый для вас шаг. Важно, чтобы поддержка оказывалась вовремя и не вносила хаос в ваши устоявшиеся процессы. Однако успех внедрения и развития мобильной версии будет зависеть и от того, насколько хорошо вы усвоили подход mobile first.

Особенности адаптации

Изображения

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

Как видите, все сводится к лишней работе либо увеличению скорости загрузки — каждый должен выбрать для себя, что ему важнее. Неочевидный плюс сохранения оригинальных изображений — превосходное отображение на retina-дисплеях: размер изображений для десктопной версии, вероятнее всего, больше, чем экран смартфона, а значит, такие картинки будут выглядеть четкими и качественными. Для ecommerce-проектов это может быть критичным параметром, потому что покупатели хотят хорошо разглядеть товар перед покупкой.

Единственное решение, которое совместимо с любым сервером с поддержкой PHP, — это скрипт Adaptive Images. Скрипт (PHP и JS) на лету определяет размер экрана устройства и отдает картинку соответствующего размера. Основное преимущество этого решения — универсальность: не нужно менять текущую структуру проекта, не нужно дорабатывать CMS или HTML.

Как реализовать: подробнее о настройке лучше прочитать на сайте автора или установить плагин для WordPress.

Таблицы

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

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

Как реализовать: добавьте родительскому блоку, содержащему таблицу, эти CSS-свойства:

• Для горизонтального скролла: overflow-x: auto;
• Для плавной прокрутки: -webkit-overflow-scrolling: touch;

Иконка Web App

Неочевидная функция любого сайта — возможность добавить закладку в виде иконки на рабочий стол. Эта возможность существовала со времен первого iPhone, но не получила большого распространения. Принцип работы прост: нажимаете «Добавить», выбираете «Рабочий стол», и готово — ссылка на страницу, которую вы сохранили, теперь красуется прямо на главном экране пользователя и доступна буквально в один клик.

Как реализовать: нарисуйте иконку и экспортируйте PNG-файл размером 180×180 пикселей без закруглений. На сайте добавьте этот тег — < link rel=«apple-touch-icon» href=«иконка.png» >. Если желаете указать различные размеры для iPad и iPhone, следуйте инструкции Apple.

Баннер Web App

Сценарий по установке иконки на рабочий стол известен не всем пользователям, поэтому им нужно об этом рассказать. Для этого используется всплывающий баннер с мини-инструкцией. Вы можете реализовать эту механику самостоятельно: по сути, это всего лишь блок с кнопкой «Закрыть», который появляется с задержкой. Существует и готовый jQuery-плагин с настройками, позволяющими контролировать поведение баннера, и поддержкой различных языков. Это решение ориентировано на iOS-устройства, хотя на Android также возможно установить иконку на рабочий стол.

В свежей версии Chrome команда Google реализовала нативную возможность предложить пользователю установить иконку. Однако для сайта критично наличие протокола HTTPS, к тому же баннер появится только в том случае, если юзер посещал ваш сайт не менее, чем дважды, за два разных дня на протяжении двух недель.

Как реализовать: читаем документацию к плагину, смотрим демо и ставим себе на сайт.

Геолокация

Учитывая, что практически все смарфтоны оборудованы GPS, было бы глупо не использовать данные о местоположении пользователя для поиска ближайшего магазина, торгового центра, точки самовывоза, сетевого кафе или чего угодно другого, привязанного к адресу. Простая для пользователя функция может быть не так проста в разработке и требует внимания. Если у вас очень много точек (более 100), обработка функции определения расстояния «Яндекс.Карт» может занять продолжительное время. Поэтому хорошо изучите документацию и спроектируйте решение грамотно.

Пуш-уведомления

Новость уже устаревшая, но да, пуш-уведомления теперь есть в браузере. Из мобильных платформ на момент написания этой статьи полная поддержка есть только у Google Chrome на Android. Такие уведомления также работают на десктопных версиях Google Chrome и Safari OS X. Принцип работы такой же, как у пушей в мобильных приложениях. Заходя на сайт, пользователь видит всплывающее окно с запросом на разрешение отправки уведомлений. Если запрос будет подтвержден, владелец сайта сможет отправлять неограниченное количество уведомлений, даже если сайт и браузер у пользователя закрыт. Представьте возможные сценарии использования различных механик.

Медиа:

• Отправлять всем подписчикам уведомление о выходе новой важной статьи.
• Отправлять уведомления только тем, кто подписан на определенную тематику.

Ecommerce:

• Пользователь посетил раздел «Обувь» и покинул сайт. Через час или через день можно его взбодрить уведомлением: «Вас интересовала обувь — у нас есть для вас предложение».
• Пользователь наполнил «Корзину», но не оформил заказ: «Вы забыли оформить заказ. Сделайте это прямо сейчас».
• Спустя два дня заказ все еще не оформлен? Предложите пользователю купон на скидку: «Мы дарим вам 500 рублей, оформите заказ в течение часа».
• Можно присылать пользователю обновления по статусу заказа: принят, упакован, передан курьеру, в пути и так далее.

Как реализовать: все не так просто. Вроде бы все процессы и требования описаны, но на практике сложно будет самостоятельно собрать все в единый механизм. Сервисы, которые упрощают реализацию, — Roost, Send Pulse, One Signal. В идеале важно, чтобы сайт был с HTTPS, однако вышеупомянутые сервисы помогают обойти это требование, отправляя уведомления от имени своего поддомена.

Масштабирование

Спорный момент, однако он требует внимания. В мобильных браузерах можно запретить масштабирование сайта одним тегом — < meta name=«viewport» content=«width=device-width, user-scalable=no» /> .

Как реализовать: вопрос в том, нужно ли это делать. Если у вас фиксированная «шапка» или веб-приложение, которое при масштабировании «едет», то лучше запретить увеличивать содержимое. Если же этот случай к вам неприменим — вероятно, лучше не отнимать у пользователя такую возможность.

Плавная прокрутка

Плавная и не плавная прокрутка

При создании областей прокрутки в мобильной версии с помощью CSS-свойства overflow: scroll может возникнуть неприятный нюанс — отсутствие инерции.

Как реализовать: проблема решается добавлением этого свойства —
-webkit-overflow-scrolling: touch;.

Тестирование

Когда заходит речь о тестировании мобильного UX, то некоторые теряются, не представляя, как собрать парк реальных устройств. Это лишнее, когда существуют сервисы типа BrowserStack — в нем более 700 эмуляторов десктопных браузеров, а также версии для iOS, Android и Windows Phone.

Можно также использовать бесплатные инструменты вроде Genymotion для эмуляции Android, iPhone simulator в рамках пакета Xcode или просто режим мобильного разработчика в Google Chrome. Главное — не забывать об этапе тестирования, который помогает выявить неочевидные баги, присущие определенным платформам.

Ошибки дизайнеров

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

Большинство багов разработчики и дизайнеры допускают по неосторожности и из-за недостаточного внимания к мобильным платформам. Зачастую мобильную версию делают впопыхах и мало тестируют. Цель этой статьи — наглядно показать, как лучше не делать, и заставить больше думать о мобильном UX.

Время PDA- и WAP-версий закончилось, просто имейте в виду. Адаптивный дизайн может навредить, если использовать его неграмотно. Поместить все элементы в один ряд по вертикали — это не адаптация для смартфонов.

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

В важном тексте размер букв должен быть не менее 16 пунктов.

Делайте межстрочное расстояние достаточным для комфортного чтения.

Не забывайте про отступы: контент не должен быть «приклеен» к краям экрана.

Размер кнопок и ссылок нужно адаптировать под палец.

Баннеры для настольной версии плохо смотрятся на мобильных устройствах. Отображайте на смартфонах баннеры другого размера.

Используйте правильные типы инпутов для большего удобства. Для ввода телефона, email, даты и времени существуют специальные типы полей.

Отключите функцию автокорректировки, исправления и ввода с заглавной буквы для полей с паролями, именами и адресами. Она может работать некорректно и затруднять ввод информации. Для отключения добавьте эти теги — < input autocomplete=«off» autocorrect=«off» autocapitalize=«off» spellcheck=«false» />.

Убедитесь, что на retina-экранах изображения на вашем сайте не выглядят размыто.

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