Адаптивная версия. Записывается мета тег viewport так

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

Responsive Design (RWD) — отзывчивый дизайн — проектирование сайта с определенными значениями свойств, например, гибкая сетка макета, которые позволяют одному макету работать на разных устройствах;

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

1. Приемы отзывчивого дизайна

Философия отзывчивого веб-дизайна заключается в том, что сайт был удобным для просмотра с любого устройства, независимо от размера экрана. Фраза отзывчивый дизайн была придумана Ethan Marcotte в 2011 году. Главная особенность отзывчивого веб-дизайна — за счёт подвижной (fluid) сетки макет автоматически реагирует на изменение размеров экрана, раздуваясь или сужаясь, как воздушный шар.

Отзывчивый дизайн (англ. Responsive Web Design ) объединяет в себе три методики — гибкий макет на основе сетки, гибкие изображения и медиазапросы .

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

Гибкость текстового содержимого достигается путем вычисления размеров шрифта относительно размера шрифта в браузерах по умолчанию 16px , например для фиксированного размера font-size: 42px относительный размер равен 42px / 16px = 2.625em .

Проблема гибких изображений решается с помощью правила img {width: 100%; max-width: 100%;} для всех картинок на сайте. Это правило гарантирует, что изображения никогда не будут шире, чем их контейнеры и никогда не превысят своих истинных размеров на больших экранах.

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

Рис. 1. Отзывчивый дизайн Дополнительные приёмы отзывчивого дизайна

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

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

Рис. 2. Pinterest, макет на основе карт

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

Рис. 3. Hotellook, минимализм в веб-дизайне

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

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

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

2. Настройка области просмотра с помощью мета-тега viewport

Чтобы мобильные браузеры для операционных систем Android и iOS не изменяли автоматически размер страниц сайта, используется специальный тег с атрибутом name="viewport" . В данном теге допускается устанавливать определенное значение для параметров width и initial-scale:

— initial-scale=1 говорит о том, что размер страницы в браузере будет равен 100% величины области просмотра. То есть, соотношение между физическим пикселем и css пикселем будет 1:1;

— width=device-width говорит о том, что ширина страницы будет равна 100% ширины окна любого браузера. То есть, ширина страницы сайта соответствует ширине устройства, поэтому её не надо масштабировать.

В данном примере содержимое в окне браузера будет в 2 раза больше по сравнению с физическим размером.

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

Данный код позволит увеличивать ширину страницы до величины, равной 3-х кратной ширине экрана устройства и уменьшать её до половины ширины экрана устройства.

Лишить пользователей возможности масштабирования можно с помощью атрибута user-scalable:

3. Универсальные шаблоны

Большая часть макетов, используемых для создания отзывчивого веб-дизайна, относятся к одной из пяти категорий шаблонов, определенных Люком Вроблевски:
Mostly Fluid (Наиболее резиновый),
Column Drop (Столбцы друг под другом),
Layout Shifter (Двигающийся макет),
Tiny Tweaks (Крошечные изменения),
Off Canvas (Вне экрана).
В некоторых случаях на странице может использоваться сочетание шаблонов, например Column Drop и Off Canvas.

3.1. Mostly Fluid

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

3.2. Column Drop

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

3.3. Layout Shifter

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

3.4. Tiny Tweaks

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

3.5. Off Canvas

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

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

В отличие от отзывчивого дизайна, адаптивный дизайн (Adaptive Web Design) ориентируется на размеры устройств. Он использует несколько статичных макетов для разных типов устройств (мобильные устройства, планшеты, настольные компьютеры), базируясь на контрольных (переломных) точках. То есть макеты загружаются при определенных размерах окна браузера устройства, а переходы между макетами происходят скачкообразно, а не плавно.

Обычно адаптивные макеты имеют шесть вариантов макетов в зависимости от ширины экрана:
320
480
760
960
1200
1600.

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

Основные приёмы адаптивного дизайна

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

Используйте сетку — структура из 12-ти колонок является более предпочтительной для управления шириной колонок и отступами между ними.

5. В чём разница между отзывчивым и адаптивным веб-дизайном
Рис. 4. Отзывчивый и адаптивный дизайн на разных устройствах

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

Поэтому основное отличие между этими приёмами — отзывчивый дизайн — один макет для всех устройств, адаптивный дизайн — один макет для каждого вида устройства.

6. Полезные сервисы и инструменты

Android-эмулятор для Windows, Linux и Mac OS X. iOS-симулятор доступен только для пользователей Mac OS X и является частью пакета Xcode (его можно бесплатно скачать из Mac App Store).

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

Таблицы соответствия физических размеров устройств css-значениям высоты и ширины, а также значение pixel-ratio для мобильных устройств.

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

CSS-фреймворк на основе 12-ти колоночной разметки, максимум 960px. Поддерживается Chrome, Safari, Firefox, IE 7 и выше, мобильными версиями браузеров.

Набор инструментов для разработки веб-приложений. Язык LESS, 12-ти колоночная адаптивная разметка, поддержка мобильных устройств, планшетов и мониторов, множество компонентов, кнопок, выпадающие меню, собственный стиль полей ввода, списков, заголовков, меток, иконок, алерты, табы, прогресс-бары, всплывающие подсказки, «аккордеон», «карусель», и так далее, различные Javascript-плагины, поддержка Scaffolding, в том числе применение Bootstrap-стиля к уже созданным HTML.

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

Респонсивный дизайн - это не только разработка сайтов для мобильных устройств, здесь речь идет об адаптации макетов под разные размеры экрана (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 свойства, контролируют то, как пользователи могут масштабировать страницу (больше/меньше).

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

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

А вы знаете, каким видят ваш сайт пользователи мобильных устройств? К счастью, для проверки есть отличный сервис — responsinator.com

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

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

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

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

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

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

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

Как сделать адаптивный дизайн для своего сайта

В зависимости от вашего бюджета и знаний CSS/HTML, вариантов может быть несколько.

Заказать адаптивную верстку у фрилансера

Самый правильный, на мой взгляд, вариант, и он же самый непопулярный. Потому что удовольствие не из дешевых. И все же, если позволяют средства, и нет желания разбираться в тонкостях верстки, лучше найти студию или фрилансера, который адаптирует ваш шаблон под мобильные устройства или сделает новый. А как проверить его работу на устройствах с разными разрешениями, вы уже знаете — responsinator.com в помощь.

Найти готовый дизайн

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

• www.templatemonster.com — одна из самых популярных коллекций платных шаблонов для разных CMS и просто HTML-сайтов.
• www.templatemo.com — множество бесплатных вариантов современного дизайна.

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

Использовать фреймворки

Фреймворк (framework) — можно сказать, каркас шаблона, его основные файлы и сетка блоков. Дизайнеры любят их за удобство в работе и экономию времени, потому что готовая «рыба» шаблона позволяет не тратить время на рутину. Если вы умеете работать с фреймворками, использовать их для создания адаптивного дизайна — отличное решение.

Огромный список адаптивных фреймворков на любой вкус вы найдете на Хабре . Но большинство из них достаточно сложные в использовании и тяжелые в объеме. Поэтому тем, кто любит минимализм я рекомендую другой список легких адаптивных фреймворков от Beloweb.ru . Заодно присмотритесь к блогу, здесь очень много полезных «вкусняшек» для дизайнеров и верстальщиков.

Сделать верстку самому

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

Мета-тег viewport
Который определяет тип устройства, с которого посетитель зашел на сайт и установит верную ширину экрана. Просто скопируйте этот код в head своего сайта.

Правило @media
Благодаря которому мы можем прописать разные стили для одних и тех же блоков в своем css-файле. Выглядит это примерно так:

#left{ width: 600px; float: left; margin-right: 10px; } #right{ width: 400px; float: right; } @media only screen and (max-width: 1010px){ #left, #right{ width: 98%; float: none; margin: 10px auto; } }

В этом примере блок #left имеет ширину 600 пикселей и будет располагаться слева от блока #right шириной 400 пикселей. Но если разрешение монитора меньше 1010 пикселей, мы убираем обтекание у обоих блоков и растягиваем их на 98% ширины экрана.

И вот таким образом нужно прописать правила под следующие размеры экранов:

• 320px дляiPhone 3-5 в вертикальном положении
• 480px для iPhone 3-4 в горизонтальном положении
• 568px для iPhone 5 в горизонтальном положении
• 384px для смартфона в вертикальном положении
• 600px для смартфона в горизонтальном положении
• 768px для iPad в горизонтальном положении
• 1024px для iPad в вертикальном положении

Полный список разрешений можно найти на responsinator.com или в отчете Яндекс.Метрики для вашего сайта (раздел Технологии/Разрешения дисплеев). Одним словом, тем, кто знаком с версткой сайтов, не трудно будет разобраться в этом вопросе.

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

Кстати, если читаете статью с мобильного, напишите, все ли на месте, все ли удобно? А на сегодня все. Если у вас остались вопросы или дополнения — добро пожаловать в комментарии, они как обычно открыты для всех.

Такие термины, как отзывчивый (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 дизайна. Чтобы убедиться в этом, на компьютере попробуйте менять ширину окна браузера — и вы заметите, как стиль разметки сайта постепенно трансформируется, переходя в мобильный вид.

Сегодня большинство людей выходят в сеть через мобильные гаджеты - планшеты, телефоны, в связи с этим оптимизация сайта также выходит на новый уровень. Если пользователь заходит и видит, что сайт не оптимизирован для мобильных устройств: изображение невозможно просматривать, кнопки съехали, шрифты маленькие и нечитабельные, дизайн перекошен - 99 из 100%, что он выйдет и начнет искать другой более удобный. А поставит галочку, что ресурс нерелевантен, т. е. не соответствует поисковому запросу. Поэтому дизайн страницы должен быть обязательно адаптирован под различные мобильные устройства. Что такое мобильная версия сайта, как сделать ее, и какой способ лучше применить? Подробнее в этой статье.

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

Способ первый - адаптивный дизайн

Адаптивные шаблоны предполагают изменение картинки сайта в зависимости от размера экрана. Как правило, они задаются на стандартные 1600, 1500, 1280, 1100, 1024 и 980 пикселей. Для реализации применяют Queries. Сам при этом не меняется.

К преимуществам этого способа стоит отнести:

• удобную разработку, поскольку структура сама подстраивается под параметры экрана, а любое обновление не требует разработки дизайна с нуля, достаточно подправить CSS и HTML;
• один адрес URL - пользователю не нужно запоминать несколько названий, отсутствует необходимость редиректа (перенаправления с одного адреса на другой), который может усложнить работу вебмастера, да и поисковику легче сортировать и ранжировать ресурс с единым адресом.

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

• Адаптивный дизайн не поддерживает те же задачи на мобильном устройстве, что и на ПК. Если это, например, мобильная версия сайта банка, где пользователю вероятнее будет важна информация о курсе валют или ближайших банкоматах, то такого дизайна вполне достаточно. Но если это сложный структурированный ресурс с множеством разделов и подразделов, то вряд ли придется по душе посетителям.
• Медленная загрузка превращает любимый сайт в ненавистный. Особенно это касается ресурсов, где в изобилии присутствуют анимация, видеоролики, всплывающие окна и прочие активные элементы. Из-за большого веса страница просто будет “тормозить”, пользователь - злиться и уходить, а поисковые позиции сайта - падать.
• Невозможность отключения мобильной версии - еще один весомый недостаток. Если какой-то элемент скрыт такой версткой, вы ничего не сможете сделать, чтобы его открыть, в отличие от сайтов, где ее можно отключить и перейти на обычный домен.

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

Способ второй - отдельная версия сайта

Этот метод очень распространен и часто с успехом делает сайт на мобильном устройстве удобнее для восприятия. Суть его в том, чтобы создать отдельную версию страницы, нарисованную под приложение и расположенную на отдельном URL или поддомене, например, m.vk.com. При этом основной функционал сохраняется, просто иначе выглядит дизайн сайта. Преимущества такого способа налицо:

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

Но и здесь не обошлось без недостатков:

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

В целом отдельный мобильный сайт оправдывает себя и является самым распространенным способов адаптации ресурса под мобильные устройства. Он популярен среди крупных интернет-магазинов, например, Amazon.

Третий способ - RESS-дизайн

Поисковик Google активно поддерживает это направление мобильного дизайна. Это самый сложный, затратный, но действенный метод адаптировать сайт под телефон или планшет. Называется он RESS. Это таргетирование ресурса в мобильное приложение, которое можно скачать для каждого устройства отдельно. Для андроида - с GooglePlay, а для Apple - с iTunes.

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

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

Самый дешевый способ сделать мобильный сайт

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

Скачайте специальные шаблоны (плагины) для адаптивного дизайна. Например, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile и другие. Они помогут корректнее отображать сайт в телефоне, при этом вы получите несколько подсказок, что следует исправить для лучшей адаптации странички к мобильной версии.

Конечно, данный метод вряд ли подойдет для серьезных ресурсов. Скорее, это бесплатная возможность предназначается для мелких и самых простых сайтов, блогов, новостных лент. Не стоит также забывать, что поисковик Google, так же как и "Яндекс", сегодня предъявляет серьезные требования к мобильным версиям, поэтому есть огромная вероятность понизить свои позиции, используя такой метод.

При таком способе, вероятнее всего, будет обрезаться реклама и всплывающие баннеры, зато страница будет загружаться быстро и без “лагов”.

Принципы создания мобильных версий

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

Убираем все лишнее

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

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

Выравнивание

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

Объединение

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

И разъединение

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

Перечни

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

Фиксированный удобен в том случае, если пользователь точно знает, что ищет. Например, город, номер или дату. Второй вариант подойдет для длинных сложных названий или для случаев, когда есть множество вариаций у одного и того же названия, а каждый приближает пользователя на шаг к цели. Вариант с автоподстановкой чаще используется в том случае, когда посетителю нужна помощь. Например, сайт по вязанию предлагает купить спицы. Пользователь вводит поисковой запрос “Металлические спицы”, а в подсказке видит “Спицы 5 мм”, “Спицы 4,5 мм” и т. д.

Автозаполнение

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

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

Все читается, все просматривается

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

Немного статистики

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

Цифры следующие. Сегодня гаджетами пользуются 87% населения, видимо, кроме самых маленьких детей и некоторых людей пожилого возраста. Экономисты прогнозируют рост мобильной коммерции в 100 раз на ближайшие 5 лет. При этом только 21% сайтов адаптирован под работу с мобильными устройствами. Значит, интернет-трафик и рынок электронной торговли занят лишь на малую 5-ю часть.

Вдумайтесь в эти цифры. Имеет ли смысл адаптировать свой ресурс? Конечно да. Более того, пока есть так много свободного места на этом рынке, вы можете занять свой собственный сегмент на нем.

Где нужна мобильная версия

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

Без мобильной версии не могут существовать:

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

Вместо заключения

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

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