Чек-лист: требования к сайту на Awwwards

Недавно adn.agency взял Mobile. У конкурса есть определенные требования к сайтам, даже целый подробный чек-лист — перевели его на русский. Можно применять и как внутренний чек-лист для контроля качества.

text

Development award guidelines 

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

  • Оптимизация веб-производительности (WPO) 0.20
  • Адаптивность (RWD) / Мобильный дизайн (Mobile) 0.20
  • Разметка / Метаданные 0.15
  • Семантика / SEO 0.20
  • Анимация / Переходы 0.15
  • Доступность 0.10

Ниже вы найдете чек-лист для каждой категории со списком рекомендованных инструментов мониторинга и метрик. Помните, что категории и их содержание не обязательно перечислены в порядке релевантности или важности.

1. Оптимизация веб-производительности

Фред Уилсон
Прежде всего, скорость — это больше, чем свойство. Скорость — самое важное свойство. Если ваше приложение работает медленно, люди не будут им пользоваться.
Стив Соудерс
Оптимизация веб-производительности похожа на SEO в том, что привлекает больше трафика на ваш сайт. Но это еще не все: WPO также улучшает взаимодействие с пользователем, увеличивает доход и снижает расходы на эксплуатацию.

Цели

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

✓ Оптимизация контента / доставки данных и сокращение времени ответа сервера.

✓ Правильное управление ресурсами, блокирующими страницу (минификация, отложенные скрипты, инлайнинг, общее количество HTTP запросов).

✓ Баланс между метриками, основанными на цифрах, и пользовательскими метриками с воспринимаемой производительностью.

Чек-лист 

✓  Включите сжатие / Gzip.

✓ Оптимизируйте критические пути рендеринга, порядок запросов данных, парсинга и загрузки ресурсов.

✓ Избегайте render-blocking JS, используйте async и defer скрипты, отложенную загрузку скриптов. 

✓ Отдавайте приоритет видимой / верхней части контента.

✓ Минифицируйте CSS и JS.

✓ Оптимизированный, сжатый медиаконтент с отложенной загрузкой (форматы изображений, спрайты, видео). 

✓ Использование CDN.

✓ Кэширование (кэш браузера, CDN, веб-сервер и сервер приложения).

✓ Expires или Cache-Control Header.

✓ Сократите число DNS запросов.

✓ Меньше редиректов.

✓ Меньше сторонних плагинов.

✓ Никаких iframes.

✓ Избегайте фильтров.

✓ Адаптивные изображения. Масштабирование, форматы, сжатие, ленивая / отложенная загрузка. 

✓ Инлайновые скрипты, стили и изображения (SVG, Data URI).

✓ Прогрессивное улучшение / постепенная деградация.

✓ Подключение стилей вверху (в head), скриптов внизу (перед закрывающим тегом body) страницы.

✓ Условная загрузка, ленивая загрузка.

✓ Никаких логов или ошибок в консоле.

✓ Производительность визуализации. 

✓ HTTPS и HTTP/2

Релевантные метрики

✓ Время загрузки страницы и видимой части контента.

✓ Общее количество HTTP-запросов.

✓ Общее количество и вес ассетов.

✓ Количество и вес медиаконтента (изображения, видео, iFrames, Embeds, Objects).

✓ Общее количество доменов.

✓ Общее количество сторонних зависимостей (аналитика, ретаргетинг, реклама, социальные виджеты, фреймворки, библиотеки, плагины, веб-сервисы).

2. Адаптивный веб-дизайн / Мобильный дизайн

Цели

✓ Одинаковый пользовательский опыт для разных модулей и виджетов приложения, независимо от размеров экрана или возможностей устройства.

✓ Понятные и однородные принципы веб-дизайна, их реализация и привлекательность на всех устройствах. 

✓ Доступность контента и функций независимо от способа использования устройства (например, клики, свайпы, щипки).   

Чек-лист 

✓ Адаптивная / гибкая сетка.

✓ Отзывчивый медиаконтент (изображения, видео, Embeds, iFrames, Objects).

✓ Адаптивные изображения и оптимизация медиаконтента. 

✓ Единообразие на различных устройствах посредством медиа запросов.

✓ Производительность (скорость, время загрузки и т.д.).

✓ Удобочитаемая и адаптивная типографика.

✓ Условная загрузка / ленивая загрузка.

✓ Прогрессивное улучшение / постепенная деградация.

✓ Мета-тег viewport и другая информация, относящийся к .

✓ Feature-detection / парсинг UA.

✓ Retina и плотность пикселей.

✓ Правильный пользовательский ввод.

✓ Приемлемый размер “тапаемых” элементов.

✓ Адаптивная навигация.   

3. Разметка / метаданные

Цели

✓ Цельная секционная модель HTML, соответствующее использование ее элементов и их структурных и семантических значений. 

✓ Использование минимума самой важной разметки, которая требуется для стилизации и взаимодействия. 

✓ Правильная информационная структура контента, которая позволяет пользователям, браузерам и поисковым ботам точнее понять и взаимодействовать с ним. 

Чек-лист 

✓ Валидная HTML-разметка. 

✓ Doctype, язык и кодировка.

✓ Элементы документа и глобальные атрибуты (head, title, lang, base, link, meta, style, translate).

✓ Стандартные метаданные (description, keywords/concepts, expires, generation, language, viewport, author, content-type, mobile-web-app, и т.д.).

✓ Структурированная разметка метаданных и микроданных. 

✓ Интеграция с OpenGraph, Schema.org, Twitter Cards, Pinterest и социальными сетями.

✓ Изображения с подписями, alt, шириной, высотой и src.

✓ Структура / организация / связанность документа. 

✓ Удобочитаемость, структурируемость (разбиение текста на абзацы), использование пробелов и комментариев. 

✓ Описательные имена переменных и семантические соглашения по наименованию. 

✓ Никакой div-itis, class-itis, span-mania, tag-soups

✓ Кэшируемый фавикон различных размеров. 

Подсказка

✓ Изолируйте контент сайта и попытайтесь мысленно представить его разметку и семантику. Когда вы рассматриваете содержание в первую очередь, то используете структурное и семантическое мышление. 

4. Семантика / SEO 

Сара Льюис
Помимо SEO, еще одним плюсом семантической разметки является то, что она создает основу для инклюзивного дизайна.

Цели

✓ Правильная информационная структура контента, которая позволяет пользователям, браузерам и поисковым ботам точнее понять и взаимодействовать с ним. 

✓ Цельная секционная модель HTML, соответствующее использование ее элементов и их структурных и семантических значений.

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

Чек-лист 

✓ Мета-теги: уникальные, точные, семантические, короткие, но информативные определения мета-тегов на странице (title, description, keywords, expires, language, author, publisher и т. д.).

✓ Улучшенная структура URL (дефисы, строчные буквы, удобные для чтения, короткие, но информативные, ключевые слова, никаких динамических параметров и т. д.).

✓ Производительность и время загрузки.

✓ Изображения: атрибут alt, содержащий информацию, связанную с изображением (короткое, но информативное имя файла и альтернативный текст). 

✓ Подходящий текст для ссылок.

✓ Каноникализация.

✓ Структурированная разметка метаданных и микроразметка. 

✓ Социальные meta-теги / Schema.org (itemscope, itemprop -name, description, image-).

✓ Социальные meta-теги/ протокол Open Graph (og:title, og:type, og:image, og:url, og:description, fb:admins; twitter:card, ). 

✓ RDFa, Microdata, и Microformat Data Sets.

✓ Объявление языка в элементе html.

✓ Long Word Count.

✓ Семантическая разметка HTML5 (nav, page, section, footer и т.д.).

✓ Семантическая иерархия заголовков (h1, h2 ... p и т. д.), чтобы подчеркнуть релевантность.

✓ Страница HTML-карты на сайте.

✓ XML-карты для поисковых роботов.

✓ Robots.txt /  ограничение поисковых роботов: cтандарты исключений (nofollow, noindex, и т.д.) и соответствующие User Agents. 

✓ Rel="next" и rel="prev" для пагинации.

✓ Rel=”alternate” href=”x”.

✓ Качественный пользовательский опыт (скорость, солидность (reputable), орфографические ошибки, битые ссылки).

✓ Качественный контент (адаптированный под мобильные устройства, уникальный, оригинальный, релевантный, текстовое содержимое). 

✓ Используйте текст для навигационных ссылок и контента.

✓ Избегайте дублирование контента (каноникализация или 301 редирект).

✓ Избегайте редиректов или используйте их должным образом (301, 307 и т.д.).

✓ Сведите к минимуму 404 (используйте 301 редирект).

✓ Соответствующие гиперссылки (HTML ссылки преимущественнее JS, “nofollow” для ненадежного или платного контента и т. д.).

5. Анимации / Переходы

Амин Аль Хазвани
Анимация наиболее полезна, когда она отражает и усиливает семантические отношения между элементами: например, ”этот комментарий относится к этой статье” или ”эти пункты являются частью меню”. Вы не можете рассматривать отдельные экраны как отдельные объекты: для пользователя весь опыт — это одно непрерывное пространство.

Цели

✓ Согласованная анимационная стратегия и плавное исполнение на всех страницах сайта при взаимодействии с пользователем, таких как клик / тап / наведение на кнопки, слайдеры изображений, переходы между страницами и т. д.

✓ Анимации усиливают пользовательский опыт, рассказывая истории, они предоставляют визуальную обратную связь в ответ на действие (например, события по клику, наведению, успешная или нет отправка формы) или будущее действие (например, прелоадер).  

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

Чек-лист 

✓ Плавная, быстрая и стабильная частота кадров.

✓ Плавность, тайминг, ритм, привлекательность.

✓ Баланс и последовательность: избегайте слишком медленных, быстрых, частых либо разных анимаций. 

✓ 2D / 3D-анимации и  сетки.

✓ Техники динамической/рандомной генерации с помощью математических вычислений и физической симуляции.

✓ Библиотеки / фреймворки для анимаций.

✓ Сборщик мусора, оптимизация GLSL, тестирование GPU, управление ассетами, утечки памяти.

✓ Параллакс при скроллинге.

✓ CSS / JS анимации.

Linear, interactive и transitional

✓ Линейные анимации: keyframe-анимации, которые запускаются без участия пользователя или простым действием — onscroll, onclick и т.д.

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

✓ Анимации переходов: анимации между разделами или основными страницами сайта. Обычно включает в себя широкое использование функций, связанных с сайтом: AJAX, переходы по истории, дружелюбные индикаторы загрузки и т.д. 

Типы анимации

✓ Procedural Animation: классическое движение в течение времени.   

✓ Representational Animation: объекты, изменяющие форму во время анимации, как анимированные персонажи.  

✓ Stochastic Animation: используется в управлении группами объектов, таких, как система частиц — например, анимация фейерверков, вторичные действия.

✓ Behavioral Animation / AI: объекты или «актеры» получают правила и переменные, согласно которым будут реагировать в контексте того или иного события.

Низкоуровневые и высокоуровневые методы

✓ Низкоуровневые методы: техники, которые помогают точно задать движение, например, shape interpolation algorithms. 

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

6. Доступность

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

Цели

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

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

✓ Пользовательские элементы взаимодействия / виджеты должны быть доступными и отвечать критерию WCAG 2.0 [WCAG20]: «Все функциональные возможности контента должны быть доступными с клавиатуры». 

Чек-лист 

✓ Поддержка методов пользовательского ввода (клавиатура / мышь / тач).

✓ Подписанные интерактивные элементы.

✓ Настройка viewport. 

✓ Приемлемый размер “тапательных” элементов.

✓ Управление фокусом и активным состоянием.

✓ Порядок фокуса (tabindex на элементах с фокусом).

✓ Обертки для кнопок и ссылок, увеличивающие область клика (не оборачивать в ссылки другие ссылки и интерактивные элементы).

✓ Удобочитаемые размеры шрифта.

✓ Цветовой контраст между текстом и фоном.

✓ Релевантная информация не только по наведению.

✓ Альтернативный текст и подписи для нетекстовых элементов (например, иконок). 

✓ Видео и аудио: поддерживают подписи (заголовки), полную текстовую транскрипцию и управление с клавиатуры.

✓ aria-hidden="true" для не интерактивных или декоративных элементов. 

✓ История браузера (вперед / назад / обновление). 

✓ WAI-WCAG принципы дизайна: Perceivable, Operable, Understandable, Robust (http://bitsofco.de/2015/the-accessibility-cheatsheet/).

✓ WAI-ARIA роли разметки (banner, navigation, search, main, и т.д.). 

✓ WAI-ARIA роли-виджеты (progressbar, slider, button, tree, textfield, и т. д.). 

✓ WAI-ARIA абстрактные роли (input, section, widget, select, и т.д.). 

✓ WAI-ARIA роли интерактивных областей (alert, log, timer, и т.д.). 

✓ WAI-ARIA роли структуры документа (article, figure, list, img, text, и т.д.).

✓ WAI-ARIA Labels для пользовательских (кастомных) элементов (https://www.w3.org/TR/wai-aria-1.1/#dfn-accessible-name

✓ WAI-ARIA состояния и свойства (https://w3c.github.io/aria/aria/aria.html#states_and_properties).

✓ Обозначение языка. 

✓ Возможность поставить на паузу анимации, которые запускаются автоматически и длятся более 5 секунд. С большой вероятностью в эту категорию попадают автообновляемый контент и анимированные слайдеры.

✓ Доступный контент без CSS.

✓ Доступный контент без JS.

Чек-лист разработки доступных элементов

✓ Доступность с клавиатуры — Можете ли вы взаимодействовать с элементов управления с клавиатуры? Keyboard Navigation 

✓ Доступность с тач — Можете ли вы взаимодействовать с элементов управления с помощью жестов? При включенных вспомогательных технологиях?

✓ Ожидаемое поведение — Можете ли вы взаимодействовать с элементом управления, используя стандартные для этого типа клавиши или жесты? ARIA Widget Design Patterns

✓ Фокусируемый — Можете ли вы перейти к элементу управления с помощью клавиатуры? Providing Keyboard Focus  

✓ Наличие очевидного фокуса — Легко ли заметить, что у элемента управления есть фокус? WCAG2 Visible Focus

✓ Label — Элемент управления имеет текстовую подпись, используемую как accessible name в accessibility APIs

✓ Role — Элемент управления имеет соответствующий атрибут role из представленных в accessibility APIs  

✓ Состояния и свойства — Все состояния и свойства элемента управления отражены в accessibility API

✓ Цветовой контраст — Подписи / описания / иконки элементов управления доступны для людей со слабым зрением (Используйте средство проверки цветового контраста.)

✓ Режим высокой контрастности — Элементы управления заметны / доступны, когда включен режим высокой контрастности (например,  Режим высокой контрастности Windows

Подсказки

✓ Высокая доступность в значительной мере пересекается с белыми методами SEO.

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

Приложение. Инструменты мониторинга / метрики

Основные инструменты

✓ Page Speed https://developers.google.com/speed/pagespeed/insights  

✓ Lighthouse https://developers.google.com/web/tools/lighthouse/ 

✓ YSlow http://developer.yahoo.com/yslow/  

✓ Website Test http://websitetest.com/ 

✓ Pingdom http://tools.pingdom.com/fpt/#!/mjmicGfYX/  

✓ Web Page Test http://www.webpagetest.org/compare  

✓ GT Metrix http://gtmetrix.com/  

✓ W3C Validator https://validator.w3.org/ 

✓ Web Page Test Mobile http://www.webpagetest.org/mobile  

✓ Frontend Checklist https://frontendchecklist.io/ 

Вспомогательные инструменты и ресурсы

✓ LoadsIn http://loads.in/  

✓ SiteSpeed.io http://www.sitespeed.io/  

✓ SpeedCurve http://speedcurve.com/  

✓ Browser Shots http://browsershots.org/ 

✓ Responsive Px http://responsivepx.com/ 

✓ Varvy SEO https://varvy.com/ 

✓ Varvy Tools https://varvy.com/tools/ 

✓ Varvy gWebGuidelines https://varvy.com/ 

✓ Varvy PageSpeed https://varvy.com/pagespeed/ 

✓ W3C CSS Validator http://jigsaw.w3.org/css-validator/ 

✓ 3PO http://www.phpied.com/3po/  

✓ Souders Episodes http://stevesouders.com/episodes2/  

✓ Woorank https://www.woorank.com/ 

✓ HTML5 Outliner https://gsnedders.html5.org/outliner/ 

✓ SEO Browser http://www.seo-browser.com/ 

✓ Wave Accessibility Tool http://wave.webaim.org/ 

✓ Prettydif https://github.com/prettydiff/a11y-tools 

✓ Social — Twitter Validation Tool https://cards-dev.twitter.com/validator 

✓ Social — Facebook OG Debugger https://developers.facebook.com/tools/debug/ 

✓ Social — Google Structured Data Testing Tool http://www.google.com/webmasters/tools/richsnippets 

✓ Social — Pinterest Rich Pins Validator http://developers.pinterest.com/rich_pins/validator/ 

✓ Security Headers https://securityheaders.io/

✓ Structured Data Markup Helper https://www.google.com/webmasters/markup-helper/u/0/  

✓ Список инструментов для UX-тестирования http://www.real-user-monitoring.com/the-complete-list-of-end-user-experience-monitoring-tools/  

✓ 10 инструментов для тестирования сайта на мобильных устройствах http://sixrevisions.com/tools/10-excellent-tools-for-testing-your-site-on-mobile-devices/  

✓ Яндекс.Вебмастер https://webmaster.yandex.com/

Расширения для Chrome

✓ Wave Accessibility Tool https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh 

✓ Google Accessibility Dev Tools https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb 

✓ Axe https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd 

✓ Color Contrast Analyzer https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll/related  

Дата пересмотра

✓ v0.7 — 14/12/2016

Авторы

✓ Luciano Borromei — @alectortoatoa

✓ Jessica Travieso — @jessicatv 

✓ Alexandre R. Gomes — @alexrgomes

✓ Greg Matyszewski — @gregmatys

Дизайн интерфейсов
Скорость загрузки
О чем вам интересно почитать?
Напишите нам, чтобы предложить тему для следующей статьи.
Отправить