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

3. После этого я делал изменения, основанные на обратной связи. Я переделывал и экспортировал новые статические изображения. Когда они утверждались по второму, третьему или четвертому кругу, я нарезал дизайн для верстки на HTML и CSS, публиковал его, забегал домой на чай и включал телесериал Animal Magic[129].

Оглядываясь назад, я понимаю, что создать простой дизайн было несложно, потому что для нас и наших боссов и заказчиков Интернет был доступен только на настольных компьютерах. Но сегодня мы не можем делать только один дизайн. Это уже не так легко. Если раньше у нас было два важных браузера на компьютере, то сейчас у нас их сотни на всех видах устройств, которые люди используют для доступа в Интернет.

Превратности быстрой смены положения дел

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

На самом деле некоторые люди это понимали, и они пытались предостеречь нас от глупых решений. В 2000 году Джон Олсоп написал статью, которую многие считают самой важной о веб-дизайне, которая когда-либо была написана: «Дао веб-дизайна». В ней Джон писал[130]:

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

Хороший совет.

Приняли ли мы его?

Нет. Глупцы.

Что мы делали?

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

Разработка в сжатых рамках

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

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

Те первые прямоугольники были размерами: 640 пикселей шириной на 480 пикселей высотой, потому что таким было разрешение большинства мониторов в то время. Разработчики привыкли все контролировать, поэтомуделали безумные вещи наподобие написания скриптов для фиксирования размеров окон браузера, чтобы точно вписаться в размер и размещали контент, используя пять или более фреймов[131]. Этот 640 пиксельный прямоугольник был тесным. Если вы помните, заказчики не хотели, чтобы люди прокручивали сайт для просмотра (вообще), и все, что было на нем, должно было вмещаться в первый экран без прокрутки. 640-пиксельные экраны вскоре уступили место 800 (на 600) пиксельным, поэтому дизайнеры стали рисовать большие прямоугольники. Ощущение широко открытого пространства было опьяняющим. Но продлилось оно недолго, до того момента когда эти большие прямоугольники стали тесными, и мы начали рассматривать размеры от 800 до 1024 (на768) пикселей.

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

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

Я брал интервью у Джейсона Санта Марии о его редизайне сайта A List Apart, который он создал для людей, делающих сайты[132]. Мне хотелось знать, почему Джейсон выбрал для сайта фиксированную ширину 1240 пикселей вместо того, чтобы внедрить тянущуюся разметку, основанную на процентном соотношении. Джейсон ответил мне[133]:

«ALA всегда старался быть одним из тех сайтов, которые идут впереди. Мы уже не поддерживаем размеры 800 × 600 и 640 × 480. А вы? Людей бесило, когда сайты переставали поддерживать 640 × 480… теперь никто не говорит ни слова. Времена меняются. Поверьте мне, вы увидите больше сайтов, которые расслабились».

Люди возмущались этим новым расширенным сайтом List Apart.

Но не серьезно.

Джереми Кейт поддержал мысли Джона Хикса о раздельной дихотомии[134] «между чувствительностью дизайнеров и предпочтениями пользователя». Джереми сказал[135]:

«Спорить о 640, 800 и 1200 пикселях – это все равно, что спорить о том, что вкуснее – «Пепси» или «Кока-Кола», когда на самом деле стакан простой воды был бы намного более освежающим. Игра в цифры – отвлекающий маневр. Большой отвлекающий маневр постоянной ширины».

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

Интернет не знает границ

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

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

Когда в 2007 году Стив Джобс (благослови Господь его душу) вытащил из кармана свой первый iPhone с браузером Safari, в одном устройстве было две ориентации. «Жесты» прокрутки, уменьшения и увеличения также подкрепили тот факт, что границы не имеют значения. С того самого дня благодаря этому одному устройству Интернет изменился навсегда. Так что же сделали дизайнеры?

Мы нарисовали маленький прямоугольник. Шириной в 320 пикселей и высотой в 480 пикселей.

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

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

Нож в перестрелке

Нам не следует слишком жестко относиться к себе. Программные средства, которые мы холили и лелеяли, сделали все что могли, чтобы сохранить жизнь постоянным размерам. Подумайте об этом. Что мы делаем прежде всего, когда начинаем разрабатывать новый дизайн в Fireworks и Photoshop?

Жмем Файл → Новый

или клавиши Ctrl+N.

Потом мы задаем документу постоянный размер холста.

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

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

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

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

Этот неудобный факт

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

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

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