Регистрация
Раздел: Для веб-программиста

Требования к верстке сайта. Макеты, таблицы, страницы.

User 18-03-2016, 22:25 6 432 Для веб-программиста
1

Требования к верстке сайта. Макеты, таблицы, страницы.

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

Какой же должна быть современная профессиональная верстка?

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

2. Верстка должна точно соответствовать дизайн-макету.
Дизайнер разрабатывает для вашего сайта дизайн-макеты (графические макеты страниц сайта). Готовая верстка макетов должна абсолютно точно копировать оригинальные графические макеты. Очень часто встречаются случаи, когда верстка производится неквалифицированным специалистом с отступлениями от уже готового дизайна (например, берется похожий, а не исходный шрифт, изменяется начертание шрифтов, используется неточная передача цветового оформления, изменяется оформление блоков страницы, блоки позиционированы относительно друг друга неточно т.п.).

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

3. Верстка должна быть кроссбраузерной.
Под кроссбраузерной версткой подразумевается одинаковое отображение сайта во всех популярных браузерах (Internet Explorer, Opera, Mozilla Firefox, Google Chrome). Если ваш сайт рассчитан на зарубежную аудиторию, то к этому списку добавится браузер Safari. В России Safari распространен незначительно из-за достаточно малой популярности продукции Apple.На остальных устройствах его практически не используют (мне он не нравится из-за очень низкой скорости работы).

Распространенное мнение о необходимости верстки макетов под браузер Internet Explorer 6.0 уже можно считать несостоятельным. На сегодняшний день от поддержки этого браузера можно отказаться – доля его пользователей равняется 4-6% (по данным статистики посещаемости сайтов моих клиентов на момент написания этих строк). Все остальные браузеры должны полноценно поддерживаться в последней и предпоследней версии (лучше, если в двух последних версиях).

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

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

4. Верстка должна быть блочной с внешними таблицами стилей. Едва ли не половина разработчиков продолжает верстать макеты при помощи таблиц, а не при помощи CSS. Использование CSS («блочная» верстка) позволяет добиться более быстрой работы сайта и облегчает его поддержку. Табличная верстка на сегодняшний день считается неприемлемой.

Табличная верстка выглядит примерно так:

<body>
<table>
<tr>
<td>это ячейка таблицы</ td >
<td>это вторая ячейка первой строки таблицы </ td >
</ tr >
<tr>
<td>это ячейка второй строки таблицы</ td >
<td>еще одна ячейка второй строки таблицы </ td >
</ tr >
</ table>
</body>


Каркас страницы (код внутри тэга <body>) состоит из тэгов таблицы, а должен
быть создан с использованием блочных элементов <div>….</ div>.

Использование блочных элементов позволяет добиться максимальной гибкости макета страницы и полного контроля всех элементов страницы. Кстати, большинство бесплатных шаблонов оформления для популярных CMS создано с применение табличной, а не блочной верстки.
Так же современными стандартами предусмотрено вынесение стилевого оформления страниц во внешние файлы. В физическом плане таблицы стилей (CSS) представляют собой файлы вида file.css, которые должны подключаться к веб-страницам в разделе <head>:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Написание стилей непосредственно в самой странице выгладит примерно так:
<head>
.....
<style type="text/css">
body {
color: red;
}
</style>
</head>


Такой подход недопустим! Подобные вольности разработчиков в случае внесения изменений на сайт окажут вам «медвежью» услугу. Кроме того, это наглядный пример «плохого стиля программирования», который отрицательно сказывается на скорости загрузки страниц.

5. Верстка должна быть семантической. Концепция семантической верстки подразумевает использование элементов (тегов) в соответствии с их смыслом (семантическим) значением. Спецификация HTML5 разрабатывается с учетом максимального соответствия концепции семантической верстки.

Примеры:
- Табличная верстка не соответствует данной концепции. Таблицы с таким подходом должны использоваться только для представления табличных данных, а не для формирования каркаса страницы
- Списки и навигационное меню должны формироваться тэгами списков;
(<ul>…</ ul>, <ol>…</ ol>, <li>…</li>)
- Заголовки должны формироваться тэгами заголовков 1-6 уровней <h1>-<h6> и никак иначе;
- Использование семантической верстки сделает ваши сайты максимально доступным для поисковых систем, альтернативных браузеров (например, голосовых) и мобильных устройств.

Теперь вы понимаете, что верстка сайтов не такое уж и просто занятие, как говорят некоторые. Если кто-то обещает вам сделать верстку макета за 300 рублей и за 1-2 часа, то будьте уверены: макет, за который дизайнер может запросить с вас 10-12 тысяч рублей будет испорчен нерадивым верстальщиком буквально за 1 час!

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

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

Для сравнения могу сказать, что верстка хорошего макета главной страницы сайта с использованием собственных заготовок и соблюдением всех описанных выше стандартов у меня занимает около одного рабочего дня (порядка 6-8 рабочих часов). Стоить такая верстка будет около 1500-2000 рублей. То есть разница по временным и материальным затратам составляет 4-5 раз.

И последнее, что хочу отметить по верстке. Заказывайте дизайн-макеты только у профессиональных дизайнеров. Макеты, выполненные непрофессиональным дизайнером, не только сильно уступают по качеству дизайна и юзабилити, но и значительно усложняют процесс верстки. Чаще всего макеты выполняются в «фотошопе» и отдаются заказчику в виде psd-файлов с разделением на слои.

Мне доводилось верстать макеты:
- выполненные на одном слое (по сути, получилась верстка из обычной картинки, а не из слоев);
- дешевые макеты, в которых слои выполнены настолько некачественно, что заказчикам приходилось отдавать макеты на переработку, потому что сверстать из них задуманное заказчиком не представлялось возможным.

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

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

Написать сообщение

Кликните на изображение чтобы обновить код, если он неразборчив

Похожие новости

Шаблон готового сайта SEREBRO с видео и песнями

Тема сайта: трио "Серебро", была выбрана случайно, лишь для заполнения сайта контентом. Можете

02.12.17 Шаблоны сайтов
Добавление стилей CSS

Следует обратить внимание на ключевой компонент кода HTML страницы. В верхней части HTML-документа

18.09.17 Для веб-программиста
Каскадные таблицы стилей CSS - дизайн сайта и контента.

В то время как HTML используется, чтобы описать содержимое вебстраницы, именно каскадные таблицы

01.02.16 Для веб-программиста

 
Powered by UseSite.ru. Все права защищены. Копирование материала строго запрещено.
Закрыть