Много пользователей заходят на сайт именно с телефона. Поэтому сайт должен быть удобен и для мобильных пользователей.
Чем мобильный сайт отличается от обычного сайта
На мобильных всё происходит быстрее — меньше внимания, меньше времени на поиск. Пользователь не готов долго ждать загрузки или искать нужную кнопку. Вместо мыши — палец, поэтому элементы должны быть достаточно крупными. Важно, чтобы информация была краткой, чёткой и легко доступной. Если сайт неудобен, посетитель просто уходит к конкуренту.
Что должно быть в мобильной версии сайта
Тексты должны быть читаемы без масштабирования, с подходящим размером шрифта. Все элементы должны удобно отображаться на небольшом экране. Кнопки не должны располагаться слишком близко друг к другу. Нельзя использовать Flash или другие устаревшие технологии. Никаких горизонтальных прокруток или сложных меню.
Мобильная версия сайта должна быть без ошибок дизайна на различных экранах.
Для смартфонов тестировать нужно ширину экрана на 300-390px, для планшетов 768-800px, для ноутбуков 1280-1920px.
Какие основные ошибки бывают в мобильных версиях сайтов
Часто встречаются: маленький шрифт, неудобные кнопки, долгие загрузки. Также — некорректные редиректы и всплывающие окна на весь экран. Иногда сайт не определяет, что перед ним мобильный пользователь. Элементы, не работающие на смартфонах — тоже ошибка. Проверяйте сайт через PageSpeed Insights от Google и инструмент для анализа сайта онлайн.
Используете Google или Яндекс для увеличения продаж?
Бесплатный анализ сайта Проверьте сейчас сайт на ошибки поисковой оптимизации.
Раскройте скрытые возможности Вашего сайта.
Рекомендации для продвижения сайта бесплатноКак создать мобильную версию сайта
Существует три основных варианта: адаптивный дизайн, отдельная мобильная версия и динамическая подача.
- Адаптив — это один сайт, который подстраивается под размер экрана.
- Мобильная версия — это отдельный сайт с другим адресом, например m.site.ru.
- Динамическая подача — это вывод разной версии сайта в зависимости от устройства.
Google поддерживает все три, но предпочитает адаптивный подход.
Что значит динамическое обновление контента
Сайт определяет устройство пользователя и подаёт соответствующий html и css. Важно настроить заголовок Vary: User-Agent, иначе Google может не распознать версию. Этот способ гибкий, но подвержен ошибкам при определении устройства. Он требует тонкой настройки и регулярного тестирования. Не рекомендуется без опыта или поддержки разработчиков.
Почему рекомендуется адаптивная верстка сайта
Адаптивный дизайн использует один URL и один HTML-код для всех устройств. Контент подстраивается под размер экрана с помощью css и media-запросов. Используется мета-тег viewport для настройки ширины экрана. Это самый стабильный и безопасный метод с точки зрения SEO.
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, viewport-fit=cover">
</head>
В каких случаях стоит делать отдельную мобильную версию сайта
Если адаптивный подход невозможен, можно создать мобильную версию с отдельным адресом. Важно настроить редиректы и правильно указать связи между версиями. На десктопной версии добавляется тег rel="alternate", указывающий на мобильную. На мобильной указывается canonical на десктопную версию. Это упрощает индексацию и помогает избежать проблем с дублирующим контентом.
Что важно при мобильной оптимизации сайта
Очень важна скорость загрузки сайта. Оптимизируйте css, js, изображения и видео. Упрощайте меню, избегайте тяжёлых элементов и длинных заголовков. Шрифты должны быть достаточно крупными для чтения без увеличения. Используйте современные форматы изображений и сжатие данных. Добавьте иконки для мобильных устройств через тег rel="icon" и apple-touch-icon.