Вёрстка и её критерии качества
Вёрстка - это процесс преобразования картинки (например, в PSD, JPG, PNG и других форматах) в HTML-страницу. То есть Вы сделали дизайн страницы, но это ещё не страница, так как ещё нет абсолютно никакой интерактивности. И вот после создания дизайна настаёт время вёрстки. А в этой статье я расскажу о критериях качества вёрстки.
Вот те критерии качества вёрстки, по которым можно определить, насколько качественно сделана вёрстка:
- Совпадение с дизайном. Редкое явление, когда дизайн на 100% совпадает с вёрсткой, но очень близкое совпадение необходимо обеспечить. Очень близкое совпадение с дизайном означает, что при взгляде сначала на дизайн, а потом на вёрстку, крайне трудно назвать отличия. Безусловно, если в дизайне отступ 10 пикселей, а Вы поставили 8, то никто этого не заметит, и дефектом это являться не будет.
- Кроссбраузерность. Этот критерий характеризует, насколько сайт хорошо смотрится в разных браузерах. Сразу скажу, практически невозможно сделать 100% одинаковое отображение во всех браузерах (тем более, что их сотни, а вместе с версиями и тысячи). Однако, обеспечить адекватное отображение во всех современных браузерах (Firefox, Opera, IE, Chrome - последних версий), а также некоторых старых (IE8, IE7, IE6) обязательно нужно.
- Адаптация под разные разрешения. В большинстве случаев проблема возникает при низких разрешениях, а точнее при маленькой ширине экрана. На данный момент адаптировать сайт рекомендуется под ширину экрана 1024 пикселя и больше. Адаптирование под разные разрешения экрана, в большинстве случаев, означает отсутствие горизонтальной полосы прокрутки.
- Чистый и валидный код. Под чистым кодом подразумевается такой код, в котором без проблем разберётся посторонний человек. То есть всё должно быть структурировано, внутренние теги должны иметь отступ от внешних, все классы и id должны иметь адекватные имена. А про важность валидности писалось здесь: валидность html-кода.
Примерно 50% верстальщиков (в том числе и всякие компании) обеспечивают лишь 1-й пункт и чуть-чуть 2-й. Где-то 49% не обеспечивают вообще ничего, то есть их вёрстка просто безобразна. И лишь 1% действительно качественно верстают. К сожалению, я не знаком с такими верстальщиками, но сайты хорошо свёрстанные есть, значит, и отличные верстальщики имеются, но их очень мало.
Мне бы очень хотелось, чтобы Вы попали в этот 1% асов вёрстки, которые обеспечивают все 4 пункта, но для этого нужно очень хорошо знать HTML и CSS и, главное, практиковаться, регулярно практиковаться, причём в простом редакторе, а не в каком-нибудь DreamWeaver (если используете визуальную часть этого редактора, то Вы автоматически попадаете в те 49%). Поэтому ежедневно практикуйтесь, и уже через пару месяцев Вы будете хорошо верстать.
И, наконец, отличным вариантом обучения вёрстке будет вот этот курс: Вёрстка сайта с нуля - который обучит Вас всем азам, покажет несколько примеров вёрстки различных страниц и даст массу упражнений для закрепления знаний.
-
- Михаил Русаков
Комментарии (15):
Михаил, в 3 пункте говорится о адаптации сайта к разным разрешениям экранов пользователей и о горизонтальной полосе прокрутки. У вас на сайте есть горизонтальная полоса прокрутки!!! Я смотрю ваш сайт через Google Crome с разрешением экрана 1366x768. Попробуйте в CSS-файле этой страницы к тегу BODY добавить padding: 0; margin: 0; должна исчезнуть.
Ответить
Да, нет, проблема не в этом была, тем более, что margin и padding стояли. Было некорректное отображение рамки в chrome у верхнего меню. Подправил, теперь должно быть нормально.
Ответить
Проблема осталась!
Ответить
Возможно, в хеше сохранилось, потому что только что посмотрел - проблемы больше нет.
Ответить
Михаил, а не могли бы вы написать очерк про среду разработки, программки-сайтостроители? Расставить точки над ё по поводу DreamWeaver-ов и поделиться своим мнением о том, какая прога лучшая? Понимая, тема индивидуальная, каждый под себя выбирает.
Ответить
Вот про Dreamweaver: http://myrusakov.ru/html-dreamweaver.html К любой другой аналогичной программе данная статья также полностью относится.
Ответить
Согласен. Читая статью про DW, не раз ловил себя на мысли, "это же можно сказать и про мою программу". Уже убедился, если делаешь код в какой-то программе, не забудь потом проверить его в обычном блокноте. Тем более, что блокноты ведь тоже разные бывают.
Ответить
Здравствуйте Михаил.Могли бы Вы проконсультировать меня как профессионал по такому вопросу? Я полностью заменила дизайн сайта(шаблон). Подскажите пожалуйста,как лучше загрузить его на сервер? Сначала удалить старые страницы, а потом загрузить новые или как?
Ответить
Сначала удалите всё старое, а потом загрузите новое.
Ответить
Михаил, прослушал видео урок по этой теме и хочу задать вопрос. Прослушивал однажды курсы достаточно профессионального товарища, так он утверждает, что поддержка браузера IE6, а порой и IE7 для интернет проекта должна быть экономически оправдана. IE6 практически мертвый браузер и вложенные в него усилия и средства должны окупаться, и если этого не происходит, поддержка его должна прекращаться. Как Вы относитесь к данному утверждению.
Ответить
Самый частый аргумент бездельников и халтурщиков. Даже сейчас этими браузерами пользуются примерно 3.5% всех пользователей. И как показывает практика, практически всегда сайт, плохо отображающийся в IE6 и IE7, будет также плохо отображаться в некоторых других браузерах. Таким образом, процент будет возрастать. Для всяких левых сайтов, возможно, эти 3.5% и немного, но для серьёзных сайтов 3.5% - это очень много, особенно, если посещаемость огромная.
Ответить
Насчет халтурщиков не знаю, эта лекция читалась в Бауманке. В качестве примера приведен магазин OZON, якобы они сворачивают поддержку IE6 поскольку затраты на эту поддержку приносят явные убытки ресурсу. Я так предполагаю, что все маркетинговые исследования были проведены.
Ответить
Это их ошибка, но они от этого сильно не обеднеют. Хотя никаких проблем с отображением Ozon в IE6 я не увидел.
Ответить
Не "внутренние тегА должны иметь отступ от внешних" А наверное "Внутренние тегИ" ?
Ответить
Спасибо, исправил!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.