Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

Хотя поставщики ПО наподобие Adobe встраивают средства веб-разработки в свою продукцию, в них нет ничего, что может помочь нам создать отзывчивый дизайн. Они даже не могут помочь нам продемонстрировать состояние по наведению или другие события, которые могут показать как гибкий макет влияет на изменение положения текста и других элементов. И снова Джейсон Санта Мария [136]:

«Каждый элемент веб-страницы имеет способность влиять на размещение других элементов. Мы должны уметь определять, какие действия предпринимать, когда это происходит. Кроме того, окно браузера – это изменчивый холст; дизайн приложений для настольного компьютера взаимодействует только с неизменными размерами холста, делая работу с гибким дизайном немногим меньше, чем догадка».

Наше текущее ПО, в частности Photoshop и Fireworks, просто неспособны к обработке требований адаптивного дизайна. Они как нож в перестрелке.

Долгое время самая трудная часть разработки сайта не имела отношения к тому факту, что люди, использовали наш дизайн на экранах разных размеров. Все это потому, что большую часть времени мы не занимались этим.

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

Когда iPhone заставил нас осознать, что наша работа не всегда будет «[наилучшим образом] просматриваться на современном браузере в 1024 пикселей или больше», нашей первой реакцией было создать специфический дизайн страницы для iPhone в дополнение к тому, что есть для настольного компьютера. Это тут же увеличило время на разработку, обратную связь, корректировки и утверждение.

Чем больше появлялось смартфонов, электронных читалок и планшетов, тем прочнее у боссов и заказчиков входило в привычку просить специфические версии сайта или приложения для них [137].

• iPhone

• Android

• iPad

• Kindle Fire

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

Сегодня иметь дело с таким большим количеством характеристик, возможностей и размеров, создавать множество фиксированных макетов неуместно, неэкономично и непрактично, и не лучшее применение времени и талантов дизайнера. Также мы ничего не выгадываем технически, создавая несколько фиксированных макетов, когда мы хотим преобразовать эти изображения в код.

Как говорит Стефани Ригер в своей статье «„Проблема“ с Андроидом» («The ‘Trouble’ With Android» [138]):

«По факту разработка под фиксированный экраный размер никогда не была хорошей идеей. […] слишком много вариантов, даже среди «популярных» устройств».

Так, вместо того чтобы думать об индивидуальном дизайне для отдельных устройств, мы должны подумать, как советует Итан Маркот, о простом дизайне, имеющем много аспектов, которые находятся в непрерывном и гибком ряду [139]:

«Вместо того чтобы адаптировать разрозненные макеты к каждому все более возрастающему числу устройств, мы можем принимать их как аспекты одного и того же опыта взаимодействия».

Я люблю такой метод объяснения дизайна в отзывчивом контексте – много аспектов в одном опыте использования, потому что он хорошо отражает, что такое «смена положения дел», как описывал в своем «Дао» Джон Элсоп.

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

Отсюда возникают вопросы. Если бы мы не могли делать отдельные макеты с неизменяемой шириной, что бы мы делали? Как бы выстроили процесс? Как бы создавали дизайн для Интернета без границ?

Сегодня это в порядке вещей для нас создавать одно или несколько статических изображений с фиксированной шириной, чтобы представить сайт, который мы делаем. Есть несколько причин, почему мы так делаем.

Photoshop и Fireworks – невероятные инструменты для творческих экспериментов и наши помощники в решении проблем и определении визуального направления проекта. Иногда даже сам процесс использования Photoshop и Fireworks помогает нам, порой случайно, достичь результата, которого трудно добиться другими средствами. В конце концов, результат – это нечто, на что мы можем ориентироваться и сказать нашим боссам и заказчикам: «Эй, а я вот что сделал!»

Проблема со статическими изображениям, я говорил об этом не раз, не просто в том, что они плохо передают реальность современного интерактивного сайта. Дело в том, что при неправильном использовании, они устанавливают неверные ожидания. Так как дизайнеры используют их, чтобы получить утверждение дизайна, наши боссы и заказчики, вне сомнения, ожидают, что на выходе сайт будет выглядеть именно так, как на картинке. В конце концов, мы же для этого им его показываем.

Но не все браузеры могут воспроизводить дизайн одинаково. У всех разные возможности, которые статические изображения игнорируют. Так что в нашей глупости никто не виноват, когда мы тратим часы, влезая в тонкости наших HTML и CSS или применяя «заплатки» на JavaScript в тщетной попытке сделать так, чтобы наш сайт выглядел одинаково во всех браузерах, как на статичном макете.

Поэтому в будущем дизайнерам нужно согласиться с тем, что то, что они включают в статический макет, не может выглядеть одинаково для каждого человека и устройства. Они также должны научиться настраивать верные ожидания от статического макета, и объяснять боссам и заказчикам, что макеты Photoshop всего лишь показывают то, как сайт может выглядеть в некоторых браузерах на некоторых устройствах.

Статические макеты могут быть полезными инструментами для разработчиков, занимающихся переводом дизайна в код. Макеты являются проектом для разработчиков, а для боссов и заказчиков контрольной точкой для оценки того, насколько хорошо окончательный дизайн будет соответствовать тому видению, которое выражается в макете.

Но на сегодня разработчики должны согласиться с тем, что когда они получают статический макет, он представляет собой всего лишь руководство о том, как может выглядеть сайт. Разработчики должны научиться принимать решения по верстке макета, включая адаптацию к различным размерам экрана и устройств.

Беседы об этих статических макетах между дизайнерами, нашими боссами и заказчиками могут стать самой ценной частью креативного процесса. Если установить правильные ожидания – боссы и заказчики поймут значение того, что они видят. Потом статические макеты могут быть чрезвычайно полезны в описании целей, сбора комментариев и конструктивной критики.