Как сделать мобильную версию сайта?

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

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

Google даже запустил специальный инструмент по адресу https://developers.google.com/speed/pagespeed/insights/, где каждый веб-мастер может оценить скорость и адаптивность своего сайта. Чаще всего старые, давно не обновляемые проекты отображаются на мобильниках очень плохо. Зато практически все крупные порталы сегодня имеют адаптивный дизайн или мобильную версию, благодаря чему просматривать ресурс с мобильника также удобно, как и с обычного монитора.

Недавно сервис «Проверка мобильных страниц» появился и в Яндекс.Вебмастере, хотя его информативность, по сравнению с инструментом Google значительно ниже.

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

Как сделать адаптивную или мобильную версию сайта?

Сначала необходимо разобраться, чем адаптивный дизайн отличается от мобильной версии.
Версия для мобильников – это отдельный вариант сайта, обычно расположенный на отдельном домене (m.vk.com – пример). Адаптивный дизайн выглядит одинаково красиво на дисплее с любым расширением. При необходимости блоки с информацией смещаются так, чтобы они следовали друг за другом, а не теснились в соседних колонках.

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

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

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

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

Если по каким-то причинам вы не можете сделать мобильную версию, самый простой способ чуточку улучшить отображение сайта на смартфонах и планшетах, это добавить в контейнермета тег:

<meta name=viewport content="width=device-width, initial-scale=1">

Это покажет поисковому роботу, что страница оптимизирована для мобильных устройств. Обычно это помогает улучшить показатель Mobile в PageSpeed Insights на несколько пунктов.

Шрифты в мобильной версии: шрифты мобильных сайтов

Часто даже крупный размер шрифта, прекрасно читаемый на десктопе, превращается во что-то мелкое и неудобное при просмотре на мобильных устройствах. Если вы указываете размер шрифта в пикселях (px), то при сжатии страницы для просмотра на смартфонах и планшетах, браузер, скорее всего, уменьшит и шрифт. Оптимальным решением на данный момент является указание размера шрифта в единице rem, что сделает размер шрифта зависимым корневого элемента html.

Если вы затрудняетесь создать мобильную версию сайта самостоятельно, используйте специальные плагины и шаблоны для WordPress (WordPress Mobile Pack, WP Mobile Detector, WPSmart Mobile) и других движков, настройка которых осуществляется одним-двумя кликами.

Меню сайта

Создание и продвижение сайтов
• Как сделать мобильную версию сайта?

Как сделать мобильную версию сайта?