Главная » 2012 » Сентябрь » 5 » Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать-3
19:31
Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать-3

№11 Работоспособность при выключенном JavaScript


Disabled JavascriptJS может быть выключен согласно корпоративных требований безопастности. А в Opera Mini он работает только методом перезагрузки страницы. 
Но самое главное — сайт должен сохранять нормальный вид, пока он грузится на медленном 3G и js-скрипты ещё не выполнились!

Весь критически важный функционал сайта должен быть доступен без JS. Дополнительные фишки (например ссылки на увеличение шрифта или распечатку) – при выключенном JS не должны отображаться.

Если нехочется/нет возможности реализовывать функционал без JS, нужно хотя-бы выводить уведомление о необходимости его включить (реализовывается через <noscript>).

Проверяется в FF через плагин addon Web Developer→Disable→Disable JavaScript→All JavaScript.




№12 Работоспособность при выключенном Flash


Disabled FlashВ идеале весь критически важный функционал сайта был доступен без Flash. В реальной жизни нужно:
  • выводить фоновую графику в блок, где должен отображаться презентационный flash;
  • выводить хотя-бы просто тестовую инфу в блок где через flash выводится какая-то информация;
  • выводить кнопочку "Get Adobe Flash Player” и предлагать Express Install если уж без флеша совсем никак.

Flash не работает на iOS-девайсах. Flash плохо индексируется поисковиками.

Проверяется в FF отключением flash-плагина: Tools→Add-ons→Plugins→Shockwave Flash→disable.




№13 Отсутствие багов при увеличенном шрифте


Big fontsПроверяется в FF:
  • Шрифты – включением View→Zoom→Zoom Text Only и последовательным нажатие клавиш Ctrl + — (или View→Zoom→Zoom In).
  • 120 dpi – настраивается отдельным апплетом в Control Panel (Vista/Seven) или в свойствах драйвера видеокарты в XP.

Про приведение внешнего вида сайта на 120dpi к 96 читайте в моей статье «120 dpi и шрифты в em».



Для проектов, где это оговорено, проверяется:


Device Access
  • Версия для печати (она должна быть реализована через css)
  • Мобильная версия (таки тоже должна быть через css)





№15 Важные мелочи:


Small Issues
  • Лого на внутряках должно вести на титулку. На титулке 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 размеры картинок, выводящихся программно.
  • Проверка орфографии Word'ом или Орфографом, желательно — оттипографить контент.
  • Ссылки на чужие сайты должны быть с target=«blank», желательно выделять их иконкой «внешняя ссылка».
  • Разумеется картинки должны быть в отдельной папке, css — в отдельной и js — в отдельной.


Где же 14? Пропущено, правильно, тест на внимание, не спи, чья-то рука в твоём кармане, йо!
И последнее, но самое важное тем не менее – на "WTF?” манагера — имей своё мнение :)

Доклад по мотивам статьи:





Просмотров: 294 | Добавил: Сусанин | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: