Как оптимизировать сайт под разные устройства

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

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

1. Зайдите в Яндекс.Метрику, перейдите во вкладку «Отчеты»
2. Выберите пункт «Аудитория», затем «Глубина просмотра»
3. Настройте выборку по визитам пользователей с мобильных устройств.

В 2016 году Яндекс ввел алгоритм «Владивосток», и предпочтение в поисковой выдаче стало отдаваться адаптивным сайтам. Название алгоритм получил по названию региона, в котором на тот момент была зарегистрирована самая большая доля пользователей мобильного интернета.

Какими характеристиками должен обладать мобильный сайт

• Быстрая загрузка. Если ваш сайт будет загружаться дольше трех секунд, практически половина пользователей его закроет и не дождется загрузки. Результаты на большой выборке мобильных версий интернет-магазинов показывают, что продажи больше у тех, у кого выше скорость загрузки. Люди экономят свое время и не хотят ждать – даже одна-две секунды в этой ситуации могут сыграть важную роль. Статистика Google говорит о том, что пользователи в пять раз чаще покидают неоптимизированные ресурсы. Кроме того, медленные сайты занижают поисковые системы, например, у Google за это отвечает алгоритм Google Speed Update.
• Навигация по сайту должна быть понятной пользователю: он должен легко дойти до любой страницы сайта в 2-3 клика, будь то прочтение статьи или заказ товара.
• Интерфейс должен быть лаконичен и прост: там где можно обойтись значками без надписей, так и нужно сделать. На каждой странице нужна ссылка на главное меню. Цветовая гамма должна быть контрастной, чтобы текст хорошо читался. Кнопки и элементы управления должны быть достаточно крупные, чтобы пользователи могли легко нажимать на них.

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

Какие виды адаптации сайта существуют

1. Полноценная мобильная версия — отдельная версия сайта, два сайта живут параллельной жизнью, пересекаясь лишь в момент перехода с обычной версии на мобильную. Поисковые системы индексируют содержимое мобильных версий отдельно от десктопной версии — в этом недостаток этого варианта адаптации. Администрировать мобильную версию сайта также придется отдельно, что несет за собой финансовые и временные затраты.
2. Адаптивная версия — в данном случае URL и HTML-код страниц на разных устройствах одинаковые, меняется только CSS — размеры и расположение элементов на странице в зависимости от величины экрана устройства. Поэтому при корректировке адаптива достаточно внести изменения только в десктопную версию. Есть и ограничения: некоторые элементы верстки крайне проблематично внести в адаптивную версию, ведь она должна быть более легкой и читаемой. В таком случае дизайнеры, работающие над сайтом, делают комментарий для программистов, внедряющих новые макеты: «Не вносить элемент на адаптивную версию». Разумеется, если этот элемент не влияет на удобство сайта и его конверсию.
3. Динамическая верстка RESS (адаптивный дизайн + серверные компоненты, от англ. responsive design + server side components). Данная технология требует немного большего времени на разработку и внедрение, чем две предыдущие, однако имеет больше достоинств. Адаптация происходит на стороне сервера, который в ответ на запрос пользователя передает шаблон под его тип устройства, а не на сайте. Загрузка проходит быстрее, а визуально от адаптивной версии отличить сложно. И Яндекс, и Google хорошо индексируют такие сайты.

Как проверить сайт на адаптивность?

Чтобы не просить знакомых с разных смартфонов зайти на сайт и посмотреть, как он отображается на разных ОС, воспользуйтесь этими методами:

1. Mobile Friendly от Google. В поисковую строку нужно вбить адрес вашего сайта и нажать «Проверить».
2. Вебмастер от Яндекса. Выбирайте адрес сайта и нажимаете «Проверить».
3. Проверка в браузере в инструментах разработчика. Чтобы открыть панель разработчика в браузере, нужно нажать F12 на клавиатуре или сочетание клавиш CTRL + Shift + I. Справа или внизу браузера откроется панель разработчика, на ней нажмите на иконку переключения на мобильные устройства.

С чего начать адаптацию

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

Несколько конкретных рекомендаций:

1. В мобильной версии не должно быть слишком мелкого шрифта, шрифта с засечками, а также элементов, которые не отображаются в некоторых браузерах смартфонов: flash, Java-апплетов и Silverlight-плагинов.
2. Весь контент располагается только внутри границ экрана — никакой горизонтальной прокрутки быть не должно.
3. Для увеличения скорости загрузки страниц необходимо оптимизировать размер изображений, применить кэширование и сжатие файлов — это значительно ускоряет загрузку мобильного сайта. Например, одним из методов оптимизации является интеграция всех данных CSS, относящихся к верхней части страницы, прямо в HTML-код. 
4. Кликабельные значки должны быть крупными — рекомендуемая ширина активных элементов не менее 48 px CSS. В идеале должны быть по величине подушечки большого пальца. Не стоит забывать, что значки не должны находиться вблизи друг от друга, чтобы пользователь не ошибался при нажатии на значок.
5. Правило контраста говорит о том, что цвет шрифта должен контрастировать с фоном, а не сливаться. Черный или темно-синий шрифт на белом фоне, как и наоборот, — просто идеальное сочетание. 
6. В мобильной версии стоит избегать рекламных баннеров, всплывающих окон, которые могут помешать пользователю, особенно если их нельзя убрать одним нажатием на «крестик» — оставьте рекламу до полноценной десктопной версии.

Чек-лист по адаптации сайта

Что проверить:

• скорость загрузки;
• удобство навигации по сайту: элементы интерфейса, меню, каталог, формы подбора/фильтры;
• удобство оформление заказа;
• простота дизайна;
• информативность контента;
• корректность работы поиска;
• размеры изображений/видео;
• корректность отображения и удобство заполнения виджетов и форм обратной связи;
• сквозные элементы — шапка, футер сайта.

На каких разрешениях экранов (в пикселях) проверять:

• десктопная версия: 1920; 
• ноутбук: 1280; 
• планшет горизонтальный: 1024; 
• планшет вертикальный: 720;
• мобильные устройства. 

На каких страницах сайта проверять:

• главная страница;
• популярные страницы услуг или товаров;
• каталог  и листинг; 
• карточки товара;
• о компании;
• доставка и оплата.

Самые распространенные ошибки при разработке адаптивного дизайна

• некорректная работа с графиков: большой «вес» изображений некорректное масштабирование и др.;
• некорректная адаптация элементов управления: слишком мелкие надписи и кнопки, не оптимизированные под touch-управление;
• неоптимизированные формы для отправки заявок;
• излишняя анимация и другие визуальные эффекты;
• использование неподходящих типов шрифтов или их неправильная настройка для мобильных устройств.

Читайте также: