В начале 2020 года компания Google официально заявила о том, что будет осуществлять постепенный переход на алгоритм ранжирования Mobile First. Это значит, что в первую очередь будет сканироваться и индексироваться именно мобильная версия сайта, в дальнейшем она останется единственным источником. Такое решение обусловлено прогрессирующим преобладанием мобильного трафика по сравнению с пользователями настольных ПК.
Мобильная и декстопная версия сайта имеют много отличительных особенностей ввиду размеров экрана, объема контента, правил поведения посетителей и пр. Как же не ухудшить информативность и правильно презентовать сайт для мобильных посетителей. К тому же лаконичный контент может негативно отразиться на индексации и позициях сайта в поисковой выдаче.
Специалисты нашей компании считают, что оптимальным решением будет перевод сайта на адаптивную версию, которая будет автоматически подстраивать отображение сайта в удобный для посетителя вид. Такая работа по преобразованию сайта требует кропотливой работы со скриптами и css файлами стилей, нужно соблюдать базовые правила адаптации.
Ниже приводим 10 обязательных правил создания мобильной версии сайта.
1. Сайт должен иметь адаптивный дизайн
Адаптивный веб-сайт включает в себя все те же материалы и информацию на любом устройстве, но он меняет способ его отображения и упорядочения в зависимости от размера экрана. Это лучший вариант для оптимизации веб-сайта для мобильных устройств, поскольку вы не ограничиваете информацию, к которой могут получить доступ посетители с мобильных устройств — они по-прежнему получают тот же контент, что и остальные посетители. А адаптивный дизайн также хорош для SEO. Google заявил, что это их предпочтительный формат для мобильных сайтов.
2. Сделайте удобной навигацию (гамбургер меню) и поиск по сайту
Некоторые люди, просматривающие веб-страницы на своих мобильных устройствах, не против потратить время на просмотр или чтение контента с той же скоростью, что и на компьютере, но другие хотят найти нужную информацию как можно быстрее и проще. Подумайте об информации, которую люди с мобильных устройств, скорее всего, будут искать, когда они перейдут на ваш веб-сайт, и поместите ее в очевидное и легкое для поиска место на домашней странице.
3. Не используйте Flash анимацию или баннеры
Использование Flash на вашем сайте — это очевидная ошибка SEO. Такой контент может замедлить загрузку страницы, а во многих браузерах и устройствах он просто не отображается.
Все устройства iOS и Android не поддерживают Flash, поэтому, если вы создаете веб-сайт, который каким-либо образом использует Flash-анимацию, пользователи его не увидят. Сегодня лучше всего полностью отказаться от этой технологии на своем веб-сайте и найти надежный веб-дизайн, работающий без нее.
4. Обязательно разместите метатег viewport
Метатег viewport — это простой способ контролировать отображение вашего веб-сайта на мобильных устройствах. Если ваша страница открывается на маленьком экране телефона той же ширины, что и на рабочем столе, вам придется сделать некоторую неудобную прокрутку из стороны в сторону, чтобы прочитать каждую строку текста и увидеть разные стороны страница. Метатег viewport сообщает браузерам, что ширина вашей страницы соответствует размеру экрана устройства, с которого зашел посетитель.
Добавить этот тег в свой html довольно просто. Просто вставьте это в html для каждой страницы:
<meta name="viewport" content="width=device-width, initial-scale=1">5. Включите автозаполнение для форм
Автозаполнение может сделать взаимодействие пользователя с вашим сайтом более неудобным. Если на вашем веб-сайте есть формы, которые запрашивают информацию об имени или адресе, один небольшой способ упростить предоставление этой информации посетителям с мобильных устройств. Убедитесь, что в поле настройках формы form вы включили autocorrect=on.
6. Включите автозаполнение для форм
Автозаполнение может сделать взаимодействие пользователя с вашим сайтом более неудобным. Если на вашем веб-сайте есть формы, которые запрашивают информацию об имени или адресе, один небольшой способ упростить предоставление этой информации посетителям с мобильных устройств. Убедитесь, что в поле настройках формы form вы включили autocorrect=on.
7. Сделайте кнопки удобными
Сделайте все кнопки достаточно большими для работы на мобильных устройствах. Достаточно просто нажать мышью кнопку практически любого размера, но когда вы пытаетесь «щелкнуть» пальцами по маленькому экрану смартфона, с маленькими кнопками трудно справиться. И это особенно верно, если есть несколько маленьких кнопок, расположенных близко друг к другу — случайное нажатие одной при попытке нажать другую вызовет настоящее раздражение у посетителей.
Лучший способ избавить посетителей от этого расстройства — использовать кнопки большего размера. Каждый раз, когда вы добавляете кнопку на свой сайт, найдите время, чтобы проверить их самостоятельно на любом количестве мобильных устройств, которые вы можете найти среди своих сотрудников и семьи. Убедитесь, что нажимать каждую кнопку достаточно просто на всех устройствах.
7. Сделайте увеличенные шрифты на мобильном
Читать на маленьком экране намного труднее, если шрифт крошечный. Лучше всего использовать на своих веб-страницах размер шрифта не менее 14 пикселей, но обязательно протестируйте, как он выглядит. Также рекомендуем использовать стандартные шрифты. Любой шрифт, который нужно подгружать браузеру, замедлит загрузку вашего веб-сайта.
8. Включите автоматическое сжатие изображений и CSS кода
Говоря о времени загрузки, пользователи всегда хотят, чтобы скорость вашего сайта была высокой. Но на мобильных устройствах эта скорость важнее. Хороший шаг для оптимизации вашего сайта — это сжать все, что занимает много места и замедляет загрузку, например изображения с высоким разрешением и CSS. Если вы уменьшите размеры файлов изображений, они будут загружаться быстрее, не оказывая отрицательного влияния на качество того, что люди видят на сайте.
9. Предусмотрите возможность переключения версий.
Некоторые из ваших мобильных посетителей могут фактически предпочесть привычную версию вашего веб-сайта для настольных ПК (особенно если вы используете мобильную версию своего веб-сайта, а не адаптивный сайт).
Убедитесь, что вы предусмотрели такую возможность.
10. Регулярно тестируйте и улучшайте мобильную версию.
Лучшее, что вы можете сделать — это регулярно тестировать сайт самостоятельно на своем мобильном устройстве. Время от времени открывайте свой веб-сайт на телефоне или планшете и проводите некоторое время, просматривая его, чтобы убедиться, что всё сделано правильно. Если вы работаете в компании — попросите своих сотрудников сделать то же самое. Ваши усилия быстро принесут результат и окупятся весомой долей мобильного трафика.
Профессиональная разработка сайтов в Украине
Команда Студии WEB24 много лет занимается разработкой сайтов различной функциональности и мобильных приложений. Если вы хотите найти ответственного разработчика для тестирования и отладки мобильной версии вашего сайта — позвоните нам. Мы выполним полный анализ веб-сайта и проведем его оптимизацию для мобильных устройств.
