Верстаем, верстаем и проверяем!

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

    Наша задача:


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


    Кроссбраузерность:


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

    Валидатор:


    Говорить не о чем. Все валидно как в лучших домах Парижа. :)

    Соответствие дизайна и верстки:


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

    Этап №1


    Слою с версткой задаем прозрачность 30-50% и анализируем полученную картинку.


    Логотип



    съехал


    RSS



    съехал


    Копирайт



    Выровнены по разным направляющим (на дизайне – относительно картинок в левом блоке, в верстке – относительно левого края хедера)


    Ссылки в шапке



    Ссылки в шапке – имеют совершенно разное вертикальное выравнивание относительно зеленого фона, на котором они находятся.


    Выравнивание в правой колонке



    снова видим отхождение от дизайна


    Междустрочные расстояния



    меньше необходимого


    Размер шрифта в подвале



    крупней, чем надо


    Меню



    на дизайне кнопка Home — активна


    Аналогичную операцию следует проводить для нескольких браузеров. Я использую следующие:
    • Internet Explorer 7 (этот анализ проводился именно на основе картинки, полученной с этого браузера)
    • Internet Explorer 6
    • Mozilla Firefox 3.х  (последняя версия)
    • Opera 9.6х (последняя версия)
    • Safari 3.1.х  (последняя актуальная версия)

    Технические моменты:


    • В IE6-7 нет возможности увеличить размер шрифта (грубая ошибка)
    • Для картинок желательно прописывать еще и title
    • Для ссылок желательно прописывать title
    • В шапке для иконок–пиктограмм  отсутствуют  подписи, хотя они уже определены подписями под самими картинками.
    • Для ссылки логотипа следует прописать title
    • У ссылок есть состояние не только hover, но и visited, active, focus
    • Проверяем наличие комментариев к коду, на нашем примере они есть
    • Указывать размер шрифта в пикселях недопустимо, используем em или проценты


    Типографика:


    Теперь пришла очередь проверить типографику.  Почти на всех сайтах клиент (он же администратор) имеет право вставлять текст. Проверим, а что будет, когда нам попадется довольно сложный, но правильно отформатированный текст?
    Для этой цели в контент область вставим тест с разнообразными элементами и тегами, в качестве основы я возьму  текст с http://loremipsum.banzalik.ru/, он имеет необходимую структуру для проверки стилистики текста макета.
    Для сравнения к скрину верски был прикреплён «эталонный» макет.


    Какой вывод можно сделать из последнего скриншота?


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


    Версия для печати.




    Первое, что хочется отметить — отсутствие каких-либо оптимизаций под печать.
    Итак все по-порядку:
    • Большой отступ сверху
    • Отсутствие логотипа компании
    • Графические элементы в хедере — на принт версии лишние, пожалуй, весь хедер можно смело скрыть
    • Ссылки, заголовки, тексты — делаем черно-белыми, мы живем во временя лазерных ч\б принтеров, цветные тексты на них выглядят тускло
    • Иконки rss на бумаге ни к чему
    • Ссылки more в левой колонке лишняя


    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                                                      Человек решил доброе дело сделать, а, вы на него набросились. Ай, яй, яй.
                                                        0
                                                        так я тоже режил решил сделать доброе дело, ведь, если этот макет решат поправить, он станет лучше, качественней и «дороже» во всяком случаи я на это надеюсь.
                                                        +10
                                                        пиксель-в-пиксель — это, конечно, бред, но выравнивание должно быть соблюдено. если задано, что текст в заголовке имеет одинаковый отступ сверху и снизу — значит он и должен быть одинаков. другое дело, что дизайнер обчно не указывает на ключевые моменты (разве что направляющие остаются) — тем самым полагаясь на эсетическое чувство верстальщика… аналогично, обычно нет указания как должен вести себя сайт при разрешениях отличных от 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 в левой колонке лишняя»

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

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

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

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

                                                              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;
                                                              }
                                                              


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

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


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


                                                                    Не стоит использовать вложенные теги в теге H1 — не гуд для оптимизации, лучше ссылку выносить за H1
                                                                      0
                                                                      Кто вам это сказал?
                                                                        0
                                                                        вот просто аналитика
                                                                      0
                                                                      Кстати, текст для типографики является частью CSS-фреймворка Tripoli:
                                                                      http://devkick.com/lab/tripoli/sample.php
                                                                        0
                                                                        совершенно верно, жаль правда, что начал развиваться не той дорогой, которой мы бы хотелось
                                                                        0
                                                                        Полезно. нет кармы чтобы повысить вам.
                                                                          0
                                                                          Кроссбраузерность:

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


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

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

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

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

                                                                              Самое читаемое