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

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

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

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

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

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

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

При изменении разрешения важную роль играют изображения – они должны также меняться. Простым и эффективным подходом будет установка свойства 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;» сегодня поддерживает любой броузер!

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

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

Заключение

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