Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.
Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.
По этой причине мы составили обзор ресурсов, полезных при создании адаптивных сайтов. В обзор вошли подробные руководства, подходы, инструменты, статьи, содержащие практические советы, необходимые для создания вашего собственного адаптивного сайта.
Техники Responsive web design 1. CSS Transitions and Media QueriesCSS Transitions и Media Queries
Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?
Адаптивные изображения и видео 5. Fluid ImagesРезиновые изображения (масштабирование средствами браузера)
Резиновые изображения — одна из центральных тем в адаптивном веб-дизайне. В статье Ethan Marcotte приведен подробный обзор создания их с помощью классического фрагмента кода img { max-width: 100%; } , а также все необходимые детали, необходимые для началы работы.
Адаптивные письма электронной почты 14. Optimizing Your Email for Mobile Devices With the Media QueryОптимизация электронной почты для мобильных устройств с помощью Media Queries
Для просмотра больших писем часто необходима горизонтальная прокрутка, особенно когда к письму приложено большое изображение. В данном исследовании Campaign Monitor объясняет, как электронные письма могут быть оптимизированы для мобильных устройств с помощью Media Queries и предложено несколько полезных методов и фрагментов кода для использования на практике.
Инструменты для адаптивного веб-дизайна Вы можете проектировать адаптивный дизайн с нуля или использовать инструменты, перечисленные ниже, чтобы ускорить и упростить процесс его создания.Это быстрый и малый по объему Polyfill (фрагмент кода, добавляющий неподдерживаемый браузером функционал) создан Scott Jehl для поддержки свойств min-width и max-width из CSS3 Media Queries в IE6-IE8 и выше.
Используйте информацию из этого маленького интрумента для создания адаптивного сайта.
Инструмент для быстрого прототипирования адаптивного дизайна. Вы можете спроектировать CSS для различных популярных размеров экранов, ориентаций и браузеров, будь то телефоны (BlackBerry Torch, Google Nexus One,iPhone, Motorola Droid), планшеты (BlackBerry Playbook, iPad,Samsung Galaxy Tab, Dell Streak), мониторы или телевизоры (720p, 1080p).
Вы можете просмотреть результаты проектирования прямо в браузере и использовать привычные вам средства разработки, такие как Firebug. Также попробуйте альтернативный инструмент ScreenFly .
Инструмент 320 and Up основан на принципе mobile first (сначала мобильные устройства), при котором дизайн создается сначала для экранов мобильных устройств, а затем расширяется для планшетов, настольных ПК и больших экранов. Он хорошо работает как в качестве дополнения к HTML5 boilerplate, так и отдельно.
Это настраиваемые шаблоны для создания многофункциональных, высокопроизводительных мобильных веб-приложений. Вы получите кроссбраузерность для смартфонов класса А и хорошую поддержку для старых BlackBerry, Symbian и IE Mobile. А также большое количество различных оптимизаций для мобильных браузеров.
Фреймворки для адаптивного дизайна 33. 1140 CSS Grid1140 CSS Grid оптимизирован для работы на экранах от размера мобильных устройств до мониторов 1280px в ширину. Это простая и гибкая сетка, использующая Media Queries .
Этот CSS-фреймворк — хорошая основа для разработки на крошечных экранах (например, телефоны) и небольших экранах (например, планшеты) прямо из коробки с минимальными усилиями. Помимо этого имеется генератор для создания резинового CSS-фреймворка под себя.
Flurid — это резиновая сетка на 6, 7, 8, 9, 10, 12 и 16 колонок.
FluidGrids — генератор модульной сетки, который создает макеты из 6, 7, 8, 9, 10, 12 или 16 колонок.
CSS-фреймворк для создания адаптивных макетов. Он содержит 4 базовых макета и три набора типографики.
Резиновый фреймворк с упором на типографику.
Tiny Fluid Grid поможет вам создать свою собственную резиновую сетку из 12, 16 or 24 колонок, задать их максимальную и минимальную ширину и отступ в процентах.
Стратегии адаптивного дизайна 40. The Responsive Designer’s WorkflowWorkflow разработчика адаптивного веб-дизайна
Luke Wroblewski законспектировал презентацию Ethan Marcotte о применении принципов адаптивного веб-дизайна в модернизации сайта одной из ведущих газет. Среди прочего, Ethan объясняет, как он подходит к методологии проектирования адаптивного веб-дизайна и что из себя представляет процесс прототипирования в контексте адаптивного веб-дизайна.
Luke Wroblewski делал заметки на Конференции Breaking Development во время выступления Stephen Hay о реалиях проектирования для различных устройств.
Дискуссии и различные точки зрения на адаптивный веб-дизайн Данные статьи, хотя это и не учебники, могут дать вам ценную информацию о том, почему вам нужно использовать техники адаптивного веб-дизайна (и когда не нужно этого делать).Отличное введение в адаптивный дизайн как способ мышления, а не как инструмент или технику. Jeremy Keith утверждает, что адаптивный веб-дизайн не может быть просто добавлен в качестве этапа к существующему рабочему процессу. Вместо того чтобы добиваться совершенства пикселей, мы должны добиваться совершенства пропорций.
Публикация представляет собой сочетание философии и стратегии для аккумулирования лучших практик в области адаптивного дизайна.
Регулярно обновляемая коллекция веб-сайтов, которые используют Media Queries.
В 9 серии The Big Web Show Jeffrey Zeldman и Dan Benjamin пригласили Ethan Marcotte, чтобы обсудить адаптивный дизайн.
Отличным дополнением к статье будет блог об адаптивном дизайне, в котором разработчики делятся опытом и пишут обзоры responsive инструментов.
В последнее время все больше и больше развиваются технологии и различные устройства (планшеты, смартфоны, мониторы) при помощи, которых просматриваются сайты.
В сферу чего мы получаем огромное множество различных разрешений экранов, что в свою очередь ведет к затруднению получения информации с сайтов. Чтобы информация была хорошо читаема и удобно просматриваема на большинстве устройств и была разработана технология адаптивного дизайна.
Целью адаптивного дизайна является разработка универсального дизайна веб-сайта, который бы в свою очередь позволял просматривать и взаимодействовать с ресурсом с различных устройств.
А также данная технология предполагает разработку одной версии веб-сайта для всех устройств, а не нескольких.
Адаптивный веб-дизайн (англ. Adaptive Web Design) - дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.
Основные принципы адаптивного дизайна:
- Адаптивный шаблон сайта , способность шаблона подстраиваться под различные разрешения экранов устройств от монитора компьютера до смартфона;
- Адаптация и перемещение блоков контента , способность блоков контента в зависимости от разрешения экрана устройства принимать необходимые размеры, а также способность передвигаться на другую позицию в макете;
- Адаптация изображений , способность изображений менять размер в зависимости от разрешения экрана или загружать более адаптированное изображение с меньшим весом и размером;
- Использование гибкой сетки , позволяет максимально быстро изменять конструкцию макета;
- Скрытие менее важных блоков , на небольших экранах некоторые блоки могут скрываться;
- Переработка юзабилити элементов навигации , так как на мобильных устройствах в связи с небольшим разрешением элементы навигации становятся менее кликабельными, их перерабатывают, делая удобно-используемыми;
- Упрощение ряда элементов на веб — странице , некоторые элементы упрощаются для использования на мобильных устройствах;
- Адаптация видео контента , также следует учесть и адаптацию видео;
- Использование медиа — запросов (media query), позволяют создавать адаптивный макет;
- Сначала мобильные (mobile first), проектирование адаптивного дизайна начинается с макета для мобильных устройств.
По поводу последнего пункта правильно это или нет сложный вопрос, по крайней мере, многие утверждают, что необходимо начинать разработку макета именно с версии для мобильных устройств. Я же придерживаюсь немного иного взгляда, мне проще разработать макет под максимальное разрешение с продуманной сеткой и полным функционалом, а уже потом адаптировать под другие разрешения.
Как-то давно в 2012 году я писал небольшую статью о том, какие следует выбирать , разрабатывая дизайн — макет фиксированного сайта. Данная статья получила большой интерес среди читателей, оказывается, данный вопрос интересует многих начинающих дизайнеров и разработчиков. В связи, с чем в данной статье также решил осветить данный вопрос.
Итак, сугубо из своего видения изложу принцип и размеры, под которые следует разрабатывать макет.
Если следовать принципу сначала мобильные то будут такие размеры разрешений, под которые необходимо разрабатывать макет 320px / 480px /768px / 1024px / 1280px может быть и больше зависит от задач.
Картина выглядит примерно, таким образом, но зачастую под какие-то разрешения нет необходимости создавать макет, к примеру, под 480px. если макет не ломается на промежутке 768 — 320px.
Разумеется, создавать холст в фотошопе мы будем с учетом отступов, полосы прокрутки и всего остального, как и обычный макет. для удобства разработки, а также более быстрого проектирования макета. Многие используют в работе фреймворки, а следовательно опираются на сетку того фреймворка на котором ведут разработку.
Благодаря чему, мы сможем показать верстальщику, как будет вести себя макет на различных разрешениях экранов и устройствах. Для примера я набросал небольшой макет, его Вы можете посмотреть на скрине ниже. 
Для того чтобы сообщить браузеру как отобразить размеры страницы и изменить ее масштаб используется метатег viewport . Данный метатег прописывается в сайта. Он позволяет разработчикам установить ширину экрана для устройств, которая прописана в css.
Записывается мета тег viewport так:
- Скролл к контенту
- Главная
- Купить
- Сервис
- Контакты
История
История модели 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 свойства, контролируют то, как пользователи могут масштабировать страницу (больше/меньше).
