Неправильная вёрстка

 (Записки сумашедшего верстальшика)

Данный материал – это просто мысли «вслух», которые не являются «разбором полётов» и вовсе не обязательны к применению. Статья носит философский характер и её автор ни в коей мере не претендует на менторский тон.

1. Кроссбраузерность и доступность сайта
2. Хаки и поддержка устаревших браузеров
3. Три версии шаблона для сайта
4. Как вёрстка, влияет на SEO
5. Семантическая вёрстка
6. Форматирование контента – не проблема верстальщика
7. Верстальщик и журналист
8. Неправильная вёрстка

Кроссбраузерность и доступность сайта

Кроссбраузерность – это свойство сайта одинаково отображаться и идентично работать во всех популярных браузерах. Под доступностью сайта подразумевается хорошая картинка для посетителей с техническими ограничениями – устаревшие браузеры, мобильные браузеры, браузеры с отключённой графикой и jаvascript, клиенты с низкой скоростью интернет-соединения и т.д. Иными словами, считается что любой посетитель с любого устройства должен чувствовать себя на сайте одиннаково хорошо и комфортно. Ага. Как-бы не так. Всем не угодишь.

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

С появлением мобильных переносных устройств и адаптивных шаблонов, про кроссбраузерную вёрстку потихоньку начали забывать. Во первых, совремённые браузеры всё-таки научились, более-менее одинаково обрабатывать HTML-код веб-документа. А во вторых, и это самое главное – о какой кроссбраузерности и доступности может идти речь, если количество одних только вариаций на тему «браузер умноженный на разрешение экрана» – сразу и легко переваливает за сотню.

Скорость интернета и безопасность интернет-обозревателей тоже увеличились настолько, что найти пользователя с отключёнными картинками и jаvascript также тяжело, как и отыскать снег в Африке. На валидность кода ныне все «положили прибор», потому как, с появлением HTML5 – ни один валидатор толком уже не может ничего понять.

Короче, для верстальщиков наступила золотая пора.
Претензии к ним уменьшились, а возможности – возросли.

Хаки и поддержка устаревших браузеров

Поддержка устаревших браузеров и хаки для них – мартышкин труд. Это в уже прошлом. Большинство современных браузеров прекрасно управляются с HTML и CSS кодом, и обновляются в автоматическом режиме. И, если какой-то код не работает в каком-то из браузеров сейчас, то он – будет работать там очень скоро, в реально-обозримом будущем. Лично я давно уже отказался от подобных вещей:

-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

Зачем засорять код?

Три версии шаблона для сайта

Огромное количество вариантов размеров экрана ставит в тупик современного верстальщика. Планшеты с диагональю 17 и 19 дюймов, теперь – отнюдь не редкость. Но, в то же время, отсутствие мыши у планшета накладывает свои особенности на его пользование. И это при том, что абсолютно неизвестно, чем именно посетитель будет елозитть по своему сенсорному экрану – пальчиком или спичкой-указкой. Так что, проблема с меню навигации по веб-ресурсу выдвигается на передний план и затмевает в своей значимости, и кроссбраузерность сайта, и его доступность.

Да что уж там говорить про бедолагу-верстальщика, если даже сам дядя Билл в своей далёкой Америке не может определиться с внешним видом меню – делать его «под пальчики», или «под мышку-норушку»...

Частично, проблемы с навигацией и кроссбраузерностью, связанной с изобилием и разнообразием переносных экранов и мониторов – решает адаптивный шаблон. С таким шаблоном на сайте, пользователь сразу видит сайт в изменённом (адаптированном) виде под свой размер экрана. При этом, никто не запрещает посетителю самостоятельно «зажать» клавишу Ctrl и покрутить колёсико мышки, подстраиваясь под различные размеры и отображения. Вот Вам и вся кроссбраузерность. Удобно, неправда-ли?

Но у адаптивных шаблонов тоже есть свои минусы – перерасход трафика посетителя. Из-за таких издержек, на адаптивные шаблоны косо смотрят поисковики. Денежку пользователя экономить надо, знаете-ли...

Отсюда, выплывает «золотое правило» сумашедшего верстальщика – каждый современный сайт должен содержать в своём шаблоне, как минимум три версии – полную, адаптивную (подстраивающуюся) и мобильную (текстовую). И давать пользователю выбрать самому, что и как ему смотреть.

Но, даже в этом случае должна просматриваться общая специализация вёрстки самого сайта – под десктоп, под планшет, или под «чиcтую» мобилу. Ибо, как было уже сказано – угодить сразу всем – абсолютно не реально.

Как вёрстка, влияет на SEO

Принципиально, в современном мире, неправильная вёрстка шаблона веб-страницы уже не должна так сильно влиять на SEO-продвижение сайта, как в 2002 - 2008 годах... Еще несколько лет назад, за подобное утверждение предложили-бы, как минимум – линчевать его автора. Увы, ныне времена не те... И, этому бредовому умозаключению мы обязаны засилью социальных сетей, а еще более – несметному количеству сайтов, созданных инопланетянами на всевозможных конструкторах сайтов. С тех пор, как внеземной разум пришёл в интернет и начал создавать сотни и десятки тысяч сайтов в день, поисковики вынуждены были согласиться, что на странице может быть много ошибок кода и семантики. И, такой сайт – тоже имеет право на жизнь и SEO-продвижение. Иначе, пришельцы из космоса обидятся, покинут социальные сети и конструкторы сайтов и улетят восвояси. И, чем тогда будут заниматься Google, Яндекс и иже с ними? Нет уж, лучше пусть творят себе гуманоиды свои «инопланетные интернет-перлы» на нашей планете.

Наблюдая за SEO-продвижением иных «интернет-шедевров», невольно склоняешься к мысли, что поисковикам давно уже «начхать» на многие свои-же собственные законы. Это видно уже только по одному тому, как поисковики вырисовывают в SERP-е сниппеты и анонсы, зачастую полностью игнорируя такой прекрасный мета-тег, как "description". Иногда, в топе поисковика можно наткнуться на сайты,у которых вообще нет заголовков (тег h), а всё сделано одними только <strong>. И, ничего себе – такой сайт прекрасно индексируется.

Вот так и родилась преамбула к этой статье: «Данный материал – это просто мысли «вслух», которые не являются «разбором полётов», обязательным к применению...»

Семантическая вёрстка

Таким образом, сюжет статьи приблизился к своей развязке – влияние вёрстки на индексирование сайта у поисковых систем – не очень велико. Нет, конечно. Как и прежде, правильная семантическая вёрстка – невероятно важна для поискового продвижения сайта. Приснопамятный HTML5, он собственно, и создавался для семантической вёрстки. Но, с точки зрения любого поисковика, семантическая вёрстка – дело желательное, но вовсе не обязательное. Поэтому, если сайт сделан одними таблицами или дивами, с использованием стародавних несемантическими тегов вида <i> да <b> – то, ни Google, ни Яндекс такой сайт не обойдут стороной. Потому что, добрая половина сайтов имеют такую вёрстку. Так что теперь, «банить» пол-интернета?

Нет, конечно. В Сети полно «перекошенных» вебресурсов с неправильной и несемантической вёрсткой, которые прочно «сидят в топе» у поисковиков. Такая статистика лишний раз доказывает, что правильная семантическая вёрстка это, всего лишь инструмент для достижения цели, но не панацея. Тут не лишне напомнить, что алгоритмы работы поисковых систем – это тайна за семью замками. Многолетние наблюдения за поисковыми роботами дают удивительный результат – они учатся прощать ошибки вёрстки.

По крайней мере, поисковики давно уже научились отделять зёрна от плевел и «зрить в корень. (Козьма Прутков)». Если на сайте висит несколько десятков пустых ссылок или дивов-блоков, если не используются теги, вида article, aside, nav или address – это вовсе не является для него губительным. Да и не было губительным никогда. Слухи о кровожадности поисковых систем сильно преувеличены. А наличие в шаблоне сайта ошибок семантики – это больше повод для верстальщиков, чтобы «поржать» друг с друга, нежели действительно проблема с SEO.

Поисковики лучше всех остальных понимают, что наличие ошибок кода веб-страницы не должно влиять на информационную ценность сайта в целом. Тем более, что появление HTML5 возвело вёрстку в ранг искусства. (Хотя, оно и раньше так было). А где набраться правильных верстальщиков на миллионы сайтов?

Рискну показаться смешным, но на данном развитии интернета сентическая вёрстка сайта особо никому не нужна. Для посетителя-пользователя вебресурса гораздо важнее его внешний вид и юзабилити, нежели наличие правильного кода. Поисковики, конечно-же код видят. Но вот парадокс. Поисковый робот прекрасно разделяет шаблон сайта от его контента и акцентирует своё внимание на последнем. При чём, делать такое разделение робот умеет и безо всякой семантики. Давно замечено, что сайт с «горбатым» шаблоном легко может быть обласкан поисковиком, но никогда им не будет привечено ни одной «портянки» на семантически правильном сайте. «Портянка» – контент (материал, наполнение) без форматирования.

Таким образом, в глазах поискового робота, сайт с ошибками вёрстки шаблона – всегда представляет определённый интерес, и никогда – сайт с неформатированным текстом контента, который так любят «парить» наши журналисты.

Но, тогда возникает вопрос – а при чём здесь, собственно верстальщик?

Форматирование контента – не проблема верстальщика

Вернее будет сказать так – форматирование материала наполнения сайта (контента), для верстальщика – это не его проблема. Почему так? Да потому, что ни один верстальщик в мире даже не догадывается, какой материал «впихают» журналисты в его выстраденный потом и кровью шаблон.

Удивительное дело. Замечено, что посетители перестали любить и уважать сайты-порталы с их грудами и горами статей, а также с их многочисленными замысловатыми меню и категориями. Популярность и посещаемость таких веб-ресурсов, медленно, но неуклонно снижается. Это потому что, для нынешнего интернетчика, самые главные порталы – это Google и Яндекс.

Наличие постоянного интернет-соединения и отличных поисковых сервисов приучило пользователя к мысли не задерживаться долго на одном сайте. А зачем? Сайтов в Сети предостаточно Ныне пишут все, пишут много и ни о чём. Поэтому, гораздо полезнее и познавательнее будет прочитать десять разных статей по теме, на разных сайтах, нежели на одном портале – десять статей на разные темы. Десять статей на разные темы интересны только праздному посетителю. Озадаченный привередливый посетитель смотрит и читает только то, что его дейтствительно волнует.

Нынешний пользователь, зачастую так и делает – просто открывает в браузере первые 10-30 страниц SERP-а по интересующему его запросу-вопросу и закрывает их сразу-же после их прочтения. Таким образом, нашего пользователя совершенно не интересуют, ни категории и менюшки сайта, ни его дизайн, ни уж тем более – юзабилити и вёрстка. Главное для нашего пользователя – это чтобы в браузере сразу открылся материал на интересующую тематику. При этом, сам шаблон сайта и его дизайн истончается и становится как-бы невидим для посетителя. И на первое место выходит его величество «Форматирование материала».

Как известно, самый «вкусный» трафик – это поисковый трафик и вёрстка здесь не при чём. Если поисковая система и её пользователь идут «напрямую в статью», то шаблон сайта, его вёрстка – уходят как-бы на задний план, уступая место главному – «Форматированию материала (контента) статьи». И, вот здесь мы подходим к самому важному моменту истины – ни одна, даже самая гениальная вёрстка шаблона не спасёт сайт, журналисты которого «тискают портянки». Для справки, «портянкой» называют неформатированный текст статьи.

Ну вот, в нашем полку прибыло. На нашем сайте, в нашем обсуждении появилось новое действующее лицо – журналист. И, если это лицо будет «пропихивать» неформатированные тексты – сайту не жить. И, наоборот – грамотное и правильное форматирование контента (наполнения новости) сможет «вытащить» в глазах у поисковка любую, даже самую «горбатую» вёрстку. Теперь, дальнейшее обсуждение темы пойдёт от двух лиц – верстальщика и журналиста.

Верстальщик и журналист

Итак, на любом сайте взаимодействует интеллект трёх персонажей – писателя (журналиста), читателя (посетителя) и верстальщика. Я намеренно поставил верстальщика в конец списка, поскольку, сделав один раз своё дело и сверстав шаблон для сайта – верстальщик уходит со сцены. Остаются писатель и читатель. Один будет писать, другой – читать. В ихней дуэли нет места для верстальщика. За то, есть фоновый персонаж – поисковая система.

И вот такой теперь будет алгоритм взаимодействия:

Как писатель напишет и отформатирует текст новости, так его и проиндексирует поисковая система, и соответственно – донесёт до читателя. И, вот здесь, некоторые проблемы вёрстки можно переложить с верстальщика на журналиста, который с превеликим успехои сможет их решить. Например, структура заголовков. Всем известно, что неправильная структура или вообще отсутствие как таковых заголовков на странице делает её бросовым материалом у поисковиков. С другой стороны, заголовки «не по теме», которые верстальщик может зафиксировать в шаблоне сайта – это ещё хуже. Поэтому, наиболее логичное решение – переложить создание структуры заголовков из верстальщика на журналиста и вынести все заголовки прямо в статью. Если журналист самостоятельно сделает структуру заголовков, начиная с h1 – ведь это будет здорово, не правда-ли? Потому что, все заголовки будут в тему страницы/статьи.

И тогда не будет такого:

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

Сразу оговорюсь – речь не идёт о громадных порталах со сложной иерархией материала, в которых заголовки часто используются прямо в меню навигации, популярность которой, кстати – падает с каждым днём.

Неправильная вёрстка

Статья называется «Неправильная вёрстка». Это философская статья. Это поэма о неправильных отношениях верстальщика с профессиями других веб-специальностей. Она написана в желании хоть немного облегчить адский труд этого человека и переложить часть его ответственности на рядом стоящего. В защиту верстальщика можно сказать только одно – невозможно предусмотреть абсолютно всё, особенно поведение другого человека. Но, этот самый другой человек, публикуя свой материал на сайте, легко может открыть визуальный редактор и подкрасить основное! и главное! содержание веб-страницы по своему усмотрению, создать структуру заголовков, вставить ссылки на похожий материал. И, сайт получит свою уникальную страничку без утомительного избиения верстальщика.

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