Как адаптировать сайт под мобильные: ТОП-10 способов
Ни для кого не секрет, что поисковые системы отдают предпочтение сайтам, которые одинаково хорошо выглядят на экранах разных размеров. Большая часть мирового интернет-трафика приходится на мобильные устройства, а это значит, что люди чаще заходят в сеть со смартфонов и планшетов, чем с компьютеров. В связи с этим адаптация ресурса становится необходимым шагом на пути к завоеванию лояльности пользователей и поисковиков. Если веб-сайт имеет адаптивный дизайн и быструю загрузку, роботы Google и Яндекса ранжируют его гораздо лучше. Оптимизировать проект для пользовательских гаджетов нужно уметь любому вебмастеру. Мы поделимся десятью способами, как адаптировать сайт под мобильные устройства.
10 методов, как оптимизировать сайт под мобильные устройства
- Использование тега Viewport.
- Отсутствие горизонтальной прокрутки.
- Крупный размер шрифта.
- Крупные значки.
- Контрастный текст.
- Настройка Gzip-сжатия.
- Открытые для роботов стили CSS.
- Быстрая загрузка сайта с мобильных.
- Всплывающие окна не закрывают контент.
- Ширина картинок и полей ввода 100%.
Разумеется, львиную долю изменений придется вносить в верстку и дизайн, но визуальная составляющая — это не все. Чтобы сайтом было удобно пользоваться с различных девайсов, необходима также оптимизация скорости его работы. Ниже мы подробнее расскажем о наиболее распространенных рекомендациях, соблюдение которых позволит вам создать веб-проект, адаптированный под самую разную аудиторию.
№1. Использование тега Viewport
Адаптивность подразумевает, что масштаб сайта будет автоматически меняться в зависимости от размеров пользовательского экрана. По умолчанию веб-браузеры воспринимают ширину контента равной ширине десктопной версии страницы (1024 пикселя), поэтому на мобильных устройствах неадаптированные ресурсы уменьшены в несколько раз. Если вы уже оптимизировали CSS-файлы, но браузер продолжает уменьшать/увеличивать контент, внедрите специальный метатег в HTML-код проекта. Обычно его размещают в блоке <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Где viewport — название тега, device-width — указание, что ширина браузерного окна должна быть равна ширине устройства, а 1 означает необходимость использования оригинального масштаба. Таким образом вы сообщите браузеру, что сами адаптируете контент под размеры гаджета и ему не нужно менять масштаб, чтобы уместить все в область просмотра.
№2. Отсутствие горизонтальной прокрутки
Чтобы оптимизировать веб-сайт под маленькие экраны телефонов, просто «приблизить» страницу недостаточно. Возможно, текст будет лучше виден и кнопки станут больше, но чтобы увидеть все содержимое документа, пользователю придется двигать его в стороны, а это очень неудобно. Если вы избавитесь от горизонтальной прокрутки, юзабилити для «мобильной» аудитории вырастет в разы. Информация ни в коем случае не должна выходить за границы экрана. Исключение составляют разве что таблицы с большим количеством столбцов — для них прокрутка допускается, но остальной контент адаптировать обязательно.
№3. Крупный размер шрифта
Вчитываться в мелкий текст на телефоне никто не захочет — особенно люди с проблемами зрения. Адаптировать сайт под мобильные устройства — значит, в том числе, сделать текстовую информацию удобочитаемой. Увеличьте шрифт, чтобы пользователям не приходилось масштабировать страницу или напрягать глаза в попытке различить маленькие буквы. Для iOS-гаджетов стандарт обычного текста — 17pt, для Android — 13sp.
Рекомендуется также оптимизировать высоту строки (примерно 140% от кегля текста). Оптимально, если в длину она будет около 50–60 символов с пробелами.
№4. Крупные значки
Адаптируйте кнопки и другие интерактивные элементы под средний размер подушечек пальцев (10 мм), чтобы их было удобно нажимать на маленьком экране. Если значки будут слишком мелкими или располагаться чересчур близко друг к другу, процент ложных нажатий будет расти, а с ним — и недовольство ваших посетителей. Они будут промахиваться между чекбоксами, случайно кликать по соседним ссылкам, переходить не в те разделы, в какие хотели. Оптимизируйте все кликабельные элементы сайта таким образом, чтобы процесс взаимодействия был комфортным с любого устройства. Надписи на кнопках тоже должны быть различимы.
№5. Контрастный текст
Черный шрифт на белом фоне — стандарт, который можно и нужно нарушать. Не стоит использовать резко контрастные цвета, чтобы, опять же, лишний раз не нагружать зрение пользователя. Например, вместо строгого черно-белого сочетания выберите темно-серый с белым. Человек может и не заметить разницы, но его глаза скажут вам спасибо. То же касается и обратной ситуации: белое на черном воспринимается еще хуже, поэтому для «темной темы» лучше подобрать разные оттенки серого. В интернете есть немало сервисов, которые помогают найти хорошие цветовые сочетания для адаптации текста на мобильных устройствах.
№6. Настройка Gzip-сжатия
Как мы уже сказали, оптимизировать нужно не только клиентскую, но и серверную часть. Технология gzip позволяет сжимать контент и целые страницы, чтобы ускорить их передачу браузеру. Настройте ее на своем сервере, чтобы перед отправкой файлы уменьшались в объеме, а после их получения пользователем — восстанавливались до привычного размера. Это рабочий способ адаптировать загрузку сайта под мобильные устройства, ведь так они будут тратить меньше трафика. Gzip-сжатие поддерживают все популярные веб-браузеры, так что проблем с ее внедрением возникнуть не должно.
№7. Открытые для роботов стили CSS
Поскольку сайт адаптируют через файлы стилей (.CSS), нужно, чтобы боты поисковых систем могли их просканировать. Без этого краулеры могут решить, что ресурс не адаптивен, а значит, следует понизить его в выдаче при запросах с мобильных устройств. Правила для индексирующих роботов обычно прописывают в robots.txt. Файл с таким именем находится в корневом каталоге проекта. Если его там нет, создайте новый, впишите туда разрешение на сканирование CSS- и JavaScript-файлов (через директиву allow), а затем загрузите на сервер. Это позволит оптимизировать проект не только для пользователей с гаджетами, но и для разных систем поиска.
№8. Быстрая загрузка сайта с мобильных
Еще одно условие для хорошего адаптива — высокая скорость загрузки (в пределах 2–3 секунд). Как правило, на телефонах контент грузится дольше, чем на компьютерах, поэтому обязательно проверьте время загрузки сайта в специальном сервисе (например, в PageSpeed Insight). Там вы узнаете, какие элементы «съедают» больше всего трафика при открытии с мобильных устройств, и сможете оптимизировать их для улучшения этого показателя. Обычно первым делом адаптируют изображения: сжимают, конвертируют в более легкий формат, уменьшают размер. Графический контент очень много весит, поэтому, оптимизировав его, вы существенно ускорите загрузку и, соответственно, сделаете веб-ресурс более удобным.
№9. Всплывающие окна не закрывают контент
Количество рекламных баннеров и поп-апов на мобильных устройствах следует сократить. При использовании десктопной версии сайта всплывающие окна воспринимаются терпимее, поскольку на странице достаточно свободного места, но когда экран маленький, они занимают слишком много пространства и перекрывают интересный пользователю контент. Это вызывает справедливое раздражение — особенно если закрыть такой блок удается не с первого раза из-за мизерной кнопки.
Адаптируя проект, следите за тем, чтобы поп-апы занимали менее 50% экрана и легко закрывались. Это также поможет оптимизировать его под поисковые системы — из-за назойливой рекламы боты часто оценивают ресурс, как некачественный.
№10. Ширина картинок и полей ввода 100%
Некоторые изображения могут оказаться больше, чем экран мобильного устройства, и в таком случае они будут выходить за пределы области просмотра. В результате появится все та же горизонтальная прокрутка. Оптимизируйте их ширину через файлы CSS:
img {max-width: 100%}или
.header {background:url (header.png)50% no-repeat; background-size: contain}Второй вариант подходит для картинок, использующихся в качестве фона. В обоих случаях изображения будут отображаться максимум в 100% ширины экрана.
То же самое необходимо проделать с полями ввода: если их не адаптировать, то вводить информацию на вашем сайте станут только самые терпеливые. Добавьте в CSS-файл следующий код:
input, textarea {max-width:100%}Теперь и изображения, и поля ввода не будут выходить за края экрана.
Заключение
Описанные методы помогут вам адаптировать существующий веб-ресурс под запросы «мобильной» аудитории. Повышение юзабилити на разных устройствах находится в ваших же интересах, ибо чем неудобнее сайт, тем меньше желающих с ним взаимодействовать. Если вы хотите повысить посещаемость или хотя бы сохранить существующих пользователей, обязательно воспользуйтесь советами из нашей статьи и оптимизируйте проект.
