WEBMASCON - журнал для веб-мастеров обновление: 2007.09.07

Редизайн сайта ABC News

ABC News Redesigns
автор: 2004.10.06 Mike Davidson
перевод: 2004.11.27 Максим Россомахин

Я сейчас в тридцати тысячах футов над Сиэтлом. Лечу в Вегас в компании с Кейтом, Джейсоном и "Волком". Все мои мысли заняты тем, что должно появиться завтра. К тому времени, как вы начнёте это читать, мы выпустим в свет новый дизайн для ABCNews.com. Несколько месяцев работы над редизайном после нескольких лет, прошедших со времен последнего - и вот он, новый ABCNews - последний крупный сайт из диснеевского семейства, решивший вспрыгнуть на подножку поезда веб-стандартов, набирающего все большую скорость.

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

Краткая история ABCNews.com

ABCNews.com, как и множество других сайтов компании "Дисней", начал свою жизнь несколько лет назад в Сиэтле, став частью семейства сайтов Starwave / Infoseek / Go / ABC / Disney. Хотя львиную долю писанины и редактирования делали в нью-йоркском офисе ABCNews, большая часть дизайна и разработки выполнялась в сиэтлском офисе. Некоторое время ABCNews был одним из самых популярных новостных сайтов Сети. Но несколько лет назад ABC television попала в сложную ситуацию, что наложилось на кризис "дот-комов" (.com). Компания сократила финансирование проекта, сконцентрировав все усилия на том, что давало основной доход: на телевизионной сети. Проект "ABC News" продолжал свое существование на телеэкранах, успешно конкурируя с CBS, NBC и Fox, поэтому туда и вкладывали все деньги.

В то время как сайт ABCNews.com работал в течение нескольких лет на автопилоте, другие новостные сайты начали наращивать свою игру. Компании CNN и MSNBC продолжали вкладывать изрядные суммы в свои онлайн-проекты, и через какое-то время их вложения дали плоды - они получили значительное преимущество на рынке по сравнению со своими конкурентами. В то время, когда ABCNews экономило каждый цент и пыталась свести дебет с кредитом, CNN и MSNBC во всю распахивали заброшенное поле.

Чуть менее года назад, когда ABCNews.com наконец-то удалось совладать с финансами, появились и время и деньги для проведения небольшого эксперимента. Мы удачно поднялись на сервисе "видео по требованию" (on-demand video). Мы обратились к сотовым телефонам и наладонникам. Мы вступили в чудесную игру с RSS. Мы открыли сервис ABCNewsNow - единственную и неповторимую 24-х часовую сетевую видеоленту новостей.

Уже в 2004 году стало ясно, что ABCNews.com имеет отличное будущее в конкурентной среде новостных сайтов, потому и начались разговоры об основательном редизайне сайта.

Полная переделка

Предыдущее воплощение ABCNews.com было… м-э-э-э… слегка "старомодным". Дизайн полностью устарел по стилю, код носил все признаки конца 90-х, различные изменения в общей сумме носили больше косметический характер. У меня лично ошибки валидации кода не вызывают сильных отрицательных эмоций, но во время последней проверки старого сайта я обнаружил, что каждая его страница содержала 609 ошибок - и некоторые из них были не такими уж безобидными.

Погодите. Пора остановиться и пояснить, что я - не работаю в команде ABCNews, а потому, если я говорю "мы", это вовсе не означает, что я отвечал за этот проект. Моя роль в основном заключалась в предоставлении консультаций, а львиная доля работы по редизайну ABCNews.com и прочему легла на плечи удивительного коллектива людей из нью-йоркского офиса.

Вместо того, чтобы пытаться как-то переделать старый сайт в что-то более здоровое и эффективное, мы решили разработать полностью новый сайт "с нуля". После нескольких циклов создания макетов сайта и их обсуждения, мы определились с компоновкой страниц и общим стилем сайта. Новая палитра белого, светло синего, с малой толикой оранжевого, смотрелась существенно лучше старой палитры сайта. Осветлив палитру и добавив инструменты для повышения удобочитаемости (например, переключатель размеров шрифта), нам удалось сделать работу с новым сайтом ABCNews удобнее и приятнее. Благодаря использованию CSS и веб-стандартов страницы стали загружаться много быстрее, да и в целом сайт стал "чувствовать себя намного лучше".

Пересмотр системы публикации

Все диснеевские сайты используют нашу собственную CMS (Content Management System - система управления контентом), в которую встроен наш собственный язык TEA - язык скриптов и шаблонов. Язык и система были разработаны нами несколько лет назад, когда для них ещё не было достойных альтернатив на рынке. Сейчас TEA переведён в разряд "open source" проектов, а доступен любому, кто захочет им воспользоваться. Сайт ABCNews до этого редизайна был единственным из диснеевских сайтов, использовавшим старую версию языка TEA (под названием "dot T"), так что одной из важнейших наших задач был перевод сайта на новую версию языка. К счастью, это привело к значительному росту производительности системы, что позволило перевести ABCNews целиком на динамические страницы.

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

Преимущества "чистого" кода

Прежде чем говорить о коде, позвольте сразу заявить - во-первых, мы не совершенны, и, во-вторых, мы ещё не закончили. Если вы ожидаете, что на популярном только что родившемся медиа-сайте не будет ни одной (да и вообще - на протяжение всего его существования) ошибки, то вы живёте в далёком-далёком будущем. К несчастью, жизнь в будущем не помогает платить счета в настоящем - и потому мы предпочитаем жить именно в настоящем. Мы верим в "постепенное усовершенствование", это всего лишь значит, что переделывая сайт, вы должны руководствоваться практической целесообразностью. Нет нужды биться над решением каждой проблемы, результат не обязательно должен быть идеальным во всех отношениях. Как замечательно сказал Вольтер, "Лучшее - враг хорошего". Eсли бы мы старались добиться во всем идеального совершенства, мы никогда бы не запустили бы сайт. Что мне больше всего нравится в Web-е, так это то, что ваш результат никогда не представляется вашим посетителям как законченный продукт. Вместо этого он как бы постоянно меняется во времени, т.е. вы можете постоянно каждый день понемногу улучшать сайт, не создавая при этом большой нагрузки на бюджет. Доктрина Постепенного Усовершенствования гласит: чем лучше становится ваш сайт с каждой версией, тем выше ваши шансы на место в раю.

Наиболее заметная перемена на сайте ABCNews.com с точки зрения кода - отказ от таблиц в пользу CSS позиционирования. Эту тему за последние годы затёрли до дыр, так что я не буду повторяться и проповедовать вам её, я лишь расскажу о выбранной нами схеме позиционирования блоков на странице. Обычно, приступая к работе над очередным сайтом, я первым делом ищу возможность использовать для компоновки его страниц абсолютное позиционирование. Я гораздо больше симпатизирую абсолютному позиционированию, нежели "плавающим блокам" (floats), и если есть возможность воспользоваться им - я руками и ногами голосую за него. В конечном итоге мы выбрали "самоотсекающие плавающие блоки" (self-clearing floats). Главным образом потому, что это требовали наши горизонтально растянутые подвалы и другие элементы. Одна из гигантских проблем CSS - неспособность абсолютных блоков быть обтекаемыми (clear), а потому, либо приходится решать эту проблему одним из javascript-способов типа предложенного "Волком", либо отдаться на милость "плавающих блоков". Таким образом, "самоотсекание" (self-clearing) наших блоков - приятный прибамбас, избавляющий от необходимости в использования отдельного дополнительного "отсекающего" div-а.

Вторым значительным изменением стало приятное снижение количества ошибок валидации страниц сайта. И снова, если вы ожидали, что я скажу "на сайте нет ни одной ошибки", значит вы никогда не работали над большим медиа-сайтом. Точка. Не говорите мне, что я не умею писать код, и что если бы за дело взялись вы, код ABCNews был бы абсолютно валидным. У сайта было слишком много аморфных деталей и мелочей вне нашего контроля, чтобы быть сделать его полностью свободным от ошибок. Так что мы сделали лучшее из того, что могли, и стараемся постепенно делать сайт еще лучше. Волнует ли нас 100%-ная валидность? Нет, не волнует. Важен ли для нас хороший гибкий код? Да, важен. Подавляющее число ошибок на большинстве страниц сайта связано с амперсантами, и мы готовы с этим мириться.

Третьей важной переменой в коде стал переход на XHTML 1.0 Transitional. Я не сторонник теории о том, что посредством XML мы в скором времени сможем описать все вещи на свете, так что переход на XHTML не основывался на какой-то сверх-идее о Семантическом Web-е Будущего. Я не последователь религии, утверждающей, что все web-документы надо выдавать с "Content-Type:application/xml", так что и это не было мотивом. Мы перешли на XHTML просто для того, чтобы сделать наш код ещё немного более стандартным. Мне нравиться тот факт, что XHTML требует писать элементы строчными буквами. Мне по нраву "слэши" в конце незакрытых тегов. А также другие приятные мелочи. Как и Эрик Мейер, не думаю, что XHTML имеет на сегодня какие-то большие преимущества перед HTML, но они могут проявиться в будущем, так что лучше уже сейчас прививать людям привычку пользоваться им. Работая над недавним редизайном сайта ESPN, мы использовали HTML, и все из-за того, что слишком уж много пришлось бы править старого кода. Однако в случае с ABCNews.com этой проблемы не было.

Немного Flash-а

Наконец-то! На сцену выходит sIFR's (способ замены заголовком flash-роликами)! Не буду вдаваться в технические детали замены заголовков flash-роликами, т. к. информация об этом доступна у меня на сайте. В двух словах: ABCNews.com использует соответствующую стандартам технику показа заголовков типографического качества при помощи комбинации JavaScript и Flash. Методика была разработана общими усилиями вашего покорного слуги, а также Шона Инмана (Shaun Inman), Томаса Йодина (Tomas Jogin), и Марка Вуббена (Mark Wubben). С помощью этого приема мы можем использовать для заголовков и подзаголовков шрифт Futura, соответствующий брэнду ABCNews. Метод просто удивителен, и я настоятельно рекомендую изучить его, если вам осточертело использовать для всего сущего шрифты скучнейший набор из Verdana, Arial, Times и Georgia.

Кроме того, новый ABCNews.com применяет Flash для показа на главной странице небольших бесплатных видеоклипов. В наши дни Flash настолько привлекателен для демонстрации видео-материалов, что мы быстро сошлись во мнении использовать именно его на сайте. Так как Flash-ем охвачены 90% пользователей Интернета, и он работает с минимальными отличиями на всех системах, эта технология - естественное решение, если перед вами стоит задача показать видеоклип как можно большему числу посетителей. В нашем случае Flash дает нам значительное преимущество. Особенно если сравнить видео на ABCNews.com с видео-роликами на MSNBC, которые записаны в формате Windows Media и потому недоступны пользователям "Макинтошей". А мы в Диснее обожаем "Маки".

Скажем внятно и с гордостью: RSS

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

Пример выгодности веб-стандартов с точки зрения бизнеса

Наш редизайн сайтов ESPN.com и ABCNews.com может служить прекрасным бизнес-примером выгоды от веб-стандартов и улучшения кода. Я никогда не заявлял, что наши сайты могут стать примером с технической точки зрения, т.е. образцом того, как вы должны строить свои сайты. С этими вопросами вам лучше обратиться к Дагу Боуману (Doug Bowman). Золотое правило тут таково: чем меньше сайт и чем меньше людей работает с ним, тем больше у разработчика возможностей сделать его в соответствие со своими идеалами. Чем больше у вас будет власти, тем меньше будет в коде ошибок и помарок, и вы, как разработчик, в этом случае просто обязаны следовать доктринам Боумана.

Как бы там ни было, с точки зрения бизнеса в нашем примере выгода перехода на веб-стандарты была очевидной. Работая над ABCNews и ESPN, нам удалось сократить размер кода на 50% от первоначального. Если учесть что сайт выдает терабайты и терабайты исходящего трафика, это сокращение здорово помогает экономить средства. Умелое применение CSS позволило нам размещать на страницах всевозможные разновидности рекламы: тут вам и вертикальные прямоугольники, и горизонтальные прямоугольники, боксы, текстовые объявления, телевизионные объявления, всё, что только может на ум придти. Ну и, наконец, беспроводные устройства. Новая версия ABCNews.com выглядит и работает без всяких дополнительных ухищрений - только благодаря умно написанному коду - на экранах множества беспроводных устройств. В целом, редизайн помог ABCNews.com как средству коммуникации достичь таких высот, какие были просто недоступны при использовании старых технологий. С помощью веб-стандартов диснеевские сайты становятся лучше практически по всем показателям.

Mike Davidson

Mike Davidson is an art director, interactive designer, print designer, and brand consultant in Seattle, WA.

Обсудить (комментариев: 28)

Ссылки по теме