< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Полезные советы » 7 советов по качественной верстке шаблона сайта

7 советов по качественной верстке шаблона сайта

Пост был обновлен: Дек 02, 2016

7 советов по качественной верстке шаблона сайта

Здравствуйте друзья! На носу новый год, а это один из моих любимых праздников. Сразу хочу поздравить вас с наступающим Новым годом и пожелать здоровья и успехов в наступающем 2013 году.

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

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

Итак, какие же эти правила? Разберем их в семи шагах.

1. Макет сайта.

Макет сайта - 7 советов по качественной верстке шаблона сайта

Минимальная ширина макета 1000 пикс, не зависимо, от того какой тип макета у нас — фиксированный или резиновый. Почему именно 1000 пикс? Ширина макета должна подстраиваться под популярное разрешение монитора и желательно без появления полосы горизонтальной прокрутки (лично я ее не люблю). На сегодняшний день это — 1024 x 768 пикс. Вычитаем из ширины окна браузера полосу вертикальной прокрутки и получаем ширину 1000 пикс.  При уменьшении или увеличении окна браузера все должно смотреться также красиво, т.е. элементы сайта не должны ни куда расплываться или наезжать друг на друга. Макет сайта должен быть гибким – легким движением руки превращаем фиксированный макет в резиновый и наоборот. Делается это примерно так: создается общий каркас (контейнер) и внутрь него кладутся уже остальные блоки (шапка сайта, левая и/или правая колонки, меню и т.д.). Далее через файл стилей оперируем уже минимальной шириной основного контейнера.

Нижний блок (подвал) сайта со счетчиками и копирайтами всегда должен быть прижат к низу. Проверить это можно, зажав клавишу Ctrl + прокручивая вниз колёсико мыши. Разрешение макета будет увеличиваться так, как на мониторе с высоким разрешением экрана. Чтобы вернуться в обычный режим нажмите комбинацию клавиш Ctrl + 0.

2. Код.

Код - 7 советов по качественной верстке шаблона сайта

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

Код должен быть как можно простым и легко читаемым. Также следует использовать все принципы семантической верстки, т.е. использование тегов по их прямому назначению. Вот, к примеру, заголовки всех уровней H1-H6 – по иерархии заголовок первого уровня H1 должен всегда быть выше всех остальных, потом идет заголовок H2 и т.д. Списки должны быть списками – нумерованный (ol) и не нумерованный (ul). Вот еще пример: контактные данные, а именно адрес целесообразно будет заключить в теги <address></address> (теги HTML5). В общем суть надеюсь вы поняли. Более подробно, что такое семантическая верстка вы можете почитать в интернете, вбив в адресную строку Яндекса или Гугла фразу «Семантическая верстка это…».

Читайте также:  Основы семантической верстки на HTML5

Несколько слов о файлах стилей. При написании кода в файле стилей старайтесь разделять код по таким же блокам что и в html, т.е. стили для шапки сайта, стили для левой колонки, правой колонки и т.д. Желательно отделять осмысленными комментариями. Помните, что с данным кодом в дальнейшем могут работать и другие верстальщики, так, что они должны легко разобраться. Все файлы стилей желательно объединить в один единый. Сделать это можно через импорт (@import url(‘styles.css’);), предварительно сложив все файлы в общий каталог.

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

Кроссбраузерность - 7 советов по качественной верстке шаблона сайта

Сверстанный макет должен одинаково смотреться во всех популярных браузерах и не забываем про старые версии. Основные браузеры, под которые я «затачиваю» свои макеты это – Firefox, Opera, Google Chrome, Safari, Internet Explorer 7, 8, 9. Для 6-го ИЕ (Internet Explorer) ставлю заглушку. Когда пользователь заходит на сайт, при помощи ИЕ 6.0, то для него открывается страница с информацией о том, что данный браузер устарел и что пора обновляться до более современных и ниже предлагаются ссылки на скачивание популярных браузеров.

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

4. Графика.

Графика в шаблоне сайта - 7 советов по качественной верстке шаблона сайта

На любом сайте есть графика – это картинки, видео, флеш… К чему я это говорю? Представьте вы сверстали макет, заполнили его какими то демо-материалами и в результате вес одной вашей странички составил более 2 Мб. А ведь по сути на странице еще ничего нет и мы не знаем, что еще захочет разместить на ней владелец площадки. В общем – вся графика используемая при верстке должна быть оптимизирована под веб-формат. Желательно, чтобы одна картинка не весила более 50 кб. Картинки кнопок, стрелок и подобной графики, которая не имеет плавных переходов и теней желательно сохранять в формате GIF. Изображения, которые не имеют прозрачного фона сохраняйте в формате JPG, выбрав оптимальное соотношение качество и объема (вес файла). В Photoshop при сохранении файла для «Веб и устройств» это «Высокое качество — 60». Тоже касается и флеш-роликов, они должны обязательно оптимизированными. Если вы заказывали его флеш-мастеру, то обязательно расскажите ему про соотношение качества и объема файла.

Проверить сколько у вас весит страничка после верстки вы можете, воспользовавшись плагином Firebug для Mozilla Firefox. Откройте Firebug, переключитесь во вкладку «Сеть» и обновите страничку. В самом конце списка вы увидите количество запросов и общий объем странички.

Читайте также:  Заглушка для старых браузеров

5. Строгое соответствие макету PSD.

Строгое соответствие PSD-макету - 7 советов по качественной верстке шаблона сайта

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

6. Соответствие стандартам W3C.

Соответствие стандартам W3C - 7 советов по качественной верстке шаблона сайта

Верстка сайта выполняется в соответствии с некоторыми стандартами, выпущенной консорциумом Всемирной паутины (W3C). Данная организация занимается разработкой и внедрением технических стандартов web-разработок. Так вот, ваш сверстанный дизайн должен придерживаться данных стандартов или как еще говорят пройти валидацию. Проверить шаблон на соответствие поможет специальное программное обеспечение, которое называется валидатор.

Почему так важно, чтобы код сайта был валидным?

Во-первых, валидный и красивый код, соответствующий всем стандартам, быстрее обрабатывается браузером и верстка будет отображаться одинаково во всех браузерах. Ведь разработчики браузеров придерживаются стандартов W3C при разработке своего продукта. Представьте, что каждый разработчик будет писать коды по своему. Тогда точно будет твориться полный хаос.

Во-вторых, поисковые системы могут негативно относится к сайтам, код которых содержит ошибки. Чем больше ваш код соответствует политике консорциума W3C, тем лояльнее к вам будут относиться поисковики. Поэтому уделите этому аспекту внимание для продвижении сайта в поисковых системах.

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

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

7. Проверка на наличие ошибок.

Проверка шаблона на наличие ошибок - 7 советов по качественной верстке шаблона сайта

Перед сдачей шаблона заказчику обязательно проверьте его на наличие ошибок. Ошибки могут быть разные. Обычно пользователь их может не заметить, а вот если вооружиться плагином Firebug, то их все можно отследить, перейдя во вкладку «Консоль».

У меня бывало часто, к примеру, создам таблицу стилей, подключу ее через импорт, а потом в ходе разработки окажется что она не нужна. Взял, да удалил ее, а подключение то осталось. Пользователь это не видит, впрочем, как и разработчик, а вот браузер и поисковики все видят. Так, что следите, чтобы у вас не было битых путей к файлам.

Ну вот в принципе и все что хотел сказать. Всем удачи! Всем пока!

Пост был обновлен: Дек 02, 2016

Заур Магомедов
Заур Магомедов

Верстальщик с огромным опытом работы. Занимаюсь созданием сайтов с 2009 года. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов
голосов: 7, средний бал: 5,00 / 5
Загрузка...

Проверка орфографии

Система Orphus

18 комментариев к статье "7 советов по качественной верстке шаблона сайта"

  • Dmitri Мар 06, 2016 в 1:57

    Заур вопрос как к профи. Вот есть например psd макет, требование заказчика адаптивная вёрстка. При вёрстке ты ведь не можешь указать всё в px. Как быть в этом случае. сколько брать % сколько em? как вообще соотносить все эти размеры?

    • Заур Магомедов
      Заур Магомедов Мар 06, 2016 в 1:59

      В процентах указывается только сетка — колонки. Иногда можно указывать текст в rem или в %. А остальное все по макету пиксель в пиксель.

    • Макс Апр 13, 2016 в 17:21

      А Bootstrap нельзя было заюзать?

      • Dmitri Апр 13, 2016 в 17:26

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

        • Заур Магомедов
          Заур Магомедов Апр 13, 2016 в 20:29

          Из бутстрап я беру только сетку 12-ти колоночную. По сути я уже свой мини-фреймворк создал. Согласен с Дмитрием — фреймворки за вас работу не сделают.

  • Иван мая 07, 2014 в 3:45

    Спасибо за пост, Заур! Быть может кто подскажет контакт толкового верстальщика?

    • Заур Магомедов
      Заур Магомедов мая 07, 2014 в 6:58

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

    • Иван мая 24, 2014 в 15:04

      upd: заказал адаптивную верстку у Заура, сделал все качественно и недорого! юзабельность и скорость загрузки радует на всех устройствах!

  • Роман Киртаев Окт 03, 2013 в 23:04

    «Тогда точно будет твориться полный хаус.»
    насколько я знаю слово «хаос» пишется с «О» 😀

  • Виктор Мар 14, 2013 в 3:21

    Спасибо за статью!

    • Заур Магомедов
      Заур Магомедов Мар 14, 2013 в 10:10

      Спасибо Вам за отзыв!

  • Игорь Мар 04, 2013 в 0:50

    Заур, а где можно оставлять комментарии к урокам «Бесплатный видеокурс “Верстка шаблона для Joomla 2.5″»? У меня вопросы по нему.

    • Заур Магомедов
      Заур Магомедов Мар 04, 2013 в 10:09

      Я создам рубрику «Видеокурсы», вот там и можно будет оставлять комментарии. Сегодня сделаю скорее всего.

  • Дизайнер Фев 13, 2013 в 14:29

    Так себе статья! Проговаривание очевидных вещей вслух. Для новичков сойдет

    • Заур Магомедов
      Заур Магомедов Фев 13, 2013 в 18:05

      Спасибо! Статья действительно предназначена для новичков. А так по этому поводу есть еще много, что сказать…

  • Олег Дек 31, 2012 в 1:51

    Отличная статья…
    Хорошо, но мало 🙂

    Желаю успехов в конкурсе!

    • Заур Магомедов
      Заур Магомедов Дек 31, 2012 в 9:36

      Спасибо большое за отзыв. Конечно сказать по этому поводу есть еще много что, но не в рамках одной статьи. Будут ещё статьи… С наступающим…

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

Войти с помощью: 

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

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]