Адаптивный дизайн

Эта статья посвящена адаптивному дизайну, а также разнице между ним и статичным, резиновым, отзывчивым и смешанным дизайнами веб-сайта. Различия между типами макетов и подходами к веб-разработке изложены в максимально доступной форме.

Что такое "адаптация"?

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

• Более удобный для пользователя интерфейс;
• Усовершенствованные поведенческие факторы сайта;
• Увеличения количества просмотров и взаимодействий с сайтом;
• Рост числа переходов по ссылкам и количества уникальных посетителей в день;
• Уменьшение числа отказов.

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

Что такое «адаптивный веб-дизайн сайта»?

Этот тип веб-дизайна объединяет в себе лучшие техники «постепенного улучшения» и mobile first. Это стратегия разработки, подразумевающая адаптацию макета посредством техники отзывчивого дизайна и актуальных веб-технологий. В качестве основы для сайта адаптивный веб-дизайн использует HTML, а для отзывчивости макета и других улучшений ― CSS и Javascript.

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

Зачем необходимо разрабатывать адаптивный дизайн?

С 2014 года число выходов в сеть со смартфонов и прочих мобильных средств связи стабильно превышает трафик компьютеров. Пионером в данной области стали США, Россия на тот момент отставала, но все же общая тенденция прослеживается: популярность мобильного интернета растет. Еще в 2012 году число российских интернет-пользователей, выходивших в интернет с телефонов, было около 5 млн человек. Через два года эта цифра возросла в 10 раз и стала составлять около 20% от общего числа пользователей сети Интернет. В 2015 году поисковые системы Google и Яндекс сделали адаптивность сайтов одним из основных критериев при сортировке списка поисковых запросов.

Помимо этих статистических данных, существенную роль играет банальный вопрос удобства. Разбираться в написанной мелким шрифтом страничке, предназначенной для как минимум в семь раз большего экрана ноутбука или компьютера, пользователю со смартфоном будет крайне неудобно. Приходится регулярно увеличивать и сдвигать страницу, стараясь нечаянно не кликнуть на какую-нибудь ссылку или рекламный баннер, в то же время стараясь разглядеть хоть что-то на отсвечивающем при дневном освещении экране. К тому же, скорость интернета на мобильных устройствах порой заставляет желать лучшего, что вряд ли добавит энтузиазма посетителю интернет-страницы. Любой пользователь скорее предпочтет закрыть неудобный сайт и перейти по любой другой предоставленной поисковиком ссылке. Посетитель потеряет несколько минут на неприятные «раскопки», а владелец сайта лишится значительной части аудитории и будет довольствоваться крайне низким трафиком. Естественно, ни один владелец интернет-ресурса не готов к подобным издержкам.

Типы HTML-макетов

В этой статье под HTML-макетами подразумеваются не PSD-макеты, но HTML-страницы, прошедшие процесс верстки. Всего будет рассмотрено пять типов HTML-макетов: фиксированный, отзывчивый, адаптивный, резиновый и смешанный.

Фиксированный макет

Данный макет веб-сайта имеет зафиксированную ширину контента страницы, измеряемую в пикселях. Даже если пользователь так или иначе изменяет размер окна браузера, ширина остается неизменной. Так происходит потому, что фиксированные макеты когда-то подгонялись под самые распространенные разрешения дисплеев: 800x600, 1024x768, 1366x768 и т.д. На сегодняшний день устройства обладают самыми разными разрешениями экрана (от 480x800 на смартфонах и до 3840x2160 на мониторах), поэтому фиксированные макеты считаются устаревшими.

Резиновый макет

Такой макет предполагает возможность подстройки контента сайта под любое разрешение дисплея, поскольку величины структурных компонентов сайта выражаются не в пикселях, а в процентах. Например, при указании ширины компонента в CSS пишут не 480px, а 50%. Тем не менее такие макеты потеряли актуальность так же, как и фиксированные, потому что при их разработке во внимание принимаются только дисплеи персональных компьютеров.

Адаптивный макет

При создании адаптивного макета используются медиа-запросы CSS, благодаря которым происходит адаптация контента под различные дисплеи. Такой макет «перемещается» по контрольным точкам при изменении разрешения дисплея того или иного устройства. При этом происходит смещение, уменьшение или увеличение контента, который подстраивается под размеры близлежащих контрольных точек.

Основной недостаток адаптивного макета ― невозможность прогнозирования вида контента и макета на всех устройствах из-за вероятности слишком большого расстояния между ключевыми точками.

Отзывчивый макет

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

Смешанный макет

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

Таково краткое описание всех существующих HTML-макетов веб-сайтов. Теперь речь пойдет непосредственно о веб-дизайне.

Что такое «отзывчивый веб-дизайн сайта»?

Отзывчивый веб-дизайн базируется на резиновых макетах, медиа-запросах CSS и резиновых медиа-компонентах (изображения и видео). Иными словами, отзывчивый макет комбинируется с таким же медиа-контентом посредством HTML и CSS.

Что такое «прогрессивное улучшение» и mobile first?

Под постепенным улучшением подразумевается стратегия создания сайтов, которая основана на доступности контента на изначальном уровне (HTML). CSS и Javascript, в свою очередь, являются лишь дополнительными инструментами. При создании сайтов разработчики стараются сделать так, чтобы доступ к контенту можно было получить посредством любого устройства или браузера.

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

Что лучше ― мобильная версия или адаптивный макет?

Ответить на этот вопрос можно лишь после определения типа сайта. Адаптивный макет чаще используется для информационных сайтов и блогов. Мобильная версия отлично подходит для популярного сервиса, сообщества или форума.

Вполне очевидно, что работать над мобильным дизайном необходимо. Остается вопрос, что выбрать: адаптивную верстку или разработку мобильной версии? Ниже рассматриваются преимущества и недостатки вариантов.

Мобильная версия

Плюсы:

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

Несмотря на эти преимущества, с мобильной версией связан ряд определенных сложностей:

• Мобильная версия страницы – это отдельный самостоятельный сайт с собственным адресом, требующий соответствующей разработки, на которую потребуются время и средства;
• В мобильной версии существует риск чрезмерного усечения информации, от чего она теряет свои продающие качества;
• Из-за разных технических характеристик мобильная версия может недостаточно хорошо приспосабливаться к экранам отдельных устройств, например, планшетов.

Адаптивная верстка

Положительные стороны:

• В отличие от мобильной версии, работа ведется над тем же сайтом под одним адресом;
• Сохранение адреса полезно еще и тем, что все переходы будут осуществляться именно на него, и это несомненно поднимет посещаемость;
• Адаптивный сайт более успешно подстраивается под любые расширения экранов;
• Разработка проекта занимает меньше времени и обычно обходится сравнительно дешево;
• Поисковики обычно отдают предпочтение адаптивным сайтам при ранжировании списка ссылок по запросу.

Тем не менее, и у разработки адаптивного дизайна существует ряд существенных издержек, которые необходимо учитывать:

• Такой сайт больше весит, и соответственно может медленнее загружаться;
• Случается, что адаптивная версия содержит некоторое количество ненужной или недостаточно оптимально расположенной информации.

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

Под какие разрешения дисплеев выполняется адаптивность веб-сайта?

Фреймворк Bootstrap демонстрирует следующие значения:

• большие экраны ― от 1200px;
• стандартная ширина ― от 980px до 1200px;
• портретная ориентация планшетов ― 768px;
• смартфоны и планшеты ― 767px;
• телефоны ― до 480px.

Разработчики из России, занимающиеся адаптивной версткой макетов, используют следующие способы расстановки контрольных точек:

• персональные компьютеры ― 1600px;
• ПК, ноутбуки и планшеты ― 1280px;
• ноутбуки и планшеты ― 1024px;
• смартфоны ― 800px;
• смартфоны и телефоны ― 320px или 480px.

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

Цена разработки

В стоимость работ включена адаптационная верстка сайта, разработка дизайна, текст и дополнительные рекомендации. Финальная цена проекта напрямую зависит от его сложности и объема работ. Минимальная стоимость адаптивного сайта, входящего в топ-7 результатов поискового запроса составляет 15500 рублей. За более подробной информацией рекомендуется звонить или обращаться в офис.