WEBMASCON - журнал для веб-мастеров обновление: 2007.09.07

One True Fit - верстаем в рамках стандартов

One True Fit - standards design
автор: 29.08.2003 Ryan Carver
перевод: Александр Качанов

Introduction

На данной странице я попытаюсь рассказать о том, как я создал сайт Lee Jeans - One True Fit.

Я представлю обзор главных технических моментов, которые я разделю на категории, хотя в некоторых случаях они перекрывают друг друга.

Совет: чтобы посмотреть, как сайт выглядит без использования CSS, добавьте ?css=false к URL-у любой страницы сайта. Чтобы снова включить CSS, добавьте ?css=true, либо щелкните на ссылке, что размещена внизу каждой страницы.

Дизайн

Дизайн сайта выполнен на основе рекламной серии the One True Fit Commercials. Мне очень нравится эта реклама, но здесь я буду рассказывать только о технической стороне задачи.

В разумных пределах на сайте использовался Flash для создания простой анимации с целью оживления сайта и приближения его внешнего вида к стилю того рекламного ролика. Я воспользовался отличным Flash-сниффером Travis-а (a) для того, чтобы избежать использования невалидного кода в тегах OBJECT и EMBED, и (b) для того, чтобы предоставить контент для старых версий Flash и для тех пользователей, у которых выключен JavaScript. Можно спорить о том, стоит ли использовать Javascript для генерации невалидных тегов, но это пока самое наилучшее решение на сегодняшний день.

PHP/MySQL

Сайт работает на собственной системе шаблонов. Эта система - объектно-ориентированная и модульная, благодаря чему для генерации разных страниц сайта широко используются одни и те же куски кода. Дизайн шаблонной системы немного повторяет известные шаблонные системы Tiles и Tapestry, которые выполнены на Java. Такая комбинация единого кода и различных CSS позволила создать очень мощную систему. Например, рекламные блоки на главной странице и внутрненние страницы сайта используют один и тот же код разметки, но с помощью CSS их внешний вид сделан различным.

На сайте лишь некоторые элементы связаны с базой данных: это блок "отзывы покупателей", что идёт в правой колонке, и система голосования. Эти два элемента были созданы на основе шаблонного решения Data Access Object (DAO). Благодаря этому логика базы данных удобно отделена от кода сайта.

Благодаря такому многоуровневому подходу дизайн сайта получился очень гибким: уровни дизайна, структуры, доступа и хранения данных связаны только со своими ближайшими соседями. Это означает, что любое изменение на одном уровне потребует изменений только на соседних уровнях; например, изменение дизайна (css) может потребовать лишь изменений на уровне разметки (html).

Разметка

Весь сайт проходит успешно валидацию по спецификации "XHTML 1.0 Strict". Для того, чтобы придать по необходимости индивидуальность дизайну каждой страницы, я использовал комбинацию атрибутов id и class в элементе <body>. Так я получил возможность задать основные стили для всех страниц, а затем переопределить их и добавить дополнительные стили для каждой страницы в отдельности. Для блоков сайта я использовал стандартные элементы <div>, присвоив их атрибутам id значения "header", "content", "navigation", "footer", чтобы было ясно видно логическое значение каждого блока страницы. Атрибут class использовался по-минимуму. Вместо него для разметки текста на странице я полагался на структурные и семантические элементы-теги.

CSS

CSS сайта проходит полную валидацию за исключением одного хака Star-7, который использован на главной странице.

Я думаю мне удалось справиться с задачей без использования большого числа CSS-хаков. Большая их часть связана с проблемами в различных версиях броузера IE, например:

/* "* html" targets only versions of ie */
* html body#internal #content {

	\width: 429px;	/* set for all ie */

	w\idth: 400px;	/* ie5win will ignore this  */

	/* backslash hack hides from ie5mac \*/
	width: 200px;
	/* end hack */
}

Другие приемы CSS:

приём "lir" - lir image replacement (подмена текста картинкой) - широко используется на сайте, чтобы заменить простой текст графикой.
приём "fir" - Fahrner image replacement (подмена текста картинкой) - для пары случаев, где ie5mac игнорировал первый прием "lir".
приём Fast rollovers (быстрый "перекат" картинок) - сокращает количество загружаемых картинок (следовательно и объем траффика), а также убирает эффект мигания, который появляется при использовании css для динамической смены картинок.

Все стили были разделены на несколько файлов, чтобы с ними было легче работать:

global: самые основные стили для всех страниц, включая стили для форм (<form>).
page: цвета и общие элементы для всех страниц; например, для навигациия
layout_home: позиционные стили для главной страницы
layout_internal: позиционные стили для внутренних страниц
content: специфические стили для контента каждой страницы
popup: стили для каждого всплывающего окна

Все стили кроме global "обёрнуты" в файл, который импортирует с помощью @import уже реальный файл со стилями. Таким образом стили прячутся от Netscape 4 и IE 4 на MacOS 9. Пользователи таких броузеров увидят лишь слегка оформленные полностью работающие страницы, но без красот дизайна. А вот фрагмент @import, который отфильтровывает IE 4.5:

@import 'page.css';     /* for everyone but mac ie - note single quotes */
@im\port "page.css";    /* for mac ie5 but not mac ie4.5 */

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

Так как данный сайт не предполагалось делать полностью адаптированным для инвалидов (accessibility), в большинстве случаев я использовал фиксированный размер шрифта в пикселях. Однако для аккуратного позиционирования с учетом изменения размера шрифта в броузере я использовал комбинацию пикселей и em.

Прочее

К сожалению сайт использует PHP на IIS, поэтому мне не удалось поиграться с mod_rewrite.

Достижения

Счастлив отметить, что сайт выглядит прекрасно в:

IE 5 на OSX
Camino на OSX
Safari на OSX
OmniWeb 4.5 на OSX
IE 6 на Windows
IE 5 на Windows
Opera 7 на Windows
Netscape 6.2 на Windows
Прочие броузеры семейства Mozilla - Netscape 7, Firebird, и т.д..
С основным стилем - Netscape 4
С основным стилем - IE 4.5 на MacOS9

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

Больше всего мне в сайте нравятся: результаты опроса ("8,217 Women said they love their One True Fit Jeans" - посмотрите на главную страницу с css, и без css, а также на сам файл, на ту часть текста, что идет под комментарием "Stats"), а также эти маленькие скругленные уголки, что вы видите на внутренних страницах сайта. Предоставляю вам возможность самим узнать, как я это сделал :)

Заключение

Я мог бы перечислить тысячу причин, по которым сайт должен быть сделан в XHTML/CSS, но главная из них - это видимость сайта на поисковых серверах. Именно из-за этого заказчик согласился на сайт, требующий последних версий броузера. Я не эксперт по поисковым системам, но считаю, что результаты у нас будут неплохие, так как у нашего сайта: минимальное количество кода разметки, присутствуют семантические элементы (такие как тег <h*>) и содержимое страницы расположено близко к началу файла.

Надеюсь, данный сайт послужит примером того, что с помощью правильного кода разметки и стилей можно создать не только простой блог-сайт. Хоть я и являюсь поклонником блогов, а также других информационных сайтов, думаю, что One True Fit открыл для вас другую сторону Луны.

Присылайте свои комментарии и вопросы на мой email.

Райан Карвер

Ссылки по теме