Реальный пиарВеб-сайтУстройство → Вредная верстка

Вредная верстка

что такое HTML

Как определить, что сайт сверстан качественно?

Есть много статей о том, как делать хорошо, но совсем нет – о том, как делать не надо, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно.
Из этой статьи вы узнаете:
О плохих приемах современной верстки;
О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.

Какие ошибки бывают в верстке?
Вызывающие проблемы у пользователей;
Влияющие на SEO;
Затрудняющие дальнейшую поддержку и масштабирование сайта и говорящие о низкой квалификации верстальщика.

Проблемы у пользователей

В первую очередь это доступность сайта. Доступность не только для здоровых людей, пользующихся современными браузерами на десктопах/ноутбуках с хорошей скоростью соединения и неограниченных какими-либо политиками безопасности, а доступность для клиентов:
с мобильных устройств;
с отключенным javascript’ом;
с устаревшими браузерами (IE5.x);
с низкой скоростью соединения;
с отключенной графикой;
с физическими ограничениями (в первую очередь это слепые пользователи).

Шрифты в px
body {font-family:Arial, Tahoma, Verdana, sans-serif; font-size:12px}

причём часто именно в таком убогом виде, а не в сокращённом
Чем плохо:
пользователи IE не смогут увеличить размер шрифта.
Как надо:
html {font-size: 75%}

body {font: normal 1em/1.3 Arial, sans-serif}

Общий CSS для всех media
<link href="main.css" rel="stylesheet" type="text/css" />

Почему плохо:
при печати страницы на принтере получаем не документ, а исковерканный скриншот сайта 1;
мобильные устройства не в состоянии отобразить большинство этих стилей и как следствие встроенные в них браузеры вообще не отобразят этот сайт 2;
OperaMini попытается конвертировать его в доступный вид, но результат будет весьма далёк от идеала: внешний вид не ахти, много бесполезных на мобильном устройстве элементов и больший чем должен был бы быть трафик у пользователя.

1 – сайт это в первую очередь документ. Это информация, которая может и должна быть представлена в виде: заголовок, текст, иллюстрация.

2 – встроенный браузеры мобильных телефонов (даже старых) вполне могут открывать не только WAP, но и обычные сайты, если они валидны, мало весят и сверстаны семантически, а не презентационно.
Как надо:
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen, projection" />

<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />

<link rel="stylesheet" href="css/handheld.css" type="text/css" media="handheld" />
Почему не подключать общий стиль для всех, а в print.css и handheld.css лишь убирать ненужное?

Потому что всё не уберёте, все стили не обнулите, потому что это мартышкин труд, потому что после вас main.css допишут, а про print.css никто и не вспомнит.

Недоступный javascript
<a href="javascript:DoWin(this.href)">Refund Policy and Contact Information</a>

Сюда же относится глупости типа <div onclick="…"></div> (div не может иметь фокус ввода и к нему нельзя перейти с клавиатуры)

А если у человека отключен Javascript?
Как надо:
<a href="policy_contact.html" target="_blank" onclick="DoWin(this.href); return false">Refund Policy and Contact Information</a>

или даже так:
<a href="policy_contact.html" target="_blank" id="policy_contact">Refund Policy and Contact Information</a>

в js на onload:

document.getElementById(`policy_contact`).href = `#`;

document.getElementById(`policy_contact`).target = `_self`;

document.getElementById(`policy_contact`).onclick = DoWin;

Продолжая тему доступности:
*:focus {outline: none}

У меня сели батарейки в мыше, как я пойму на какой ссылке я сейчас нахожусь?

Не отбирайте у пользователя то, к чему он привык!

Также это относится к ссылкам:
всё-таки лучше когда они подчеркнуты;
незабывайте про стили для посещённых ссылок!

img вместо background
<a href="#"><img alt="Переплет на любой вкус" src="images/offer1.jpg"/></a>
Почему плохо:
Я мабилко и гружу непонятную картинку ужатую до нечитаемого размера;
Я принтер и зря засоряю лист бумаги картинками;
Это лишний презентационный мусор в коде для поисковиков, для тех кто будет поддерживать ваш код (вы не поменяете картинку только из css, придется лезть в шаблоны, доступ к которым может быть например только у программеров)
Как надо:
<a href="#">Переплет на любой вкус</a>

Стили (background-image и отступ под неё – в css)

Это касается вообще всех изображений на сайте - в тегах img должны быть только иллюстрации! но не презентационная графика.

Ошибки влияющие на SEO

Отсутствие структуры или вообще отсутствие как таковых h1, h2, h3…

Сюда же входит непродуманность структуры заголовков, из-за которой потом программер, которому срочно понадобилось добавить новый блок с текстом на сайт копирует блок в котором уже есть h1, потому что «он выглядит так как нужно»

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

Выше я описывал img vs background-image – это относится сюда самым непосредственным образом.
Вместо:
<div id="logo"><img alt="Trinity group" src="img/splash/trinity-group.jpg"/></div>

Надо:
<h1>Trinity group</h1>

Вместо:
<li><a href="expert_inner.html"><img alt="" src="img/splash/expert-menu-01.gif"/></a></li>
Надо:
<li><a href="expert_inner.html">Спроси сомелье</a></li>

Но как?!
Читаем про LIR и Pixy.

Антисемантика
<div class="menu">

<a title="Kinderspiele" class="kinderspiele" href="#"></a>

<a title="Artikel" class="artikel" href="#"></a>

</div>

Это классический пример, но он досих пор встречается повсюду - большинство примеров этой статьи я взял с портфолио топовых по сумме за проект фрилансеров. После просмотра портфолио топовых страшно думать что у нетоповых :)
Почему плохо:
У ссылок отсутствует текст.
Отсутствует логика в документе. Это тоже влияет на ранжирование.
На мобилке и в печатном варианте, этот код будет выглядеть убого даже если бы там был текст внутри ссылок.
Как надо?
<ul class="menu">

<li><a title="Kinderspiele" id="kinderspiele" href="#">Kinderspiele</a></li>

<li><a title="Artikel" id="artikel" href="#"> Artikel</a></li>

</ul>

Сюда же относятся перлы вида:
<div class="hr"></div>

<div class="header"></div>

и т.п. - используйте существующие html-тэги, старый добрый html (POSH).


Источник: http://www.rusdoc.ru

Рекомендуем



5 принципов эффективного веб-дизайна Кроме того, более эффективно предлагать конкретные аргументы, ситуации и идеи о том, как этот продукт или сервис могут быть использованы, вместо бомбардировки громкими и пустыми рекламными слоганами


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


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