Гибкий макет до отзывчивого дизайна
Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.
Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.
Настраиваемая структура макета страницы
Для значительных изменений размера страницы может понадобиться изменить расположение элементов в целом. Это удобно делать через отдельный файл с адаптивной вёрсткой CSS или, что более эффективно, через CSS-медиазапрос. Проблем возникнуть не должно, т. к. большинство стилей останутся прежними, и изменятся только некоторые.
Например, у вас есть главный файл со стилями, который задает , , , вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.
style.css (основной):
mobile.css (дочерний):
На широком экране левая и правая боковые панели хорошо помещаются сбоку. На более узких экранах эти блоки расположены один под другим для большего удобства.
О других особенностях адаптивной верстки в CSS в статье о нетривиальных моментах разработки фронтэнда на CSS.
Практика адаптивного верстки
Наконец, давайте объединим вышеупомянутые знания и реализуем простой пример адаптивного макета с одним набором кода. В качестве примера возьмем главный экран почтового приложения iOS. На экране телефона на экране отображается только список рассылки, а на планшете панель списка и панель сведений о почте отображаются одновременно, и положение панели инструментов изменяется соответствующим образом.
Одноколоночный макет экрана мобильного телефона (ширина экрана <768 пикселей) / макет подколонки экрана планшета (ширина экрана ≧ 768 пикселей)
В следующем фрагменте кода показано, как использовать один и тот же набор кодов для гибкого изменения макета в соответствии с разными размерами экрана для достижения адаптивного макета:
Гибкие сетки и медиа-запросы
Variable Grid System Бесплатный генератор адаптивной css-сетки
Responsive CalculatorС помощью этого калькулятора вы можете легко превратить ваш psd исходник в натуральный шаблон.
С помощью gridpak можно в несколько кликов сгенерировать модульную сетку и CSS-фреймворк для адаптивного дизайна вашего проекта.
Используется для создания «разумного» шаблона. Она использует такие расширения как LESS, SCSS или Stylus, чтобы сделать ваш сайт более эффективным.
Columnal CSS Grid SystemЭта система сеток поможет создавать адаптивные макеты.
Сервис с помощью которого вы можете протестировать ваш сайта используя сетку из 18 столбцов.
Оптимизирована для работы на экранах от размера мобильных устройств до мониторов 1280px в ширину. Это простая и гибкая сетка, которая использует Media Queries.
Очень простой процесс установки и настройки, изменяемая ширина колонок и отступов, любое количество колонок. Также есть возможность перехода на 1140px разметку.
Это быстрый и малый по объему Polyfill (фрагмент кода, добавляющий неподдерживаемый браузером функционал) создан Scott Jehl для поддержки свойств min-width и max-width из CSS3 Media Queries в IE6-IE8 и выше.
Библиотека css3 mediaqueries.js добавит поддержку CSS3 медиа-запросов в старые броузеры (IE 5+, Firefox 1+, Safari 2).
Adapt.js
Это очень маленький (<1 кб) javascript-файл, который может загружать определенные CSS-файлы в зависимости от ширины веб-страниц. Перед тем, как браузер полностью загрузит страницу, плагин проверяет ширину дисплея и автоматически определяет, какой CSS-файл нужно загрузить.
ProtoFluid
Инструмент для быстрого прототипирования адаптивного дизайна. Вы можете спроектировать CSS для различных популярных размеров экранов, ориентаций и браузеров, будь то телефоны, планшеты, мониторы или телевизоры (720p, 1080p).
Tiny Fluid Grid
Tiny Fluid Grid поможет вам создать свою собственную резиновую сетку из 12, 16 or 24 колонок, задать их максимальную и минимальную ширину и отступ в процентах.
mediaQuery Bookmarklet
Фреймворки для создания адаптивного тдизайна
Mobile Boilerplate
Вы получите кроссбраузерность для смартфонов и хорошую поддержку для старых BlackBerry, Symbian и IE Mobile.
Инструмент 320 and Up основан на принципе mobile first (сначала мобильные устройства), при котором дизайн создается сначала для экранов мобильных устройств, а затем расширяется для планшетов, настольных ПК и больших экранов. Он хорошо работает как в качестве дополнения к HTML5 boilerplate, так и отдельно.
Очень простой и прямолинейный, нет никаких предустановленных систем разметки или не-семантических классов. Является отправной точкой, его необходимо редактировать, настраивать и переписывать для удовлетворения своих требований.
12-ти колоночная разметка, 960px максимум, использует много медиа-запросов. Поддерживается Chrome, Safari, Firefox, IE 7 и выше, мобильные версии браузеров
Это интерфейсный набор инструментов для быстрой разработки веб-приложений. Язык LESS, 12-ти колоночная адаптивная разметка, поддержка мобильных устройств, планшетов и мониторов, множество компонентов, кнопок, выпадающие меню, собственный стиль полей ввода, списков, заголовков, меток, иконок, алерты, табы, прогресс-бары, всплывающие подсказки, «аккордеон», «карусель», и так далее, различные Javascript-плагины, поддержка Scaffolding, в том числе применение Bootstrap-стиля к уже созданным HTML.
Less Framework 4 содержит 4 верстки и три набора типографики, все это основано на одной сетке. Также имеется генератор CSS.
Inuit.css
Основан на SASS, объектно-ориентированный.
Гибкая верстка, позволяющая быстро располагать элементы на странице, многоуровневые колонки, может быть адаптирована под любой размер.
Адаптивные плагины
Создание надежного метода безопасного использования CSS overflow в адаптивных дизайнах, поддержка polyfill в неродных средах.
Плагин Isotope позволяет менять всю сетку размещения блоков на странице в зависимости от разрешения экрана. Это плагин содержит возможности фильтрации и сортировки, которые позволят вам обеспечить расположение элементов на вашем сайте в соответствии с собственными пожеланиями. Перемещение блоков при изменении ширины страницы сопровождается приятной анимацией.
Плагин, реализующий на странице эффект движущейся плитки из блоков. Вы меняете размер экрана — блоки заполняют собой все доступное по ширине пространство.
TinyNav.js -легкий плагин, который позволяет преобразовать большие списки навигации в небольшие выпадающие меню для маленьких экранов.
С помощью этого плагина вы можете делать видео адаптивным.
Wookmark — плагин для создания динамичного многоколоночного шаблона.
Тестеры и отладчики
Помогает изменять размер окно браузера. Вам просто нужно будет кликнуть на указатель размера, в котором вы хотели бы увидеть свой сайт.
C помощью Responsivepx можно не только проверить свой сайт (даже локально), но и получить рекомендации, которые можно использовать в медиа запросах для создания адаптивного дизайна.
Этот инструмент предназначен для всех, кому нужен быстрый и простой способ проверить созданный сайт при различной ширине экрана. Проверить сайт можно как онлайн, так и скачав код с Github.
The Responsinator покажет как выглядит компоновка вашего адаптивного сайта на популярных устройствах.
Responsive.isНужно просто ввести адрес вашего сайта и посмотреть, как он будет отображаться на различных устройствах.
Screenqueri.es
Бесплатная утилита для тестирования адаптивного дизайна. Для проверки шаблона нужно ввести URL сайта , выбрать тип мобильного устройства или установить границы окна просмотра.
AptusС помощью этого инструмента вы можете легко просматривать, изменять и делать скриншот вашего адаптивного сайта.
Screenfly
Позволит посмотреть, как примерно выглядит ваш сайт на популярных устройствах.
Resizer
Resizer – это очень удобный букмарклет для тестирования адаптивных шаблонов в считанные клики.
Экран и область просмотра в адаптивном дизайне
Пользователи заходят в интернет с разных устройств: компьютеров, ноутбуков, планшетов, смартфонов. У разных моделей может быть разное разрешение экрана, и если сайт некорректно отображается, часть пользователей закроет ресурс.
Для мобильного просмотра веб-мастеры в зависимости от потребностей бизнеса выбирают способ отображения сайта: разрабатывают отдельную мобильную версию, делают адаптивную верстку или динамическую — RESS (Responsive Design + Server Side). Для корректного отображения проекта на разных моделях планшетов и десктопов также нужен адаптив под разные разрешения.
Размер, разрешение экрана, плотность пикселей у разных устройств отличаются. Выделяют такие показатели:
- диагональ экрана — размер дисплея в дюймах, измеряется от угла к углу;
- размер экрана в точках — количество точек, их устройство использует для координат;
- полное число пикселей (Rendered Pixels), которое визуализирует устройство. Значение считают с помощью множителя 1x, 2x, 3x, который устройство использует к размеру экрана в точках;
- физические пиксели — фактическое разрешение экрана в пикселях; в экранах Retina, которые используют современные модели техники Apple, более высокое разрешение изображения на экране с меньшим количеством физических пикселей.
К примеру, возьмем смартфоны: у IPhone 3 с диагональю 3.5″ физическое разрешение экрана 320x480px, а плотность пикселей 163ppi. Разрешение соответствует диагонали, плотность пикселей невысокая. Если отобразить на нем текст, набранный размером 16px, он будет читаться так же хорошо, как и на экране компьютера. Модель IPhone 6 Plus с дисплеем Retina использует более высокое разрешение изображения на экране с меньшим количеством физических пикселей, полноэкранное изображение — 1242x2208px.
Из-за высокой плотности пикселей тот же текст, набранный в размере 16px, будет выглядеть на экране IPhone 6 Plus значительно мельче, чем на дисплее IPhone 3 . Чтобы сделать страницу с таким текстом пригодной для чтения, нужно отмасштабировать ее, увеличив в три раза.
Отношение пикселей зависит от плотности дисплея:
- плотность менее 200 DPI (точек на дюйм) — соотношение 1.0;
- от 200 до 300 DPI — 1.5.
- более 300 DPI — соотношение представляет собой плотность/150 точек на дюйм.
В основе адаптивного дизайна лежат принципы подвижности и пропорциональности. Веб-мастеры создают макеты в высоком разрешении, располагая контент по модульной сетке из 12, 16 или 24 колонок
Bootstrap, и используют адаптивную верстку. Сервер отправляет одинаковый HTML-код на все устройства, но размеры элементов CSS масштабирует под устройства с помощью CSS-правила @viewport и мета-тега «viewport» в HTML. Это позволяет добиться четких изображений и читабельного текста.
Адаптивность есть во всех современных требованиях к PSD-макетам сайта. Пример
by andrey-hohlov на GitHub.
Терминология
Колонка
Колонки — это основные составляющие каждой сетки. В приведенном ниже примере от BBC вы видите 12-колоночную сетку. Каждая фиолетовая полоса представляют одну колонку.
Межколоночный пробел
Узкие желтые полоски на рисунке ниже — это межколоночные пробелы, которые разделяют каждую колонку. Они являются формой микро-пробелов, которые дают сетке немного воздуха.
Столбцы
Теперь становится интереснее. Несколько колонок и межколоночных пробелов образуют столбцы, в которых эффективно и стратегически верно размещается ваш контент. На начальном этапе столбцы могут не понадобиться, но при создании дизайна с помощью таких ограничений, могут облегчить процесс. Ограничения помогают быстрее решать проблемы с тем, где размещать контент.
В приведенном ниже примере, вы можете увидеть как работают три различных столбца. У каждой колонки свой размер для конкретного вида контента или для создания акцента.
Как вы видите, у вас много вариантов, чтобы смешать несколько форм контента и элементов дизайна
То, на что вы еще могли обратить внимание — столбцы образуют прочную структуру, которая дает последовательность и порядок из-за выравнивания. Неплохо для нескольких линий, правда?
Поля
Поля включают в себя столбцы контента, и образуют формы которые являются горизонтальным деление страниц. Это не плохая идея — стремится к полям одинаковой высоты на ваших страницах. Но на практике этого сложно достичь. Если ваши поля одинаковой высоты, и это хорошо работает с вашим дизайном — отлично. Если нет, то двигайтесь дальше и займитесь делами поважнее.
Что входит в сетку?Скопировать ссылку
Прежде чем браться за создание сетки, вам нужно сделать три вещи.
1. Спроектировать сеткуСкопировать ссылку
Сколько будет колонок? Они будут одинаковой или разной ширины? Какие у них будут ширина и отступы? Вы сможете правильно просчитать параметры сетки только после того, как ответите на эти вопросы. Чтобы помочь вам, я написал статью о проектировании сеток. Прочтите её, что бы научиться грамотно проектировать сетки.
2. Понять поведение сетки на разных вьюпортахСкопировать ссылку
Будете ли вы менять размеры колонок и отступов пропорционально ширине вьюпорта? Или вы будете менять только ширину колонок, оставляя отступы фиксированными? Может вы будете менять количество колонок в определённых контрольных точках?
На эти вопросы тоже нужно ответить. Это поможет рассчитать ширину колонок и отступов. Я писал об этом в той же статье о проектировании сеток, так что обратитесь к ней в случае сомнений.
3. Понять, нравится ли вам писать классы в разметкеСкопировать ссылку
Когда речь заходит о сетках, мир фронтенда делится на два лагеря. Один пишет сеточные классы в разметке (например, такой подход используют Bootstrap и Foundation). Я называю это HTML-сетками. Разметка выглядит так:
Другие создают сетки на CSS. Я называю это CSS-сетками.
С CSS-сетками разметка получается проще, чем с HTML-сетками. Вам не приходится повторять одни и те же классы, размечая визуально похожие части документа. Также вам не нужно помнить, как называются классы сетки:
С другой стороны, стили в случае с CSS-сетками получаются сложнее. Придётся думать, чтобы добиться простого решения задачи — если только вы ещё не решали её до сих пор.
А что выбрал бы я?Скопировать ссылку
Как и многие эксперты фронтенда, я выбираю CSS-сетки, хотя и не смею называть себя экспертом. Если вам интересно, я написал статью о том, почему выбрал CSS-сетки вместо HTML-сеток. Также я написал статью, которая поможет вам перейти с HTML-сеток на CSS-сетки.
Так много статей читать…
В любом случае, вам нужно определиться с тремя вещами, прежде чем создавать свою сетку. Вот они, если кратко:
- Дизайн сетки;
- Как сетка ведёт себя на разных вьюпортах;
- Используется CSS- или HTML-сетка.
Мы можем двигаться дальше, только определившись с этими вещами. В этой статье условия такие:
- Я собираюсь создавать CSS-сетку. Почему я их рекомендую в ещё одной статье.
Итак, давайте начнём!
Модульные сетки
Эта статья написана в формате конспекта по материалам данного видео:
Сегодня мы разберемся с одним важнейшим вопросом в работе современного веб-дизайнера. Это модульные сетки. Меня ежедневно заваливают вопросами о том, какую сетку использовать? В каких случаях использовать 12 колонок, 14 колонок, 1170рх или 960рх, а может быть, 940рх?
Сегодня мы разберем все эти вопросы в одном простом уроке.
Поехали…
Модульные сетки необходимы в работе веб-дизайнера для того, чтобы делать информацию на странице более структурированной и логично расположенной. Невозможно представить себе современную адаптивную страницу без модульной сетки. Поэтому ее использование является стандартом в работе веб-дизайнера. Существует очень много мнений, вопросов и непонятных моментов, которые пугают начинающих веб-дизайнеров, когда они приступают к работе с модульными сетками. Сегодня я постараюсь на все эти вопросы осветить.
Гибкие макеты
Отзывчивый веб-дизайн разбивается на три основных компонента, включая гибкие макеты, медиа-запросы и гибкий медиа-контент. Первая часть, гибкие макеты — это практика построения макета сайта с гибкой сеткой, которая способна динамически уменьшать размер до любой ширины. Гибкие сетки строятся с использованием относительных единиц длины, как правило, процентов или единиц em. Эти относительные длины затем применяются, чтобы объявить основные значения свойств сетки, таких как width, margin или padding.
Относительные размеры области просмотра
CSS3 несколько новых относительных единиц длины, в частности, связанных с размером области просмотра браузера или устройства. Эти новые единицы включают vw, vh, vmin и vmax. Общая поддержка этих новых единиц не велика, но она растёт. Со временем они начнут играть большую роль в построении отзывчивых сайтов.
- vw
- Ширина области просмотра
- vh
- Высота области просмотра
- vmin
- Меньшее значение из ширины и высоты области просмотра
- vmax
- Большее значение из ширины и высоты области просмотра
Гибкие макеты не выступают за использование фиксированных единиц измерения, таких как пиксели или дюймы. Причина в том, что высота и ширина области просмотра непрерывно меняются от устройства к устройству. Макеты сайтов нужно адаптировать к этим изменениям и у фиксированных значений слишком много ограничений. К счастью, Итан вывел простую формулу, которая помогает определить пропорции гибкого макета с помощью относительных значений.
Формула основана на взятии целевой ширины элемента и делении её на ширину родительского элемента. Результатом является относительная ширина целевого элемента.
цель ÷ контекст = результат
Гибкая сетка
Давайте посмотрим, как эта формула работает внутри двухколоночного макета. Ниже у нас есть родитель с классом container, который оборачивает элементы <section> и <aside>. Цель состоит в том, чтобы <section> располагался слева, а <aside> справа, с одинаковыми отступами между ними. Как правило, разметка и стили для этого макета будут выглядеть несколько похоже на следующее.
HTML
CSS
Используя формулу гибкой сетки можно взять все фиксированные единицы длины и превратить их в относительные единицы. В этом примере мы воспользуемся процентами, но единицы em будут работать также хорошо. Заметьте, независимо от того, насколько широким становится родительский container, margin и width для <section> и <aside> масштабируются пропорционально.
Демонстрация гибкой сетки
Взяв идею гибкого макета с формулой и повторно применяя их ко всем частям сетки, мы создадим полностью динамический сайт, масштабирующийся до любого размера области просмотра. Для ещё большего контроля над гибким макетом можно также использовать свойства min-width, max-width, min-height и max-height.
Одного гибкого макета само по себе недостаточно. Порой ширина браузера может быть настолько мала, что даже пропорциональное масштабирование макета будет создавать слишком узкие колонки для эффективного отображения контента. В частности, когда макет становится слишком мал или слишком велик, текст может стать неразборчивым и компоновка может сломаться. В этом случае могут быть использованы медиа-запросы, которые помогут оставить лучшее впечатление.
