Интерфейс для нового сайта The Times

Автор: Pedro Duarte    Источник: medium.com
22.04.2016
645
0
img

Выпущены новенькие сайты для The Times и The Sunday Times. Я подумал, что было бы неплохо написать статью о структуре их пользовательского интерфейса.

Меня зовут Педро Дуарте (Pedro Duarte) и я фронт-энд разработчик, специализирующийся на UI (пользовательском интерфейсе) и UX (опыте взаимодействия). Меня наняли для разработки UI для новых сайтов The Times и The Sunday Times. И за последний год это то, чем я занимался…

В этой статья я напишу о следующем:

  • Обзор
  • Сотрудничество
  • Структура UI
  • CSS
  • Рефакторинг
  • Тестирование
  • Руководство по стилям
  • Выводы

Обзор

В редизайне The Times и The Sunday Times все о контенте. О демонстрации нужных частей новостей в отведенных местах на экране. Сложность в том, чтоб выдержать строгую иерархию контента в адаптивном дизайне.

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

Сотрудничество

Чтобы построить UI самым лучшим образом, я хотел детально разобраться в дизайне. Первое, что я сделал – сел и просмотрел весь дизайн с Кайлом Вилером (Kyle Wheeler) – главным дизайнером проекта.

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

Близко работая с командой дизайнеров, я смог разобраться в структуре UI, особенно для главной страницы. Сотрудничество с визуальным и UX дизайнером – очень важный шаг. Я ❤ сотрудничество.

Структура UI

Цель была в том, чтоб сделать структуру UI как можно проще. К сожалению, это не так просто как кажется, но я уверен, что мы достигли максимального уровня простоты.

UI делится на Компоненты, Модули и Глобальные элементы.

Компоненты

Компоненты – это первый уровень, они могут использоваться в разных местах в разном контексте. В идеале, мы хотели, чтоб компоненты имели похожий вид где бы они не использовались. Обычно компоненты не сильно влияют на разметку. К примеру, для компонентов не важно сколько колонок в сетке. Примеры компонентов:

  • кнопки,
  • метки,
  • заголовки.

Модули

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

  • секции,
  • слайсы,
  • связанные ссылки.

Глобальные элементы

В глобальных файлах мы описали базовые правила для основных и вспомогательных элементов, а так же переменные.

Разметка

Существует два способа использовать Компоненты:

  1. Старый добрый HTML.
    Так как Компоненты – это в сущности «CSS классы», вы можете использовать их написав HTML с нужным классом(ами).
  2. Вспомогательный элемент.
    Мы использовали Dust.js как язык для шаблонов, так как он позволяет получить нужный вид на сервере и на клиентской стороне. Также он позволяет создавать пользовательские вспомогательные элементы, мы воспользовались этим преимуществом при создании uiComponent Helper. Ниже представлен сниппет Dust.js uiComponent Helper.
/**
 * Function to render a ui component
 * @param  params - any available parameters allowed
 * @param  params.name
 * @return {partial}
 */
dust.helpers.uiComponent = function (chunk, context, bodies, params) {
    var name = context.resolve(params.name);
    return chunk.partial('components/' + name + '/' + name, context, params);
};

Ниже пример использования компонентов с помощью HTML и через Dust.js:

<div>
  <h2 class="Headline Headline--m">News headline</h2>
  {@uiComponent name="byline" text="Tim Shipman, Political Editor" /};
  {@uiComponent name="dip" text="First paragraph of news content will go here..." /};
  {@uiComponent name="link" text="Read full story" modifider="primary" /};
</div>

Использование uiComponent Helper хорошо тем, что везде, где используются компоненты, гарантировано будет использоваться один и тот же HTML. Более того, это создает единый источник кода для каждого компонента, и если вам понадобится поменять разметку, то нужно будет изменить только один файл.

CSS

Я хочу поделится с вами частью структуры CSS, которую мы применили, и подходом, который мы приняли.

Соглашение для имен

Для соглашения по CSS именам мы использовали SUIT CSS. Ниже несколько примеров синтаксиса SUIT CSS:

ComponentName
ComponentName--modifierName
ComponentName-descendentName
is-*
u-*

Мы немного расширили его для поддержки следующих классов:

has-*
no-*
js-*

Контрольные точки

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

Так как мы использовали Susy 2 для сетки, мы решили определить контрольные точки, используя миксин susy-breakpoint, построеный на основе популярного плагина Breakpoint Sass.

Ниже сниппет наших контрольных точек:

// Defining breakpoints
$bp-medium: 768px !default;
$bp-wide: 1024px !default;

// Defining container widths
$container-medium: 860px !default;
$container-wide: 1024px !default;

А тут пример настроек для Susy:

// Defining grid columns
$g-small: 6 !default;
$g-wide: 12 !default;

// www.susydocs.oddbird.net/en/latest/settings/
$susy: (
    columns: $g-small,
    gutter-position: inside,
    gutters: 0,
    global-box-sizing: border-box,
    debug: (
        image: hide,
        color: rgba(blue, 0.10)
    ),
    use-custom: (
        box-sizing: false
    )
);

$susy-medium: $container-medium $g-wide (0) inside;
$susy-wide: $container-wide $g-wide (0) inside;

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

// Defining media query helpers
// Aliases for susy-breakpoint
// www.susydocs.oddbird.net/en/latest/toolkit/#breakpoint
@mixin medium {
   @include susy-breakpoint($bp-medium, $susy-medium) {@content};
}

@mixin to-medium {
   @include susy-breakpoint(0 ($bp-medium - 1), $susy-small) {@content};
}

@mixin medium-only {
   @include susy-breakpoint($bp-medium ($bp-wide - 1), $susy-medium) {@content};
}

@mixin wide {
   @include susy-breakpoint($bp-wide, $susy-wide) {@content};
}

@mixin to-wide {
   @include susy-breakpoint(0 ($bp-wide - 1), $susy-wide) {@content};
}

@mixin wide-only {
   @include susy-breakpoint($bp-wide ($bp-huge - 1), $susy-wide) {@content};
}

Сетка

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

Я создал несколько миксинов на основе базового Susy API, так как хотел создать поддержку для браузеров, которые не работают с flexbox.

Сетка очень простая, 6 колонок на мобильных устройствах и 12 на больших экранах. Ниже пример использования:

@mixin tt-span($pattern) {
    width: span($pattern);

    // For no flex browsers...
    .#{$no-flex} & {
        float: left;
    }
}
/**
 * dummy-module.scss
 *
 * This example shows a module which spans:
 * 3 columns on mobile (mobile first approach)
 * 4 columns on tablet
 * 3 columns on desktop
 */

.DummyModule {
    @include tt-span(3);

    @include medium {
        @include tt-span(4);
    }

    @include wide {
        @include tt-span(3);
    }
}

Слайсы и Слайсовые единицы

По сути главная страница The Times – это комбинация разных слайсов. Мы создали около 20 разных вариантов отображения новостного контента в разных ситуациях в зависимости от кол-ва и важности новостей.

Слайсы

Слайсы – это простые элементы, которые создаются из слайсовых единиц. Слайсы делались настолько простыми, насколько это было возможно.

Слайсовые единицы

Слайсовые единицы всегда должны быть внутри слайсов. В сущности, слайсовая единица – это то место, где живет новостной контент. Каждая слайсовая единица имеет идентификатор, такие же идентификаторы использовались в дизайне, ниже они помечены как Nl1, T2, S1a, T1 и тд.

Ниже простой пример того, как выглядят слайсы и слайсовые единицы.

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

Код ниже демонстрирует, как перенести первый слайс (NL1 + T2) из дизайна в код:



/**
* NL1 Module
**/

.NL1 {
    @include medium {
        @include tt-span(9);
    }

    @include wide {
        @include tt-span(10);
    }
}
/**
* T2 Module
**/

.T2 {
    @include medium {
        @include tt-span(3);
    }

    @include wide {
        @include tt-span(2);
    }
}

Как упоминалось выше, сетка содержит 12 колонок для контрольных точек Medium и Wide. Зная это, все, что мы должны сделать в CSS, это указать сколько колонок занимает каждая слайсовая единица, помня о том, что в сумме должно получится 12. Ниже это объясняется на простом русском:

Слайсовая единица NL1
Контрольная точка Medium = 9 колонок
Контрольная точка Wide = 10 колонок

Слайсовая единица T2
Контрольная точка Medium = 3 колонки
Контрольная точка Wide = 2 колонки

На мобильных устройствах оба модуля занимают 100%. Ниже GIF демонстрирует финальный результат:

Рефакторинг

Рефакторинг, рефакторинг, рефакторинг…как по мне, это ключевой шаг в том, чтоб все сделать правильно. Добавление рефакторинга в рабочий процесс означает, что вы сможете убрать после себя. Это нормально, когда поначалу код не идеальный или не очень хорошо отображает логику. Выделив время на рефакторинг, вы сможете сделать код более кратким, оптимизированным и легким в поддержке.

Визуальное тестирование

Еще один очень важный шаг – визуальное тестирование. По сути, нужно сесть с дизайнером и просмотреть все компоненты дизайна, чтобы убедится, что они выглядят и работают так, как ожидалось. Это отличный процесс, который позволяет улучшить в браузере компоненты, построенные согласно дизайну. Визуальное тестирование не занимает много времени, так как изменения минимальные, но разница в конечном результате огромная.

Руководство по стилям

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

Выводы

Такие сайты как The Times будут жить много лет и кто знает, сколько разработчиков будут над ними работать, настройки базовой структуры могут быть ужасными. Определив соглашение и структуру, можно сделать ее более гибкой и редактируемой.

Большое преимущество создания Компонентов и Модулей в том, что ваш код инкапсулируемый. Я думаю, это одна из самых важных вещей в больших проектах. Это гарантирует, что изменения в определенном файле CSS повлияют только на этот Компонент\Модуль и не приведут к побочным эффектам на других элементах.

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

И под конец несколько скриншотов работающей версии:

ПОХОЖИЕ СТАТЬИ: