Главная » 2012 » Сентябрь » 5 » Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать-2
19:31 Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать-2 | |
№5 Оптимизация скорости загрузки
Зачем это нужно: скорость загрузки оказывает ключевое влияние на доступность сайта (больше психологическую, чем фактическую), активность пользователей на сайте (медленными сайтами люди предпочитают не пользоваться) и его конверсию (медленным сайтам не доверяют).© sunnybear. В целом скорость загрузки проверяется так:
Ну и конечно нужно не забывать очевидные вещи: правильно выбирать тип картинки для сохранения JPG или PNG, выставлять тип Progressive для JPG, не использовать тяжелые (больше 200-300kb картинки). Необходимо учитывать что спрайтов, base64 encode и css3-стилей может и не быть по причине ненужности (макет очень простой). №6 Наличие Win/Mac/Linux-аналогов шрифтовЕсли альтернативные шрифты не прописаны, то у пользователей у которых отсутствует используемый в вёрстке шрифт, вместо него отобразится стандартный. Это может быть не только некрасиво, но и даже поломать отображение сайта. Часто забывают прописывать альтернативы для Myriad Pro, Arial Narrow. Проверяется поиском по тексту css названий "Helvetica”,"Liberation”, "DejaVu”,”Meera”,”Monaco”, " Century Schoolbook L”,” Nimbus Mono L”, "URW”. Хотя бы два из них должны быть. Наборы аналогов популярных шрифтов:
№7 Доступность при выключенных(загружающихся) картинкахНадписи (особенно логотип и главное меню сайта) должны оставаться читабельными, у всех информационных картинок должны быть подписи аккуратным небольшим серым шрифтом (да, для img можно задавать font – это внешний вид alt-текста, что выводится вместо картинки). Картинки часто отключают при использовании дорогого инета, тарифицируемого по траффику (GPRS, роуминг). Проверяется в FF через плагин Web Developer→Images→Replace Images With Alt Attributes. №8 HTML5 формы, линковка, валидация
Уведомления об ошибках должны быть не js-alert’ом, а текстом в дизайне сайта! Всё оформление в формах должно быть повешено на классы, id — только для линковки с label (a то потом программеры прикручивают, пишут свои id и ломается внешний вид). №9 Семантичность. Отсутствие глупостей в html и css, единообразие, аккуратностьПожалуй единственный пункт, где нельзя дать чётких критериев. Про то, что такое плохо можно почитать в моей статье «Вредная вёрстка». Как ориентир – наиболее частые ошибки:
Примеры хорошего:
№10 Правильная структура заголовков (H1,H2,… и т.д. и TITLE)Это забота о семантичности кода, заголовки структурируют сайт, делают его корректным документом. Корректный Document Outline важен для SEO. Проверяется в FF через плагин Web Developer→Information→View Document Outline. Красных строк быть не должно! http://habrahabr.ru/post/114256/ | |
|
Всего комментариев: 0 | |