Мобильная версия сайта: адаптивная вёрстка простыми словами
Ещё не так давно сайты делали в первую очередь для больших мониторов, а телефон считался второстепенным устройством. Сегодня всё наоборот: на многих тематических сайтах больше половины посетителей приходят со смартфонов, а у некоторых проектов их доля доходит до подавляющего большинства. Люди читают статьи в метро, в очереди, на диване перед сном. Если ваш сайт на маленьком экране выглядит как уменьшенная копия настольной версии с крошечным шрифтом и кнопками, по которым невозможно попасть пальцем, вы теряете большую часть аудитории. Давайте разберёмся, что такое мобильная версия и адаптивная вёрстка, без технических дебрей и с практическими советами.
Почему мобильная версия обязательна
Причин несколько, и все они серьёзные.
Аудитория. Откройте любой счётчик посещаемости и посмотрите разбивку по типам устройств. Почти наверняка смартфоны окажутся на первом месте или близко к нему. Делать сайт без учёта мобильных пользователей — значит сознательно ухудшать опыт для большинства читателей.
Поисковые системы. Крупные поисковики давно перешли к так называемой мобильной индексации: они оценивают сайт прежде всего по тому, как он выглядит и работает на телефоне. Если мобильная версия неудобна или урезана, это сказывается на позициях всего сайта, в том числе в поиске с компьютеров.
Поведение. Человек, которому неудобно читать, быстро уходит. Высокий процент отказов на мобильных устройствах — частый признак проблем с адаптацией.
Доход. Рекламные блоки, партнёрские ссылки, формы заявок — всё это должно работать на телефоне. Если кнопку «заказать» не видно или она не нажимается, заказа не будет.
Три подхода к мобильному сайту
Существует несколько способов сделать сайт удобным на телефоне. Полезно понимать их различия, хотя для новичка выбор обычно очевиден.
Адаптивная вёрстка
Один и тот же сайт, один адрес, одно содержимое, но оформление подстраивается под ширину экрана. На широком мониторе текст может идти в две колонки с боковой панелью, на планшете боковая панель уезжает вниз, на телефоне всё выстраивается в одну колонку, а меню прячется под кнопку. Это самый распространённый и рекомендуемый подход.
Отдельная мобильная версия
Для телефонов создаётся отдельный сайт, часто на поддомене. Такой подход был популярен раньше, но сегодня встречается редко: приходится поддерживать два сайта, следить за синхронизацией содержимого и правильно настраивать связь между версиями для поисковиков.
Динамическая подача
Адрес один, но сервер отдаёт разный код в зависимости от устройства. Это сложнее в настройке и тоже встречается нечасто, в основном на крупных проектах.
Для блога, информационного сайта или небольшого сайта услуг почти всегда достаточно адаптивной вёрстки. Отдельные мобильные версии оставьте крупным порталам с особыми задачами.
Как работает адаптивная вёрстка простыми словами
Представьте, что содержимое сайта — это набор блоков: шапка, меню, статья, боковая колонка, подвал. Адаптивная вёрстка — это набор правил, которые говорят браузеру, как расставлять эти блоки в зависимости от ширины экрана.
Ключевые идеи здесь такие:
- резиновые размеры — ширина блоков задаётся не в фиксированных величинах, а в долях от ширины экрана, поэтому они растягиваются и сжимаются;
- контрольные точки — при определённой ширине экрана раскладка меняется, например две колонки превращаются в одну;
- гибкие изображения — картинки никогда не становятся шире своего контейнера и уменьшаются вместе с ним;
- правильная настройка масштаба — страница сообщает телефону, что её не нужно показывать уменьшенной копией настольной версии.
Если вы пользуетесь популярной CMS и современной темой оформления, адаптивность почти наверняка уже встроена. Ваша задача — проверить, что всё работает как надо, и не сломать это своими доработками. Если же вы верстаете сайт самостоятельно, основы описаны в статье о HTML и CSS для начинающих.
Как проверить свой сайт на телефоне
Самый честный способ — взять в руки свой смартфон и попробовать воспользоваться сайтом как обычный посетитель. Ещё лучше — попросить об этом кого-то, кто видит сайт впервые. Но есть и дополнительные инструменты.
- Режим разработчика в браузере. Почти все настольные браузеры позволяют эмулировать экран телефона или планшета. Можно быстро переключаться между размерами и смотреть, как меняется раскладка.
- Сервисы проверки от поисковиков. Они подскажут, считается ли страница удобной для мобильных устройств и какие есть проблемы.
- Разные реальные устройства. Эмуляция не всегда точно повторяет поведение реального телефона. Если есть возможность, проверьте сайт на смартфонах с разными размерами экрана и операционными системами.
- Панели вебмастера. В них часто есть отчёты о проблемах с удобством на мобильных устройствах по всему сайту.
Проверяйте не только главную страницу, но и все типы страниц: статью, рубрику, страницу контактов, формы, страницу поиска.
Чек-лист удобной мобильной страницы
Вот на что стоит обратить внимание, когда вы листаете свой сайт на телефоне:
- текст читается без увеличения, размер шрифта комфортный;
- строки не слишком длинные и не слишком короткие, межстрочный интервал достаточный;
- нет горизонтальной прокрутки, ничего не вылезает за край экрана;
- кнопки и ссылки достаточно крупные и не стоят вплотную друг к другу, по ним легко попасть пальцем;
- меню открывается и закрывается без проблем, пункты меню хорошо видны;
- изображения не обрезаны и не растянуты;
- формы удобно заполнять: поля крупные, при вводе телефона открывается цифровая клавиатура;
- всплывающие окна не закрывают весь экран и легко закрываются;
- реклама не мешает читать основной текст;
- страница загружается быстро даже на мобильном интернете.
Попробуйте пролистать свою статью одной рукой, держа телефон в той же руке. Всё, что неудобно сделать большим пальцем, стоит пересмотреть.
Частые ошибки мобильных версий
Даже на сайтах с адаптивной темой встречаются типичные проблемы. Чаще всего они возникают, когда владелец сайта что-то добавляет или меняет сам.
Широкие элементы. Вставленная в статью таблица, длинная ссылка без пробелов, встроенное видео фиксированной ширины — всё это может вылезать за пределы экрана и создавать горизонтальную прокрутку.
Навязчивые всплывающие окна. Окно подписки, которое на компьютере занимает четверть экрана, на телефоне закрывает всё, а крестик для закрытия оказывается крошечным и не там, где его ищут. Поисковики негативно относятся к таким окнам на мобильных устройствах.
Скрытое содержимое. Иногда ради компактности на мобильной версии прячут часть текста или важные блоки. Поскольку поисковик оценивает именно мобильную версию, скрытое там может потерять значимость.
Мелкий шрифт и плотные ссылки. Особенно часто это встречается в подвале и боковых колонках.
Медленная загрузка. Тяжёлые изображения и скрипты особенно больно бьют по мобильным пользователям. О том, как с этим бороться, подробно рассказано в материале о скорости загрузки сайта.
Что делать, если тема не адаптивная
Иногда сайт достался по наследству или работает на старой теме, которая на телефоне выглядит плохо. Варианты здесь такие. Самый простой и обычно самый правильный — сменить тему оформления на современную адаптивную. Перед этим сделайте резервную копию, проверьте новую тему на тестовой копии сайта и убедитесь, что виджеты и меню перенеслись корректно. Второй вариант — доработать существующую вёрстку, если вы или нанятый специалист готовы в этом разбираться. Третий — временные плагины, которые показывают мобильным посетителям упрощённую версию; это скорее костыль, чем решение, и его стоит рассматривать только как переходный этап.
Мобильный подход к содержимому
Адаптивность — это не только про вёрстку, но и про то, как вы пишете и оформляете тексты. На маленьком экране длинный абзац превращается в сплошную стену текста, которую тяжело читать.
Несколько привычек, которые делают статьи удобнее для мобильного чтения:
- пишите короткими абзацами по три-пять предложений;
- используйте подзаголовки, чтобы читатель мог быстро сориентироваться при прокрутке;
- выносите перечисления в списки;
- размещайте главное в начале статьи и в начале каждого раздела;
- не злоупотребляйте таблицами: на телефоне они часто превращаются в неудобную прокрутку вбок;
- проверяйте, как выглядят изображения со схемами — мелкие надписи на них могут стать нечитаемыми.
Эти же приёмы делают текст лучше и для читателей с компьютера, так что ничего не теряется. Подробнее про оформление материалов — в статье о структуре статьи.
Итог
Мобильная версия сайта сегодня не дополнительная опция, а основа. Большинство читателей приходит со смартфонов, поисковики оценивают сайт по его мобильному виду, и неудобная страница на телефоне означает потерю и аудитории, и позиций. Для небольшого проекта лучший выбор — адаптивная вёрстка, которая уже встроена в большинство современных тем. Ваша задача — регулярно проверять сайт на реальном телефоне, следить за читаемостью текста, размером кнопок, отсутствием горизонтальной прокрутки и навязчивых окон, а также писать тексты так, чтобы их было удобно читать на ходу. Это небольшие усилия, которые окупаются довольными читателями.