Есть ли необходимость доказывать, что доля мобильного интернет-трафика стремительно растёт с каждым годом? По данным международного аналитического агентства We are social на 2018 год около 52 % пользователей Интернет по всему миру выходят в сеть, используя мобильные устройства.
Эти данные говорят о том, что при создании сайта нужно обязательно уделять достаточно времени и усилий мобильной версии. Это должны понимать не только люди, разрабатывающие сайты – дизайнеры, веб-программисты, но и сами представители бизнеса, которые хотят, чтобы сайт был эффективным инструментом реализации задач.
Адаптивная вёрстка сегодня является неотъемлемой частью веб-разработки. Страницы сайта должны выглядеть одинаково привлекательно и быть удобными для пользователя как на десктопе, так и на экране смартфона. Всё реже можно встретить страницы в интернете, которые некорректно отображаются на обоих видах девайсов. Особенно если дело касается продажи товаров или услуг. Ведь если сайт будет отображаться, мягко говоря, странно, человек его просто закроет, даже не сделав попытки что-то купить.
Сайты, которые не оптимизированы под мобильные устройства видно сразу. При открытии таких веб-страниц на экране смартфона будет видна только часть контента. И для просмотра всего содержимого придется листать страницу влево-вправо.
А как проверить адаптивность сайта при просмотре с десктопа? У Google Chrome есть специальный плагин Window Resizer. Он позволяет открывать сайты в самых популярных разрешениях.
Адаптивная вёрстка или mobile friendly позволяет менять дизайн страницы в зависимости от ширины экрана устройства, на котором она открывается. При использовании этой технологии дизайн страницы для каждого разрешения не отрисовывается заново, а меняется размер и расположение отдельных элементов.
Создание адаптивной версии сайта начинается с разработки макета дизайнером. На него ложится задача – грамотно передать главные идеи и суть, сделать акцент на значимой информации, а часть вспомогательного контента и декоративных элементов убрать или скрыть. При этом нужно помнить, что функциональные возможности десктопной версии должны сохраниться.
Адаптивная вёрстка представляет собой работу над размером изображений и текстов, а также в изменении расположения элементов страницы в целом. Реализация адаптивной вёрстки осуществляется при помощи CSS3 и языка разметки HTML5.
Медиа запросы CSS
С помощью медиа запросов CSS (media queries) вы можете управлять стилем любого элемента страницы в зависимости от параметров устройства, на котором открывается веб-страница. То есть медиа запрос представляет собой правило, определяющее стиль каждого элемента, ориентируясь на ширину экрана устройства.
Любой запрос начинается с @media. Затем прописываются условия о типе носителя, медиа функциях и логических операторах.
Медиа функции, используемые при адаптивной вёрстке:
- width – предъявляет требования к ширине области просмотра;
- height – предъявляет требования к высоте области просмотра;
- orientation – проверяет режим отображения страницы (портретный или альбомный режим);
- aspect-ratio – указывает отношение ширины области просмотра к высоте;
- resolution – определяет разрешение устройства ввода;
- grid – определяет, что устройство имеет фиксированный размер символов.
Перед некоторыми функциями могут стоять min или max, которые, соответственно, обозначают минимальное или максимальное значение. Например, функция min-height: 300px означает, что область просмотра будет не больше 300 пикселей.
Адаптивная верстка сайта с использованием медиа запросов – это не единственный, но самый лучший и быстрый способ сделать сайт удобным для пользователей, использующих мобильные устройства для просмотра веб-страниц. Согласитесь, проще написать пару сотен строчек кода, чем, например, делать отдельную мобильную версию сайта.
Помимо удобства адаптивность влияет на SEO-продвижение, так как для поисковых систем сайт, оптимизированный под мобильные устройства, будет в приоритете. То есть сайт, который одинаково удобен при просмотре с десктопа и со смартфона Google будет ставить выше в поисковой выдаче.
Ещё одно из преимуществ адаптивной верстки заключается в том, что у всех версий сайта единый URL-адрес. А значит, содержимое этих страниц не дублируется, и они не конкурируют друг с другом. Работа же по продвижению одинаково влияет на выдачу в десктопном и мобильном поисках.
Mobile First
Не всегда разработка сайта начинается с создания десктопной версии и дальнейшей адаптации под мобильные устройства. Да, исторически так сложилось, что полной версии сайта уделяется большее значение. Но есть тенденции, которые мы не можем оставить без внимания.
В 2015 году компания Google задала тренд на стратегию Mobile First. Эта концепция подразумевает, что первостепенное значение имеет мобильная версия. То есть, прежде всего, веб-разработчики подгоняют проект под смартфоны и только потом адаптируют его для отображения на компьютерах.
При использовании этого подхода не возникает ощущение, что мобильная версия обрезана или недоработана. Здесь всё продумано и сделано для удобства пользователей. Все функции закладываются изначально с учётом ширины и возможностей экрана. Кроме того, усложнять простое – менее трудоемкий процесс, а именно так и происходит, когда из вёрстки под мобильные устройства начинают делать десктопную версию.
Хорошим примером сайта, который сделан по принципу Mobile First является booking.com.
Mobile First актуальна, но это не значит, что она является обязательным требованием ко всем. Есть сайты, которым адаптивность вообще будет во вред. Например, сайты со сложным функционалом или контентом, который требует достаточно большого пространства для лучшего восприятия. Чтобы определить на какое разрешение стоит сделать упор нужно анализировать входящий трафик и то, с каких устройств чаще всего просматривают сайт.
Адаптивность является одним из важных и обязательных требований к современному сайту. Удобный сайт, оптимизированный под все виды устройств – это не просто чья-то прихоть. Это условие, необходимое для того, чтобы сайт был работающим эффективным инструментом бизнеса.