Простые, но эффективные способы адаптировать сайт под мобильные устройства

Автор Coral media

1

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

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

  • Не тратьте время на разработку отдельного сайта для мобильных устройств
  • Уделите время и финансы на разработку адаптивного дизайна сайта

Чтобы оптимизировать сайт под мобильные устройства нужно учитывать возможность его просмотра на экранах различных размеров.

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

  • Не забывайте включать видовые метатеги

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

  • Большую роль играют размеры шрифтов и кнопок

Размеры шрифтов должны быть читабельными, и не меньше 14 рх. При необходимости, на некоторых элементах его можно уменьшить до 12 px.

Кнопки также должны быть достаточно большими. Это уменьшит вероятность того, что будет нажата неправильная кнопка. Главное не переусердствовать.

  • Используйте высококачественные изображения

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

  • Оптимизация сайта под мобильные устройства не допускает масштабируемости по умолчанию

Автоматическое масштабирование способно испортить отдельные элементы макета. Больше всего в зону риска попадают изображения и навигация.

  • Если сайт предусматривает размещение видео - используйте YouTube

Видео по разному отображается на различных экранах и устройствах. Использование видео из YouTube является решением проблемы. Объясняется это просто: код для вставки видео с YouTube адаптивный по умолчанию.

  • Оставьте возможность просмотра полной версии сайта

Как бы удачным ни был мобильный сайт - оставляйте возможность перехода на полную версию.

  • Никогда не останавливайтесь на достигнутом

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

4.80

9

30.01.2017

Обсудить проект
Прикрепить файл
До 3-х шт.
Не более 8 МБ каждый.
Допустимые файлы: doc docx pdf jpg png pptx ppt xls.

Контакты

Харьков

ул. Отакара Яроша, 9А