Итан Маркотт [A Book Apart 04] Отзывчивый веб-дизайн

О чем

A Book Apart — серия небольших книг, преимущественно о веб-дизайне.

Их начал выпускать МИФ, но почему-то напутал с нумерацией. Эта книга в оригинальной серии четвертая, у МИФа — первая.

Я читал в оригинале. Сама книжка как можно догадаться из названия о том, как делать сайты адаптивными. Хотя после погружения в эту тему узнаешь, что «responsive» и «adaptive» в мире веб-разработки вещи разные. Поэтому книжка об отзывчивом дизайне.

О книжке узнал от другого автора. А именно из книги David Sawyer McFarland — CSS: The Missing Manual. В ней Макфарланд в главе об адаптивке указывает на Маркотта и называет его родоначальником самого термина. Это меня заинтриговало и решил прочесть.

Сам отзывчивый дизайн — это не какой-то фреймворк, библиотека или платформа. Это ряд способов, которые позволяют подстраивать сайты под экраны любых устройств.

Вот эти способы:

1. Гибкие сетки;
2. Адаптивные картинки;
3. Медиазапросы.

И начиная прямо с первого способа Маркотт адаптирует реальный сайт и в книге прописывает куски кода, указывая на возможные подводные камни.

Что понравилось

Однако самая крутая часть книги — последняя. В ней Маркотт начинает размышлять о юзабилити подходах и концепции «вначале мобильные».

Основной спор тут о том, что больше влияет на юзабилити — контекст использования или сам тип устройства. Например, что показывать человеку на сайте ресторана в мобильной версии и десктопной? Принято считать, что переносные устройства сигнализируют о ситуационном спросе. На примере того же ресторана человек зайдет с мобильника, чтобы быстро узнать адрес или позвонить, а не прокручивать «тяжелые» фотки заведения, стоящие в самом начале странице. С другой стороны исследования показывают, что с мобильных и планшетов чаще всего заходят именно из дома.

Также вспомнилась картинка, которая как-то попалась мне в одном паблике о юзабилити:

Мои эксперименты

Я попробовал сделать мою главную страничку (уже старую версию) адаптивной для маленьких экранов с помощью медиазапросов. Вот что получилось:

верстка, книги