моя лучшая вёрстка

[cyklop77]

оцените пожалуйста уровень вёрстки. это моя лучшая работа на настоящий момент. буду очень признателен за замечания.

страница

страница, переполненная контентом

psd-исходник

prozaik.16mb.com/resume/projects/red_corporation/sources/red-portal.rar

верстал под виндовые и линуксовые браузеры. ie7,8

уже выслушал замечание по поводу использования неудобночитаемых классов L, R, C. но по моему это параноя. я знаю, что блоки могут переместиться слева направо(или наоборот), но выигрыш от лаконичности и отсутствия необходимости придумывать осмысленные названия всяким уголкам по моему более значителен. профессионалы, рассудите насколько это критично.

одна из основных задач - попиксельное задротство. получилось ли?

старался принципиально не использовать html5

Edited April 28, 2012 by cyklop77

[Vin]

старался принципиально не использовать html5

Принципиально?

Доктайп, сокращённое объявление кодировки — это то, что не можно, а нужно использовать уже сейчас. Использовать ли новые тэги — каждый для себя решает сам, но в целом, это уже давно можно делать делать кроссбраузерно без ненадёжных и громоздких "костылей". Разве что предположить, что у пользователя IE8 и ниже отключён JS, но уж это бывает очень редко.

[wildhind]

старался принципиально не использовать html5

это и есть основная ошибка.

Вторая основная ошибка — это непоследовательность. Если простота и удобочитаемость, то вместо такой конструкции:

<div class="menuT">
				<ul>
					<li>
						<a class="L" href="#">
							<span class="R">
								<span class="C">
									контакты
								</span>
							</span>
						</a>
					</li>

					<li>
						<a class="L" href="#">
							<span class="R">
								<span class="C">
									статистика
								</span>
							</span>
						</a>
					</li>

					<li>
						<a class="L" href="#">
							<span class="R">
								<span class="C">
									правила сайта
								</span>
							</span>
						</a>
					</li>

					<li>
						<a class="L" href="#">
							<span class="R">
								<span class="C">
									регистрация
								</span>
							</span>
						</a>
					</li>						
				</ul>
			</div>

надо писать такую:

<nav class="mainmenu">
	<a href="#">регистрация</a>
	<a href="#">правила сайта</a>
	<a href="#">статистика</a>
	<a href="#">контакты</a>
</nav>

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

Одна картинка вряд ли будет более тяжёлой, чем три. Да если и использовать ваш подход, то почему не спрайт?

В форме поиска почему текст сдвинут от центра вверх? У нас бы такая работа даже первичное тестирование не прошла бы.

Очень много где ссылки и кнопки не реагируют на ховеры — это ошибка.

В списке новостей вообще допущена грубейшая ошибка: контент вынесен в css. Картинка новости — это контент. Это то, что редактор будет вносить через админку, и это то, что должно находиться службой Яндекс.Картинки по тематическому запросу. То есть, это должен быть тэг <img>, желательно с проставленным атрибутом alt.

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

[Vin]

В целом, учитывая то, что это вёрстка паблик дизайна с одним-единственным макетом без всякого ТЗ, её (вёрстку) можно признать хорошей.

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

[cyklop77]

Vin, о какой плашке вы говорите поясните пожалуйста.

wildhind,

<a href="#">регистрация</a>

конечно более простое и красивое решение. но на http://prozaik.16mb.com/resume/projects/red_corporation_full/ видно, что пункты меню растягиваются при необходимости...

в форме поиска текст сдвинут вверх для точного попиксельного соответствия макету(лично мне проще было бы его просто не трогать).

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

html5 я не использовал потому что к моменту верстки этого макета еще даже не начал изучать его. сейчас начал

и ещё всем. покритикуйте пожалуйста календарь. его следовало таблицей делать или ввиду того, что он яваскриптовый вообще не париться с вёрсткой?

Edited April 30, 2012 by cyklop77

[Vin]

Vin, о какой плашке вы говорите поясните пожалуйста.

О той, на которой расположена форма поиска, иконки социальных сетей и "сделать стартовой", "в избранное".

[cyklop77]

Vin, о какой плашке вы говорите поясните пожалуйста.

О той, на которой расположена форма поиска, иконки социальных сетей и "сделать стартовой", "в избранное".

она полностью соответствует psd-макету. для проверки соответствия использовал pixelperfect... может я неправильно вас понимаю все таки?..

[wildhind]

wildhind,

<a href="#">регистрация</a>

конечно более простое и красивое решение. но на http://prozaik.16mb.com/resume/projects/red_corporation_full/ видно, что пункты меню растягиваются при необходимости...

Это всё равно делается средствами css с минималистичной разметкой. Максимум можно добавить один лишний элемент, если действительно требуется полная поддержка IE7.

[cyklop77]

должна тянуться на всю ширину.

ширину чего? экрана? .wrap?

[wildhind]

в форме поиска текст сдвинут вверх для точного попиксельного соответствия макету(лично мне проще было бы его просто не трогать).

значит попиксельное соответствие макету — это ошибка.

html5 я не использовал потому что к моменту верстки этого макета еще даже не начал изучать его. сейчас начал

Как просто догнать современную действительность: ставим простой доктайп, забываем про самые бредовые ограничения xhtml вроде запрета на атрибут target, обязательность атрибута alt или обязательность закрытия всех тэгов — и этого на первое время достаточно. Дальше можно вникать глубже, изучать. И нужно не забывать, что старые браузеры не знали, что такое xhtml и интерпретировали его как почти html, а новые браузеры уже и знать не хотят, что такое xhtml, и интерпретируют его как html5, в котором допустим и такой синтаксис тоже.

и ещё всем. покритикуйте пожалуйста календарь.

А надо ли? Он ведь не выдержит критики.

Одна из распространённых ошибок начинающих верстальщиков — панический страх перед таблицами. Видимо считают, что злые форумные завсегдатаи жестоко унизят, как только увидят тэг <table>. Это не так. А если бы и так — что с того?

Возможно, стоит разок-другой в учебных целях сверстать таблицу дивами (абзацами, ссылками — какая разница, по сути то же самое), но на практике так делать не нужно.

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

[Vin]

экрана?

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

[wildhind]

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

ок, задание.

В нижней части страницы блок «Наши новости наноновоновости».

Сразу под ним разместить такой же блок из другой ленты, только у него не будет картинок и дат.

Сразу после размещения и применения готового на данный момент css, выглядеть новый блок новостей должен корректно и в соответствии с дизайном.

[troll]

забываем про самые бредовые ограничения xhtml вроде ... обязательность атрибута alt

Можно пруф?

[Svatov]

советую перед тем как показывать верстку пройтись по основным критериям этой статьи http://habrahabr.ru/post/114256/

[SelenIT]

забываем про самые бредовые ограничения xhtml вроде ... обязательность атрибута alt

Можно пруф?

Вероятно, что-то типа этого. Хотя тамошние небредовые ограничения куда объемистее. По мне, ставить пустой alt всё-таки как-то спокойнее (может, до сих пор под влиянием пионерской страшилки начала 2000-х про черные-черные браузеры, которые при отсутствии alt выводят на его месте адрес картинки...), хотя умом я всецело за прогресс и против ненужного хлама

[dersmoll]

А можно, я немного тоже покритикую.

Первое, что бросилось в глаза - на странице куча графических объектов, а вы совсем не используете спрайты. Здесь их общее количество можно было бы уменьшить раз в 10, а у вас даже стрелочки ротатора - разные файлы. И какое уж тут попиксельное задротство, если сервер будет нагружен таким количеством запросов.

Скрипты и библиотеки лучше подключать внизу.

jshowoff.css я бы оформил в общий файл стилей, он не такой большой, чтобы его отдельно держать.

В текстовых инпутах, таких как в поиске, лучше использовать нативный параметр placeholder с фиксом под ie.

С заголовками в правом сайдбаре совсем все плохо: несмотря на то, что они идентичны, вы для каждого из них делаете отдельный класс .videonews h2, .calendar h2, .photogallery h2 и тд. Плюс, если вдруг в заголовке текст перепрыгнет на вторую строку, то все развалится. Мне кажется, тут нужно делать более универсальный вариант.

CSS тоже ужасен в некоторый местах. К примеру, от таких строк

.news3 .news3_body .news3_bodyM ul li .icon1

хочется плакать. Наверное, вы не сталкивались еще с поддержкой больших проектов. Да и среднего размера тоже. Из-за таких макарон приходится заново перепедаливать блоки стилей. Почему б не назвать эту иконку просто - .new3_icon1?

Да и по сути - это не иконка. Ведь это же блок "наши новости", т.е. подразумевается, что там будет динамический контент с обновляемыми новостями, значит там должен быть img src.

В том же блоке новостей стоило бы объединить в один блок с дату и раздел.

В стилях можно найти еще много скверных вещей. Например, в стилях

.videonews ul li.last

.videonews ul li h3

ul li - избыточно.

Вполне достаточно писать

.videonews .last

.videonews h3

Да и вцелом, css неаккуратен - пустые классы, разнобой в их названиях, закомменченые строки и опять же - излишняя избыточность.

Но знаете, какой ваш самых большой грех? Вы не используете clearfix для очистики флоат потоков, хотя в стилях он предусмотрен, а тупо везде ставите overflow:hidden.

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

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

[SelenIT]

Вы не используете clearfix для очистики флоат потоков, хотя в стилях он предусмотрен, а тупо везде ставите overflow:hidden.

Clearfix тоже может давать проблемы, типа ненужной зависимости от других колонок. Имхо, отдельный контекст всё-таки как-то понадежнее. Проблема с выпадушками возникает только если у контейнера впридачу к overflow стоит position:relative (по крайней мере в стандартных браузерах).

Имхо, тут вопрос достаточно холиворный, может есть смысл обсудить его отдельно?

[cyklop77]

dersmoll, спасибо за подробную критику. согласен не со всем, но оправдаюсь только по поводу этого

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

да, я этот косяк помню. но все таки сверстал именно так как есть. потому что дизайнер не предусмотрел способа размножить фон заголовка по вертикали. то есть если я его тупо размножу через репит, то получится некрасиво("плитка").

Кстати интересно как поступил бы профессионал, если бы оказался в подобной ситуации.

на этом форуме и на некоторых других мне указывают на то, что я картинки, представляющие собой контент(в блоке новостей например) выношу в css. это я делаю осмысленно. дело в том, что на многих сайтах эти картинки никак с сутью новости(если речь идут о новостях например) не связаны. пусть новость такая: "сегодня в организации прошло собрание акционеров". контент менеджер запросто может(и так бывает очень часто, согласитесь) воткнуть в заголовок типовую картинку(несколько человечков в пиджаках сидят за столом, или они же втыкают в экран ноута, или даже просто рукопожатие). поэтому если даже ошибка и есть у меня в верстке, то её я сделал осмысленно, из-за недостатка информации

Edited April 30, 2012 by cyklop77

[dersmoll]

dersmoll, спасибо за подробную критику. согласен не со всем, но оправдаюсь только по поводу этого

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

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

Часто случается, что дизайнер редко задумывается о дизайне, который выходит за рамки статического макета. Поэтому, часто приходится доделывать за него мелкие недоработки. Я думаю, что в этой ситуации можно было бы просто прибить фон к низу чтобы красная лента встегда была в нижнем правом углу, а стрелочка внизу, а сверху залить серым цветом. Плюс, сделаеть адекватный line-height, а отступы сверху/снизу - паддингом. Таким макаром можно добиться минимального адекватного отображения.

на этом форуме и на некоторых других мне указывают на то, что я картинки, представляющие собой контент(в блоке новостей например) выношу в css. это я делаю осмысленно. дело в том, что на многих сайтах эти картинки никак с сутью новости(если речь идут о новостях например) не связаны. пусть новость такая: "сегодня в организации прошло собрание акционеров". контент менеджер запросто может(и так бывает очень часто, согласитесь) воткнуть в заголовок типовую картинку(несколько человечков в пиджаках сидят за столом, или они же втыкают в экран ноута, или даже просто рукопожатие). поэтому если даже ошибка и есть у меня в верстке, то её я сделал осмысленно, из-за недостатка информации

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

Представьте себе ситуацию, когда вы отдали верстку программисту, он ее кое-как применил и начал забивать реальный контент. Все изображения, загружаемые в админке на выходе всегда будут IMG. И сейчас, где бы он не вставил переменную, которая выведет это изображение в блоке новостей, оно сломает ему дизайн этого блока. Плюс, если он не сильно шарит в CSS, то он не разберется, что это за блок такой <div class="icon icon2"></div>, и почему он отвечает не за дизайн элементов, а за контентный объект.

Вы не используете clearfix для очистики флоат потоков, хотя в стилях он предусмотрен, а тупо везде ставите overflow:hidden.

Clearfix тоже может давать проблемы, типа ненужной зависимости от других колонок. Имхо, отдельный контекст всё-таки как-то понадежнее.

Естественно, нет смысла вставлять clearfix везде, куда дотянутся руки. В блоках новостей или других списках вполне достаточно делать overflow:hidden, но добавлять его родителя блоков mainL и mainR, по моему, это преступление

Тут лучше уж было бы сделать классический clear:both по ними, чем такое.

Проблема с выпадушками возникает только если у контейнера впридачу к overflow стоит position:relative (по крайней мере в стандартных браузерах).

Тем не менее, эта проблема возникает довольно часто, потому что всякие выпадушки-попапы как раз и лежат в блоках с position:relative

Имхо, тут вопрос достаточно холиворный, может есть смысл обсудить его отдельно?

Можно и обсудить, но исходя из своего опыта могу утверждать, что минимальный классический clearfix подходит для 95 случаев из 100