Главная » 2012 » Сентябрь » 5 » Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать-3
19:31
Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать-3
№11 Работоспособность при выключенном JavaScript
JS может быть выключен согласно корпоративных требований безопастности. А в Opera Mini он работает только методом перезагрузки страницы. Но самое главное — сайт должен сохранять нормальный вид, пока он грузится на медленном 3G и js-скрипты ещё не выполнились!
Весь критически важный функционал сайта должен быть доступен без JS. Дополнительные фишки (например ссылки на увеличение шрифта или распечатку) – при выключенном JS не должны отображаться.
Если нехочется/нет возможности реализовывать функционал без JS, нужно хотя-бы выводить уведомление о необходимости его включить (реализовывается через<noscript>).
Проверяется в FF через плагинWeb Developer→Disable→Disable JavaScript→All JavaScript.
№12 Работоспособность при выключенном Flash
В идеале весь критически важный функционал сайта был доступен без Flash. В реальной жизни нужно:
выводить фоновую графику в блок, где должен отображаться презентационный flash;
выводить хотя-бы просто тестовую инфу в блок где через flash выводится какая-то информация;
выводить кнопочку "Get Adobe Flash Player” и предлагать Express Install если уж без флеша совсем никак.
Flash не работает на iOS-девайсах. Flash плохо индексируется поисковиками.
Проверяется в FF отключением flash-плагина: Tools→Add-ons→Plugins→Shockwave Flash→disable.
№13 Отсутствие багов при увеличенном шрифте
Проверяется в FF:
Шрифты – включением View→Zoom→Zoom Text Only и последовательным нажатие клавиш Ctrl + — (или View→Zoom→Zoom In).
120 dpi – настраивается отдельным апплетом в Control Panel (Vista/Seven) или в свойствах драйвера видеокарты в XP.
Про приведение внешнего вида сайта на 120dpi к 96 читайте в моей статье «120 dpi и шрифты в em».
Для проектов, где это оговорено, проверяется:
Версия для печати (она должна быть реализована через css)
Мобильная версия (таки тоже должна быть через css)
№15 Важные мелочи:
Лого на внутряках должно вести на титулку. На титулке logo = h1, на внутряках H1=заголовок контента, а Logo=div
У каждой страницы должен быть свой уникальный TITLE формата <title>About Us - %CompanyName%</title>
Все ссылки должны как-то реагировать на :hover, :active и :focus — показыванием/убиранием подчёркивания, сменой цвета, чем угодно. У всех ссылок, кроме пунктов меню, должна быть реакция на :visited
«Контент в начале страницы» — содержимое страницы должно идти в начале кода, до всяких сайдбаров и прочего.
Расширение страниц на сайте должно быть ".html" а не ".php", а все созданные странички изначально должны быть порезаны на шаблоны и работать через mod_rewrite.
Должны быть favicon.ico (желательно с включенными внутрь неё 32x32, 48x48 и 64×64 вариациями) иapple-touch-icon
В вёрстке не должны оставаться закомментированные «на всякий случай» куски кода, лишние неиспользуемые файлы, старые версии файлов и т.п. Все бекапы можно вытянуть из системы контроля версий (например SVN), а на живом проекте «мусор» потом мешает разобраться как что работает.
Размеры для блоков, чьи размеры зависят от содержащегося в них текста, нужно задавать в em, а не px.
Если url ссылки неизвестен, то он должен быть равен её анкору, написанному латиницей с заменой пробелов/спецсимволов на тире.
Skype-плагин не должен ломать вёрстку
Ресайз textarea не должен ломать вёрстку
При проверке frontend в целом — 404-страница должна отдаваться с кодом 404 а не 200.
Нужно подстраховываться фиксируя в css размеры картинок, выводящихся программно.
Ссылки на чужие сайты должны быть с target=«blank», желательно выделять их иконкой «внешняя ссылка».
Разумеется картинки должны быть в отдельной папке, css — в отдельной и js — в отдельной.
Где же 14? Пропущено, правильно, тест на внимание, не спи, чья-то рука в твоём кармане, йо! И последнее, но самое важное тем не менее – на "WTF?” манагера — имей своё мнение :)
JS может быть выключен согласно корпоративных требований безопастности. А в Opera Mini он работает только методом перезагрузки страницы. 
Web Developer→Disable→Disable JavaScript→All JavaScript.
В идеале весь критически важный функционал сайта был доступен без Flash. В реальной жизни нужно:
Проверяется в FF:
