О книге Итана Маркотта "Отзывчивый веб-дизайн"

Всегда ищешь какую-то серебряную пулю. Так, и при выборе того, что бы почитать и у кого бы поучиться, каждый раз с надеждой думаешь: "Вот сейчас я это прочитаю/послушаю, и мне сразу станет  хорошо - все понятно, я прокачаюсь, я смогу смотреть на предмет сверху". Кроме того, на нескольких обзорах в интернете я слышала, как выделяют эту книжку. В общем, решила ее прочитать.

Конечно КПД в таких книжках очень низкий. Да, их очень легко читать, какими бы длинными они ни были. Тут, в противопоставление, мне вспоминается доказательство какой-нибудь теоремы по дискретной математике всего на полстраницы, которое читаешь раз, читаешь два, читаешь сто раз - и все равно еще надеешься, что сто первый раз поможет понять все до конца. С книжкой И.М. совсем не так. Там много шуток (конечно, таких, очень воспитанных шуток), есть разные истории, начинающиеся со слов: "А вот был у меня такой проект..." и т.д. Но в целом того, что действительно может прокачать - не так уж и много.

И еще, конечно, я немного отстала от времени. Год, когда книга впервые увидела свет - 2011. Может быть, в 2011 она и была серебряной пулей. Но сейчас прошло уже 7 лет. Все трюки, описанные в этой книжке разрослись по интернету так широко, что я даже могу посоветовать: очень недурной набор роликов от loftblog по адаптивной верстке (их там около 7-8) полностью покрывает книгу ИМ и делает почти бессмысленным ее прочтение.

Мы живем в эпоху коротких статей, мастер-классов и интенсивов. Профессиональная литература (под словом литература я понимаю то, что доведено в своем совершетсве до такого блеска, что хоть однажды было отдано в печать) себя изжила. Ну, или единственный вариант - это хватать ее горяченькой, только что снятой с печатного станка. Тогда еще, возможно, есть какой-то смысл. Но в этом случае придется читать на английском. А тут у меня проблемы. Не, я вроде и читаю.  Но только это так, чёрт возьми, неудобно! Это как танцевать, имея при этом рюкзак за плечами, десятикилограммовую сумку  на руках, пакет с игрушками и еще детский велосипедик. В принципе ты танцуешь - но думаешь не о танце, а о том, когда это все кончится.

Основная линия книги построена на том, что мы берем макет сайта "Robot... or not" (как бы мне не нравилась тема роботов, пришлось с ней смириться) и пытаемся сверстать его, так сказать, responsive. И как всегда бывает в таких случаях - лучше всего верстать вслед за автором, потому что даже если сначала все элементарно и понятно, то когда-то появятся вопросы. Лучше всего они разрешаются ковырянием в отладчике. Сначала я самонадеянно решила: "А, ладно, и так все в порядке - не буду верстать". Но когда у меня появились мелкие вопросики - пришлось откатываться назад, и все-таки сверстать вслед за автором. И вот в процессе верстки я узнала/обдумала кое-какие новые для меня техничсекие аспекты:

1) Первое - очень, на мой взгляд, нелогичная вещь в стандарте:

"1. Задавая гибкие отступы для элемента, принимайте за контекст ширину контейнера элемента. 2. Задавая гибкое поле для элемента, принимайте за контекст ширину самого элемента."

То есть процентное значение margin-а считается от ширины контейнера, а процентное значение padding-а - от ширины самого элемента. Ну, тот факт, что одно считается от элемента, а другое - от его контейнера, еще можно как-то принять, если глубоко задуматься. В конце концов, интуитивно padding - это еще сам блок,  а margin - уже внешняя область. Но то, что все это считается именно от ширины - это, уж извините, совсем какая-то надуманность. Интуитивно я бы считала значения по вертикали (margin-top, margin-bottom, padding-top, padding-bottom) от высоты, а все остальное (margin-left, margin-right, padding-left, padding-right) - от  шрирны. Но, увы, это не так. Придется теперь как-то с этим жить )))))))

2) Для картинок И.М. рекомендует использовать max-width: 100% вместо width: 100% там, где это возможно (там, где поддерживается это свойство). И верно - не всегда же нам нужна картинка, растянутая на всю ширину. Использование  max-width дает некоторую свободу для манипуляций с графикой.

3) И.М. дает наводку, как решить проблему с медиа-запросами в очень старых браузерах. На помощь приходят js-библиотеки, такие как css3-mediaqueries.js, respond.js. Хотя, наверное, это новость только для меня, потому что я не сталкивалась пока с этой проблемой вживую.

4) Там на главной этого сайта (Robot...or not) предусмотрена карусель баннеров. Предлагается не жестить и избавить пользователей с маленькими экранами от необхоимости с лупой наблюдать за сменяющимися баннерами. Поэтому те, кто зашел с маленького экрана, увидят всего один баннер - первый. Все это делается на JS. А еще на JS подгружается остальные картинки в баннере - в случае, если пользователь зашел с маленького экрана. Это всегда правильно - не грузить лишнюю графику. И все вроде бы логично и не сложно. Но когда я об этом думала?!)

5) В книжке этого почему-то нет, но в процессе верстки мне пришлось загуглить, как нынче адаптивно придумали вставлять видюшки. Так что я теперь это знаю)))

Вот, пожалуй, и все важные технические фишки, которые я успела поймать, читая книгу)

И в заключении - немного любования, "как ты любишь". Интересной мне показалась мысль про "отзывчивую архитектуру". Как-то я раньше никогда так напрямую не задумывалась о том, что web-дизайн, который может трансформироваться - это не просто какая-то необходимость, связанная с разными устройствами пользователей. Это такая же восхитительная вещь, как мебель, которая может быть использована по-разному. Вот один рекламный ролик компании IKEA, который наглядно показывает, какой волшебный эффект может произвести трансформация. А мы что - мы просто пользуемся. Мы каждый раз не задумываемся, как крут дизайнер, который это сконструировал, не задумываемся и о технических трудностях, которые ему стоило преодолеть.