Отзывчивый дизайн (responsive design) — это дизайн сайта адаптированный под размеры устройств, которые имеют выход в интернет. На мой взгляд это современный и очень важный шаг в развитии веб дизайна. Его возникновение было неизбежностью, так как нереально создавать отдельные версии сайтов для каждого устройства (например телефонов разных моделей).

Responsive design, отзывчивый дизайн, адаптивный дизайн

А теперь небольшой экскурс в историю.

Всего лишь 10 лет назад все сидели за 15-дюймовым монитором с разрешением экрана 800х600 и были довольны, а в интернете все макеты сайтов были фиксированной ширины и какой-либо динамики на страницах не намечалось. Спустя несколько лет появились мониторы с разрешением 1024х768 пикселей, и интернет захватили веб-страницы с жидким дизайном (fluid design — процентное соотношение блоков страницы). Его появление было просто необходимостью корректного отображения веб-страниц как на 15-ти так и на 17-ти дюймовых мониторах. Прошло еще пару лет и мир увидел широкоформатные мониторы и fluid design автоматически отпал при разработке интернет-проектов (согласитесь на 22 дюймовом мониторе колонка в 150px выглядит нелепо). Произошел шаг назад и веб дизайнеры вновь вернулись к макетам фиксированной ширины, расположенные по центру окна браузера.

И вот сейчас 2012 год мир полон коммуникаторов (смартфонов), планшетов, тачпадов, широкоформатных мониторов и разработка для этих устройств отдельных дизайнов макетов и их верстка, довольно, дорогостоящая процедура. Вот тут на сцену и выходит отзывчивый дизайн, его задача адаптировать разрабатываемый макет под любые устройства, при чем делается это с помощью запроса CSS3 media query. На данный момент этот запрос поддерживается всеми популярными браузерами: Google Chrome, Mozilla FireFox, Internet Explorer 9, Safari, Opera. Для браузеров IE7 и IE8 необходимо подключить пару скриптов JavaScript, я в основном использую для этого css3mediaquery.js и html5shiv.js, но есть и другие.

Я по долгу службы и в меру своей испорченности читаю очень много блогов, как зарубежных так и русскоязычных и среди веб дизайнеров идет активное обсуждение на тему: «Стоит ли использовать Responsive design в своих проектах?»

Многие отрицательно относятся к этой новизне объясняя это тем, что нужно все протестировать, а потом уже использовать, чтобы быть уверенным, что все отображается без подвоха. Я как front-end не понимаю, что значит «все протестировать» я и так каждый проект тестирую, провожу анализ нарисованных макетов, чтобы верстка была логической и семантической, использую разные хаки для IE, если есть такая необходимость, и вообще меня поражают разработчики, которые это не делают и удивляются, что что-то с их проектом не так.

Я отношусь к тем разработчикам, которые обеими руками ЗА отзывчивый дизайн. Поэтому к дню рождения своего племянника Назара я обновил дизайн своего блога, теперь он будет отзывчивым, WordPress тему я разрабатывал сам, используя теги HTML5 и CSS3 — назвал ее HowToMake, хочу, чтобы она была примером семантической верстки и отзывчивого дизайна. Кстати, чтобы наглядно посмотреть что такое responsive design — уменьшите (измените) размер браузера или воспользуйтесь сервисами Responsivepx.Com или QuirkTools.

Кстати с этой статьи я буду стараться пополнять рубрику Верстка интересным материалом, связанным с отзывчивым (адаптивным) дизайном, он поможет Вам, да и будет напоминать мне, как правильно и оптимально делать проекты, максимально адаптированные к любым современным устройствам.

В добрый путь!

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


Комментарии
  1. Dominik_x

    Офигеть! Круто! Меняешь ширину и меняется отображение сайта ^_^

  2. Dominik_x

    Кстати блок «Мои друзья» виден когда изменяешь размер окна браузера. Когда на всю ширину, то отображается «Комментарии».

    Баг или фича? 🙂

  3. JAH

    Dominik_x, «Мои друзья» на 15,6 диагонали скрываются, просто не знал куда его влепить) фича))

    ксати тема твоего блога тоже отзывчивая))

  4. vasya

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

  5. JAH

    Vasya, прыгающий текст — отзывчивый)

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

  6. Dasha

    Легкий способ проверить корректно ли отображается адаптивный сайт на мобильных устройствах
    http://plastilin5.com/tools/

  7. JAH

    Dasha, хороший у Вас сервис, спасибо! Жаль что 1024 максимальное разрешение.

  8. ДенИС

    Прикольная штука этот отзывчивый дизайн, о таком и не слышал, буду иметь в виду.
    Спасибо за интересную статью)

  9. Дима Бухал

    Все таки адаптивный и отзывчивый веб-дизайн — это немного разные вещи. Недавно слушал доклад — http://events.yandex.ru/events/yagosti/wsd-msk-nov-2012/talks/458/ там про это есть в начале

  10. JAH

    Дима, да разные) то никак руки не дойдут поправить)