В ноябре 2015 года Independent перезапустил сайт. «Мы и Жо» указывает на характерные особенности цифровой версии газеты.
Главная страница и постоянные элементы
- Под полоской навигации — реклама. Затем фичер;
- Фичер главной страницы, занимающий первые 2 скролла, дает не просто картинку, а последний актуальный сюжет с пометкой виральности (788 shares) и названия сюжета (Paris attacks). Так фичер становится площадкой, разводящей пользователя на 3-5 важных материалов;
- Срочные сообщения (с пометкой Breaking) подаются ниже заставки;
- Смыслы/материалы отделены друг от друга на манер карточек, приближая интерфейс к понятному material design, привычному для большинства потребителей;
- Карточный дизайн позволяет оформить как часть потока информации и спонсорские материалы с рекламными блоками. Как только позволяет разрешение, рекламные материалы смещаются в правую колонку;
- При выборе между логотипом и функциональностью побеждает функциональность:
- При сокращении разрешения логотип становится меньше;
- При прокрутке логотип съеживается до значка, на его месте оказываются социальные кнопки;
- Рубрики показываются постепенно, насколько хватит места. То же с поиском и входом для зарегистрированных пользователей. Не поместившиеся сползают под «бургер»;
- «Бургер» уходит под правый палец, где его сравнительно легко достать на устройствах с диагональю экрана более 5 дюймов;
Страница материала
На примере страницы с новостным материалом.
До первой картинки пользователь гарантированно получает
- место материала в общей структуре издания («хлебные крошки» под навигацией);
- Двусоставный заголовок, дающий понятие о принадлежности к тому или иному сюжету
- Не совпадает с анонсным. Пример: анонсируется на главной странице US aid worker killed in Mali hotel attack; реальный заголовок — Mali hotel attack: US aid worker Anita Datar confirmed dead after gunmen stormed Bamako Radisson).
- Сообщающий основные факты подзаголовок;
- Имя автора;
- Свежесть (в формате 19 minutes ago);
- Число комментариев;
- Число и возможность социальных взаимодействий (Facebook, Twitter, email);
Далее дается осмысленная иллюстрация (например, кадр с места обозначенных событий), далее — текст, аккуратно прерывающийся врезкой Read More через 1-2 абзаца. Это позволяет имитировать кнопку Read More, которая прячет слишком длинные тексты под кат и регулировать изображениями и блоками длину текста для потребителя.
За текстом следуют комментарии и футер. Автоподгрузки нет.
Вместо призыва читать больше там же на сайте есть предложение расшарить текст, сопровождающее любого человека, промотавшего больше одного экрана.
Страница рубрики или подборки
На примере страницы автора Howard Jacobson:
- Фичер предваряется структурированным введением: тип категории (Authors), название категории (Howard Jacobson), краткая, меньше 300 знаков, биография.
- При необходимости такое объяснение опускается и выносится в название. Ср. с Voices in Danger, где полное объяснение дано вторым фичером, а краткое уходит в заголовок.
- Даты отсутствуют, любое анонсирование состоит из заголовка и сопровождающей картинки. Фичер сопровождается числом расшар и небольшим, менее чем на 200 символов, подзаголовком.