Всеобщая «мобилизация»: переходим на адаптивный дизайн. Какой вариант и для чего подходит

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

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

Что такое отзывчивый дизайн

Отзывчивый дизайн (Responsive web design или RWD) — подход к созданию дизайна, при котором сайт разрабатывается с расчетом на то, чтобы обеспечить наиболее простое его использование: удобный просмотр сайта с минимумом ресайзов и лишних прокруток — на самом широком спектре устройств. Отзывчивый дизайн обладает следующими особенностями:

• При верстке отзывчивого дизайна используются исключитьельно HTML и CSS — без подключения JavaScript для определения «отзвычивости» элементов дизайна.
• Отзывчивая верстка определяет, как будут выглядеть элементы сайта на разных устройствах; однако эти элементы не скрываются/не заменяются другими, а их поведение, равно как и выполняемые ими функции, не меняется.
• Три основных принципа отзывчивого дизайна:
• расположение всех элементов в рамках модульной сетки;
• все элементы верстки и медиа-файлы (в т.ч. изображения) являются «резиновыми» (flexible) — их размеры зависят от размера экрана;
• работа с Media queries — модулем CSS3, позволяющим задавать разные стили (или даже таблицы стилей) в зависимости от разрешения экрана, его размеров и прочих харатеристик.
• Отзывчивый дизайн создается с использованием адаптивной разметки (не путать с адаптивным дизайном). Адаптивная разметка (adaptive layout) заключается в том, что на сайте создается несколько стилей, вариантов расположения элементов на модульной сетке и несколько вариантов стилей элементов дизайна. Эти варианты сменяют друг друга при изменении размеров экрана, при этом образуются некие точки перехода между разными видами разметки/стилей сайта.
• Отзывчивый дизайн не подразумевает работы с объектной моделью элементов на странице, не подразумевает смену иерархии/вложенности блоков и объектов при изменении вида разметки.

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

Адаптивный дизайн (Adaptive web design или AWD) — это дизайн, основанный на операциях с разными макетами сайта или его разметкой для обеспечения наилучшего его использования на определенных, заданных заранее устройствах и разрешениях экрана.

• В случае адаптивного дизайна элементы сайта могут скрываться, заменяться другими; могут меняться поведение и функции отдельно взятых элементов веб-сайта.
• В адаптивном дизайне повсеместно используется JavaScript для управления поведением и функциями объектов на сайте.
• Адаптивный дизайн требует работы с объектной моделью элементов на странице, подразумевает смену их иерархии/вложенности на разных устройствах.
• Не является обязательным обеспечение одинакового вида сайта и его функционала в разных браузерах. Возможно использование новых технологий, не поддерживаемых старыми версиями программ — потому что дизайн, как было сказано выше, адаптируется под определенные типы устройств.

Путаница в определениях

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

Адаптивная разметка и адаптивный дизайн — это кардинально разные вещи. Адаптивная разметка сайта подразумевает изменение стилей элементов на разных устройствах и используется в отзывчивом дизайне. Адаптивный же дизайн — это отдельный подход к проектированию и созданию фронтенда веб-сайтов.

Особенности подходов

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

На практике

На практике Responsive, отзывчивый дизайн, встречается достаточно часто, в отличие от адаптивного. Что и очевидно: ведь первый легче в реализации и освоении.Большинство шаблонов, которые продаются на маркетплейсах, являются отзывчивыми, а не адаптивными.
Адаптивный же дизайн чаще используется в серьезных и многофункциональных продуктах. Самые очевидные примеры: в мобильная версия сети Вконтакте, почты от Google.

P.S. Если вы обратите внимание, то заметите, что верстка нашего сайта является примером responsive дизайна. Чтобы убедиться в этом, на компьютере попробуйте менять ширину окна браузера — и вы заметите, как стиль разметки сайта постепенно трансформируется, переходя в мобильный вид.

Приветствую вас, случайные посетители и постоянные читатели блога сайт!

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

Краткий план статьи:

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

Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ – это адаптивная с помощью CSS.

Как сделать адаптивную верстку сайта

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

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

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

Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

Но ведь этого не может быть!

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

Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

Адаптивная верстка CSS media запросы

Чтобы сделать адаптивную с помощью CSS, необходимо использовать media запросы.

Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

@media screen and (min-width: 1440px) and (max-width: 1599px){ }

Это код означает, что стили заключенные между “{ } ” будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.

То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.

Самые важные разрешения экрана, при адаптивной верстке

• 320 px - Мобильные устройства (портретная ориентация);
• 480 px - Мобильные устройства (альбомная ориентация);
• 600 px - Небольшие планшеты;
• 768 px - Планшеты (портретная ориентация);
• 1024 px - Планшеты (альбомная ориентация)/Нетбуки;
• 1280 px и более - PC.

Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.

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

Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

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

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

Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.

Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

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

В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую , чтобы не упустить этот момент.

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

Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.

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

Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.

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

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

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

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

Понятие адаптивности

«Что такое адаптивный дизайн и к чему он адаптируется?» - может спросить человек несведущий. Я вам отвечу: к виду используемого устройства. Адаптивный дизайн обеспечивает хорошее восприятие веб-страниц на различных гаджетах, подключенных к интернету.

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

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

Стратегия «Mobile First»

Данная стратегия разработки была предложена еще в 2009-м году Люком Вроблевски - автором книг и статей по веб-дизайну, руководителем социальной сети Bagcheck, которую всего через 9 месяцев после создания приобрела компания Twitter Inc.

Предложенный Люком Вроблевски подход к разработке получил название «Mobile First» («Первым делом мобильные») по трем причинам:

мобильная среда позволяет фокусироваться и избавиться от беспорядка, возникающего вследствие «захламления» большого количества места на экране;

мобильный рынок имеет тенденцию к развитию бешеными темпами;

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Таким образом, обеспечивается инновационная и эффективная работа всех видов устройств. Разработчики сайта фокусируются на нуждах пользователей, создают оптимизированные и высокоскоростные страницы, обращают внимание на важный контент. Кстати, подходом «Mobile First» пользуется даже Google.

Контентная стратегия «Content out»

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

Многие из тех, кто не использует стратегию «Первым делом мобильные», отдают предпочтение стратегии «Первым делом контент». Это, конечно, дело правильное, однако, не стоит воспринимать этот призыв буквально и считать, что не следует начинать разработку дизайна до тех пор, пока не будет готов весь контент.

Наполнение должно непрерывно создаваться и обсуждаться как на этапе создания адаптивного дизайна сайта, так и после его завершения! Как сказал известный дизайнер Cennydd Bowles, «дизайн и контент должны идти рука об руку». Они должны дополнять друг друга.

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

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

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

Уделите время созданию скетча и прототипа

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

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

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

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

Надеюсь, данная статья была полезна как опытным, так и начинающим веб-дизайнерам.

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

P.S.: а вы уже подписались на обновления нашего блога?

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Все говорят об адаптивном веб-дизайне. Но значит ли это, что все понимают, для чего он нужен?

Респонсивный дизайн - это не только разработка сайтов для мобильных устройств, здесь речь идет об адаптации макетов под разные размеры экрана (viewports).

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

Важно понимать, что сайт не должен быть построен под конкретный рабочий стол или мобильное устройство. Здесь важна способность макета адаптироваться под различные размеры.

Разочарование пользователей

Некоторые люди думают, что сократить функционал и устранить контент, который они считают несущественным, это является нормальным для пользователя. Но как вы можете быть уверены, что информация, которую вы урезали или перенесли на вторичную страницу, не является контентом, который наиболее важный для меня?!

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

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

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

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

Пошаговое руководство

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

Ключевым элементом гибкости в адаптивном дизайне, является fluid ширина макета. Все, что вам нужно сделать, это создать wrapper, content и column widths, которые будут адаптироваться под различную ширину устройств. В этом нет ничего нового, но сейчас это важнее, чем когда-либо. Чтобы не усложнять задачу, мы создадим fluid страницу, состоящую из навигации, главного изображения и двух колонок, которая учитывает расположение на устройствах различных размеров. Мы, также включили respond.min.js, который позволяет медиа-запросам работать в IE6-8.

Основная HTML структура:

Респонсивный сайт Демо

• Скролл к контенту

Logo

• Главная
• Купить
• Сервис
• Контакты

История

История модели Mercedes SL уходит корнями в 1954 год — именно тогда на автосалоне в Нью-Йорке немцы представили двухдверку Mercedes 190 SL. Можете себе представить уровень эстетического шока посетителей тогдашнего мотор-шоу. Под кузовом пленительной красоты скрывалась укороченная платформа от седана Mercedes W120 Ponton и стальной монокок. Подвеска была полностью независимая — с двухрычажкой спереди и качающимися полуосями сзади. Длина — 4290 мм, расстояние между осями — 2400 мм.

Когда дело доходит до CSS, то установить max-width, будет хорошей идеей, это остановит сайт от масштабирования на огромных экранах, но не будет удерживать от сокращения страниц. Один из основных вопросов при переключении с фиксированной ширины на fluid, это изображения. В CSS, есть простое решения этой проблемы. Просто установите ширину изображения на 100%. Также добавим auto для высоты изображений, чтобы избежать сплющенных изображений в Опере и Сафари на малых экранах:

/* Макет */ #wrapper { width: 96%; max-width: 920px; margin: auto; padding: 2%; } #main { width: 60%; margin-right: 5%; float: left; } aside { width: 35%; float: right; } /* Logo H1 */ header h1 { height: 98px; width: 216px; float: left; display: block; background: url(images/sllogo.png) 0 0 no-repeat; text-indent: -9999px; } /* Навигация */ header nav { float: right; margin-top: 40px; } header nav li { display: inline; margin-left: 15px; } header nav ul li a { text-decoration:none; color:#333;} #skipTo { display: none; } #skipTo li { background: #ccc; } /* Главная картинка*/ #banner { float: left; margin-bottom: 15px; width: 100%; } #banner img { width: 100%; height: auto; }

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

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

Переключение главной навигации

Основная причина, почему вам надо сменить навигацию, это происходящая минимизация, которая может привести к нечитаемости и трудности нажатия кнопок. Используя этот метод, вы облегчите жизнь пользователя. Вы также можете заметить в коде, что мы внесли изменения в #main и aside разделы, для соединения их в одну колонку.

/* Медиа-запросы */ @media screen and (max-width: 480px) { #skipTo { display: block; } header nav, #main, aside { float: left; clear: left; margin: 0 0 10px; width: 100%; } header nav li { margin: 0; background: #ccc; display: block; margin-bottom: 3px; } header nav a { display: block; padding: 10px; text-align: center; }

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

Чтобы разрешить медиа-запросам войти в полный эффект, обычный мобильный, оптимизированный, респонсивный сайт должен содержать что-то вроде следующего:

Cвойство width, отвечает за размер области просмотра. Он может быть установлено на определенное число пикселей, width=960, или на device-width значение, что является шириной экрана в пикселях в масштабе 100%. initial-scale свойство управляет масштабом при первой загрузке страницы. maximum-scale, minimum-scale, и user-scalable свойства, контролируют то, как пользователи могут масштабировать страницу (больше/меньше).