Что это такое – адаптивная вёрстка сайта

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

И сразу же об актуальности: сегодня он считается одним из весьма явных и даже ключевых показателей качества и современности корпоративного или частного web-ресурса во Всемирной Сети. Причем его разработка – это все еще сравнительно новое направление, и для него весьма характерны частые изменения различных мелочей. Но зато он ориентирован на перспективу – не только на те гаджеты, которыми мы пользуемся прямо сейчас, но и на те, что будем юзать лет через 5.

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

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

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

Зачем нужна адаптивная версия сайта

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

• Чтобы к вам «в гости» было одинаково комфортно заходить с любого гаджета – сегодня люди бродят по интернет-просторам с помощью айфонов и нетбуков, отличающихся между собой размерами и разрешением экрана; чтобы обеспечить удобство всем и каждому, необходимо реализовать автоматически подстраиваемый интерфейс.
• Чтобы ваш ресурс чаще посещали с нестационарных устройств, и мобильный трафик планомерно увеличивался – за последние годы в разы возросло количество людей, пользующихся для серфинга смартфонами и планшетами; их нельзя игнорировать, ведь часть из них – ваша целевая аудитория, а потому важно создать им все условия, чтобы они захотели побывать у вас снова.
• Чтобы оперативно предоставлять клиентам/подписчикам ценную информацию – сегодня горячую новость или срочное уведомление человеку проще прочесть с телефона (ведь он всегда под рукой, а до компьютера, бывает, еще нужно добраться). Отслеживайте поведение важных зон сайта с инструментом Метасканер: внимание к изменениям позволяет вовремя реагировать на нежелательные модификации и предотвращает снижение позиций в выдачах поисковиков.

Преимущества и недостатки адаптивного дизайна

Универсально подстраивающаяся под гаджеты версия сайта обладает такими достоинствами:

• Экономит силы, средства, время на обслуживание – с нею нет необходимости поддерживать сразу несколько ресурсов, достаточно обеспечивать бесперебойную работу одного.
• Повышает число показов в отчетах аналитических сервисов Гугла и Яндекса – благодаря тому, что синхронизирует запросы от различных устройств.
• Упрощает SEO-продвижение – у каждой страницы будет только один URL, соответственно, все ссылки будут в равной степени удобными для конечного пользователя.
• Вообще не требует сложных серверных компонентов – адаптивный сайт нуждается лишь в разовой модификации базовых стилей CSS-стилей, тогда контент будет подстраиваться под девайс юзера.
• Помогает быстрее рекламироваться в социальных сетях – получать лайки в ВК и Facebook, собирать больше твитов и тому подобное; опять же, все из-за одинаковых УРЛов.

Минусы тоже есть, и это:

• Сложность совмещения с уже существующим ресурсом – проще создать новый web-проект, чем переписывать старый.
• Размещать картинки высокого разрешения довольно проблематично – для этого зачастую приходится использовать решения “в обход” основных, вроде библиотеки Sencha либо плагина Adaptive Images.
• Страницы весят больше, чем обычно – из-за загрузки файлов JavaScript и уже упомянутых стилей CSS у них появляются «дополнительные» килобайты.

На практике достоинства гораздо существеннее недостатков.

Принципы адаптивной верстки

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

Прочность

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

Относительность единиц измерения

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

Использование контрольных точек

Осуществляется привязка к тем элементам, местоположение которых остается статическим до тех пор, пока не будет выполнен вход с другого гаджета. Это своеобразные фиксаторы, и они не дают изображениям «уползать» за границы.

Максимальные и минимальные значения

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

Вложенность объектов

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

Правильные шрифты

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

Грамотное использование графики

Если изображение детализированное, стоит сделать его растровым, если же нет – векторным. И каждую картинку лучше оптимизировать, то есть сжать, но так, чтобы ее поддерживали даже старые браузеры.

Выдерживание размеров макетов

Важно соблюсти подходящее разрешение – среди стандартных вариантов:

•  320, 480 px – для смартфонов,
• 768 – для всевозможных планшетов,
• 1024 – для нетбуков,
• от 1280 – для стационарных компьютеров.

Хотя жесткого соблюдения норм не предусмотрено – допустимы и промежуточные варианты. Но тогда в качестве точек «перелома» принимают фактические значения ШхВ нестандартного гаджета.

Правильные медиазапросы

С их помощью при создании ресурса задаются:

• типы поддерживаемых девайсов,
• условия показа тех или иных объектов.

На каждый будут подгружаться соответствующие стили CSS-языка.

Размеры макетов

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

• 320,
• 480,
• 768,
• 1024,
• 1280,
• 1600.

Внимание, если нет «переломов» на большем промежутке, допустим, с 320 по 1024 px, то не будет и практического смысла предлагать отдельные решения под меньший, например, с 320 по 768.

Viewport и Media query

Это важные параметры, которые необходимо правильно задавать. Первый – это мета-тег, говорящий браузеру о том, нужно ли увеличивать/уменьшать страницу, и как отображать присутствующие на ней объекты. Его следует записать в <head> таким образом:

<meta name=viewport content=”width=device-width, initial-scale=1.0 “>

Первая часть после него определяет, что ширины растягивания контента и экрана совпадают, вторая устанавливает масштаб 1 к 1.

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

@media screen and (max-width: 768px) {

.class {

свойство: значение;

}

}

Здесь:

• @media – сам запрос,
• screen – носитель,
• max-width – обязательное условие к выполнению (тут – ширина не достигает 768 пикселей),
• class – селекторы, определяющие рабочие параметры.

При создании web-ресурса используются функции, указывающие цвет, ШхВ, сетку, ориентацию объектов, разрешение. Текущие цифры, сразу по достижению которых изменяется оформление, называют точками “перелома” (контроля), от английского breakpoints. Также находится место для логических операторов and, not и only (И, НЕ, только соответственно).

Типы адаптивных макетов

Существует 5 основных вариантов шаблонов – рассмотрим каждый.

Резиновый

Сравнительно легко реализуется, максимально наглядный для пользователя. Объекты при нем сжимаются, подстраиваясь под размер экрана, или вытягиваются длиной лентой для удобного скроллинга.

Перенос блоков

Хорош тогда, когда предусмотрено много колонок с данными. Согласно ему, при уменьшении диагонали дисплея сайдбары смещаются вниз.

Переключение

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

Адаптивность «малой кровью»

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

Панели

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

Что такое адаптивный дизайн сайта, и чем он отличается от Responsive Design

Они довольно похожи, но принципиальная разница есть в технологии их реализации:

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

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

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

Что лучше использовать? Зависит от структуры web-ресурса: если она «резиновая», отзывчивость будет весьма удобной, вот только от нее может снизиться скорость загрузки (при наличии большого количества визуальных элементов).

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

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

Итак, резюмируем, выделяя ключевой показатель:

Responsive	Adaptive
Один, но гибкий шаблон для всех девайсов	Сразу несколько макетов – для каждого гаджета свой

Отличие адаптивного сайта от мобильной версии

Созданные под конкретные модели и операционные системы телефонов и планшетов приложения – тоже вариант, у которого, правда, есть определенные недостатки:

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

И вот тут уместно еще раз упомянуть термин «адаптивная верстка сайта»: что это такое в данном контексте? Здесь это комплекс мер, предпринимаемых разработчиками для создания web-проекта с одним адресом, оформлением, контентом и системой управления, одинаково удобным для просмотра со всех активно используемых устройств. Да, минусы у этой технологии тоже есть, но они весьма относительны. Главным недостатком считается новизна: пока ею в совершенстве владеет лишь малое число специалистов. Но зато какие перспективы она открывает! Ею будут пользоваться и через 5 лет, когда, вполне вероятно, появятся какие-то принципиально иные гаджеты.

Образы в адаптивном дизайне: примеры

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

Применение свойства width

Если его значение равняется 100%, картинка будет увеличиваться/уменьшаться вверх/вниз.

Записывается оно так:

<img src=”img_dog.jpg” style=”width:100%;”>

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

Использование max-width

Если его показатель в 100%, объект изменяет свой масштаб по мере необходимости, но никогда не становится больше первоначального.

Выглядит это так:

<img src=”img_dog.jpg” style=”max-width:100%;height:auto;”>

Показ изображений, исходя из ширины браузера

Чтобы установить зависимость, достаточно ввести HTML-элемент <picture>. Конструкция его довольно громоздкая, но весьма эффективная:

<picture>

<source srcset=”img_bigboy.jpg” media=”(max-width: 768px)”>

<source srcset=”img_bigboy.jpg” media=”(max-width: 1024px)”>

<source srcset=”boy.jpg”>

<img srcset=”img_bigboy.jpg” alt=”Boy”>

</picture>

Варианты разработки и примеры адаптивных версий сайтов

Итак, можно:

1. Заказать web-ресурс у профессионалов – самый простой и надежный выбор, ведь специалисты решат вопрос максимально качественно.
2. Найти уже готовое оформление и начать его использовать – подходит для тех, кто не ищет эксклюзивности, но при этом разбирается в теме настолько, чтобы самостоятельно переписать часть кода.
3. Применить фреймворки, то есть каркасы с основными объектами, и уже на их основе достроить свое детище. Этот способ хорош тем, что позволяет получить и бесценный опыт конструирования, и уникальный набор шаблонов.

Как сделать адаптивную верстку сайта на базе фиксированного макета

Если есть рабочая и уже проверенная тема, нужно:

• сделать ее резервную копию;
• установить редактор CSS-кода, допустим, Notepad++ или бесплатный Adobe Brackets;
• запустить Google Chrome и нажать F12.

После такой подготовки можно приступать к основной части – следует:

• Перенести проект на локальный сервер, чтобы он был временно недоступен пользователям.
• Добавить мета-теги и перевести абсолютные единицы измерения в относительные (пиксели – в проценты).
• Оставить без изменения max-width, то есть основную ширину, остальные выразить в %, разделив их на главную (родительскую).
•  Изменить размеры шрифтов на em, найдя частное между нужными и стандартными. Если по умолчанию они 16px, а вам нужно 24, получится 24/16 = 1,5 em.
• Прописать в CSS свойство «height: auto», благодаря ему картинки будут автоматически масштабироваться (правда, без изменения веса).

Это основные мероприятия, после них останется найти точки «перелома» – те, в которых наблюдаются перестройки шаблона. Искать их следует, постепенно уменьшая размер окна Google Chrome, и как только оформление перестанет корректно показываться, зафиксировать первую breakpoint в файле «style.css», а затем следующую и так до конца. Отступы блоков обнуляются.

Когда вы сделаете все это, то увидите, как элементы подстраиваются под различные размеры экрана.

Обязательно ли использовать Adaptive Web Design?

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

---