Бестабличный веб-дизайн

Бестабличный веб-дизайн (или веб-макет без таблиц ) — это метод веб-дизайна , который позволяет избежать использования таблиц HTML для целей управления макетом страницы . Вместо таблиц HTML языки таблиц стилей , такие как каскадные таблицы стилей используются для упорядочения элементов и текста на веб-странице (CSS) .

История [ править ]

HTML — это язык разметки , визуальное представление которого изначально было оставлено на усмотрение пользователя. Однако по мере того, как в середине 1990-х годов Интернет превратился из академического и исследовательского мира в мейнстрим и стал более ориентированным на средства массовой информации, графические дизайнеры начали искать способы контролировать внешний вид своих веб-страниц. Как особенно популяризировал дизайнер Дэвид Сигел в своей книге «Создание веб-сайтов-убийц» , таблицы и разделители (обычно прозрачные однопиксельные изображения GIF с явно заданной шириной, высотой или полями) использовались для создания и поддержки макетов страниц. ^[1]

первые достаточно мощные редакторы WYSIWYG , а это означало, что веб-дизайнерам больше не требовалось техническое понимание HTML для создания веб-страниц. В конце 1990-х годов на рынке появились ^[2] Такие редакторы косвенно поощряли широкое использование вложенных таблиц для позиционирования элементов дизайна. Когда дизайнеры редактировали свои документы в этих редакторах, в документ добавлялся ненужный код и пустые элементы. Более того, неквалифицированные дизайнеры, вероятно, будут использовать таблиц больше, чем требуется, при использовании редактора WYSIWYG. Такая практика часто приводила к появлению множества таблиц, вложенных в таблицы, а также к таблицам с ненужными строками и столбцами. Использование графических редакторов с инструментами нарезки, которые напрямую выводят HTML и изображения, также способствовало созданию плохого кода, поскольку таблицы часто имели много строк высотой или шириной в 1 пиксель. Иногда для рендеринга контента использовалось гораздо больше строк кода, чем самого контента.

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

Каскадные таблицы стилей (CSS) были разработаны для улучшения разделения между дизайном и контентом и возврата к семантической организации контента в Интернете. Термин «бестабличный дизайн» подразумевает использование CSS, а не таблиц макета для позиционирования элементов HTML на странице. Таблицы HTML по-прежнему имеют свое законное место при представлении табличной информации на веб-страницах. ^[3] а также иногда до сих пор используются в качестве средств макетирования в ситуациях, когда поддержка CSS плохая или проблематична, например, вертикальное центрирование элемента. Еще одна область, где таблицы все еще используются, — это программы электронной почты, поскольку многие популярные почтовые клиенты не поддерживают современные возможности рендеринга HTML и CSS. В таком случае сложные программы электронной почты теряют часть своей структурной и творческой согласованности.

Принятие [ править ]

Спецификация CSS1 была опубликована W3C в декабре 1996 года . ^[4] с целью улучшения веб-доступности и акцентирования внимания на отделении деталей представления в таблицах стилей от семантического контента в документах HTML . CSS2 в мае 1998 года (позже пересмотренный в CSS 2.1 и CSS 2.2) расширил CSS1 возможностями позиционирования и макета таблицы.

Предпочтение использовать таблицы HTML вместо CSS для управления макетом целых веб-страниц было вызвано несколькими причинами:

желание издателей контента воспроизвести существующие элементы корпоративного дизайна на своем веб-сайте;
ограничения на момент поддержки CSS в браузерах;
установленная база браузеров, не поддерживающих CSS;
незнание новых веб-дизайнеров стандартами CSS;
отсутствие знаний или беспокойство по поводу причин (включая семантику HTML и веб-доступность ) использования CSS вместо того, что считалось более простым способом быстрого достижения намеченных макетов, и
новое поколение инструментов веб-дизайна WYSIWYG , поощряющее эту практику.

Вехи в принятии макетов на основе CSS включают кампанию по обновлению браузера в рамках проекта Web Standards Project в феврале 2001 года и одновременный редизайн журнала веб-дизайна A List Apart , за которым последовал редизайн Wired в 2002 году. ^[5] Веб -сайту CSS Zen Garden , запущенному в 2003 году, приписывают популяризацию бестабличных макетов. ^[6]

Обоснование [ править ]

Предполагаемая и семантическая цель HTML-таблиц заключается в представлении табличных данных. ^[3]^[7] вместо того, чтобы раскладывать страницы. ^[8]Преимущества использования CSS для макета страницы включают улучшенную доступность информации для более широкого круга пользователей за счет использования широкого спектра пользовательских агентов . Экономия полосы пропускания достигается за счет большого количества семантически бессмысленных <table>, <tr> и <td> теги удаляются с десятков страниц, остается меньше, но более содержательных заголовков, абзацев и списков. Инструкции по макету передаются в таблицы стилей CSS для всего сайта, которые можно загрузить один раз и кэшировать для повторного использования, пока каждый посетитель перемещается по сайту. Сайты могут стать более удобными в обслуживании, поскольку весь сайт можно изменить за один проход, просто изменив разметку определенного CSS, что затронет каждую страницу, использующую эту таблицу стилей. Новый HTML-контент может быть добавлен таким образом, что существующий CSS немедленно применяет к нему согласованные правила макета без каких-либо дополнительных усилий.

Преимущества [ править ]

Доступность [ править ]

Из-за быстрого роста Интернета, расширения законодательства о дискриминации инвалидов и все более широкого использования мобильных телефонов и КПК , необходимо, чтобы веб-контент был доступен пользователям, использующим широкий спектр устройств, выходящих за рамки относительно однородной настольных компьютеров и ЭЛТ-мониторов. экосистемы Интернет впервые стал популярным на. Бестабличный веб-дизайн в этом отношении значительно улучшает доступность Интернета , поскольку таблицы, слишком широкие для экрана, необходимо прокручивать вбок, чтобы их можно было прочитать целиком, тогда как текст можно обтекать.

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

В результате разделения дизайна (CSS) и структуры (HTML) также можно предоставлять разные макеты для разных устройств, например, карманных компьютеров , мобильных телефонов и т. д. Также можно указать другую таблицу стилей для печати, например, чтобы скрыть или изменить внешний вид рекламных объявлений или элементов навигации, которые не имеют значения и мешают версии страницы для печати.

Руководство W3C по обеспечению доступности веб-контента №. 3 гласит: «Используйте разметку и таблицы стилей и делайте это правильно». ^[9]Контрольная точка 3.3 руководства, контрольная точка приоритета 2, гласит: «Используйте таблицы стилей для управления макетом и представлением». ^[10]

Экономия пропускной способности [ править ]

Бестабличный дизайн создает веб-страницы с меньшим количеством HTML-тегов, используемых исключительно для позиционирования контента. Обычно это означает, что сами страницы становятся меньше для загрузки. Философия подразумевает, что все инструкции, касающиеся макета и позиционирования, должны быть перенесены во внешние таблицы стилей. В соответствии с базовыми возможностями HTTP , поскольку они редко меняются и применяются ко многим веб-страницам, они будут кэшироваться и повторно использоваться после первой загрузки. Это еще больше снижает пропускную способность и время загрузки на сайте. ^[11]^[12]

Ремонтопригодность [ править ]

Поддержание веб-сайта может потребовать частых изменений, как небольших, так и крупных, в визуальном стиле веб-сайта, в зависимости от цели сайта. При табличном макете макет является частью самого HTML. Таким образом, без помощи визуальных редакторов на основе шаблонов, таких как редакторы HTML , изменение позиционного макета элементов на всем сайте может потребовать больших усилий, в зависимости от количества требуемых повторяющихся изменений. Даже использование sed или аналогичных глобальных утилит поиска и замены не может полностью решить проблему.

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

Кроме того, поскольку информация о макете может храниться вне HTML, может быть довольно легко добавить новый контент в бестабличный дизайн, будь то изменение существующей страницы или добавление новой страницы. Напротив, без такого дизайна макет каждой страницы может потребовать более трудоемкого ручного изменения каждого экземпляра или использования глобальных утилит поиска и замены. Однако владельцы сайтов часто хотят, чтобы определенные страницы отличались от других на сайте на короткий или длительный период. Это часто требует разработки отдельной таблицы стилей для этой страницы. Однако содержимое страницы (или шаблона) обычно может оставаться неизменным, чего нельзя сказать о дизайне на основе таблиц.

См. также [ править ]

Ссылки [ править ]

^ Грубер, Джордан С. (1 февраля 1997 г.). «Покинутый сайт» . Проводной .
^ Маас, Бенард. «Краткая история редакторов WYSIWYG» . 1PMWD . Проверено 10 февраля 2015 г. Microsoft Office FrontPage был выпущен как пакет версии Microsoft Office 1997 года. Это был первый случай, когда надежный коммерческий редактор и издатель HTML WYSIWYG был доступен каждому человеку... Когда веб-страница была построена на основе Программное обеспечение WYSIWYG MS FrontPage будет работать с серверной частью FPSE и будет обладать всеми возможностями, которые технолог мог бы создать, написав HTML-код с нуля. Веб-дизайнерам больше не требовалось техническое понимание HTML для создания веб-страниц.
↑ Перейти обратно: Перейти обратно: ^а ^б Дженнифер Кирнин. «Таблицы для табличных данных — что такое табличные данные? Когда использовать таблицы в стандартизированном документе XHTML» . About.com, часть компании The New York Times . Проверено 22 октября 2009 г.
^ Ложь, Хокон Виум; Бос, Берт (17 декабря 1996 г.). «Рекомендация W3C: каскадные таблицы стилей, уровень 1» . W3C . Архивировано из оригинала 5 июня 1997 г. Проверено 19 апреля 2019 г.
^ Зельдман, Джеффри (14 мая 2003 г.). Проектирование с использованием веб-стандартов (1-е изд.). Индианаполис: Новые гонщики. стр. 120-134 . ISBN 978-0-7357-1201-0 .
^ Зельдман, Джеффри (2007). Проектирование с использованием веб-стандартов (2-е изд.). Беркли: Новые гонщики. п. 137 . ISBN 978-0-321-38555-0 .
^ «17.2.1 Анонимные табличные объекты» . Спецификация каскадных таблиц стилей уровня 2, редакция 1 (CSS 2.1) . W3C . 2009 . Проверено 23 октября 2009 г.
^ Доминик Азаэль-Массие (2005). «HOWTO по бестабличной компоновке» . W3C . Проверено 8 сентября 2007 г.
^ «Руководство по обеспечению доступности веб-контента 1.0» . W3C. 1999 . Проверено 19 сентября 2009 г. Правило 3. Используйте разметку и таблицы стилей и делайте это правильно.
^ «Методы создания рекомендаций по обеспечению доступности веб-контента 1.0» . W3C. 2000 . Проверено 19 сентября 2009 г. Используйте таблицы стилей для управления макетом и представлением.
^ Дэниел М. Фроммелт (2003). «Переоснащение Slashdot с помощью веб-стандартов» . Журнал List Apart . Проверено 20 сентября 2009 г.
^ Дэн Шафер (2003). «HTML-утопия: проектирование без таблиц с использованием CSS, глава 4: дизайн веб-сайтов с помощью CSS» . СайтПоинт Пти . Проверено 20 сентября 2009 г. ...помимо описанных выше организационных преимуществ, браузер требует меньшего количества кода для загрузки. На сайтах со сложным дизайном или сайтах с сотнями и более страниц такое сокращение времени загрузки может оказать существенное влияние как на удобство работы пользователей, так и на затраты на пропускную способность.

Внешние ссылки [ править ]

W3C Бестабличная компоновка HOWTO
13 причин, почему CSS превосходит таблицы в дизайне веб-сайтов
Open Designs (коллекция бестабличных веб-шаблонов, совместимых с W3C)

[1] Грубер, Джордан С. (1 февраля 1997 г.). «Покинутый сайт» . Проводной .

[2] Маас, Бенард. «Краткая история редакторов WYSIWYG» . 1PMWD . Проверено 10 февраля 2015 г. Microsoft Office FrontPage был выпущен как пакет версии Microsoft Office 1997 года. Это был первый случай, когда надежный коммерческий редактор и издатель HTML WYSIWYG был доступен каждому человеку... Когда веб-страница была построена на основе Программное обеспечение WYSIWYG MS FrontPage будет работать с серверной частью FPSE и будет обладать всеми возможностями, которые технолог мог бы создать, написав HTML-код с нуля. Веб-дизайнерам больше не требовалось техническое понимание HTML для создания веб-страниц.

[Kyrnin-3] Перейти обратно: Перейти обратно: ^а ^б Дженнифер Кирнин. «Таблицы для табличных данных — что такое табличные данные? Когда использовать таблицы в стандартизированном документе XHTML» . About.com, часть компании The New York Times . Проверено 22 октября 2009 г.

[4] Ложь, Хокон Виум; Бос, Берт (17 декабря 1996 г.). «Рекомендация W3C: каскадные таблицы стилей, уровень 1» . W3C . Архивировано из оригинала 5 июня 1997 г. Проверено 19 апреля 2019 г.

[5] Зельдман, Джеффри (14 мая 2003 г.). Проектирование с использованием веб-стандартов (1-е изд.). Индианаполис: Новые гонщики. стр. 120-134 . ISBN 978-0-7357-1201-0 .

[6] Зельдман, Джеффри (2007). Проектирование с использованием веб-стандартов (2-е изд.). Беркли: Новые гонщики. п. 137 . ISBN 978-0-321-38555-0 .

[7] «17.2.1 Анонимные табличные объекты» . Спецификация каскадных таблиц стилей уровня 2, редакция 1 (CSS 2.1) . W3C . 2009 . Проверено 23 октября 2009 г.

[8] Доминик Азаэль-Массие (2005). «HOWTO по бестабличной компоновке» . W3C . Проверено 8 сентября 2007 г.

[9] «Руководство по обеспечению доступности веб-контента 1.0» . W3C. 1999 . Проверено 19 сентября 2009 г. Правило 3. Используйте разметку и таблицы стилей и делайте это правильно.

[10] «Методы создания рекомендаций по обеспечению доступности веб-контента 1.0» . W3C. 2000 . Проверено 19 сентября 2009 г. Используйте таблицы стилей для управления макетом и представлением.

[11] Дэниел М. Фроммелт (2003). «Переоснащение Slashdot с помощью веб-стандартов» . Журнал List Apart . Проверено 20 сентября 2009 г.

[12] Дэн Шафер (2003). «HTML-утопия: проектирование без таблиц с использованием CSS, глава 4: дизайн веб-сайтов с помощью CSS» . СайтПоинт Пти . Проверено 20 сентября 2009 г. ...помимо описанных выше организационных преимуществ, браузер требует меньшего количества кода для загрузки. На сайтах со сложным дизайном или сайтах с сотнями и более страниц такое сокращение времени загрузки может оказать существенное влияние как на удобство работы пользователей, так и на затраты на пропускную способность.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]