Новая неделя и новая прочитанная книга — Отзывчивый веб дизайн. Чем он отзывчив, конечно, не очень понятно. Так как в терминологию уже прочно засело слово «адаптивный». И именно о нем идет речь. Как сверстать адаптивный дизайн и в чем его соль. Революция адаптивного дизайна на западе случилась уже 4 года назад. Но для нас все книжки перевели лишь через 3 года, поэтому адаптивная революция веба в России происходит в режиме он лайн, прямо сейчас. Вот и студия Пирогова сменила свой паралаксный сайт на новый адаптивный. Подсказки смотрятся особенно мило — потяни за веревочку, сайт и откроется. Но Пирогову виднее, а у нас на разборе отличная книга Итана Маркотта — Отзывчивый веб-дизайн.
С первых строк Итан бросается в бой. Книга начинается с непосредственно практики. Специально для книги Итан построил адаптивный сайт Робот или нет. На его примере и происходит обучение адаптивности и отзывчивости. Надо сказать, я не великий специалист по верстке. Верстать я учился еще в те времена, когда верстали таблицами. Делалось это так: строилась огромная таблица с сотней ячеек. Графика резалась на 100 кусочков и линковалась в ячейки. Так как каждый браузер по разному реагировал на свойства ячеек, таблица начинала ехать. Через это существовало еще 100 костылей для правки таблицы (например всякие невидимые однопиксельные гифки). Никакой системы понимания почему таблица ведет себя так или иначе не было. Это просто нужно было знать, выявлять опытным путем и заучивать. Но к 2000-му на западе вошел в обиход CSS. А у нас перестали верстать таблицами к 2006-му. Так как версткой я практически не занимался, нашествие CSS пропустил. А потом изучал уже снова с нуля. Верстать приходилось редко. Не чаще раза в год, поэтому каждый год изучал и разбирался с нуля.
В общем знания по HTML+CSS у меня достаточно средние, а то и ниже. И если у вас такие же, пугаться не стоит. Потому что Отзывчивый веб-дизайн учебником не является. А моего уровня хватило с лихвой. Итан объясняет очень просто. Простота залог этой книги, даже когда речь касается подключения всяких костылей через jQuerry или JavaScript (да, вчерашние костыли из невидимых гифок конвертировались в Джава заплатки). Скажем так, если вы занимаетесь версткой — Отзывчивый веб-дизайн, отличное пособие для начинающих, чтобы понять, как переключиться на адаптивные рельсы.
А переключиться достаточно просто. Прежде всего, вместо пиксельных значений нужно перейти на проценты. Проценты вычисляются по секретной формуле — контент разделить на родительский элемент. Собственно перевод на проценты уже даст полностью гибкую верстку. Но это еще не отзывчивый дизайн. Это пока просто резиновый дизайн, который практиковали в нулевых. Тем более резиновость макета никак не влияет на контент. Что бы дизайн стал по настоящем адаптивным, реагировать на изменения разрешения должны и картинки. Это решается CSS свойством max-width: 100% Которое до недавнего времени не поддерживалось любимым всеми IE, поэтому на этот случай существует ряд костылей. Но и сегодня не все браузеры реагируют корректно на подобное гибкое масштабирование графики. Картинка откровенно корежется и выглядит ужасно. И снова ява заплатки, которые предусмотрены и на этот случай. В общем все как в начале нулевых. Только иначе.
Но и это не делает дизайн адаптивным. По настоящему адаптивным его делают медиа запросы. Суть их предельно проста. Под каждое разрешение пишется свой CSS. Медиазапрос распознает разрешение и применяет нужный CSS. На этом весь практикум адаптивного дизайна заканчивается и начинается философия. Итан является сторонником идеологии «Mobile first», суть которой понятна из названия. Создавая дизайн, в первую очередь нужно создавать его для мобильного интерфейса, а после двигаться к десктопным разрешениям наверх.
Несколько дней назад у меня случился небольшой спор с проектным менеджером весьма солидной IT компании по поводу адаптивных дизайнов. Спорили о том, что адаптивный дизайн не стоит использовать для серьезных проектов. Об этом, якобы на всех конференциях рассказывают. Для серьезных проектов лучше делать разные версии сайтов. Так, мол, правильнее. И такая философия имеет место быть. Считается, что пользователи разных устройств по умолчанию находятся в разных форматах взаимодействия с интерфейсом. Десктопники, как правило сидят в удобном кресле. Со смартфонов же обязательно заходят из метро. Поэтому и набор функций на одном и том же сайте для разных типов устройство должен быть разный. Все это так, да вот только нет никаких толковых исследований — действительно ли люди со смартфонами заходят в интернет обязательно на бегу в метро, а не лежа на диване. Мы почему то по умолчанию присвоили типам устройство определенные форматы взаимодействия. Вопрос остается дискуссионным, но Итан, естественно, склоняется к адаптивному дизайну.
И я полностью поддерживаю его позицию. Фрагментация устройств набирает обороты. В ближайшие годы их будет еще больше. С новыми форматами, с новыми разрешениями. На носу революция носимых компьютеров и гибких экранов. Правильно ли делать по версии сайта для каждого устройства? Возможно в некоторых ситуациях. Но в других правильным решением будет адаптивная верстка. Лично мое мнение — верстка должна как минимум быть частично адаптивной. То есть удобно раскладываться на десктопные 1980 пикселей, и удобно складываться до iPad-а. Сайт полосочкой в 980 пикселей посреди широкого монитора тоже конечно очень круто, да вот только увеличение браузером его сильно портит.
Вот примерно таким вопросам посвящена вторая половина книги Итана Маркотта, и я настоятельно рекомендую каждому её прочитать. Если вы не знакомы с адаптивной версткой — данная книга будет хорошим началом. Если знакомы, и активно практикуете, возможно в книге вы найдете для себя пару интересных ява заплат, и почерпнете немного философии разработки. Единственным минусом я бы назвал обилие ссылок на западные статьи и блоги. Что ни страница, новая ссылка. А ведь это книга, а не интернет статья. Ну а в целом книжка крайне полезная, простая и читается быстро.
Итан Маркотт — Отзывчивый веб-дизайн [ozone.ru]