Смарт ТВ 

Адаптивный и отзывчивый веб-дизайн. Дискуссии и различные точки зрения на адаптивный веб-дизайн. Где нужна мобильная версия

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

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.

Адаптивный дизайн современного сайта является одним из основных показателей его качества.

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

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

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

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

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

Основными критериями оценки удобства просмотра являются:

  1. Зона просмотра.
  2. Ширина контента.
  3. Размер шрифтов, картинок, окон для видео.
  4. Активные элементы.

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

Как сделать Ваш сайт адаптивным

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

  • Адаптивный шаблон сайта.
  • Мобильная версия сайта.
  • Установка специального приложения на устройстве пользователя.

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

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

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

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

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

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

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

Адаптивная верстка сайта

Для создания адаптивного дизайна придется прибегнуть к технологии адаптивной верстки. Ее суть состоит в следующем:
Сделать шаблон «резиновым»

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

Для этого ширина страницы задается свойством css max-width вместо width, а уже относительно этой величины, ширину других элементов подбирают в процентах (%).

Определить «контрольные точки» ширины экрана

Определиться с контрольными точками (КТ) ширины экрана необходимо для планирования дальнейших действий.

Например.
Максимальная ширина экрана 1000 пикселей. Ширина экрана планшета – 800 пикселей, смартфона – 420 пикселей.

Эти контрольные точки (КТ) могут быть разными для различных типов сайтов. Иногда достаточно одной, к примеру 600 пикселей, а качество просмотра на более мелких разрешениях обеспечивается за счет «резиновости» шаблона.

Планирование компоновки экрана для каждой КТ

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

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

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

Медиа запросы

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

@media only screen and (max-width:520px) { .art-Header-jpeg{ height: 80%; display: none; } .art-Logo{ position: fixed; top: 10px; } .art-Logo-text{ display: none; } ........... операторы css ..... }

Адаптивный шаблон для блогов на WordPress

Адаптивный шаблон для своего блога на WordPress можно обеспечить несколькими способами.

  1. Установить соответствующий плагин.
  2. Купить готовый адаптивный шаблон.
  3. Адаптировать существующий шаблон самостоятельно или заказать услугу специалисту.

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

Купить современный адаптивный шаблон в интернете тоже довольно просто, были бы деньги. Но надо, чтобы и сам шаблон Вам понравился и отвечал всем Вашим пожеланиям.

Короче я остановился на третьем варианте и решил адаптировать свой шаблон самостоятельно.

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

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

И уже начал склоняться к покупке готового шаблона, но в этот момент получил информацию о курсе двух Андреев Бернацкого и Кудлая «WordPress-Мастер от Личного блога до Премиум шаблона». Один из блоков этого курса содержал уроки по адаптации готового шаблона для мобильных устройств.

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

Сервис Google по проверки скорости загрузки сайта для мобильных и стационарных устройств — https://developers.google.com/speed/pagespeed/insights/
Здесь же нам дают рекомендации по мероприятиям для ускорения загрузки Вашего сайта.

Хотел кратко описать еще несколько сервисов. но наткнулся на толковую подробную статью и решил не напрягаться, а дать Вам ссылку на нее — http://habrahabr.ru/post/189726/ .

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

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

Адаптация под десктоп

Для начала делаем адаптацию под десктоп. Это базовый этап, от него потом и начинаются танцы с бубном. Многие ошибочно воспринимают мир, думая, что с отображением сайта на обычных компьютерах у них нет проблем, так как шаблон кто-то верстал, и он ровно смотрится при обычном разрешении. При разрешении вашего монитора да, а как на большем экране, как вы смотритесь с absolute и пикселями на экране с разрешением 1920x1080? Цель адаптации дизайна – нормальное отображение сайта на мобильных и отсутствие косяков на больших экранах.

Что делаем? Главное – переводим все большие значения в css шаблона из пикселей (px) в проценты (%). Тут есть несколько правил:

  1. - Изменяем px на % только для больших значений, менять 5 px на 1% (для примера) не надо,
  2. - Все работы делайте через Файербаг, потом переносите значения в реал.

Немного для общего понимания. У вас есть сайт, на котором ширина страницы 1000 px, в ней есть три блока – центральный 800 px и два боковых сайтбара по 100 px. Значит после замены на проценты размер страницы станет 100%, центральный контейнер 80% и боковые блоки по 10%. Грубо, но понятно. Теперь чуть больше конкретики.

У меня до адаптации (сохранил для истории старый файл CSS) основной контейнер был прописан в стилях так:

#container{margin:0 auto;width:1100px; …

После адаптации стал таким:

#container{margin:0 auto;width:77%;overflow: hidden !important; …

Топ-меню изменилось с:

Top-menu>ul>li ul{width:155px; …

Top-menu>ul>li ul{width:90%; …

А смещение блока content реализовано с:

#content{margin:0 220px; …

#content{margin:0 20% …

Обратите внимание на код:

overflow: hidden !important;

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

overflow-x: hidden !important;

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

CSS под мобильные устройства

Базу создали, кстати, это самый сложный этап, теперь надо добиться, чтобы сайт корректно отображался во всех мобильных устройствах. Предыдущих манипуляций мало, так как под маленький экран все сжать в процентах не получится. Согласитесь, разглядеть на смартфоне при разрешении 320 px по ширине сайтбар в 10% невозможно.

Нам понадобится использовать @media screen and, которые вносят изменения в стили для устройств с конкретным разрешением. Я вначале определил с помощью уменьшения экрана браузера, на каком разрешении у меня начинаются проблемы с отображением. Сужая экран, я нашёл свою точку «кривизны», она начинается при ширине 1000px, значит прописывать основные мобильные стили надо отсюда – всё, что больше будет отображаться в стилях обычного десктопа, что меньше отдельными стилями.

Пример @media screen and

Я прописал CSS под мобильные устройства на шаблоне Joomla 1.5 так:

@media screen and (max-width:500px){body, tbody{-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}

@media screen and (max-width:400px){td{word-break:break-all;}

@media screen and (max-width:1000px){td{word-break:break-all;} .page-numbers, #footer, #navigation, #header,.logo,.nav-box {display: none !important;} #content {position: auto; width: 80%;margin-bottom: 0;margin-left: 10%;margin-right: 20%;} #container { width: 90% !important;} .content-box {widht:110%} .content-box h1 {font-size: 130%;} .content-box h2 {font-size: 110%;} .content-box h3 {font-size: 120%;} .content-box h4 {font-size: 100%;} .top-menu>div {padding-right: 0px !important;} img{max-width:96% !important;height:auto !important;}

Немного конкретики по коду.

При ширине экрана меньше 1000 px у меня перестают отображаться боковые сайтбары, шапка, пагинация и футер. Моё имхо – они в мобильной версии не нужны. Это делает код:

Page-numbers, #footer, #navigation, #header,.logo,.nav-box {display: none !important;}.

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

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

img{max-width:96% !important;height:auto !important;}.

Для них указано, что максимальный размер картинки по ширине 96% (с отступами красиво), а высота идёт на автомате.

Конкретика закончилась, ещё раз по общему смыслу адаптации сайта (дизайна) через CSS.

  1. - Изменяем большие значения px на %,
  2. - Прописываем отдельно @media screen and для мобильных устройств.

Через @media screen and обязательно закрывайте ненужные для мобильного блоки для вывода, но переводите в % те значения, которые некорректно отображаются, так как их оставили в пикселях в десктопной версии CSS.

Как результат – удобство для пользователя при работе с Joomla Mobile было 65-70%, при адаптивном дизайне на CSS, стало 99%. Выводы на лице – проверка Яндекса и Goole на адаптивность не проходилась, сейчас проходит на ура.

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

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

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

А также данная технология предполагает разработку одной версии веб-сайта для всех устройств, а не нескольких.

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

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

  • Адаптивный шаблон сайта , способность шаблона подстраиваться под различные разрешения экранов устройств от монитора компьютера до смартфона;
  • Адаптация и перемещение блоков контента , способность блоков контента в зависимости от разрешения экрана устройства принимать необходимые размеры, а также способность передвигаться на другую позицию в макете;
  • Адаптация изображений , способность изображений менять размер в зависимости от разрешения экрана или загружать более адаптированное изображение с меньшим весом и размером;
  • Использование гибкой сетки , позволяет максимально быстро изменять конструкцию макета;
  • Скрытие менее важных блоков , на небольших экранах некоторые блоки могут скрываться;
  • Переработка юзабилити элементов навигации , так как на мобильных устройствах в связи с небольшим разрешением элементы навигации становятся менее кликабельными, их перерабатывают, делая удобно-используемыми;
  • Упрощение ряда элементов на веб — странице , некоторые элементы упрощаются для использования на мобильных устройствах;
  • Адаптация видео контента , также следует учесть и адаптацию видео;
  • Использование медиа — запросов (media query), позволяют создавать адаптивный макет;
  • Сначала мобильные (mobile first), проектирование адаптивного дизайна начинается с макета для мобильных устройств.

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

Размеры макетов адаптивного дизайна

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

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

Если следовать принципу сначала мобильные то будут такие размеры разрешений, под которые необходимо разрабатывать макет 320px / 480px /768px / 1024px / 1280px может быть и больше зависит от задач.

Картина выглядит примерно, таким образом, но зачастую под какие-то разрешения нет необходимости создавать макет, к примеру, под 480px. если макет не ломается на промежутке 768 — 320px.

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

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

Мedia query и viewport в адаптивном дизайне

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

Записывается мета тег viewport так:

  • width=device-width — означает что ширина страницы сайта устанавливается в соответствие ширине экрана устройства.
  • initial-scale=1.0 — данный атрибут скажет браузеру установить соответствие масштаба 1:1 для пикселей, что означает не масштабировать.

Слева без мета-тега, справа с использованием мета-тега viewport.

Также для мета-тега могут устанавливаться другие атрибуты и параметры.

Media Queries

В разработке адаптивных сайтов главную роль играют css3 media queries (медиа — запросы). Медиа – запросы включают в себя медиа — тип (принтеры, смартфоны, экраны, телевизоры, проекторы и др.) и условия, которое может принимать в свою очередь истину или ложь (true, false). В зависимости от того верный ли медиа — тип и выполняется ли условие будут применяться различные стили css. Если будет верно, то будут применяться те стили, которые прописаны в этом медиа – запросе, если же будет ложным, то будут применяться обычные стили css.

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

Записывается следующим образом:

@media screen and (max-width: 1000px) { .class { свойство: значение; } }

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

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

  • max-width: width — означает, что если ширина окна браузера меньше заданной ширины, то выполняется условие и применяются соответствующие стили (пример: max-width: 768px, означает, что если ширина окна браузера меньше 768px то следует использовать стили, указанные в медиа — запросе).
  • min-width: width — означает, что если ширина окна браузера больше заданной ширины, то условие выполняется, и применяются указанные стили в запросе (пример: min-width: 480px).

Но также могут использоваться и другие функции: color, device-width, grid, height, orientation: landscape, orientation: portrait, resolution и другие.

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

  • 320px - мобильные
  • 480px - мобильные
  • 768px - планшеты
  • 1024px - планшеты, нетбуки
  • 1280px и более - персональные компьютеры.

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

В медиа – запросах также применяются и логические операторы такие как:

  • and – логическое И, применяется для объединения нескольких условий (пример: @media print and (color) { … }).
  • not – логическое НЕ, применяется для отрицания условия (пример: @media not all and (color) { … }).
  • only – применяется для старых браузеров, не поддерживающих медиа — запросы (пример: @media only screen and (max-width: 1300px) { … }).

Media queries прописываются в конце файла стилей, после всех основных стилей css.

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

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

  1. Первым делом делаем резервную копию шаблона (темы), на всякий случай.
  2. Далее нам потребуется программа для редактирования css, это может быть любой редактор кода, например brackets от adobe он бесплатный или Notepad++.
  3. А также браузер google chrome, с его инспектором кода (вызывается клавишей F12).

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

Таковыми являются px, необходимо перевести их в %, а шрифты задать в em. В основном это касается ширин и шрифтов.

Ширину основного контейнера wraper {max-width: 960px;} оставляем без изменения, если записано width измените на max-width. Для остальных контейнеров будем менять ширину на % отношение. Переводить мы будем по формуле:

Размер контейнера (px) / размер основного контейнера (родителя) в (px) * 100% = результат (%)

Например, статичный контейнер тела сайта 720px размер основного контейнера (его родителя), к примеру, стандартный 960px, тогда получим следующее 720/960*100=75% .

Таким образом, мы переведем нашу статичную верстку в резиновую. Далее переведем наши шрифты, если они в px в em для этого опять же воспользуемся формулой:

Размер шрифта (px) /16px (стандартный размер) = размер шрифта (em)

Например, размер шрифта 32рх, тогда 32/16=2em.
После чего сделаем наши изображения адаптивными. Для этого в css пропишем следующие свойства и значения.

Img{ max-width:100%; height: auto; }

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

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

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

Откроем в нем наш макет, нажмем клавишу F12 и будем уменьшать размер окна браузера. В верхнем правом углу у нас будут писаться размеры окна, нас интересует первое значение, оно указывает на ширину. Необходимо сжимать до тех пор, пока дизайн не перестанет корректно отображаться. В том размере, когда макет выглядит не корректно, мы и будем создавать контрольную точку.
Определив первую переломную точку, запишем ее в файл style.css в самый конец после всех основных стилей. Допустим наш макет, имеет левый сайдбар и контентную часть с анонсами, и при 910px сайт начинает отображаться не корректно. В данном случае мы запишем следующий медиа запрос.

@media only screen and (max-width: 910px){ /* контентную часть мы делаем во всю ширину, отменяем выравнивание*/ section { width: 100%; float: none; } /* сайдбар мы делаем также во всю ширину, отменяем выравнивание*/ aside{ width: 100%; float: none; } }

Если у этих блоков есть какие-то отступы (margin, padding) их следует, либо обнулить, либо учесть при написание ширины. К примеру, padding: 2%; тогда ширину запишет следующим образом width: 96%; .

Таким образом, мы адаптировали наш макет на разрешение меньше 910px. Если окно браузера будет меньше 910px, то контент станет во всю ширину, а сайдбар отпустится под контентную часть и станет также во всю ширину.

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

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

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

Ну, вот вроде и все что хотел рассказать в этой статье, хотел написать немного об адаптивном дизайне, а получилось довольно объемно, надеюсь, материал будет вам полезен.

Сегодня большинство людей выходят в сеть через мобильные гаджеты - планшеты, телефоны, в связи с этим оптимизация сайта также выходит на новый уровень. Если пользователь заходит и видит, что сайт не оптимизирован для мобильных устройств: изображение невозможно просматривать, кнопки съехали, шрифты маленькие и нечитабельные, дизайн перекошен - 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. Для этого нужно выбрать один из вышеперечисленных способов редизайна - адаптивный шаблон, создание нового сайта на поддомене и переход к нему путем редиректа, использование бесплатных шаблонов или создание мобильного приложения, с помощью которого пользователь сможет удобнее заходить и находиться на странице.