|  в избранное  |  e-mail  |  печать |

логотип компании Sundries это просто наша работа  +7 927·241·97·35 , +7 919·686·71·32

Немного статистики


Как мы уже выяснили, адаптивный дизайн объединил в себе технологии трёх направлений дизайна: фиксированного, «резинового» и мобильного. И если с интеграцией первых двух не было особых трудностей, то подключение мобильного дизайна потребовало применение медиа-запросов, которые поддерживаются не всеми версиями браузеров (например, Internet Explorer 8).

Версии настольных браузеров с которых начинается поддержка медиа-запросов
912119.21.3
Версии мобильных браузеров с которых начинается поддержка медиа-запросов
1193.1

А какими версиями браузеров пользуются посетители сайтов? Может старые версии давно не актуальны и не стоит ломать голову по этому поводу? Чтобы не плодить домыслы, я проанализировал статистику сайтов наших клиентов за год и вот что выяснил. Не смотря на его древность, Internet Explorer 8 до сих пор используют 0,86% посетителей сайтов.

Много это или мало? Допустим, на сайт заходит 100 посетителей в день, тогда за месяц набирается 26 пользователей IE8. На проектах с посещаемостью 1000 человек в день эта цифра составит уже 260 посетителей. Мне кажется непозволительной роскошью игнорировать этих клиентов. Значит мы должны учитывать их технические возможности при построении сайта.

Сегодня принято проектировать адаптивный дизайн от малых экранов к большим, добавляя новые блоки с увеличением разрешения дисплея. То есть пользователь, у которого не работают медиа-запросы, увидит у себя на экране мобильную версию сайта. Internet Explorer 8 установлен на настольных компьютерах, а они имеют мониторы от 17 дюймов и выше. Представляете, как выглядит мобильный дизайн на таких экранах? Поэтому мы будем проектировать наш адаптивный дизайн отталкиваясь от возможностей именно этого браузера – IE8. Благо технология «резиновой» вёрстки в нём отлично работает.

Адаптивный дизайн


Однажды вечером, когда я наслаждался чаем с вареньем из крыжовника и любовался закатом, меня накрыло ощущение дежавю. Сегодня днём очередной клиент выставил обязательное условие – наличие на сайте адаптивного дизайна. Всё повторяется…

Экскурс в историю (часть I)


фотография wap-сайта на монохромном экране старого сотового телефона Когда-то, на заре сотовой связи, когда ещё не было 3G, существовал WAP. Даже в те далёкие времена пользователи хотели иметь возможность заходить на сайты не только через компьютер в офисе или дома, но и через мобильный телефон во время прогулки в парке или посиделки в кафе. WAP позволял передавать информацию из интернета на экран сотового телефона не прибегая к помощи компьютера или модема, но скорость такого соединения была очень низкая. Обычный сайт загрузить через WAP было невозможно, поэтому для мобильных сайтов были разработаны WAP-браузеры с урезанным функционалом и специальный облегчённый язык вёрстки – WML. Веб-мастерам приходилось учитывать все эти ограничения при создании мобильных версий сайтов, которые представляли собой набор так называемых «карточек» с текстом. В то время пользователям было не до изысков, главное – доступность информации.

Со временем скорость передачи данных выросла и стандарт 3G позволил передавать больший объём информации. Мобильные браузеры совершенствовались, стали понимать HTML, что сделало возможным загружать на мобильные устройства стандартные версии сайтов. Правда, экраны сотовых телефонов были маленькими и обычные сайты на них не помещались, возникали полосы прокрутки. Так что мобильные версии сайтов всё ещё не потеряли свою актуальность, но уже не были такой крайней необходимостью, как раньше. Они полностью поменяли свой код и, фактически, стали копиями своих «старших братьев» с таким же богатым функционалом, но упрощённым под небольшие экраны дизайном.

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

Казалось бы, наступил конец эпохи отдельных (мобильных) версий сайтов! Но нет… Большинство пользователей телефонов не устраивает уменьшенная копия сайта на экране из-за слишком мелких элементов. И тут на помощь пришёл адаптивный дизайн.

Экскурс в историю (часть II)


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

Когда-то, на заре интернета, верстальщики использовали для веб-сайтов два типа дизайна: фиксированный и «резиновый». Фиксированный дизайн имел определённые установленные размеры и на всех мониторах выглядел одинаково, ну или почти одинаково. На маленьких мониторах сайт не помещался на экране полностью и появлялась горизонтальная полоса прокрутки. На больших мониторах по бокам сайта оставались пустые поля. На функционале сайтов это ни как не сказывалось, проблема была скорее эстетического характера и для её устранения предназначался «резиновый» дизайн.

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

Самым простым решением возникшей проблемы было поставить некий ограничитель на «резиновый» дизайн, чтобы при определённой ширине он становился фиксированным и не менялся от размеров монитора. С этой задачей хорошо справилось стилевое свойство из CSS2max-width, в котором задаётся максимально допустимая ширина элемента. Оно позволило в одном макете использовать гибкость «резинового» дизайна для экранов средних размеров и неизменность фиксированного дизайна для больших мониторов.

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

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

Контрольные точки медиа-запросов


Что ж, с принципами адаптивного дизайна мы разобрались и даже сверстали «резиновую» версию сайта с максимальной шириной 1230 пикселей. С учётом горизонтальных отступов по 10px и 30 пикселей про запас (под вертикальную полосу прокрутки) получаем 1280px – значение одной из крайних контрольных точек медиа-запросов после которой дизайн становится фиксированным. При этом никакие медиа-запросы не использовались, только свойство max-width.

Небольшое пояснение. Контрольные точки – это значения в медиа-запросах при которых начинают применятся определённые стилевые свойства.

Например, мы ограничили максимальную ширину сайта через свойство max-width:

body {
  max-width: 1230px;
}

Такой же результат можно было получить и с помощью медиа-запроса:

@media all and (min-width: 1230px) {
  body {
    width: 1230px;
  }
}