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

1. Я делал дизайн в Adobe Photoshop или Macromedia Fireworks – дизайн, который предназначался для всеобщего обозрения. Без разницы, какой бы браузер использовался или какого размера был бы экран.

2. Потом я показывал этот дизайн – в виде композиции или макета (я называю это статическими изображениями, потому что они неоживленные и не интерактивные) – своим клиентам.

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]: