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

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

16 081 в Html5, Css3 , Полезные советы 18

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

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

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

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

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

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

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

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

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

2. Код.

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

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

Код должен быть как можно простым и легко читаемым. Также следует использовать все принципы семантической верстки, т.е. использование тегов по их прямому назначению. Вот, к примеру, заголовки всех уровней H1-H6 – по иерархии заголовок первого уровня H1 должен всегда быть выше всех остальных, потом идет заголовок H2 и т.д. Списки должны быть списками – нумерованный (ol) и не нумерованный (ul). Вот еще пример: контактные данные, а именно адрес целесообразно будет заключить в теги <address></address> (теги 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, переключитесь во вкладку «Сеть» и обновите страничку. В самом конце списка вы увидите количество запросов и общий объем странички.

Читайте также:  Моя сборка для верстки сайтов Gulp + Webpack

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (8 оценок, среднее: 5,00 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории