Хорошая разметка: разумные расходы

Многие из нас учились делать сайты в 90-е годы, в те дни широко использова­лись ужасные шрифты и вспомогательные таблицы, код по большей части применялся для того, чтобы задать семантику (для так называемой структур­но значимой разметки), однако было мало способов повлиять на внешний вид. У сайта образца 1993 года был структурный смысл, но сделать так, чтобы он хорошо выглядел, было достаточно сложно. Когда были введены теги <font> и <table>, а браузеры начали их поддерживать, дизайнеры просто лишились рассудка, добавляя эту новую разметку внешнего вида на свои стра­ницы.

Для того чтобы кусочек текста отображался шрифтом Arial меньшего раз­мера, необходимо было написать следующую строку в разметке:

<font   face=arial  size=-l>3Aecb  какой-то  текст.</font>

Для каждого куска текста — будь то абзац, список или заголовок — приходи­лось писать нечто подобное.

Тегов шрифтов было недостаточно в этом, теперь уже устаревшем методе. Ранее я рассказывала о вездесущих разделительных GIF-фалах и о том, как их использовали для создания полей. В дни браузеров 3.0 и 4.0 у вас не было особого выбора. Если вам необходимо было заполнение, пропуск или поля, приходилось отделять требуемое пространство при помощи белого или про­зрачного изображения.

Web-дизайнерам даже удавалось извлекать выгоду из проблем с ранними браузерами. Во времена Netscape 1.0, если разработчик писал несколько тегов <title>, в результате в заголовке окна браузера получалось настоящее слайд-шоу. Следующие три тега отобразились бы в виде меняющегося текста:

<title>/KypHan Модные niTaHbi</title>

< t i t l e Еженедельный  журнал  для  модных любителей   HiTaHOB</title>

<title>CaMbie  модные  штаны  в   городe</title>

Игры с причудами и несоответствиями браузера стали очень важным опытом; написание разметки, которая по-новому использовала ошибки браузера, было работой дизайнера. Идущие подряд несколько тегов < title > — это классический пример из истории HTML. Привычка разработки дизайна для отдельных браузе­ров сильна; большая часть разметки строилась на таких хитростях.

Несмотря на свой творческий характер, такой метод производства отнимал достаточно много времени, даже при использовании графических редакторов, таких как Microsoft FrontPage и Macromedia Dreamweaver. Тем не менее этот метод работал безотказно. Но такая разметка верно отображалась только на тех пользовательских агентах, о которых побеспокоились дизайнеры.

Почему презентационная разметка усложняла работу в Сети

Несмотря на то что презентационная, основанная на специфике браузера раз­метка была забавной и даже позволяла дизайнерам контролировать внешний вид сайта, все же она значительно усложняла работу в Сети:

  1. Создание сайта занимало невероятное количество времени, а его пере­делка — еще больше.
  2. HTML-разметка не выполняла своих непосредственных задач. Вспомни­те пример с тегом < title >. Этот элемент должен сообщать пользователь­ским агентам название данной страницы сайта. Если у вас три тега < title >, какой из них должна использовать поисковая машина?
  3. Слишком чувствительная к браузеру HTML-разметка должна была пере­делываться каждый раз, когда появлялся новый браузер, таким образом, увеличивалась стоимость сайта.
  4. Страницы были перегружены лишней разметкой, которая отнимала вре­мя и деньги дизайнеров и пользователей за хранение и трафик.

Г Угроза бюджету

Плохая, перегруженная разметка «съест» ваш бюджет несколькими путями: создавая большие HTML-страницы, медленно загружаемые и дорогие для обслуживания; делая поддержку и переделку сайта более трудной задачей; и заставляя вас создавать раз­ные версии сайта для нетрадиционных устройств просмотра. ОтветственныйWeb-про-фессионал, работающий при небольшом бюджете, сэкономит время и деньги, созда­вая хорошо сделанную разметку.

Многим из нас приходилось создавать сайты таким образом; для некоторых это была работа — делать так, чтобы сайт выглядел хорошо на некоторых спе­цифических браузерах. Производство было тесно связано с тем, как сайт вы­глядел в ранних версиях Netscape и Internet Explorer. Практически с каждым выпуском нового браузера приходилось возвращаться назад и изменять размет­ку представления сайта так, чтобы в новых браузерах сайт выглядел хорошо. Нельзя было отставать от прогресса, но следовать ему было очень сложно.

Хорошая разметка облагораживает Сеть

Впрочем, сейчас вам уже не надо делать презентационную разметку — вы про­сто не можете себе этого позволить. Браузеры и разметка изменились, вам больше не нужно тратить время, загромождая разметку презентационным «му­сором». Некоторые браузеры с версий 4.0 начали одинаково поддерживать разметку, а с появлением Tasman (ядро браузеров в I.E. 5.0 для Мае) и Gecko (ядро браузеров для Mozilla, версий Netscape после 4-й и многих других браузе­ров) различные браузеры начали интерпретировать разметку практически оди­наково. Такая одинаковость — результат того, что производители браузеров начали создавать пользовательские агенты в соответствии со стандартами W3C, написанными относительно (X)HTML и CSS.

В то же самое время дизайнеры начали осознавать необходимость создания сайтов, которые работают на альтернативных пользовательских агентах, таких как карманные компьютеры, браузеры Брайля и мобильные телефоны. К счас­тью, рекомендации W3C по мобильным устройствам и доступности Web-сайта делают упор на разделение кодов XHTML и CSS, а сайты, созданные согласно стандартам W3C, легко и уверенно работают на всех пользовательских агентах. Работа сегодняшнего Web-дизайнера сильно отличается от работы дизайне­ра 90-х: вы должны создавать качественные сайты, которые будут работать на разнообразных устройствах отображения. Самое главное, что для этого вам придется потратить меньше усилий, чем раньше. Такой подход должен состо­ять в создании одной версии вашего сайта, но чтобы при этом сайт работал на всех браузерах и на всех устройствах, старых, новых и тех, что еще появятся. В книге «Дизайн по Web-стандартам» Джефри Зельдман (Jeffrey Zeldman) назы­вает этот новый, экономичный, основанный на стандартах подход к Web-дизай­ну, «заблаговременной совместимостью» (forward compatibility), а в его книге показано, как этот подход работает как на крупных, так и на более скромных сайтах.

Posted in Экономичный Web-дизайн.