Сайт, готовый к редизайну и поддержке четверг
24 января

Мало создать красивый сайт. Очень важно чтобы поддержка и редизайн происходили с минимумом затрат.

Советы как снизить издержки на редизайн и внесение изменений

• Во-первых необходима CMS, чтобы отделить дизайн сайта от его контента. Это очевидно. HTML-сетка должна быть отделена от кода контента.
• Никаких таблиц для нетабличных данных. Колонки — это ещё не таблицы. Конечно, существуют сетки, которые невозможно сделать без таблиц (из-за отсталости ie). Но таковых мало, просите дизайнеров не делать такие дизайны, укажите как можно упростить дизайн чтобы обойтись без таблиц. За последний год мне встречался только один дизайн, который нельзя было бы сделать без таблиц.
• Задавайте классы по смыслу элемента, а не по его внешнему виду. Например, .important, а не .red. При редизайне цвет может стать совсем не красным, а синим, например.
• Не используйте в контенте несемантические теги типа <font>, <center> и т.д. «deprecated». То есть теги определяющие внешний вид содержимого, а не смысл.
• Не используйте инлайновый css (грыжа html). Потому как, от того, что описано пунктом выше это не отличается практически ничем. Затем при редизайне сайта вам придется выискивать все вхождения подобных конструкций. Замучаетесь. Поэтому только классы css.
• Весь контент должен иметь семантический html-код. При возможности не используйте классов для стандартных элементов контента (маркерованные списки, заголовки, и т.п.), это удобно — не нужно править код wysiwyg-редактора.
• Делайте валидный html-код сетки. Валидатор в последствии позволит вам быстро находить места где не закрыт какой-либо тег и оперативно это исправлять. Например, заказчик вам жалуется, что на такой-то странице в таком-то браузере всё падает, прогоняете страницу через валидатор, ага ошибка — не закрыты кавычки у ссылки, или не закрыт див. Это просто удобно и сэкономит вам массу времени и нервов.

Это просто рекомендую

• Пользуйтесь режимом соответствия стандартам. Браузеров, которые его не поддерживают на сегодняшний день уже нет. Это позволит уменьшить количество затрат и головной боли на создание кроссбраузерного кода. А также добавит свободы действий с кодом.
• Проверяйте как выглядит сайт, когда в браузере отключены картинки и отсутствуют стили. Доступны ли основные функции интеракивности при отключенных скриптах в браузере.
• Выносите стили для ie в отдельный файл, подключаемый через условные комментарии. Потому как, некоторые браузеры могут входить в ступор при виде хаков для ie. Вплоть до полного игнорирования стилей, следующих за хаком.
• Стремитесь к простоте и изяществу кода.

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

Виды редизайна (возможны промежуточные вариации):

Смена цветовой гаммы

Встречается довольно часто, обычно при смене корпоративных цветов. Наиболее простой и менее затратный вариант редизайна. Обычно дизайнеры берут готовый psd-макет, меняют цветовую гамму. html-код, содержимое сайта и функционал остаются без изменений. Верстальщик меняет картинки и правит немного css-файл на предмет новых цветов. При использовании специализированных приложений, таких как firebug и photoshop — это тривиальная задача. Дизайн: 20-50%, Верстка: 30-50%, Интеграция: 0%, Программирование: 0%, Наполнение: 0%.

Смена основного шаблона и цветовой гаммы

Наиболее частый вариант редизайна. Дизайн: 100%, Верстка: 70%-100%, Интеграция: 30-70%, Программирование: 0%, Наполнение: 0%. При правильном подходе наполнение 0, поскольку вам не нужно трогать контент чтобы изменить его внешний вид на всем сайте (достаточно правки css). А если сайт огромный, например, как сайт крупного сотового оператора, в десятки тысяч страниц, то это очень существенно.

Смена дизайна и переработка содержимого

Тоже что и в предыдущем пункте, только дополняются затраты на наполнение: от 0 до 100%.

Кардинальная переработка дизайна, содержимого и функционала

Тоже довольно частый вариант редизайна. Здесь всё зависит в какой фирме вы делали сайт, а в какой заказываете редизайн. Если в той же, то cms (и возможно часть модулей) менять не придется — на этом можно сэкономить. Этот вариант по стоимости практически эквивалентен заказу нового сайта. Дизайн: 100%, Верстка: 100%, Интеграция: 50-100%, Программирование: 50-100%, Наполнение: 50-100%.

Дополнение нового функционала

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