Бестабличный веб-дизайн (или бестабличная веб-разметка ) — это метод веб-дизайна , который избегает использования HTML-таблиц для управления макетом страницы . Вместо HTML-таблиц для упорядочивания элементов и текста на веб-странице используются языки таблиц стилей, такие как каскадные таблицы стилей (CSS).
HTML — это язык разметки , визуальное представление которого изначально было оставлено на усмотрение пользователя. Однако, поскольку Интернет расширился из академического и исследовательского мира в мейнстрим в середине 1990-х годов и стал более ориентированным на медиа, графические дизайнеры искали способы контролировать внешний вид своих веб-страниц. Как популяризировал, в частности, дизайнер Дэвид Сигел в своей книге Creating Killer Web sites , таблицы и разделители (обычно прозрачные однопиксельные GIF- изображения с явно указанной шириной, высотой или полями) использовались для создания и поддержки макетов страниц. [1]
В конце 1990-х годов на рынке появились первые достаточно мощные редакторы WYSIWYG , что означало, что веб-дизайнерам больше не требовалось техническое понимание HTML для создания веб-страниц. [2] Такие редакторы косвенно поощряли широкое использование вложенных таблиц для позиционирования элементов дизайна. Когда дизайнеры редактировали свои документы в этих редакторах, в документ добавлялся ненужный код и пустые элементы. Кроме того, неквалифицированные дизайнеры, вероятно, использовали таблицы больше, чем требовалось при использовании редактора WYSIWYG. Такая практика часто приводила к появлению множества таблиц, вложенных в таблицы, а также таблиц с ненужными строками и столбцами. Использование графических редакторов с инструментами нарезки, которые напрямую выводили HTML и изображения, также способствовало появлению плохого кода, поскольку таблицы часто имели много строк высотой или шириной в 1 пиксель. Иногда для отображения контента использовалось гораздо больше строк кода, чем сам контент.
Зависимость от таблиц для целей макета вызвала ряд проблем. Многие веб-страницы были разработаны с таблицами, вложенными в таблицы, что привело к большим документам HTML, которые используют большую полосу пропускания, чем документы с более простым форматированием. Кроме того, когда макет на основе таблиц линеаризуется, например, при анализе программой чтения с экрана или поисковой системой, результирующий порядок содержимого может быть несколько перемешанным и запутанным.
Каскадные таблицы стилей (CSS) были разработаны для улучшения разделения между дизайном и контентом и возврата к семантической организации контента в Интернете. Термин «дизайн без таблиц» подразумевает использование CSS, а не таблиц макетов для позиционирования элементов HTML на странице. Таблицы HTML по-прежнему имеют свое законное место при представлении табличной информации на веб-страницах [3] , а также иногда все еще используются в качестве устройств макета в ситуациях, для которых поддержка CSS плохая или проблематична, например, вертикальное центрирование элемента. Другая область, где таблицы все еще используются, — это программы электронной почты, поскольку многие популярные клиенты электронной почты не поспевают за современным рендерингом HTML и CSS. В таком сценарии сложные программы электронной почты теряют часть своего структурного и творческого выравнивания.
Спецификация CSS1 была опубликована в декабре 1996 года W3C [ 4] с целью улучшения веб-доступности и подчеркивания разделения презентационных деталей в таблицах стилей от семантического содержания в документах HTML . CSS2 в мае 1998 года (позднее пересмотренный в CSS 2.1 и CSS 2.2) расширил CSS1 возможностями позиционирования и макета таблиц.
Предпочтение отдавалось использованию таблиц HTML вместо CSS для управления макетом целых веб-страниц по нескольким причинам:
Вехами в принятии макетов на основе CSS можно назвать кампанию по обновлению браузера в рамках проекта Web Standards Project в феврале 2001 года и одновременный редизайн журнала о веб-дизайне A List Apart , за которым последовал редизайн Wired в 2002 году. [5] Веб -сайт CSS Zen Garden , запущенный в 2003 году, считается популяризатором макетов без таблиц. [6]
Предполагаемое и семантическое назначение HTML-таблиц заключается в представлении табличных данных [3] [7], а не в компоновке страниц. [ 8]
Преимущества использования CSS для макета страницы включают улучшенную доступность информации для более широкого круга пользователей, использующих широкий спектр пользовательских агентов . Экономится пропускная способность, так как большое количество семантически бессмысленных <table>и тегов удаляется с десятков страниц, оставляя меньше, но более значимых заголовков, абзацев и списков. Инструкции по макету переносятся в таблицы стилей CSS для всего сайта, которые можно загрузить один раз и кэшировать для повторного использования, пока каждый посетитель перемещается по сайту. Сайты могут стать более удобными для обслуживания, поскольку весь сайт можно переделать или переименовать за один проход, просто изменив разметку определенного CSS, затронув каждую страницу, которая опирается на эту таблицу стилей. Новый HTML-контент можно добавлять таким образом, чтобы к нему немедленно применялись согласованные правила макета существующим CSS без дополнительных усилий.<tr><td>
Из-за быстрого роста Интернета, расширения законодательства о дискриминации по признаку инвалидности и растущего использования мобильных телефонов и КПК необходимо, чтобы веб-контент был доступен пользователям, работающим с широким спектром устройств, помимо относительно единообразной экосистемы настольных компьютеров и ЭЛТ-мониторов, на которой впервые стал популярен Интернет. Дизайн веб-сайтов без таблиц значительно улучшает доступность веб-сайтов в этом отношении, поскольку таблицы, слишком широкие для экрана, необходимо прокручивать вбок, чтобы прочитать их полностью, в то время как текст можно обтекать.
У экранных ридеров и устройств Брайля меньше проблем с бестабличным дизайном, поскольку они следуют логической структуре. То же самое касается поисковых роботов , программных агентов, которые, как надеется большинство издателей веб-сайтов, найдут их страницы, точно их классифицируют и, таким образом, позволят потенциальным пользователям легко находить их в соответствующих поисковых запросах.
В результате разделения дизайна (CSS) и структуры (HTML) также стало возможным предоставлять различные макеты для различных устройств, например, карманных компьютеров , мобильных телефонов и т. д. Также стало возможным указать другую таблицу стилей для печати, например, чтобы скрыть или изменить внешний вид рекламы или элементов навигации, которые не имеют значения и мешают печатной версии страницы.
В руководстве W3C по доступности веб-контента № 3 говорится: «Используйте разметку и таблицы стилей и делайте это правильно». [9] Контрольная точка 3.3 руководства, контрольная точка приоритета 2, гласит: «Используйте таблицы стилей для управления макетом и представлением». [10]
Бестабличный дизайн создает веб-страницы с меньшим количеством HTML-тегов, используемых исключительно для позиционирования контента. Обычно это означает, что сами страницы становятся меньше для загрузки. Философия подразумевает, что все инструкции относительно макета и позиционирования должны быть перемещены во внешние таблицы стилей. Согласно основным возможностям HTTP , поскольку они редко меняются и применяются в целом ко многим веб-страницам, они будут кэшироваться и повторно использоваться после первой загрузки. Это еще больше снижает пропускную способность и время загрузки по всему сайту. [11] [12]
Поддержание веб-сайта может потребовать частых изменений, как небольших, так и крупных, в визуальном стиле веб-сайта, в зависимости от назначения сайта. В табличной компоновке компоновка является частью самого HTML. Таким образом, без помощи визуальных редакторов на основе шаблонов, таких как редакторы HTML , изменение позиционной компоновки элементов на всем сайте может потребовать больших усилий, в зависимости от количества требуемых повторяющихся изменений. Даже использование sed или аналогичных глобальных утилит поиска и замены не может полностью решить проблему.
В бестабличной компоновке с использованием CSS информация о компоновке может находиться в документе CSS. Поскольку информация о компоновке может быть централизована, возможно, что эти изменения могут быть сделаны быстро и глобально по умолчанию. Сами файлы HTML, возможно, не нужно будет корректировать при внесении изменений в компоновку.
Кроме того, поскольку информация о макете может храниться вне HTML, может быть довольно легко добавить новый контент в дизайн без таблиц, будь то изменение существующей страницы или добавление новой страницы. Напротив, без такого дизайна макет для каждой страницы может потребовать более трудоемкого ручного изменения каждого экземпляра или использования глобальных утилит поиска и замены. Однако владельцы сайтов часто хотят, чтобы определенные страницы отличались от других на сайте либо на короткий период, либо на длительный срок. Это часто требует разработки отдельной таблицы стилей для этой страницы. Однако содержимое страницы (или шаблона) обычно может оставаться неизменным, чего нельзя сказать о дизайне на основе таблиц.
Office FrontPage был выпущен как пакет версии Microsoft Office 1997 года, это был первый случай, когда надежный коммерческий редактор и издатель HTML WYSIWYG стал доступен для использования каждым человеком... Когда веб-страница, созданная с помощью программного обеспечения WYSIWYG MS FrontPage, будет работать с внутренним FPSE, она будет обладать всей мощью, которую технолог мог бы создать, написав HTML-код с нуля. Веб-дизайнерам больше не требовалось техническое понимание HTML для создания веб-страниц.
3. Используйте разметку и таблицы стилей и делайте это правильно.
таблицы стилей для управления макетом и представлением.
...в дополнение к организационным преимуществам, описанным выше, браузеру нужно загружать меньше кода. На сайтах с тяжелым дизайном или на сайтах с сотнями и более страниц это сокращенное время загрузки может оказать существенное влияние как на пользовательский опыт, так и на расходы на пропускную способность.