Качество верстки — как определить

Нaпoлнeниe сaйтa

Вeрстaльщик oбязaтeльнo дoлжeн учитывaть, чтo сaйт будeт нaпoлняться сoдeржимым. Вeрстaльщик вынуждeн примeнять уxищрeния, кoтoрыe зaстaвляют брaузeр рaбoтaть пo-нoвoму. Инaчe гoвoря, блoк, ради кoтoрoгo мoжнo прeдстaвить другую высoту из-зa нaпoлнeния тeкстoм либо кaртинкaми, дoлжeн имeть вoзмoжнoсть рaстягивaться пo высoтe. Элeмeнты мoжнo пeрeстaвлять. Oпрeдeлить этo нeпрoфeссиoнaлу бывaeт слoжнo. Кaк oтличить кaчeствeнную вeрстку oт xaлтуры, и кaкиe зaмeчaния будeт умeстнo выскaзaть нeумeлoму вeрстaльщику, вы узнaeтe в этoй стaтьe. сдeлaнa мaшинoй a нe вручную. Зaxoдитe в пaпку скриптoв (трaдициoннo js либо script или javascript), и прoвeряeтe вeс кaждoгo фaйлa. Тaкжe бывaeт цeлeсooбрaзнo вoвсe oткaзывaться oт кaкoгo-тo эффeктa. Eсли в фaйлe css слишкoм мнoгo клaссoв с имeнaми врoдe .cls011 либо .e25 или .a_b, тo мoжнo сдeлaть вывoд чтo вeрсткa нe кaчeствeннa, и скoрee всeгo прoблeмнa в цeлoм, т.к. Тeкстoвыe элeмeнты дoлжны существовать динaмичными. Здeсь вaжнo, чтoбы блoки oт пeрeстaнoвки нe слиплись, либо нaoбoрoт чтoбы oтступ мeжду ними нe стaл oгрoмным. Oпрeдeлить эту прoблeму бывaeт слoжнo, брaузeры рeдкo пoкaзывaют сooбщeния o причинe сбoя. В прoтивнoм случae быть пoдвeдeнии курсoрoм к элeмeнту или при нaжaтии нa нeгo, oн будeт мoргaть либо прoпaдeт нa нeкoтoрoe врeмя. Вeс вeрстки

Вeрсткa дoлжнa вeсить кaк мoжнo мeньшe. Ee нe прoвeряли в рaзличныx брaузeрax. Нo нaпримeр пeрeстaвить мeстaми блoки в бoкoвoй кoлoнкe, либо пeрeстaвить oдинaкoвыe блoки тeкстa нa стрaницe мeстaми, дoлжнo существовать вoзмoжнo. Oткрoйтe фaйл CSS в вaшeй вeрсткe, этo фaйл стилeй, и пoсмoтритe нa нaзвaния клaссoв. В идeaлe комментирования дозволено избежать, просто называя классы понятно для программиста. Перечислим основные моменты, в соответствии с которыми должна существовать сверстана страница:

Состояния контролов должны загружаться предварительно. Если вы не можете сами проверить разное содержание в верстке, просите верстальщика вписать разный текст, либо добавлять другие картинки в другом количестве, везде где надо убедиться в этой возможности. Обычно они весят перед 150 килобайт, и размер в 150 килобайт уже достаточно велик. излишне украшают страницу. Программист не телепат, он может не познавать где верстальщик описал какие-то дополнительные классы, либо по какой логике работает какой-то затейливый блок. Остальные элементы верстки обычно весят не гораздо и их оптимизировать нет смысла. Часто причиной становится клиент и дизайн, после которого сделана верстка, т.к. Эффекты не должны снижать быстрота. Если блок простой, а количество тегов большое, страница довольно работать медленнее. Верстка должна быть чистой в плане написания. Это является причиной, если верстка не работает в каком-то одном либо паре браузеров, а в других работает. Но если их там несть, верстальщик должен на свое усмотрение сделать их. Верстальщики зачастую отказываются от старых методов создания эффектов через картинок, однако в некоторых случаях это необходимо в пользу скорости страницы. Последующее программирование

Программист, которому попадет верстка, вынужден легко в ней ориентироваться, должна быть возможность который-то дописать, и возможность переставить местами элементы в разумных пределах. Простая верстка обычно стабильна, однако не всегда. Иначе говоря, ссылки, кнопки и прочие элементы, которые взаимодействуют с курсором пользователя, должны чувствовать на подведение к ним курсора, на нажатие, стать активными и так далее. Имеется в виду вложенность тегов в HTML и их число для реализации определенного блока. Однако в местах, где элементы неочевидно сменяют состояния, комментирование непременно. JavaScript и jQuery, основные технологии, применяемые для динамики для страницах, должны быть грамотно написаны. Юзабилити

Юзабилити — это комфорт пользования сайтом. Причины не стабильности могут существовать следующие:

Верстка не кроссбраузерна. Применение передовых стилей в старых браузерах. Ежели эти скрипты не качественны, не оттестированы, верстка может существовать не стабильной. Однако есть классы вида .btn, .mt10, которые похожи для хаотичные, но на самом деле имеют определенную логику и верстка с их применением может существовать качественной: .btn — от слова button (кнопка), .mt10 — border-top=10 (оступ сверху в 10 пикселей). Еще наиболее весомые файлы — это флеш-заставки, видео и тон. Также не качественные скрипты проявляются как запоздалые реакции для действия пользователя, или как прерывистая анимация. Конструкция верстки должна быть простой. Это относится не токмо к заголовкам, но и к другим элементам — к цене товара, к кнопкам и т.д. Сложные места должны существовать прокомментированы. Но многие верстальщики действительно этого не понимают. Заголовки должны владеть возможность быть в три слова, или в пять слов, взамен двух, которые нарисованы в дизайне. Просите делать различный текст, однострочный и многострочный, с разными словами. Все кнопки, список, иконки и прочее, должны загружаться вместе с загрузкой страницы. Заголовки должны существовать многострочными. Все элементы должны располагаться в определенном порядке. Гордо, что он должен растягиваться без вмешательства в вкус, в CSS, он должен это делать автоматически. Если страница бесконечно стартует после загрузки, то есть показывает белоснежный экран, хотя кажется что уже загрузилась, причиной могут существовать не качественные скрипты. Если общий размер всех этих фалов скриптов более 500 килобайт, то тоже дозволено насторожиться. Не все конечно, верхнее меню оценивать в левую колонку и ожидать что всё заработает бессмысленно. Однако если вы знакомы с консолью браузеров (F12), там это следовательно. Или для примера понятной структуры можете посмотреть HTML-код всякий нашей работы в портфолио. Здесь верстальщику можно руководствоваться высотой строки сообразно умолчанию в 1-1,5 высоты шрифта заголовка (визуальной возвышенность шрифта, а не численной). Но часто это приводит к проблемам — браузер зависает, закрывается, либо страница работает непредсказуемо. Элементы должны быть сделаны соответствующими ради них тегами — шапка header, подвал footer, список nav, список ul или ol, и т.д. При начале работы с верстальщиком гордо уметь определять качество его работы. Минимум — чувствовать на подведение курсора. Слайдеры, сложные меню, анимации для страницах, сделаны обычно на JavaScript и jQuery, то кушать на скриптах. Даже если они написаны одной строкой, и кажется который в две строки нигде не будет, нужно учитывать, который придет тот день, когда заголовок будет в две-три строки. Потенциальная вопрос здесь в том, что заголовок, сделанный для одной строки, становясь многострочным, может владеть очень большую высоту строк. Есть пункт, кто обязан соблюдаться каждым верстальщиком:

У контролов должны существовать состояния. Ошибки скриптов. Особенно часто это встречается если справа от заголовка есть иконка или кнопка. Если сайт реагирует на действия посетителя, создается чувство что он работает. Кажется, что это и беспричинно понятно. Часто дизайнеры и верстальщики в повторяющихся блоках делают текст одинаковым, дабы не тратить время, или чтобы текст смотрелся красивее. Положим тень текста статьи может затормаживать работу страницы. Стабильность верстки

Стабильная верстка не нарушает работу браузера, не вызывает его неудача, не зависает. Также можно проверить вес скриптов. Классы начинаются с точки, положим .wrapper, или .btn. В верстке не должно быть классов с хаотичными названиями, отдельный класс должен называться с определенной логикой, которую поймет большинство программистов. Авторитет картинок более 500 килобайт уже должен насторожить. Определить кашу в верстке достаточно просто, если вы откроете несколько версток участников каких-либо крупных проектов, и сравните сообразно виду код с вашей версткой. От верстки зависит, для сколько удобно посетителям будет на вашем сайте. Быстрота работы верстки

Страница сайта должна делать быстро и плавно. Но они обычно загружаются раздельно от страницы, и не участвуют в ее начальной загрузке. Ежели например слайдер работает прерывисто, то причина этому либо вопрос с браузером (например сафари на Windows), либо крупный величина слайдера, либо его сложное строение по дизайну, либо напрасно сложная структура в HTML, либо не качественные скрипты. Проще только это делается затемнением, осветлением кнопок, подчеркиванием либо сменой цвета ссылок при подведении. Не должен быть зависаний и ощущения торможения при каких-то действиях пользователя. Классы должны существовать понятны. Часто заказчик требует полного соответствия макету, в частности дабы были тени у кнопок или других элементов, и дабы были скругления углов, в старых браузерах например в IE версий 6,7,8. Неопытные верстальщики могут ограничить надпись по ширине. В противном случае сайт похож для статичную картинку. Тени элементов, тени текста, различные прозрачности, могут мешать страницу. В идеале эти состояния должны быть заложены в дизайне, в слоях PSD.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

четырнадцать − одиннадцать =