—»     —»   Разработка адаптивного веб-сайта: структура шаблона и media queries
  Раздел: Руководства   Нет комментариев  

Разработка адаптивного веб-сайта: структура шаблона и media queries



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

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

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

Давайте рассмотрим 3 разных структуры шаблона

Традиционный резиновый шаблон

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

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

Давайте рассмотрим резиновый шаблон на примере.

Разработка адаптивного веб-сайта: структура шаблона и media queries

Файл style.css предоставляет нам общие стили страницы (цвета, шрифты), но давайте рассмотрим файл fluid.CSS:

#header {
width: 100%;
margin: 0;
padding: 0;
}
#content {
float: left;
width: 60%;
margin: 0 0 20px 0;
padding: 0;
}
#content .inner {
margin-right: 2%;
}
.sidebar{
float: left;
margin: 0 0 20px 1%;
padding: 0;
}
#bar1{
width:20%;
}
#bar2{
width:18%;
}
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 0;
}

Наши шапка и подвал сайта имеют значение ширины равное 100%, следовательно, они будут занимать все доступное пространство. Область основного контента будет занимать 60% пространства, а боковые панели – 20 и 18 процентов соответственно. Таким образом, у нас будет возможность создать дизайн, который будет подходить к экранам любой ширины.

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

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

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

На каждом таком «изгибе» мы будем применять media queries (во второй части данной статьи мы расскажем вам о них подробнее) для адаптации шаблона нашего сайта.

Давайте ознакомимся с адаптивным шаблоном.

Разработка адаптивного веб-сайта: структура шаблона и media queries

HTML-код и style.css не изменяются. Мы изменяем лишь структуру страницы. Давайте подробнее рассмотрим наш CSS-файл.

«Традиционные» веб-сайты используют подобный CSS-файл:

body{
width:1280px;
margin:0 auto;
}
#header {
width: 100%;
margin: 0;
padding: 0;
}
#content {
float: left;
width: 800px;
margin: 0 0 20px 0;
padding: 0;
}
#content .bloc{
margin-right: 10px;
}
.sidebar{
float: left;
margin: 0 0 20px 20px;
padding: 0;
width:220px;
}
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 0;
}

Подвалу и шапке сайта мы задали ширину равную 100%, но у области контента ширина будет фиксированной. Теперь приступаем к самому интересному – изгибам и media queries:

/* Media queries */
@media screen and (max-width: 1200px) {
body{
width:1000px;
margin:0 auto;
}
#content {
width: 700px;
}
.sidebar{
width:280px;
}
}

@media screen and (max-width: 980px) {
body{
width:850px;
margin:0 auto;
}
#content {
width: 550px;
}
.sidebar{
width:280px;
}
}

@media screen and (max-width: 750px) {
body{
width:600px;
margin:0 auto;
}
#content {
width: 400px;
}
.sidebar{
width:190px;
margin: 0 0 20px 10px;
}
}

@media screen and (max-width: 540px) {
body{
width:450px;
margin:0 auto;
}
#content {
width: 450px;
}
#content .bloc{
margin:0px;
}
.sidebar{
width:450px;
margin: 0 0 10px 0;
}
}

@media screen and (max-width: 380px) {
body{
width:360px;
margin:0 auto;
}
#content {
width: 360px;
}
#content .bloc {
margin:0px;
}
.sidebar{
width:360px;
margin: 0 0 10px 0;
}
}

В каждом breakpoint’е, заданным посредством media query, мы изменяем размер тела, контента и боковой панели. При разрешении в 540 пикселей, текст в боковой панели становился нечитаемым, поэтому мы делаем размер текста таким же, как и у шрифта для контента, и далее боковые панели смещаются под область контента.

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

Самое сложное заключается в выборе оптимальных точек изгиба. Первая техника заключается в определении наиболее распространенных разрешений экранов в устройствах. Крис Койер (Chris Coyier) из CSStricks составил отличный список media queries. Еще один метод заключается в тестировании дизайна на различных экранах и выяснить, когда дизайн становится нечитаемым.

Живой пример адаптивного шаблона:

Разработка адаптивного веб-сайта: структура шаблона и media queries

Адаптивный/реагирующий шаблон

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

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

Разработка адаптивного веб-сайта: структура шаблона и media queries

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

Давайте рассмотрим «обычную» версию вашего CSS-файла:

#page{
max-width:1280px;
}
#header {
width: 100%;
margin: 0;
padding: 0;
}
#content {
float: left;
width: 60%;
margin: 0 0 20px 0;
padding: 0;
}
#content .bloc {
margin-right: 2%;
}
.sidebar{
float: left;
margin: 0 0 20px 1%;
padding: 0;
}
#bar1{
width:20%;
}
#bar2{
width:18%;
}
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 0;
}

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

Давайте рассмотрим CSS для media queries:

/* The media queries*/
@media screen and (max-width: 1000px) {
#bar1,
#bar2{
width:39%;
}
.sidebar{
float: left;
margin: 0 0 20px 1%;
padding: 0;
}
}

@media screen and (max-width: 540px) {
#bar1,
#bar2{
clear:both;
width:100%;
}
.sidebar{
float: left;
margin: 0 0 20px 1%;
padding: 0;
}
#content {
clear:both;
width:100%;
}
#content .bloc {
margin:0;
}
}

Все другие размеры будут указаны в процентном соотношении, относительно параметра max-width, заданного к телу нашего шаблона.

Учтите, что для размера экрана, когда разрешение ниже 540 пикселей, мы снова задаем 100% ширины для боковых панелей и области для контента, и размещаем боковые панели под контентом при помощи clear: both.

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

Разработка адаптивного веб-сайта: структура шаблона и media queries

Media Queries: создание и определение breakpoint’ов

Media Queries были представлены в спецификации CSS3. Вкратце, Media Queries позволяют веб-дизайнерам создавать условные таблицы стилей, основанные на ширине, высоте, цветах, а также на ориентации дисплея. Уже сейчас у нас есть огромный список Media Queries, который вы можете посмотреть на сайте W3C, но мы сегодня будем использовать лишь некоторые их них. Давайте ознакомимся со списком часто используемых Media Queries, и с их предназначением:

Применение Media Queries

min-width: … px – используется, когда ширина окна просмотра больше или равна параметру width
max-width: … px – используется, когда ширина окна просмотра меньше или равна параметру width
min-device-width: … px – используется, когда ширина устройства больше или равна параметру width
max-device-width: … px – используется, когда ширина устройства меньше или равна параметру width
orientation : portrait // orientation: landscape – ориентация экрана устройства
-webkit-min-device-pixel-ratio : 1.5 – используется для определения устройств с экранами повышенной четкости (на android или ios)

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

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

body {
background: gray;
}
@media all and (max-width:500px) {
body {
background: blue;
}
}

Давайте теперь рассмотрим пример внешнего синтаксиса:

<link rel="stylesheet" type="text/CSS"  media="screen and (max-device-width: 480px) " href="mobile.CSS" />

Некоторые «трюки», которые следовало бы знать о Media Queries

Каскад имеет значение

Да, именно так! Как и в любом отрывке кода CSS, каскадное расположение имеет значение.

Давайте посмотрим на следующий пример:

#container{
background:rgba(111, 78, 152, 0.9); /*violet */
color:rgb(1, 1, 1);

@media all and (min-width:500px) {
#container{
background: rgba(255, 0, 0, 0.9); /* red */
color: white;
}
}
@media all and (min-width:700px) {
#container{
background: rgba(0, 0, 255,0.9); /*blue */
font-family: serif;
}
}

Посмотреть пример на jsfiddle.

Если ширина окна нашего браузера будет больше 500 пикселей, то цвет текста становится белым, а фон красным. Если мы увеличим экран до более чем 700 пикселей, фон станет синим, а цвет текста останется белым, так как он будет наследовать цвет media query min-width:500px, который был применен ранее.

Создание очереди из Media Queries

Давайте рассмотрим следующим пример:

#container{
background:rgba(111, 78, 152, 0.9); /*violet */
padding:10px 5px;
color:rgb(1, 1, 1);
}

@media all and (min-width:500px) and (max-width:699px) {
#container{
background: rgba(255, 0, 0, 0.9); /* rouge */
font-family: serif;
}
}
@media all and (min-width:700px) {
#container{
background: rgba(0, 0, 255,0.9); /*bleu */
color: white;
font-family: serif;
}
}

А также ознакомьтесь с примером на jsfiddle

Первый media query будет применен только для экранов с разрешениями между 500px и 699px, и второй для экранов больше 700 пикселей. В случае с очередностью Media Queries, так как параметр применяется только к конкретной ширине, параметры не наследуются. В нашем примере, если нам захочется применить шрифт с засечками также к шаблону больше 700 пикселей, нам придется повторить этот параметр.

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

Мета-тэг для окна просмотра выглядит следующим образом:

<meta name="viewport"  content="initial-scale=1, width=device-width">

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

Дело не только в мобильных устройствах!

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

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

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

Заключение

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

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

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

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


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


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31