Что такое «Адаптивный веб-дизайн»?

При создании сайта каждый более или менее солидный клиент хочет также и «мобильную» версию сайта. Однако, «мобильность» в наше время бывает такая разная – BlackBerry, iPhone, iPad, netbook, и т.д. Похоже, что в ближайшем будущем этот список только пополнится новинками. Так что же держать отдельные «мобильные» версии сайта для каждого мобильного устройства? Конечно же, нет.

В сфере веб-дизайна мы быстро поняли, что нам не совладать со всеми возможными разрешениями экранов всех возможных мобильных «девайсов». Самое простое и в то же время изящное решение – «адаптивный дизайн» (от англ. Responsive design).

Адаптивный дизайн – это подход в дизайне, по определению «адаптирующийся» к поведению пользователя и его системе основываясь на размере экрана, платформе, ориентации экрана и т.д. Такой подход совмещает в себе смесь различных сеток и слоев, изображений и правильного использования CSS media queries. К примеру, если пользователь заходит на сайт с iPad вместо привычного лэптопа, сайт должен «подстроиться» под разрешение экрана, уменьшить размеры изображений и, скажем, убрать флеш элементы.

responsive design

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

Разрешение экрана

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

Динамические изображения

При изменении разрешения важную роль играют изображения – они должны также меняться. Простым и эффективным подходом будет установка свойства max-width CSS в 100%. Хоть свойство max-width пока не поддерживается IE, существует также и другая проблема – скорость загрузки страницы. А точнее, большие и качественные изображения предназначены для просмотра на ПК, а не на смартфоне. На помощь приходит правильное использование CSS media queries – которые также позволяют менять не только изображения, но и само расположение элементов на странице.

Адаптивный макет

При изменении разрешения экрана полезно также изменить весь макет в целом. Это просто и эффективно сделать используя CSS media queries. Нужно написать основной CSS стиль, а с помощью CSS media queries уточнить CSS стиль для разных разрешений экрана. Например

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

Данный стиль будет загружен и применен, если он 1) отображается на экране (не “для печати» и т.д.) и 2) максимальная ширина экрана составляет 480 пикселей. Новые «фишки» CSS3 также поддерживают всякие вкусности а-ля «device-width», «min-device-width», «orientation» и т.д.

JavaScript

Немаловажную роль играет правильное использование JavaScript’а. К примеру, библиотека css3-mediaqueries.js добавит поддержку CSS3 media queries в старые броузеры (IE 5+, Firefox 1+, Safari 2). Если же Вы поклонник jQuery – можете использовать простой код:

$(window).bind(«resize», resizeWindow);
function resizeWindow(e){
var newWindowWidth = $(window).width();
if(newWindowWidth < 600){ $(«link[rel=stylesheet]«).attr({href : «mobile.css»}); } else if(newWindowWidth > 600){
$(«link[rel=stylesheet]«).attr({href : «style.css»});
}
}

Упрощение контента

Изменение размера изображений, структуры сайта, макета и т.д. – это все очень хорошо, но в некоторых случаях – не самое лучшее решение. Если каждый элемент Вашего сайта «подогнать» под разное разрешение.. на простом мобильнике с шириной экрана в 320 пикселей – он буде тааааким длинным! Правильно – иногда стоит и вовсе убрать некоторые элементы. К примеру, при просмотре на ПК посреди главной страницы большой рекламный элемент с красивым изображением. При размере экрана в 320 пикселей, думаем стоит ограничиться просто текстовой ссылкой.

Итак, ключевые элементы при уменьшении разрешения экрана:

- упростите навигацию
- сфокусируйтесь на контенте
- вовсе уберите рекламу и баннеры
- не разбивайте информацию на колонки
- спрячьте большие элементы
- замените некоторые элементы контента ссылками

К щастью, атирбут «display: none;» сегодня поддерживает любой броузер!

Переход к тачскринам

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

Заключение

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

Пример

В качестве примера рассмотрим сайт, на котором Вы читаете эту статью – собственно, сайт компании ВебМарк. Рассмотрим поведение сайта при разных разрешениях (а Вы можете прямо сейчас изменить размер Вашего браузера и увидеть тот же результат воочию):

Экраны 1240 пикселей и более:

Экраны до 640:

Изменения:
- упрощена навигация
- спрятаны некоторые элементы
- контент переоформлен в 2 колонки вместо 4х
- уменьшены лого и другие изображения

Экраны до 468:
Изменения:
- еще более упрощена навигация
- спрятаны некоторые элементы
- контент переоформлен в 1 колонку вместо 2х
- добавлены дополнительные элементы управления

Тэги: , , ,

Нет комментариев

Вы должны быть зарегистрированы

Нужна разработка сайта, интернет магазина или раскрутка сайта?
Звоните (032) 242-33-39 или просто свяжитесь с нами