Что такое отзывчивый дизайн?

Отзывчивый дизайн (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. JAH:

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

  2. Дима Бухал:

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

  3. ДенИС:

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

  4. JAH:

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

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

  6. JAH:

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

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

  7. vasya:

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

  8. JAH:

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

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

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

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

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