Интерфейс ›› «Отзывчивый» веб-дизайн (Responsive Web Design): Основы и 25 примеров

С каждым днем человечество все больше серфит на планшетах или коммуникаторах. Поэтому при разработке сайта стоит заранее позаботиться о версиях для самых разных разрешений. Данная методика называется responsive web design или же «отзывчивый» веб-дизайн.

Responsive состоит из следующих техник:

1. Резиновый макет на основе пропорций (fluid grid)

Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:

.leftcolumn { width: 27%; /* 270px / 1000px = 0,27 */ float: left; } 
rightcolumn { width: 73%; /* 730px / 1000px = 0,73 */ float: right; }

На хабрaхабр.ру был перевод оригинальной статьи Ethan Marcotte «Fluid Grids».

2. Резиновые изображения (fluid images)

Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства { max-width: 100% }. Изображение с img { max-width: 100% } никогда не вылезет из своего блока-родителя.
Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.

Подробная оригинальная статья «Fluid Images».

3. Media queries

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

Например, так:

/* начало css */

Здесь базовые стили для глупых браузеров. Например, для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же :).

@media only screen and (min-width: 480px) {

Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone и так далее.

}

@media only screen and (min-width: 768px) {

Планшеты в режиме portrait.

}

@media only screen and (min-width: 992px) {

Планшеты в режиме landscape, нетбуки, ноутбуки, десктоп.

}

@media only screen and (min-width: 1382px) {

Десктоп с большими разрешениями, телевизоры.

}

/* конец css */

media queries понимают все разумные браузеры. Для ie же есть Respond.js

4. Mobile first

Это техника, при которой сайт верстается сначала для устройств с меньшими возможностями, а затем с помощью media queries добавляются возможности и плюшки.

Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.

Подробнее о Mobile first

Ниже 25 примеров отзывчивого веб-дизайна на практике:

Simon Collison

Stephen Caver

Sparkbox

Food Sense

Think Vitamin

Internet Images

Seminal Responsive Web Design Example

Forefathers Group

Spigot Design

Illy Issimo

Arrrrcamp Conference

Earth Hour

Clean Air Commute Challenge

Teixido

Deren Keskin

Glitch

Adaptive Web Design

Splendid

FlexSlider

El Sendero del Cacao

Ben Handzo Photography

Halifax Game Jam

3200 Tigres

Pixelab

Alsacreations

А если вы хотите увидеть как выглядит сайт на ipad, загляните на сайт iPad Peek

Источники:habrahabr.ru & designmodo.com

4 Responses to «Отзывчивый» веб-дизайн (Responsive Web Design): Основы и 25 примеров

  1. Pingback: 12 jquery плагинов для создания «Отзывчивого» дизайна | Первый веб-дизайнерский блог

  2. Mike says:

    Эй, ну хотя бы Ссылки из первоисточника оставили бы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *