Верстка для продвижения сайта.

Верстка сайта (веб-страниц) – процесс разметки документа, при котором документ принимает вид соответствующий шаблону (макету) дизайна, при этом сам шаблон разбивается на графический материал. Разметка документа производится в соответствии с языком разметки HTML (Hypertext Markup Language) исходя из принятых стандартов World Wide Web Consortium, W3C (Консорциум Всемирной паутины) типа HTML 4.01 или XHTML 1.0 (на 2007 год).

Грамотной разметкой документа будет являться та, которая:
1. абсолютно идентично представляет во всех браузерах макет дизайна
2. имеет наименьший размер
3. понятно демонстрирует макет во всех популярных расширениях экрана (на 2007 – от 1024х768).

Все эти принципы можно реализовать строя дизайн на таблицах (table) или на блоках (div).
Программисты и оптимизаторы уже более двух лет спорят о преимуществах и недостатках блочной и табличной верстки. Как известно, что программисту хорошо, то оптимизатору – смерть. Легко и качественно сверстанный сайт почему то продвигается с трудом, а требования сеошника при создании ресурса вызывают у программиста-исполнителя гнев и недоумение.
Сегодня мы попробуем найти компромисс, рассмотрев все достоинства и недостатки табличной и блочной верстки. Забегая вперед, скажу, что сравнительный анализ выявил бОльшую перспективность блочной HTML или XHTML разметки над версткой таблицами самых распространенных моделей web-страниц.

С точки зрения программирования, у табличной верстки (ТВ) есть много недостатков. Рассмотрим их по порядку:
1. Web-стандарты. Используя табличную невозможно сверстать более или менее серьезный макет, который бы не содержал синтаксических ошибок в коде.
2. Семантика. Таблицы были введены в HTML исключительно для облегчения представления табличной информации (прайс лист и т. д.), но поскольку в спецификации HTML 3.2 не было каких-либо других способов позиционирования элементов на странице, тогдашние web-мастера использовали таблицы для разметки страницы на блоки (меню, шапка, подвал и т. д.).
3. Нелогичность поведения таблиц. Если вы верстаете таблицами, то наверняка сталкивались с нелогичностью поведения в сложных макетах и разных браузерах. Это связано с тем, что таблицы не предназначены для верстки и с тем, что большинство браузеров отрисовывают страницы с ТВ в кварк режиме, а этот режим у всех браузеров разный.
4. Читабельность кода и редизайн. Вы когда-нибудь пробовали разобраться в коде чужого ресурса, сверстанного таблицами? Скорее всего, это было нелегко. А внести какие-либо серьезные изменения в дизайн иногда вообще невозможно, легче сверстать все заново.
5. Размер кода. В подавляющем большинстве случаев верстка таблицами значительно увеличивает код страницы по сравнению с блочной.

Таким образом, мы выяснили, что ТВ это не только вчерашний день, но и много проблем для верстальщика и пользователя.

У блочной верстки (БВ) есть один единственный недостаток — отсутствие полноценной поддержки CSS 2.0 в некоторых браузерах. Но так ли все плохо? По данным статистики Hotlog пользователей браузеров, не поддерживающих CSS 2.0, всего около 1%. Это люди, использующие старые браузеры, и их с каждым днем становится все меньше.

В то же время, у БВ есть ряд преимуществ.
1. Соответствие стандартам. Правильная БВ полностью соответствует стандартам HTML и CSS. Это обеспечивает легкое понимание вашего кода теми, кто знаком со стандартами и гарантируемую поддержку в новых версиях браузеров.
2. Отделение содержания от представления. Это обеспечивает легко читабельный код и смену дизайна всего ресурса простым изменением файла стилей.
3. Правильное отображение страничек разными устройствами. Возможность создания разных файлов стилей для разных устройств (КПК, принтер и т. д.) без изменения HTML кода.
4. Легкость и логичность. Вы просто берете нужный блок и, используя стили, определяете его размеры, вид и место на странице.

В последнее время все больше популярной становится именно блочная, хотя от табличной во многих случаях уйти невозможно. Напомним, что правильная блочная и табличная верстка соответствует всем стандартам HTML и являются допустимыми.

Итак, программисты считают верстку таблицами «вчерашним днем». Посмотрим теперь на этот процесс глазами оптимизатора.

Преимущества БВ при создании сайта:
1. Возможность поднять контент выше к началу странички, опустив блоки дизайна вниз, что благоприятнее воспринимается индексирующими поисковыми роботами
2. более компактный вид, размер текста разметки меньше – уменьшение размера страницы

Недостатки БВ при создании сайта:
1. при нестандартных разрешениях (обычно более низких) блоки могут перекрывать друг друга, что во многих случаях закрывает доступ к интерфейсам сайта
2. подходит не для всех шаблонов дизайна
3. не все типы браузеров качественно обрабатывают блоки (этот важный для сеошника пункт мы уже рассматривали с точки зрения программиста)

Преимущества ТВ при создании сайта:
1. поддержка абсолютно всеми браузерами
2. таблицы не дают при разных разрешениях перекрывать друг друга
3. более наглядная структура – элементы идут друг за другом в естественной последовательности, что облегчает поиск нужной структуры

Недостатки ТВ при создании сайта:
1. лишний код для определения колонок, строк придает лишний размер страничкам
2. подходит не для всех шаблонов дизайна
Подводя итог, скажем, что единственно верное решение, принимается лишь при наличии определенных заказчиком условий, исходя из замысла проекта. Оценив все за и против, программист рука об руку с другом-оптимизатором, выбирают оптимальный, удовлетворяющий всех вариант. Значит, в битве блоков и таблиц опять победила дружба и здравый смысл.

Комментарии:

Елисей15.02.15 15:58

Как я не люблю верстку :) По одному из проектов с ней приходится сталкиваться

Владимир06.02.15 00:31

Да, верстка конечно должна быть кроссбраузерной и валидной. Но что делать с адаптивной версткой для мобильных телефонов? Нужно ли делать отдельную мобильную версию сайта, или все же не нужно? Тут для меня все не ясно. Ну и на разных платформах мобильных устройств сайт тоже может отображаться по разному, ведь очень важно и это учитывать.

Оставить комментарий

Seo Blog

Написать нам

 
наверх