Как стать автором
Обновить

Комментарии 76

Большинство проблем с типографикой, имхо, связано с необдуманным использованием css-reset.
помимо css-reset есть и css-formating правила, позволяющие добиться идентичного отображения тегов и элементов в разных браузерах

но в вашей фразе, пожалуй, ключевое слово — необдуманным
Да, конечно, сбросил — потрудись написать свои.
Добавил кармы, может хватит для переноса.
спасибо, уже перенес
Вот тут даже без всякой сетки виден косяк.
Есть еще проблемы с артефактами сжатия JPEG на логотипе.
это уже обсуждалось, верстали с джипега…
данный аспект я не затрагивал из-за специфики исходника
пардон :)
сложно определить точные размеры шрифтов, межстрочных расстояний по jpeg
но можно
Разбор полетов понравился. :)
Верстать «пиксель в пиксель» не всегда правильно.
Я, например, люблю в качестве значений padding'ов и margin'ов использовать значения кратные двум, например, 4 или 10. Если это цифра 7, то она спокойно становаится 8-ой. Мне так удобнее. Правда, во всяких border'ах, font-size, line-height лучше всего придерживаться значений, выставленных в макете.
Верстальщик должен восприниматься как проектировщик интерфейса, в первую очередь. Дизайнер всего-навсего размечает отображение элементов и их визуальную составляющую.

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

если дизайнер делает на глаз, и верстальщик потом делает на глаз, ничего хорошего мы с этого не получим, мне такой результат совершенно не интересен, незнаю как Вам
НЛО прилетело и опубликовало эту надпись здесь
Да, дефолтные значения этих тегов увеличивают высоту строки. Я в этом случае использую position: relative; и сдвигаю элементы. Весьма надежный способ.
Вряд ли «господин curlybrace» новичек в верстке, каким он представляется в тексте. Просто уместный результат за уместное время. Замечания по сути (можно было бы дополнить микроформатами), но будет ли показан итоговый идеальный макет?
ух как четко разложил, респект
отличная вещь!!! спасибо автору!!! и за ссылочки!!!
очень понравилось!!! очень удобно!!! ;)
блять, спасибо!
Всегда пожалуйста ;)
Кстати, феномен минусования — как групповой инстинкт, иногда не понимаю этого, как сейчас.
Слишком много восклицательных знаков. А у многих уже аллергия на упячку и иже с ней.
Конкретно эта врестка была явно не для продакшена, а только для демонстрации
Но разобрали хорошо :)
Осталось только написать пост, где перечислить все орфографические и пунктуационные ошибки в этом топике, и ждать следующего =)
Типогафика:

:)
да… простите, я буду стараться
Я даже не смотрел на правописание, если честно =) Никто не идеален =)
ИМХО, большинство придирок притянутые за уши, это же не готовое решение, а общий драфт такой, для тренировки умов аматоров, и с каких это пор указание размеров шрифтов в пикселях недопустимо? если всякие ушербные ПА не поддерживают масштабирование шрифтов, размер которых указан в пикселях, то это половые трудности этих ПА, вот из-за таких уступок со стороны веб-разработчиков эти ущербные ПА настолько и ущербны, кстати, ущербный ПА версии 7 поддерживает зум, так что при большом желании, букавы можно и увеличить
Ущербные ПА тоже надо учитывать, особенно если будущий ресурс будет популярен. Тут уж дело чести верстальщика, чтобы везде было все «ровно».
да надо, никто ж не спорит, в большинстве случаев приходится учитывать, но если бы все веб-разработчики объединили усилия и не шли на поводу у производителя ущербного пользовательского агента, то всем было бы легче жить
не не обязательно, чтобы было всем «хорошо» ;-) иначе у юзеров не будет повода пробовать альтернативы…
Уважаемые, не забывайте про IETester
он слишком капризен, пока использую его с осторожностью
в каком смысле капризен?
Занимательный разбор верстки.

Скажу прямо — я не всегда придерживаюсь всех правил, которых, по идее, надо бы следовать. Причина банальна — времени в обрез, в связи с чем нет возможности описать стили для всех тегов; нет возможности оптимизировать макет под вывод на печать и отображение на наладонниках. Тем более, предоставляемая плата за работу обычно несоразмерна тому качеству, которое будет на твердую пятерку. Фриланс это такая штука, где клиенту обычно все равно (работая с солидными организациями так не скажешь: тут тебе даже и свои требования дадут к верстке), как ты «порежешь» (а я бы лучше сверстал) макет — на ячейки большой таблицы или семантично, без таблиц. Тут верстальщик уже сам решает.

Смотря портфолио случайно выбранных «из толпы» верстальщиков понимаешь, что основная масса из них не удосуживает себя такими вещами, как прописывание всех необходимых в контенте стилей элементов, не используемых на странице (99% всех верстальщиков), потому что это значительно увеличивает время на верстку. А многие просто и не задумываются о том, что это вообще нужно делать.

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

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

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

Отдельное спасибо автору за m5 css framework, дельный фреймворк.
Пикселька к пиксельке,
Строчечки в ряд,
Верстальщик вторую неделю
Что-то не рад… =)
перестаньте, поправить те моменты что я описал, у опытного curlybrace займет не более 2-3 часов времени, стоит ли оно того? Я считаю, что да, а вы как считаете?
Да, стоит. Думаю, что это займет даже меньше по времени.
081106-134518-galeon-2.0.4-ubuntu-8.04-lts-3020ad4361d16e2a4b605ae4497fd7ef.png
Это что за самолет? %)
Сколько времени было дано на вёрстку?
А я хочу поддержать верстальщика. Есть недоработки — а у кого их не бывает? После тестирования всегда можно поправить стиль, даже уже после запуска проекта.
Посмотрите на всё это с другой стороны: иногда дизайнер такое нарисует, что бедный верстальщик часами только обдумывает, как сверстать этот макет максимально близко к PSD. И ведь никто не скажет, что дизайнер сделал свою работу необдуманно.
curlybrace — мой тебе респект!
Так, кто говорит, что ошибок не бывает?
Они есть, были и будут — это нормально. Основная задача этой статьи показать, как малой кровью повысить свой уровень и уменьшить количество ошибок
Насколько я знаю, curlybrace — опытный верстальщик. Это так к слову.
Как правило, нарезка подобного уровня устраивает всех заказчиков. А ваши «критерии качества» — это скорее исключению, чем правило. Демпинг растет и поэтому заказчики не готовы платить соответствующие деньги за работу. В комментах кто-то уже писал, что у серьёзных контор есть свой чек-лист и если он у вас есть, то следовало бы сразу его дать исполнителю. И я бы не удивился, если бы цена немного повысилась.

А в целом, мне ваш пост очень даже понравился. Некоторые моменты в ходе проверки верстки пропускаются, а тут прошелся по списку и все готово.

Про печать: раньше, когда для основных стилей прописывал media='all', создание стилей для печати занимало много времени, а после того, как начал писать media='screen, handheld, projection', на это стало уходить существенно меньше времени — прописал display:none и все готово.
ИМХО: притирка верстки пиксель к пикселю — пустая трата времени, из множества проектов, которые доводилось мне верстать — такого требования не было. Но это больше зависит от качества макета. Когда макет нарисован профи, тогда и верстать его легко с тем же качеством. Но большая часть макетов не отвечает высокому качеству (иногда бывают вообще не продуманные под верстку, тупо — красивая картинка, сразу видно что дизайнер понятия не имеет о верстке и о том, что дальше происходит с макетом) и отведенное на верстку время не позволяют выполнять все приведенные правки.
В шапке для иконок – пиктограмм отсутствуют подписи, хотя они уже определены подписями под самими картинками.

Грубое нарушение типографики — двойные пробелы (грубое нарушение) 8)

Пиксель в пиксель, автор наверное для кучи решил еще и это проверить. кг.
Дареному коню, как известно, в зубы не смотрят :)

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

Человек решил доброе дело сделать, а, вы на него набросились. Ай, яй, яй.
так я тоже режил решил сделать доброе дело, ведь, если этот макет решат поправить, он станет лучше, качественней и «дороже» во всяком случаи я на это надеюсь.
пиксель-в-пиксель — это, конечно, бред, но выравнивание должно быть соблюдено. если задано, что текст в заголовке имеет одинаковый отступ сверху и снизу — значит он и должен быть одинаков. другое дело, что дизайнер обчно не указывает на ключевые моменты (разве что направляющие остаются) — тем самым полагаясь на эсетическое чувство верстальщика… аналогично, обычно нет указания как должен вести себя сайт при разрешениях отличных от 1024 (что должно резиниться, какие должны быть пропорции) и при изменённом размере шрифта (что и как должно менять свои размеры). всё это лишь подразумеается, но не оговаривается… и если верстальщик займётся самодеятельностью — в лучшем случае ему придётся переделывать, а в худшем — его обвинят в нерасторопности, мол «чего ты там возишься? я это в дримвивере сверстаю за час.»

«Я использую следующие: Internet Explorer 7, Internet Explorer 6, Mozilla Firefox 3.х, Opera 9.6х, Safari 3.1.х „

пользователей opera 9.2, например, куда больше, чем safari. а ведь с операми куда больше проблем, чем со всеми эксплорерами. мы тестируем в 5 версиях опер и в каждой — свои глюки. актуальных ишаков всего два (ну три, если вы всё ещё поддерживаете 5.5).
также не освещён вопрос кроссплатформенности. фф, опера под линупсом — имеют свой, неповторимый привкус. + различные архитектуры: x86 и x64 — опять разное поведение.

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

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

“В IE6-7 нет возможности увеличить размер шрифта (грубая ошибка), Указывать размер шрифта в пикселях недопустимо, используем em или проценты»

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

«Для картинок желательно прописывать еще и title, Для ссылок желательно прописывать title»

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

«В шапке для иконок–пиктограмм отсутствуют подписи, хотя они уже определены подписями под самими картинками.»

если ты об альтах, то тут они не нужны, дабы избежать повторов. если ты об альтах, то тут они не нужны, дабы избежать повторов.

«Ссылки more в левой колонке лишняя»

вся колонка лишняя.

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

НЛО прилетело и опубликовало эту надпись здесь
у опер паталогическая проблема с рендерингом, проявляющаяся при динамическом изменении хтмл и/или стилей или размеров окна. то не пересчитает какой-то размер, то рассчитает его неправильно… причём отверсии к версии они одно чинят — другое ломают. только к версии 9.5 они добились какой-то стабильности, но что-то юзеры не торопятся на неё переходить =(
сафари в этом плане как-то более стабилен.
Учитывая полпроцента пользователей Сафари его стабильноть никого не интересует.
НЛО прилетело и опубликовало эту надпись здесь
Если IE6 переводится в quirksmode (непонятно, правда, зачем), то костылей должно быть гораздо больше.
Например, для #content задана ширина 585px и левый padding 10px. В IE6 ширина этого блока будет 585px, в остальных браузерах 595px, в файле ie.css это не учитывается.
НЛО прилетело и опубликовало эту надпись здесь
Интересно, что никто не отметил замену заголовка картинкой (логотип). При отключенных картинках он просто пропадает.

Я использую такую технику:

HTML:

<h1><a href="/">Alex. My website, where work and play meet<span></span></a></h1>


CSS:

h1 a {
  display: block;
  width: 288px;
  height: 96px;
  position:relative;
  overflow:hidden;
}

h1 a span {
  display: block;
  width: 288px;
  height: 96px;
  position:absolute;
  top:0; left:0;
  background: url(../images/logo.png) left top no-repeat;
}


Тогда при отключенной графике логотип-ссылка заменится на текст.
Тогда при отключенной графике логотип-ссылка заменится на текст.

Тогда при включенной графике появляется сначала текст, а потом картинка. Клиентам это, мягко говоря, не нравится.
Тогда я могу предложить:
<a href="/"><img src="/i/logo.gif" alt="" /></a>


Чтобы клиентам нравилось.
Типографика — почему верстальщик должен сам догадываться, подбирать цвета, отступы, размеры, если дизайнер поленился в макете это все показать? Да, можно оставить все элементы стандартными, но заказчику они не понравятся и верстальщика опять же будут дергать, разницы нет.
у заказчика практически всегда в косяках дизайнера оказывается виноват верстальщик…
Еще бывают дизайнеры, которые всю жизнь занимались полиграфией, и вдруг начали пытаться попробовать себя в web дизайне… тогда ваще жесть получается
Alex. My website, where work and play meet


Не стоит использовать вложенные теги в теге H1 — не гуд для оптимизации, лучше ссылку выносить за H1
Кто вам это сказал?
вот просто аналитика
совершенно верно, жаль правда, что начал развиваться не той дорогой, которой мы бы хотелось
Полезно. нет кармы чтобы повысить вам.
Кроссбраузерность:

Проверим отображение этой страницы в разнообразных браузерах и под различными осями, для этого будем использовать browsershots.org/.


А как же проглядели оперу седьмую?

Я для тестирования среди прочих использую 7.53 версию, browsershots на версии 7.11 выдаёт такую же картину — верхнее меню съезжает вправо и каждый пункт меню начинается с новой строки…
У кого-нибудь есть идеи как через стили заставить седьмую оперу не начинать каждый li с новой строки, но при этом чтобы всё осталось валидным?
Нашёл :), мешает float:right, прописанный для UL
Можно либо обернуть ul в блок, который будет справа, а сам ul уже будет без float'а, либо дописать display:block и ширину.
просто парень дерьмово верстает =))
ошибки могут быть у каждого ;)
да, я пошутил =))

если бы не было такого примера — не было бы всех статей по данной теме =)
сейчас пытаюсь сформулировать свои правила проверки вёрстки. статья помогла в этом. но думаю, что её можно дополнить…
спасибо!
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.