—»     —»   Необычный подход к адаптивному веб-дизайну
  Раздел: Руководства   Нет комментариев  

Необычный подход к адаптивному веб-дизайну



Давайте попробуем несколько иначе взглянуть на адаптивный веб-дизайн. В данной статье мы обсудим то, каким образом можно ближе познакомиться с Веб, невзирая на наличие огромного слона, стоящего посреди комнаты. Познакомиться с тем, каким образом мы можем положиться на media queries и breakpoint’ы без учета устройств.

Необычный подход к адаптивному веб-дизайну

Задача

Давайте начнем наше «путешествие» с представленных онлайн-инструментов:

* Responsive Design Testing
* Responsive.is
* Responsinator
* BriCSS

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

Теперь давайте приступим к проверке на всевозможных планшетных устройствах, которыми нас порадовал 2011 год.

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

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

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

Цель

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

Контент – король!

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

Принцип

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

Решения должны приниматься с учетом следующих идей:

* Ширина блока должна быть настолько маленькой или настолько большой, насколько это возможно без ущерба для удобочитаемости.
* Параметр max-width блока должен быть выставлен с учетом важности последующих блоков. То есть, чем шире блок, тем шире должно быть окно просмотра для того, чтобы отобразить последующие блоки.
* У нас нет цели расположить весь контент поверх складки (ведь вряд ли нам хотелось бы, чтобы у пользователя в окне просмотра отобразился какой-то бардак).

Переносим на практику

Верстка

В данном примере нам нужно учитывать 5 основных блоков:

<div class="grid-block" id="header"></div>
<div id="wrapper">
<div class="grid-block" id="main"></div>
<div class="grid-block" id="complementary"></div>
<div class="grid-block" id="aside"></div>
</div>
<div class="grid-block" id="contentinfo"></div>

Оболочка позволит нам сделать следующее:

* смешать процентное соотношение и пиксели для стилизации блоков в одном и том же ряду
* установить максимальную ширину для группы блоков

CSS-код

Для того чтобы создать нашу сетку, мы полагаемся на display:inline-block, в основном для выравнивания по горизонтали и на строчный поток. Но учтите, что данный выбор также дает нам дополнительные возможности (об этом позже).

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

body {
margin:auto; /* you'll see why later */
text-align:center; /* to center align grid boxes */
letter-spacing: -0.31em;/* webkit: collapse white-space between units */
*letter-spacing: normal;/* reset IE < 8 */
word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
}
.grid-block {
letter-spacing: normal; /* reset */
word-spacing: normal; /* reset */
text-align:left; /* reset */
display:inline-block; /* styling all grid-wrapper as inline blocks */
vertical-align:top; /* aligning those boxes at the top */
*display:inline; /* IE hack to mimic inline-block */
zoom:1; /* part of the above hack for IE */
width:100%; /* boxes would shrink-wrap */
}

/**
* rules below are meant to paint the boxes
*/

.grid-block {
height: 150px;
}
#header {
background: #d6cac1;
}
#main {
background: #ad9684;
}
#complementary {
background: #7a6351;
}
#aside {
background: #000000;
}
#contentinfo {
background: #3d3128;
}

Представленный выше код создает несколько рядов.

Процесс, управляемый контентом

Мы определяем ширину каждого блока в соответствии с его наполнением. Эти значения позже будут использованы для установки точек прерывания. Учтите. Что значения, приведенные ниже, выставлены с учетом 10-пиксельного внутреннего поля между столбцами.

Шапка

- контент: логотип, навигация, поиск
- тип: баннер
- минимальная ширина: не определена
- максимальная ширина: не определена

Основная область

- контент: различная (статьи, записи в блоге, комментарии и т.д.)
- тип: основной блок с начинкой страницы
- минимальная ширина: 420px [1]
- максимальная ширина: 550px [1]

Дополнительный контент

- контент: директории, твиты и так далее
- тип: многострочное текстовое поле с медиа-элементами
- минимальная ширина: 280px
- максимальная ширина: 380px

Сбоку (боковая панель)

- контент: реклама
- тип: изображения шириной 230 пикселей
- фиксированная ширина: 250px или 490px (2 объявления бок о бок)

Информационный контент

- контент: источники, лента блока и т.д.
- тип: список ссылок
- минимальная ширина: 220px
- максимальная ширина: 280px

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

Breakpoint-ы

Ширина контейнеров определяет наши breakpoint’ы. breakpoint представляет собой такие значения ширины окна просмотра, при которых нам нужно отображать блоки в качестве столбцов (вместо рядов).

Каким образом нам выставить breakpoint?

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

470px:

- шапка
- Основная область
- Дополнительный контент
- Боковая панель (250) + Информационный блок (220)

530px:

- шапка
- Основная область
- Дополнительный контент (280) + Боковая панель (250)
- Информационный блок

700px:

- шапка
- Основная область (420) + Дополнительный контент (280)
- Боковая панель
- Информационный блок

Или:

- шапка
- Основная область (420) + Дополнительный контент (280)
- Боковая панель + Информационный блок

950px:

- Основная область (420) + Дополнительный контент (280) + Боковая панель (250)
- Информационный блок

1170px:

- Основная область (420) + Дополнительный контент (280) + Боковая панель (250) + Информационный блок (220)

1190px:

- Основная область (420) + Дополнительный контент (280) + Боковая панель (490)
- Информационный блок

1410px:

- Основная область (420) Дополнительный контент (280) + Боковая панель (250) + Информационный блок (220)

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

* Насколько близко расположены breakpoint’ы?
У нас есть два breakpoint’а, удаленных друг от друга на 20 пикселей (1170px и 1190px); стоит ли нам использовать их оба или они все же можно опустить? Мы бы не стали использовать оба, так как нам кажется, что при разрешении выше 900 пикселей пользователи настольных ПК могут без труда инициировать повторное заполнение. Другими словами, нам кажется, близкие друг к другу breakpoint’ы стоит использовать, если значения ниже 800 пикселей, так как таким образом у нас гораздо меньше вероятности смутить пользователей при масштабировании окна браузера.

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

Подготавливаем media queries

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

/**
* 470
*/
@media only screen and (min-width: 470px) and (max-width: 529px) {
#aside {
width: 250px;
float: left;
}
#contentinfo {
display: block;
width: auto;
overflow: hidden;
}
}

/**
* 530
*/
@media only screen and (min-width: 530px) and (max-width: 699px) {
#wrapper {
display:block;
margin: auto;
max-width: 550px; /* see comment below */
}
#complementary {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 250px;
margin-right: -250px;
}
#aside {
width: 250px;
}
}

/**
* 700
*/
@media only screen and (min-width: 700px) and (max-width: 949px) {
#wrapper {
display:block;
margin: auto;
max-width: 830px; /* see comment below */
}
#main {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 280px;
margin-right: -280px;
height: 300px;
}
#aside,
#complementary {
float: right;
width: 280px;
}
#contentinfo {
clear: both;
}
}

/**
* 950
*/
@media only screen and (min-width: 950px) and (max-width: 1169px) {
#wrapper {
display:block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 250px;
margin: auto;
}
#main {
width: 60%;
}
#complementary {
width: 40%;
}
#aside {
width: 250px;
margin-right: -250px;
}
}

/**
* 1170
*/
@media only screen and (min-width: 1170px) and (max-width: 1189px) {

#main,
#complementary,
#aside,
#contentinfo {
float: left; /* display:inline here leads to rounding errors */
}
#main {
width: 36%;
}
#complementary {
width: 24%;
}
#aside {
width: 21%;
}
#contentinfo {
width: 19%;
}
}

/**
* 1190
*/
@media only screen and (min-width: 1190px) and (max-width: 1409px) {
#wrapper {
display:block;
box-sizing: border-box;
padding-right: 490px;
margin: auto;
}
#main {
width: 60%;
}
#complementary {
width: 40%;
}
#aside {
width: 490px;
margin-right: -490px;
}
}

/**
* 1410
*/
@media only screen and (min-width: 1410px) {
body {
max-width: 1740px;
}
#wrapper {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width:100%;
padding-left: 17%;
padding-right: 16%;
margin-right: -16%;
border-right: solid 250px transparent;
}
#header {
float: left;
width:17%;
margin-right: -17%;
}
#main {
width: 60%;
}
#complementary {
width: 40%;
}
#aside {
width: 250px;
margin-right: -250px;
}
#contentinfo {
width: 16%;
}
}

Для breakpoint’ов на 530px и 700px нам предоставляется выбор. Без указанного параметра max-width у нас весь контент «поедет», но основной блок (#main) будет больше максимальной ширины, которую мы выставили вначале.

Демо

Пожалуйста, ознакомьтесь с демо

Последнее, что осталось сделать, создать шаблон для работы в IE6/7/8, так как эти браузеры будут игнорировать media queries. Для того чтобы сделать это, мы можем использовать условные комментарии (Conditional Comments):

<!--[if lt IE 9]>
<style>
body {
margin: auto;
min-width: 850px;
max-width: 1000px;
_width: 900px;
}
#main {
width: 55%;
}
#complementary {
width: 25%;
*margin-right: -1px; /* rounding error */
}
#aside {
width: 20%;
}
#contentinfo {
clear:both;
}
</style>
<![endif]-->

Заключение

За эту статью мы ни разу не упомянули ширину устройства, будь то iPad, Xoom или что-то еще. Создание «сетки, основанной на контенте» – это просто дело выбора паттернов шаблона, которые вам нравятся, на основе breakpoint’ов, которые вы будете выставлять в соответствии со структурой контента на странице.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн, Media Query
Опубликовал Design FactoRy   Прочитано (раз): 4982   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2019    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031