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

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

Павел ШУДНЕВ

Для начала – несколько слов о том, что стало предпосылками к появлению и развитию адаптивного дизайна. Раньше все было просто: для выхода в Интернет использовались только компьютеры, и сайты просматривались только с них. Так как компьютеры мало отличались друг от друга, не было смысла даже думать о том, чтобы для одного сайта делать несколько вариантов дизайна.

Однако с течением времени появился ряд новых технологий и новых устройств, которые радикально изменили представление о пользовании Интернетом, и как следствие повлияли на дизайн сайтов:

  1. Появление и стремительное развитие смартфонов
  2. Появление планшетов (к слову, первый планшет – революционный iPad – появился совсем недавно: в 2010 году)
  3. Развитие тачскрин технологии (сенсорных экранов)
  4. Развитие и распространение Wi-Fi технологий (беспроводной Интернет)
  5. Увеличение скорости Интернета (в т.ч., на мобильных устройствах)
  6. Падение стоимости смартфонов
  7. Из последних тенденций – развитие безлимитного Интернета для смартфонов

То есть если еще недавно, какие-то пять лет назад, сайты просматривали с однотипных устройств – с единым видом ввода данных и навигацией (клавиатура и мышь), которые были только в одном положении (горизонтальном), с очень схожей плотностью изображения (раньше было 72 ppi – 72 пикселя на дюйм), то за последние годы всё изменилось.

Чтобы идти в ногу со временем, бизнесу (точнее, интернет-маркетингу) пришлось адаптироваться к этим изменениям. Благодаря чему и появилось это, довольно непривычное для России (но уже ставшее стандартом по умолчанию для многих стран Запада), направление – адаптивный дизайн.

Адаптация к изменениям

Возьмем простой пример. В конце «нулевых» львиная доля сайтов делалась шириной около 1000 пикселей (пиксели – это точки, из которых состоит изображение на экране), например, шириной 960 пикселей. И если на экранах мониторов и ноутбуков (например, с разрешением 1024 х 768) такие сайты смотрелись очень неплохо, то при попытке просмотра со смартфона появлялись проблемы:

  • Как разместить нечто шириной 1000 точек в экран шириной 320 точек – в три раза меньшего размера? (Правильный ответ: никак!)
  • Что делать с дизайном сайта, когда смартфон поворачивают – меняют его ориентацию с горизонтальной на вертикальную и наоборот? Т.е. если до поворота размеры экрана были 320 х 480, то после они стали 480 х 320!
  • Как быть с навигацией: совершенно ясно, как разрабатывать дизайн сайта, когда имеешь дело с привычной мышью, но вместо мышки в смартфонах используют пальцы рук, что диктует совсем другие правила игры! (К слову: вам не приходилось пытаться попасть пальцем в нужный пункт выпадающего меню сайта на смартфоне? Незабываемые впечатления!)
  • Отдельный вопрос – как быть с в 2,5-3 раза большей плотностью изображения: на смартфонах все выглядит В РАЗЫ меньше, а тексты порой читать и вовсе невозможно!

На этом фото приведен пример вид обычного статичного российского сайта – со всеми «прелестями», которые для смартфонов категорически непригодны

На этом фото приведен пример вид обычного статичного российского сайта – со всеми «прелестями», которые для смартфонов непригодны.

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

Первым ответом на вызовы новых технологий стала мобильная версия сайта (не путать с адаптивным дизайном). В России и за ее пределами некоторые компании (например, популярное новостное издание lenta.ru и регистратор доменных имен nic.ru) по сей день используют это решение.

На фото: мобильная версия сайта nic.ru – не путать с адаптивным дизайном!

Что такое мобильная версия – вкратце:

  • Это упрощенная версия сайта
  • Она рассчитана на меньшую скорость Интернета
  • С точки зрения навигации, дизайн адаптирован под сенсорные дисплеи
  • Размер шрифтов, в сравнении с полной версией сайта, увеличен – чтобы сайт был читабелен при просмотре со смартфона
  • Части изображений (а порой – и некоторых текстовых блоков) на нем нет
  • Мобильная версия сайта располагается на другом домене (обычно он начинается с латинской буквы m, например, m.nic.ru)
  • Обычно используется одноколоночная верстка (особенно текстовых блоков)

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

Вообще, резиновая верстка появилась еще в начале «нулевых», и короткое время – до появления широкоформатных мониторов – была весьма популярна, потом же профессионалы от нее отказались (на широкоформатных мониторах текстовые строки становились такой длины, что тексты было невозможно читать).

И, наконец, адаптивный дизайн

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

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

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

Схематично адаптивный дизайн можно представить так:

Схематичное изображение адаптивного дизайна

Однако эта схема не полная: ей не хватает еще двух вариантов дизайна – для смартфона и планшета в горизонтальной ориентации.

adaptivniy-dizajn-vse-ustrojstva

5 вариантов дизайна

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

  1. Дизайн сайта для компьютера
  2. Дизайн для смартфона в вертикальной ориентации
  3. Дизайн для смартфона в горизонтальной ориентации
  4. Дизайн для планшета в вертикальной ориентации
  5. Дизайн для планшета в горизонтальной ориентации

Сделать этот объем работ не так просто, как может показаться, и справиться с ним может только опытный дизайнер – который еще на этапе планирования дизайна будет четко представлять, как правильно распределить элементы сайта для разных устройств, да еще и в их разной ориентации.

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

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

Другие статьи
7 советов как сделать лендинг пейдж лучше
Чем лучше выглядит ленгдинг пейдж, чем более продумано его содержание и структура, тем выше вероятность того, что посетитель совершит нужное вам целевое действие и станет вашим потенциальным клиентом. Ниже приводим семь советов из области дизайна, которые позволят сделать ваш лендинг пейдж лучше. Читать далее
О разработке лендинга Uber
Мы получили заказ от петербургского подразделения Uber на разработку адаптивного лендинга для привлечения новых водителей. Задачу нам предстояло решить «под ключ»: написать тексты для лендинга, разработать 6 версий дизайна и выполнить работы по программированию – включая back-end, связанный с обработкой заявок. Читать далее
Почему разработчикам выгодно предлагать платные CMS
Зачастую разработчики сайтов рекомендуют платные системы администрирования сайтов (CMS) как более надежные. Если же называть вещи своими именами, смысл такого предложения отнюдь не в надёжности, а в возможности больше заработать. Читать далее
Три вида тестирования сайтов
Как показывает опыт, готовые сайты всегда (!) отличаются от запланированных. Чтобы выявить отличия – и получить именно то, что вы заказали (а не что-то похожее), нужно проверить на соответствие запланированному внешний вид сайта (дизайн) и его работу (функционал). Иногда – скорость загрузки сайта. Об этих видах тестирования – читайте ниже. Читать далее