Урок 5: Адаптивная вёрстка - примеры и теория

Адаптивная вёрстка, она же адаптивный веб-дизайн (Adaptive Web Design) - вёрстка веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера. Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств.

Адаптивная вёрстка стала очень актуальна с популярностью мобильных устройств и планшетов. Когда появился доступ в интернет практически у всех правильное оформление кода стало острой проблемой. Теперь важно не то, как отображается сайт у Васи или Пети, а важно то, как он отображается у ВСЕХ людей. Буду предельно честен с Вами, на Ваш сайт моя жена с большей долей вероятности зайдет через iphone, чем через компьютер. Как часто я стал слышать: "фу, как тут неудобно, дай компьютер, я хочу статью прочитать на этом сайте".

В мастерской у верстальщика есть лишь один инструмент для написания адаптивного дизайна - @media, то есть тут ничего сложного. Сложно не написать код, а придумать оформление, которое будет удобно абсолютно всем. И буду честен, очень мало дизайнеров предоставят Вам макет во всех разрешениях экрана, а это значит, что качество необходимо будет делать самому.

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