Дизайн

05 сентября 2019

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

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

3 184 просмотра

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, еще одним плюсом семантической разметки является то, что она создает основу для инклюзивного дизайна.

Сара Льюис

Цели

✓ Лучшие практики и методы, помогающие 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.

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