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

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

Необходимость создания мобильной версии сайта обусловлена следующими причинами:

  • Все больше людей ищут информацию в интернете при помощи телефонов.  
    В последние годы активно увеличивается число людей, которые ищут информацию, товар, или услугу с помощью мобильного телефона. И доля таких посетителей будет расти и в дальнейшем.
  • Посетителю на телефоне неудобно пользоваться обычной версией сайта.
    Пользователи делают запросы через голосовой поиск, или в браузере мобильного устройства, и из списка результатов поиска переходят на ваш сайт. Без адаптации под экраны телефонов, тексты сайта выглядят слишком мелкими, а его структура и навигация не приспособлены для управления жестами, стандартными для смартфонов. Посетителю приходится увеличивать изображения на экране, переворачивать экран, пытаться попасть пальцем в мелкие кнопки и ссылки. Человеку трудно найти и прочитать нужную информацию, он испытывает дискомфорт,  и в результате – уходит на сайт конкурентов, имеющий мобильную версию.
  • И главное - отсутствие мобильной версии снижает позиции сайта в результатах поиска.
    С апреля 2015 года, наличие версии сайта, оптимизированной для просмотра на мобильных устройствах – важный критерий Google для оценки качества сайта (ссылка). В феврале 2016 Яндекс объявил о том, что сайты без мобильной версии будут показываться ниже в поисковой выдаче (ссылка). Таким образом, в результатах поиска сайты, не адаптированные для просмотра на мобильных устройствах, будут постепенно вытесняться сайтами конкурентов, имеющих мобильные версии.

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

Адрес страницы мобильной и обычной версии должны совпадать (никаких мобильных версий в поддомене m.site.ru), а вывод именно мобильной версии должен происходить автоматически при определении типа устройства, с которого посетитель просматривает сайт.  

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

Работы по созданию мобильной версии сайта включают в себя следующие этапы:

  • Разработка структуры навигации, адаптированной для управления жестами на экране мобильного телефона.
  • Создание общей структуры страниц и элементов дизайна мобильной версии.
  • Разработка шаблонов вывода информации в масштабе, комфортном для чтения на смартфоне.
  • Подключение скрипта автоматического определения типа устройства, с которого посетитель просматривает сайт (десктоп, телефон, планшет) и переключения на соответствующую версию сайта.
  • Корректировка программных блоков для форматирования содержимого сайта в одну колонку.
  • Адаптация существующего контента (тексты, таблицы, изображения, формы запроса) для вывода в мобильной версии.
  • Тестирование на мобильных устройствах (iOS и Android разных версий, устройства с различным разрешением экрана).