Благодаря развитию смартфонов и других мобильных устройств с доступом в Интернет количество мобильных пользователей постоянно увеличивается. Уже давно (на рубеже 2014-2015 годов) доля пользователей мобильных устройств в Интернете превысила количество людей, открывающих браузер с компьютера или ноутбука. Больше 10 миллионов людей на территории России пользуются всемирной сетью только с мобильных устройств. Такие условия заставляют разработчиков сайтов тщательно работать надо поддержкой их продуктов любыми устройствами. Минимальная мобильная версия должна быть у любой страницы – обойтись без этого сегодня невозможно.
Адаптивный сайт
Существует два схожих понятия – Adaptive и Responsive, что означает, соответственно, «адаптивный» и «отзывчивый». Достаточно часто их применяют в качестве синонимов. Правда, что эти термины представляют близкие качества: возможности веб-страницы изменять себя в зависимости от разрешения экрана различных устройств, и, в целом, способность оставаться читабельным и удобным, как на мониторе компьютеров, так и на смартфоне или планшете. Принято считать, что понятия «отзывчивого» сайта входят в понятие адаптивности. Можно сказать, что отзывчивый сайт – это термин, больше связанный с индивидуальными предпочтениями и методами адаптивности сайта под разные экраны, а адаптивный сайт – общее понятие, включающее в себя степень его «отзывчивости». Поэтому любые методы подстраивания страницы под определенные устройства можно называть одним словом – адаптивность.
Адаптивность сайта – это отдельный этап разработки ресурса, требующий соответствующих знаний и данных, о предполагаемых устройствах, на которых он будет открываться. Цель адаптивности сайта заключается в настройке сайта под комфортное и удобное расположение всех его элементов в независимости от разрешения экрана и особенностей самого устройства, на котором страница будет открываться. Это может включать в себя не только уменьшение размера элементов и изменение их расположения, но и, например, удаление некоторых из них или даже полную переработку вида меню.
Среди инструментов создания адаптивного сайта чаще всего пользуются следующими методиками:
- Резиновая верстка. В этом случае размер элементов определенной страницы указывается не в положении пикселей, а в условных единицах. Таким образом достигается то, что при уменьшении страницы браузера в размере, страница уменьшается, но необходимые элементы остаются на месте, подстраиваясь под масштаб. В свою очередь фиксированная верстка приводит к тому, что элементы, которые на мониторе ПК видно отлично, на телефоне уменьшаются слишком сильно – особенно это касается небольших блоков текста.
- Media Queries – медиа-запросы. Они представляют собой команды, активирующиеся только в определенных случаях: например, выбранный элемент будет удален или заменен на другой при работе на экране менее 1200 пикселей шириной. С помощью данного инструмента можно менять внешний вид страницы напрямую от разрешения экрана. Так, в интернет-магазинах, вместо элемента настройки положения карточек товаров, можно сделать так, чтобы на компьютере они показывались в виде 4 столбцов, а на телефоне в 2 столбца.
Еще одним способом использовать медиа-запросы является изменение элементов. У большинства сайтов есть верхнее меню, которое хорошо смотрится на широкоформатных мониторах. Однако на смартфонах, где экран вертикальный, сохранение положения элементов верхнего меню сделает его либо неудобным, либо просто громоздким. Многие разработчики настраивают сайт так, чтобы на мобильной версии верхнее меню скрывалось в отдельную кнопку – если пользователю понадобиться верхнее меню, он нажимает на нее и выбирает нужный элемент, а в остальное время верхнее меню никак не мешает просмотру контента на небольшом экране. К слову, примером адаптивности верхнего меню также будет то, что оно превращается в вариант для компьютеров при загрузке сайта в альбомной ориентации со смартфона.
Мобильная версия
Традиционным вариантом решения проблемы отображения сайта на мобильных устройствах является создание специальной версии ресурса. Мобильная версия в большинстве случаев на смартфонах открывается автоматически, даже если выполнять запрос на основной адрес сайта. Также для нее существует ссылка «Перейти на мобильную версию сайта» в нижней части страницы. Этим способом пользуются многие разработчики из-за его удобства – не нужно нагружать код дополнительными проверками и загрузками.
Мобильная версия представляет собой отдельный URL и построена на своем коде. Очевидно, первостепенные особенности мобильной версии включают в себя изменение его внешнего вида под мобильные экраны: удаляются лишние элементы, уменьшается общий вес страницы, изменяется форма элементов. Однако это приводит к тому, что владельцу основного ресурса необходимо поддерживать, фактически, два разных адреса. Для простых сайтов можно создать его мобильную версию очень быстро с помощью конструктора, но это все еще сохраняет проблему двух отдельных сайтов.
Мобильное приложение
Мобильное приложение для определенного сайта представляет собой отдельную программу, устанавливаемую на мобильных устройствах. Поэтому у этого метода есть как значимые преимущества для определенного случая, так и серьезные минусы. Здесь важно понимать, что большинство пользователей не установят новое приложение, если им необходимо в нем выполнить несколько минутных действий или просто использовать его всего один раз для доступа к какой-то функции. Мобильное приложение нужно для тех сайтов, у которых есть своя аудитория, регулярно посещающая этот ресурс для получения какой-то информации, услуг или товаров. Именно в этом случае отдельное приложение будет самым удобным способом получить доступ к сайту.
Мобильное приложение является самым дорогим и долгим способом адаптивности сайта под смартфоны и планшеты. Прибегать к нему стоит тогда, когда ваш продукт действительно полезен пользователю и, самое главное, будет использоваться клиентом продолжительное время. Примером сайтов, которым подойдет мобильное приложение, может выступать любой ресурс с живым общением, блог, новостной портал и просто информационный сайт. Своим приложением может обзавестись интернет-магазин, банк и т.д.
Правильный выбор
Любой сайт должен быть мобильным, лояльность пользователей сильно зависит от того, насколько комфортно было пользоваться тем же ресурсом со своего телефона. Для того чтобы выбрать метод адаптивности сайта нужно, во-первых, узнать какая часть посетителей открывают страницу с мобильных устройств, а, во-вторых, разобраться с целью вашего сайта, т.к. далеко не всем сайтам нужно мобильное приложение или отдельная версия. Практически во всех случаях можно обойтись адаптивным методом или мобильной версией.
Первый способ – самый подходящий при разработке нового сайта, а мобильную версию можно быстро разработать на основе уже действующего ресурса. У каждого метода есть свои недостатки: адаптивный дизайн необходимо хорошо оптимизировать, основной код сайта нагружен многочисленными инструментами адаптивности; мобильная версия требует отдельной поддержки как у второго полноценного сайта, разработать ее непросто; мобильное приложение очень затратное в разработке, а при неправильном выборе вовсе убыточно. Минусы перекрывают преимущества мобильных вариантов, которые различны в каждом случае. То, какой способ показать сайт мобильным пользователям выбрать, зависит только от сферы деятельности ресурса, его особенностей, наличия живых чатов, магазины или других функций.
