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

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

На самом деле некоторые люди это понимали, и они пытались предостеречь нас от глупых решений. В 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.

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

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