Прежде чем выставлять сайт на обсуждение...

[Vlad]

Чтобы получить максимально конструктивные советы и замечания по обсуждаемому сайту, придерживайтесь следующих правил.

1. Работа должна быть доделана, а не представлять собой пустой шаблон.

2. Если сайт работает лишь частично, то работу лучше не выставлять вообще, либо заранее отметить, на что обратить внимание.

3. Указывайте, что именно вы желаете оценить: дизайн, верстку, код, юзабилити, общее впечатление и др. В противном случае обсуждение может пойти совсем в другом русле, чем вам бы хотелось.

4. Для удобства указывайте кратко, что собой представляет сайт, о чем он и для какой аудитории предназначен.

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

6. Критика никому не нравится, но если она по существу, относитесь к ней как способу улучшить свою работу.

7. Выставляйте только один сайт на обсуждение. Если у вас несколько работ, создайте для каждой работы отдельную тему.

Пример выставления работы

Сайт http://merjevich.ru

Фотографии Владимира Сергеевича Мержевича, личные и из его архива.

Прошу оценить юзабилити сайта, конкретнее — удобство работы с фотографиями, поиск нужной информации.

[Tokolist]

Рекомендации относительно верстки

1. теги font, b, hr, br, center и подобные устарели. Всех их можно заменить более элегантными конструкциями CSS+(x)HTML. То же относится и к некоторым атрибутам вроде align, nowrap, hspace, vspace и т.д. Т.е., если чтото можно вынести в CSS и при этом код становится более логичным, удобочитаемым и меньше, то так и делайте. Подробнее...

2. Если необходимо выделить часть текста, то используйте логические теги вместо тегов форматирования

strong вместо b

em вместо i и т.д.

Кроме того используйте такие теги как code, samp и т.д.

Во-первых это логично.

Во-вторых практично для задания стилей с помощью CSS

И наконец это хорошая поисковая оптимизация Подробнее...

3. Таблицы (table) используются только для табличных данных. Исключение составляют те случаи, когда, слоями (дивами) просто не возможно сделать некоторые вещи, или когда это более разумный способ, но в 95 из 100 случаев такая необходимость отсутствует.

4. Форматируйте правильно CSS-код. Некоторые верстальщики полагают, что написав все в одну строчку они таким образом оптимизируют CSS-код. На самом деле это не так. Выигрыш от этого не большой, но вот код становится неудобочитаемым и легко запутаться. Если Вы считаете, что я не прав, то взгляните на CSS популярных и много-посещаемых порталов. Например http://www.i.ua/

5. Не используйте CSS-хаки. Они не надежны, это не валидно и это не красиво. В 99 из 100 случаев достаточно использования условных комментариев для IE. Причем в 99% случаев достаточно конструкции вида

<!--[if lt IE 7]>
	  <link rel="stylesheet" type="text/css" media="screen" href="ie6.css">
	  <![endif]-->

Т.е. отдельные стили для ИЕ ниже 7 версии.

6. Указывайте правильный доктайп. При неправильном (или отсутствующем) доктайпе ваша верстка будет очень отличаться в разных браузерах (Quirks mode). Подробнее...

7. Проверяйте код валидатором. Это позволит не только соблюдать валидность, но и избавит вас от случайных ошибок (например описок или незакрытых тегов).

Валидаторы: Онлайн валидатор (x)HTML, Онлайн валидатор CSS

Полезные плагины для Firefox: Валидация CSS, Валидация (x)HTML

Существуют также "отладчики":

Для Opera - Opera Dragonfly (как сделать оффлайновой)

Для IE - IE Developer Toolbar

Для Firefox - Firebug

8. Так лучше не верстать

<li>
	  <a href="http://google.com/">
	  <span>
	  </span>
	  <span>
	  <p class="Stylz21">
	  <span class="Stylz21">
	  </span>
	  </p>
	  </span>
	  </a>
	  </li>

<td class="menuplace">  Отступ слева</td>

и т.п.

9. Стили должны быть вынесены в отдельный файл(ы) (или в крайнем случае тег <style>). Использование атрибута style="" крайне нежелательно.

10. Отключаем картинки. Все ли можно прочесть? Можно ли получить информацию, которую ваш сайт хочет донести посетителю? Доступна ли навигация? А теперь отключаем стили. Оцениваем собственную верстку. Пробуем различные комбинации вышеприведенного.

10.1. Для важных (те которые служат для навигации, фотографии и т.д.) картинок должен указываться атрибут alt="" с соответствующим описанием

10.2. Если у вас, к примеру светлый текст, а для фона используется темная картинка, не забудьте установить также темный цвет фона.

10.3. Должно быть правильное логическое разбиение структуры страницы.

10.4. Навигационное меню желательно делать не нумерованным списком (ul)

11. Удобно использовать следующую конструкцию в начале CSS-файла

ul,ol {list-style: none;}
	  ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote {margin: 0; padding: 0;}
	  img {border: 0;}

12. Оптимизируйте графику. Этим вы сэкономите трафик и время посетителя.

13. Проверяйте верстку в разных браузерах (Самые важные на данный момент браузеры это Internet Explorer 6, Internet Explorer 7, Firefox 2.x, Opera 9.x, Safari). Подробнее...

Пример хорошей (с моей точки зрения верстки)

http://www.fasthtml.ru/clients/omitrans/index.html

Вы также можете поискать хорошие примеры самостоятельно (просматривайте код понравившыхся Вам сайтов, популярных сайтов, т.е. смотрите как верстают другие).

Плохие примеры не привожу. Их в сети достаточно.

Рекомендуется к прочтению

Оценка качества верстки

70 идей экспертов для улучшения CSS кода

Доступность сайтов для пользователей мобильных устройств

Making Small Devices Look Great

HTML ? XHTML ? XML

XHTML Strict - элементы и атрибуты, которые не надо использовать

Азбука веб стандартов

P.S. Это всего лишь рекомендации. 100% следовать им не стоит и скорей всего даже не получится. Но это идеал к которому необходимо стремится.

[D.S.Denton]

образец воть еще)

http://dreamhost.com/hosting.html - соответствие xhtml + ничего лишнего в коде + образец уместности таблицы

[Nailex7]

По поводу правила, 30 сообщений перед тем как создать свою тему. А нельзя сделать исключение?

Просто не во всех темах "Обсуждение работ" могу что то посоветовать или оценить правильно. И получается я буду очень долго эти 30 сообщений набирать, а хотелось бы сейчас выложить на оценку свой первый сайт.

[Great Rash]

Выкладывайте в разделе для новичков. Модераторы перенесут при необходимости куда следует.

[Влaд]

70 идей экспертов для улучшения CSS кода

1.1 Кодинг: Начинаем

второй пункт

Сначала сбросьте стили по умолчанию. Часто нет необходимости задавать значение какого либо свойства, потому что есть значение по умолчанию. Некоторые любят делать Global white space reset, обнуляя отступы и поля всех элементов в самом начале файла стилей.

47-я страница книги самоучителя css расположенной здесь на сайте (Здесь не нашел...или может не там искал? )

«Обнуление стилей» (см. пример 1.51) прививает у разработчика дурную манеру верстки. Вместо того чтобы

знать, какие значения свойств установлены по умолчанию, разработчик перекладывает эту работу на браузер,

насильно устанавливая все значения в ноль. В результате некоторые значения применяются к свойствам, для

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

опять же приводит к повышению нагрузки на браузер и замедлению его работы

Объясните мне кто прав.

Или может это не одно и тоже? И может мне стоило написать в другую тему?

Edited December 23, 2011 by Влaд

[Gaspode]

Сбрасывать надо только то, что надо сбрасывать, вот и весь секрет. А то обычно берут мейеровскую "рыбу" и втыкают на сайт. А там, например, сбрасывается vertical-align для блочных элементов, у которых вообще нет такого свойства.

Edited December 24, 2011 by Gaspode

[Coder_D]

Сайт http://merjevich.ru

Фотографии Владимира Сергеевича Мержевича, личные и из его архива.

Прошу оценить юзабилити сайта, конкретнее — удобство работы с фотографиями, поиск нужной информации.

[seemax]

Сбрасывать надо только то, что надо сбрасывать, вот и весь секрет. А то обычно берут мейеровскую "рыбу" и втыкают на сайт. А там, например, сбрасывается vertical-align для блочных элементов, у которых вообще нет такого свойства.

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

[Vzor]

Вот тут www.master-web.info есть статья со ссылкам на дефолтные стили браузеров.

[Viper]

Рекомендации относительно верстки

...

Не помешало бы обновить список этих рекомендаций. Много чего изменилось за эти года Или хотя бы подобавлять Упдейты-уточнения. ИМХО

[wildhind]

Рекомендации относительно верстки

...

Не помешало бы обновить список этих рекомендаций. Много чего изменилось за эти года Или хотя бы подобавлять Упдейты-уточнения. ИМХО

Простите, а что принципиально изменилось, кроме актуальных версий браузеров?

Сами рекомендации пусть и не бесспорны, но актуальности и практической ценности не потеряли.

[Viper]

Простите, а что принципиально изменилось, кроме актуальных версий браузеров?

Сами рекомендации пусть и не бесспорны, но актуальности и практической ценности не потеряли.

1-2. полностью(почти) стоит пересмотреть из-за HTML5, в основном.

4. стоит более подробно о причинах и выгодах написать этого написать. И примеры есть куда солиднее Возможно, вспомнить тут или отдельным советом про "верстку независимыми блоками" - часть идеологии БЭМ. ИМХО Или я не правильно понял этот пункт...

6. устарел

10. обновить следует

11. Есть куда более полезные "ресеты"

12. Как? Сейчас об этом можно куда больше написать и смысла в этом уже больше, чем было при написании этих рекомендаций.

13. обновить

П.С. Сомневаюсь, что следует обьснять тому, кто это писал или будет писать, надеюсь... Тут можно куда больше написать и, вообще, думаю было бы класно сделать свой толковый чек-лист, силами здешних экспертов... ИМХО

П.П.С. Это не критика - это пожелание/предложение.

Edited April 21, 2012 by Viper

[pismenny]

Мне кажется, "чек-лист" будет очень полезен.

А он должен быть очень подробный, т.к. многие ещё даже не приучились писать <!DOCTYPE html>.

[krebun]

По поводу первого пункта: "CSS+(x)HTML" это что? Я просто начинающий... Чтобы не офтопить - где-нибудь на форуме есть информация на эту тему? Буду признателен за ссылку. В Яндексе не заблокирован, но хотелось бы на этом форуме почитать, так как нравится здешний фидбэк и атмосфера. 

[klierik]

По поводу HTML — http://htmlbook.ru/samhtml

По поводу CSS — http://htmlbook.ru/samcss