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

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

Павел ШУДНЕВ

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

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

  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. Дизайн для планшета в горизонтальной ориентации

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

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

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

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