Приветствую вас, уважаемые читатели!

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

Что означает сей факт для веб-разработчиков? То, что сейчас нужно уделять большое внимание отображению своего ресурса на телефонах и планшетных компьютерах. От этого зависит лояльность посетителей: заинтересованность сайтом, время их нахождения на нём, совершение целевого действия и т.д. Людям должно быть удобно – вот основная мысль.

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

Что такое адаптивный сайт?

Тот, который правильно отображается на устройствах с различным разрешением экрана. Часто адаптивность путают с мобильной версией. Нужно различать эти 2 понятия.

Мобильная версия – это отдельный сайт, располагающийся на другом домене (или поддомене), который показывается только пользователю смартфона или планшета. Другими словами, происходит перенаправление (редирект) с основного ресурса на его упрощённый вариант.

Адаптивность – это когда основной сайт динамически изменяет свой внешний вид в зависимости от разрешения экрана устройства. Никакого редиректа не происходит.

В качестве примера приведу свой веб-ресурс, на котором вы сейчас находитесь – он является адаптивным. Зайдите на него со смартфона и посмотрите, как он выглядит.

Преимущества

Большинство сайтов в Рунете пока не являются адаптивными. Но я уверен, что в ближайшие годы картина будет меняться. Нельзя оставаться в 2000-х годах, когда на дворе 2010-е годы. Развитие новых технологий диктует свои правила игры, и их нужно обязательно учитывать.

Основные преимущества адаптивности:

  • Юзабилити. Пользователям мобильных устройств гораздо удобнее и приятнее работать с теми интернет-страницами, которые не приходится постоянно увеличивать в попытках разглядеть номер телефона или прочитать какой-либо текст. Также они лишены горизонтальной полосы прокрутки, чем грешат многие веб-ресурсы.
  • Продвижение. Компания Google заявила, что сайтам, корректно отображающимся на мобильных устройствах, будет отдаваться приоритет при ранжировании в поиске. Для тех, кто занимается SEO-продвижением, этот фактор является достаточно серьёзным.

Как сделать?

Разработка включает в себя две составляющие:

  • Адаптивный (отзывчивый) дизайн. Он обычно содержит в себе два макета: один — для экрана с шириной 1920 пикселей, второй — для малого разрешения (например, 480 пикселей).
  • Адаптивная вёрстка. Представляет собой процесс создания каркаса с динамически изменяющимся расположением блоков и элементов (для разных экранов).

Лучше всего, конечно, предусматривать адаптивность сайта с самого начала его создания. Так сказать, с нуля. Но даже если вы задумали сделать уже существующий ресурс адаптивным, с этим не возникнет проблем.

Мой сайт тоже сначала был обычным, и только в начале 2016 года был модернизирован под мобильные устройства. Сначала был отрисован дизайн под разрешение 480 пикселей, а затем сделана соответствующая вёрстка. Результат – теперь вы можете читать материал даже на телефоне, не напрягая своё зрение.

Реализовать адаптивность можно и самостоятельно. Для этого нужно сперва нарисовать макет страницы для мобильной версией. Не обязательно внедрять новые элементы (компактные кнопки меню и т.д.) – можно просто по-другому расположить имеющиеся блоки. После этого нужно сделать вёрстку. Для этого можно воспользоваться одной из программ (например, распространённым инструментом Bootstrap 3 или Bootstrap 4) или применить правила CSS3 media queries.

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

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

С уважением, Сергей Чесноков