Требования к верстке HTML-шаблонов для сайта
...или что нужно учесть при создании качественных html-шаблонов
рейтинг: 7.9/10, голосов: 13
На первый взгляд, верстка - это один из самых простых этапов создания сайта. В небольших студиях на неё не любят уделять большое количество времени и стараются сделать как можно быстрее, не заботясь о последствиях.
В итоге программисту достается от верстальщика порой такой неописуемый ужас, что ему в итоге приходиться переделывать половину уже "сделанной" работы. А все почему? Потому что нет элементарных технических требований к верстке.
В одной из веб-студий это проблему решили ребром — составили список требований к html-шаблонам. Работа верстальщика не принимается, если все пункты не выполнены (или большинство из них). Некоторые моменты могут показаться спорными, к примеру требования к поддержке браузерами или используемым скриптам, но думаю любой сможет легко подправить этот список под себя. И так…
Требования и рекомендации к html-верстке
- Руководствоваться здравым смыслом, в спорных местах советоваться с коллегами, искать и изучать новые удобные и красивые решения.
- Кроссбраузерность. Сайт должен нормально работать в IE6-8, FF2+, Opera9+, Safari4+, Chrome4+. Под IE6 сайт должен «хоть как-то» работать. Корректно отображаться в IE6 должен только если это дополнительно оговорено в ТЗ.
- Всегда описывайте цвет фона для body даже если он белый.
- Используйте reset.css
- Если используете CSS хаки, комментируйте, что это и для какого браузера. Заботьтесь о верстальщиках, которым придется работать с этим макетом после вас.
- Для IE6-8 выносить в отдельный файл(ы) и подключать условным комментарием.
- Названия классов и id должны по смыслу соответствовать применению. Например, header, menu, footer, news
- Разделять основные html блоки комментариями. Примерно так:
<!-- footer -->
<div id="footer"> ... </div>
<!-- /footer -->
Это нужно для создания из сверстанного html макета шаблонов для CMS, после чего комментарии будут удаляться.
- Если закомментировать отдельные блоки шаблона (например какие-то части в левой/правой колонке, меню, футер и т. п.), то это место должно аккуратно «схлопнуться», либо оставить после себя пространство (зависит от обстоятельств) так чтобы макет не ломался.
- Приветствуется блочная (DIV’ная) верстка, без использования таблиц. Таблицы в верстке используются только там, где они необходимы — контент. В верстке таблицы должны быть аргументированы (кроме как «так проще», «я не умею», …).
- Не пренебрегать возможностью использовать GIF/PNG с 8-битным альфаканалом вместо PNG-24, где это возможно.
- Не забывать про спрайты в тех местах, где они принесут пользу. Особенно это касается элементов с состоянием hover, clicked и прочих динамических элементов, чтобы не видеть загрузку изображения, например при наведении мышкой.
- Все что можно сделать без Javascript, делать без него. С отключенным JS шаблон сайта не должен терять основной функциональности и навигации (выпадающее меню, например).
- Если Javascript кода много — нужно его выносить в отдельный файл. Обработчики событий тоже отделить и объявлять в отдельном файле.
- Если это еще не оговорено с заказчиком, предварительно оговорить, какие Javascript библиотеки вы планируете использовать при верстке макета. По умолчанию использовать сжатую последнюю версию jQuery с Yandex.
- Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.
- Если в Т.З. не сказано другое, макет обязательно должен помещаться без горизонтальных скроллбаров в развернутое на весь экран окно браузера при горизонтальной составляющей разрешения экрана 1024px, а если позволяет размер макета, то и 800px.
- В папке с изображениями не должно быть картинок, не использующихся в верстке. Если что-то исключили из верстки или переделали — не забывайте удалять уже ненужные картинки. То же относится к неиспользуемым стилям в CSS.
- Для всех элементов, которые могут содержать текст различной длины, который должен быть вписан в одну строку (например, для кнопок или заголовков, если в дизайне не предусмотрено, что они могут занимать больше одной строки), обязательно задавайте CSS свойство white-space:nowrap.
- CSS файл должен быть разбит с помощью строк с комментариями на блоки по функциональному назначению, например так:
/* ___________ 1. reset css_______________ */
/* ___________ 2. content_________________ */
/* _______________ 2.1. headers __________ */
/* _______________ 2.2. links ____________ */
/* _______________ 2.3. forms ____________ */
/* ___________ 3. header _________________ */
/* ___________ 4. footer _________________ */
/* ___________ 5. sidebar ________________ */
- Картинки, связанные непосредственно с дизайном, кладите в папку images, картинки, связанные с контентом (баннеры, картинки в тексте, и т. п.) — в папку pictures. Пример структуры папок и файлов
- css [директория со стилями]
- reset.css
- print.css
- styles.css
- ie6.css
- ie7-lte.css
- layout-1.css
- …
- images [директория для картинок, фонов дизайна]
- pictures [директория для всех остальных медиа]
- js [директория со скриптами]
- jquery.pack.js
- jquery.pngfix.js
- jquery.swfobject.js
- scripts.js
- …
- flash [директория с swf-файлами]
- index.html
- inner.html
- page-1.html
- Оговорить, в какой кодировке должен быть html-макет. CSS и JS файлы должны быть в той же кодировке, что и макет, иначе вероятность долгой и утомительной охоты на баги критически возрастает. Везде, где можно, наиболее предпочтительно использовать UTF-8 (без BOM)
- В метатегах html явно указывать кодировку.
- Не использовать слишком длинные селекторы в CSS, типа таких «div#menu ul li.active div». Это замедляет обработку CSS браузером.
- Не использовать лишние селекторы — div#menu это тоже самое, что и #menu, только работает медленнее, аналогично li.active = .active. Излишне использовать пути типа ul li — элемент li и так может находиться только внутри элемента ul, т. е. в данном случае ul li.active = .active, div#menu ul li.active div = #menu.active div.
- Так же лучше не использовать пути вида div, так как некоторые CMS могут добавлять свои теги div в шаблоны. В данном случае лучше написать «#menu.active > div > div». Или вообще отказаться от использования вложенных div’ов.
- «#menu.active div» — Лучше использовать дополнительно класс, т.к модификация верстки внутри #menu (например добавить div) все может сломать.
- Не забывайте прописывать cursor:pointer для кнопок, сделанных не с помощью input. Если вы не знаете, будет на эту кнопку повешен обработчик событий с помощью JS или это будет ссылкой, лучше в любом случае использовать тег <a>.
- Если вы делаете обработку событий при нажатии на ссылки, следите за тем, чтобы обработчики событий возвращали false, или же используйте href='javascript:void(0)' вместо популярного href='#', чтобы страница не скроллилась вверх.
- Верстайте формы правильно:
- не забываем вставлять для всех форм тег <form>
- метки полей должны находиться в тегах label, имеющих правильно заполненный атрибут for.
- Предусматривайте при верстке форм элементы для вывода ошибок валидации и стили для неправильно заполненных полей. Если это не предусмотрено в т.з. и дизайне, обязательно обсудите это с заказчиком.
- Если в макете используются нестандартные шрифты, обязательно оговорите, можно ли элементы с нестандартным шрифтом делать картинками, если нельзя — обсудите, с помощью какой технологии будет реализовано их отображение (sIfr, Cufon, @font-face, etc.)
- Если не оговорено обратное для частных случаев, все блоки, высоту которых ничего в дизайне не мешает сделать динамической, должны иметь именно динамическую (т. е. зависимую от содержания) высоту, а иногда, чтобы ничего не могло потенциально поломать дизайн, нужно задавать и минимальную высоту. Если хотите сделать блок фиксированной высоты — сначала спросите у заказчика.
- В макетах, где высота страницы зависит от контента (а таких, как правило, большинство), предусматривайте, чтобы футер был прибит к низу браузера при отсутствии/малом количестве контента, если не оговорено обратное. Также не забывать проверять верстку при большом количестве контента.
- Если макет не проходит 100%-ную html-валидацию, постарайтесь по крайней мере делать так, чтобы использование невалидного кода было оправданно. Не стоит факапить валидность верстки только потому, что «мне так нравится» или «так получается короче»
- При отключенных картинках, плагинах (flash, silverlight) шаблон не должен терять своей информативности и возможностей навигации.
- Если меню сделано на флеше и от этого нельзя отказаться — не забыть дублировать его текстом внутри тегов вставки флеша.
- Картинки со смысловой нагрузкой имеют не пустой атрибут alt=«…" (лого, в контенте, …)
- В макете должен присутствовать контейнер для обозначения контентной части сайта. Отформатированный текст в нем должен корректно отображаться. В основном это относится к таблицам, спискам, параграфам, картинкам с обтеканием, всем видам заголовков, ссылок.
- Любые спец символы вписывать html-сущностью.
- Верстка меню
- Крайне желательно в виде вложенных списков, тогда его в разы проще подстраивать под CMS, в частности Drupal, Joomla, Wordpress, Bitrix. В 80% случаев это самый удобный, оптимальный и правильный вариант во всех отношениях.
- Очень желательно использовать именно такую вложенность и даже именование классов (это очень упрощает жизнь при кастомизации):
<ul class="navigation">
<li class="parent">
<a href="javascript:void(0)">Новости</a>
<ul class="submenu">
<li><a href="javascript:void(0)">Новости</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">О компании</a></li>
</ul>
- Такие элементы сайта как ссылки, кнопки и прочее должны как-то реагировать на состояние hover. (если это учтено в макете). Ко всем ссылкам прописывать title.
- У макета должен быть favicon.ico, как минимум из лого будущего сайта.
- Расписан файл print.css, для печатающих устройств, в котором выставляется приемлемый шрифт контента, размер в pt, отключены (display:none) ненужные элементы при печати сайта (menu, sidebar, footer, …), выставлен белый цвет фона и черный/темный цвет текста. И прочее по обстоятельствам.
Спасибо, познавательно.
А вот интересно, отвечают ли вышеизложеным требованиям Джумловские шаблоны на фреймворках T3 и Gantry? Имеется в виду чистые шаблоны, без внесения изменений?
Не знаю как там другие, а вот ребята из yootheme соблюдают практически все эти рекомендации.
Joomla 1.6 с новыми шаблонами (blueprint) тоже довольно качественно проработали эти вопросы уже в стандартных шаблонах.
IMHO, конечно, но по мне так для большинства задач хватает тех возможностей что есть "из коробки" Joomla, но будут полезны для больших проектах, где очень много различных лайаутов.
"Не использовать лишние селекторы - div#menu это тоже самое, что и #menu, только работает медленнее, аналогично li.active = .active."
вы ошибаетесь, это не лишние селекторы, это как раз те вещи, которые ускоряют поиск стиля для данного класса. Если мы зададим например класс .test для блока div и div.class, то во втором случае обработка будет происходить быстрее, так как без селектора div браузер будет просматривать все элементы страницы, а с ним - только указанные селекторы, в данном случае поиск будет осуществляться по div-блокам.
Это вы ошибаетесь.
Сначала он найдет все теги с классами .active, а потом по второй прокрутке будет искать в них div. и Если у .active только один div то получается лишняя прокрутка
Пфф, да, я был не прав, прошу прощения... Почитал спецификацию - правда обработка идет справа налево... и скорость обработки .test будет быстрее, чем div.test
Картинки, связанные именно с дизайном ложить в папку images ...
Правильно, на русском языке, это пишется следущим образом.
Картинки, связанные именно с дизайном, разместить в папке images ....
Или так.
Картинки, связанные именно с дизайном, сложить в папку images
А то слух режет.
Если кроме как до грамматики докопаться больше не до чего,то совсем уж правильно будет "класть" или "помещать/поместить". Однако пост не об этом.
Не сильно ли жирно? FF2.0 , chrome 4?, opera 9. 0_o. Этим единицы пользуются. Зато если верстать придется кучу хаков вставлять + время верстальщика... И для IE6 лучше заглушку вставить. Верстка под старое говно - не показатель хорошей работы верстальщика. Скорее наоборот, чем ниже версия браузера - тем хуже код
Thanks for sharing, nice post! Post really provice useful information! anthaison.vn/sp/may-dua-vong-tu-dong-ts/
I'm really impressed with your writing skills and also
with the layout on your blog. Is this a paid theme or did you modify it yourself?
Anyway keep up the excellent quality writing, it's rare to see a great
blog like this one today.
Hi, just wanted to mention, I liked this article.
It was inspiring. Keep on posting!
Wow that was odd. I just wrote an really long comment but after I clicked submit my comment didn't appear.
Grrrr... well I'm not writing all that over again.
Anyways, just wanted to say great blog!
Pretty part of content. I just stumbled upon your site and in accession capital to assert that I get in fact enjoyed account your weblog posts.
Any way I will be subscribing in your augment or even I fulfillment
you get right of entry to consistently fast.
This is really interesting, You are a very skilled blogger.
I have joined your feed and look forward to
seeking more of your wonderful post. Also, I have shared your web site
in my social networks!
You've made your stand pretty well.. https://like191.com/slotonline-freecredit/
Truly when someone doesn't know afterward
its up to other people that they will assist, so here it happens.
Hello There. I found your blog using msn. This is a very well written article.
I will be sure to bookmark it and come back to read more of
your useful info. Thanks for the post. I will definitely return.
Have you ever considered writing an ebook or guest authoring on other blogs?
I have a blog based on the same information you discuss and would
really like to have you share some stories/information. I
know my audience would value your work. If you're even remotely interested,
feel free to send me an e-mail.
It's going to be end of mine day, except before end I am reading this great article
to improve my experience.