Советы дизайнеру от Верстальщика

Советы Дизайнеру от Верстальщика

Приветствую, меня зовут Даниил Вершинин. Я — full-stack разработчик. Уже более 3 лет занимаюсь версткой сайтов. И мне хотелось бы дать несколько советов дизайнерам, которые занимаются разработкой макетов для сайтов. Перед тем, как начну сразу предупрежу, что я очень ценю труд дизайнеров, ибо понимаю насколько все это тяжело)

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

Используйте сетку

Сейчас абсолютно любой верстальщик использует какой-либо фреймворк или заготовку, придерживаясь определенной разметки. Чаще всего — это 12-ти колоночная сетка Bootstrap:

12-ти колоночная сетка Bootstrap

12-ти колоночная сетка Bootstrap

Опыт показал, что практически все дизайнеры используют подобную разметку, но мало кто ее придерживается. Доходит до абсурда — сетка есть, но ни один блок ею не ограничивается (заходит за поля отступов или вообще выходит за границы container).

Подробнее про сетку Bootstrap можно почитать тут

Преобразовывайте картинки в смарт-объекты или присылайте отдельным архивом

На самом деле, работа с картинками занимает достаточно много времени. Что-бы не отнимать его у верстальщика — пришлите все исходные изображения отдельным архивом (они у вас и так есть, а ему будет приятно).

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

Присылайте шрифты отдельным файлом

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

Структурируйте слои

Как по мне, тут особых комментариев не нужно, но напомню, что названия как групп слоев, так и самих слоев должны нести смысловую нагрузку т четко разделятся на секции сайта (header, nav, main, breadcrumb, footer).

Используйте UI-kit

Точнее, присылайте данный файл верстальщику. В парадигме сайта в нем должны присутствовать:

  • Элементы, не присутствующие в макете. Например, в основном макете может не присутствовать кнопки с классом .danger, а вот в файле UI-kit она должна быть прорисована
  • hover-эффекты и другие элементы взаимодействия с пользователем
  • Палитра цветов, которые используются в макете

Пример хорошего UI-kit недавно сверстанного мною сайта:

UI-kit

UI-kit

Подробнее про UI-kit тут

Рисуйте несколько макетов

Тут я прекрасно понимаю, что лишнюю работу бесплатно делать никто не хочет, но, все-таки, постарайтесь убедить клиента или свою команду в том, чтобы получилась хорошая верстка, необходимо рисовать не менее 3 макетов:

  • Под мобильные устройства (телефоны)
  • Под таблетные устройства (планшеты)
  • Под десктоп (компьютер) и больше

    Дизайн нескольких макетов

    Дизайн нескольких макетов

Знать основы HTML&CSS, фремворков

Если вы планируете долго работать в сфере разработки дизайна сайтов, то рано или поздно вам придется столкнуться с изучением основ HTML&CSS и Фреймворков. Это необходимо для того, чтобы вы понимали базовые принципы верстки и не ставили перед верстальщиком невыполнимых задач (хотя, выполнить можно все что угодно, но, как правило, для этого приходится ставить костыли).

Вас никто не заставляет полностью изучать фреймворки, но тем не менее вы должны понимать различия между .container и .container-fluid.

Знать CMS на которую будет натягиваться верстка

Особенно это правило относится к CMS, разработанных по MVC. Например, Opencart — практически все сайты на этой системе похожи по структуре, так ка там изначально встроен Bootstrap. Если  об этом знать заранее, то вы выполните гораздо меньше работы (вам останется просто перестилизовать блоки — так как они уже стоят на своих местах) и не обречете верстальщика на вечные страдания.
К тому же, знать CMS полезно и для того, чтобы не забыть про все страницы, которые необходимо прорисовать)

Читайте свежие статьи про дизайн

Это необходимо не только для того, чтобы быть «в тренде». На самом деле, дизайн очень сильно влияет, например, на конверсию. С недавнего времени хорошо разработанный дизайн и взаимодействия с пользователем влияют и на SEO — подробнее об этом в статье Почему UX действительно важен для SEO.


Надеюсь, было интересно. Если не трудно, отпишитесь в комментариях чтобы вы еще добавили в этот список.

Спасибо за внимание)

Мета-теги для покраски верхней панели браузера

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

Для чего это все?

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

Как сделать?

На самом деле, все просто! Добавив пару строчек в <head> Вашей страницы вы придадите уникальность Вашему сайту!

Вот пример для самых популярных браузеров:

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4" />

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4" />

<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-transcluent" />

<!-- Яндекс.Браузер -->
<meta name="viewport" content="ya-title=#000000,ya-dock=fade" />

 

Самая трудная вещь UX-дизайна

Самое сложное UX-дизайне

На этой неделе я выступил на General Assembly Q&A session перед 25 новоиспеченными выпускниками курса UX. Многие вопросы были сосредоточены вокруг того, как правильно составить портфолио, как работает дизайнеры в компании Atlassian, и как ворваться в UX и индустрию дизайна.

Но один вопрос очень понравился мне:

Какая проблема вам кажется самой трудной для дизайнера?

Мне кажется, мой ответ был не тем, чего ожидал зал:

Самое сложное, что должен будет сделать любой дизайнер — это убедить остальную команду или компанию в необходимости в первую очередь инвестировать в пользовательский опыт и дизайн

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

Объяснить человеку почему так важно фиксировать аспекты пользовательского опыта очень сложно. Сказать генеральному директору, что пользовательский интерфейс явно сломан, не произведет впечатления. Просто сказать product-менеджеру который борется с длинным списком невыполненных работ, сжатыми сроками или необходимостью развертывания на новых платформах, что он также должен инвестировать и в исследования, чтобы помочь исправить UX-промахи, ведь пользовательский опыт влияет на продажи. Во всем этом очень трудно убедить.

Как дизайнеру, вам необходимо убедить всех, рассказать убедительную историю, которая поможет остальной команде понять, какую боль чувствует клиент используя ваш продукт, и почему это так важно исправить».

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

Мы наняли вас, и вы — эксперт по UX, поэтому зачем нам нужны дополнительные исследования и ваш длительный процесс?

Эксперт по UX,

Искусство повествования о UX …

Понимание того, как правильно использовать информацию и фидбек, чтобы помочь подчеркнуть важность проблем с UX и как затем использовать эту информацию, чтобы рассказать отличную историю, которая способна убедить клиентов, является искусством. И как любое искусство это трудно.

3 года назад в Atlassian было всего 6 дизайнеров. Сейчас команда насчитывает более 60 человек и быстро развивается, поскольку мы стали компанией с опытом работы. Теперь у дизайна есть постоянное место в пресловутой таблице. Мы разрабатываем  интерфейсы совместно с нашими product-менеджерами, разработчиками, группами поддержки и, что наиболее важно, нашими клиентами.

Самая трудная вещь UX-дизайна таблица

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

Тем не менее, это был трудный процесс для такого короткого промежутка времени. И мы, конечно, решили еще не все проблемы. Мы по-прежнему сталкиваемся с аналогичными ситуациями в других командах программного обеспечения. Как мы расставляем приоритеты по сравнению с добавлением другой функции? Что будет с нашими клиентами? Как нам рассказать наиболее интересную историю, чтобы наши PM и инженерные команды действительно понимали боль клиентов и предлагаемое нами решение? Но мы на правильном пути.

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

Оригинал статьи: Alastair’s Medium Page.

Почему UX действительно важен для SEO

Почему UX действительно важен для SEO

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

Поисковые системы развиваются очень быстро, и все это благодаря машинному обучению. Эти достижения позволили поисковым системам, предоставлять наиболее значимые результаты, не только с точки зрения содержания, но и с точки зрения пользовательского опыта (UX).

В конце концов, то, что хорошо для потребителя хорошо и для органического поиска (organic search performance) — особенно, если мы обратим внимание на то, как машинное обучение становится все более важным для алгоритмов поиска. Поисковые системы учитывают как совпадение последовательности, так и качество содержания, структуру и настроение.

Для того, чтобы идти в ногу со временем , агентства и маркетологи должны расширить свой SEO подход, сфокусироваться на UX. Ниже рассматриваются две области, с помощью которых все это можно воплотить в реальность!

1. Множество SEO навыков необходимо расширить в UX

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

Тем не менее, для многих команд и агентств, UX никогда не был частью SEO инструментария. То, может ли SEOшник говорить о UX или давать значимые рекомендации по UX, во многом зависит от личного опыта и уровня профессионального развития.

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

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

2. UX должна развиваться за пределы линейного подхода

Работая с огромным количеством клиентов и UX-агентствами за последние 10 лет, я обычно наблюдал следующее: UX команды рассматривают исключительно «линейный путь», который начинается на домашней странице. Реальность такова, что для многих брендов, менее чем 50 процентов потребителей начинают свое путешествие не с главной страницы, а также «линейный подход» к UX обеспечивает не оптимальный опыт для большинства потребителей.

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

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

  • Контент предоставлен в виде вкладок, при нажатии на которых предоставляется содержание, но информация, которую они искали скрыта внутри вкладки.
  • Бесконечная прокрутка страниц на которых несколько подразделов располагаются на одном URL, не имеющих отношение к их поиску.

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

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

Это полезно не только для пользователей, это приносит пользу всем!

SEO команды, включившие UX в свой арсенал и UX команды, принявшие более широкий подход, рассматривая несколько точек входа, позволяют нам переосмыслить способы работы, для достижения лучших результатов. Продуктивное сотрудничество необходимо внести в процесс создания проектов — действуя как одна команда. Опыт и знания могут быть объединены вместе для того, чтобы выявить проблемы и обеспечить оптимальные решения используя точки входа веб-сайт. Все это в конечном счете приведет к лучшему результату search-to-landing-page-to-conversion.

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

Оригинал статьи: Why UX is pivotal to the future of SEO

siema

Siema — очень простой плагин для каруселей

Siema — это легкий (всего 1 Кб) плагин для создания каруселей без зависимостей (dependencies) и лишних стилей. Брэд Фрост однажды сказал: «делай это дерьмо сам». Этот плагин 100% доступен открытым исходным кодом на github. Вы можете абсолютно бесплатно использовать его на личных и коммерческих проектах.

Установка

Установка чрезвычайно проста. Для начала немного разметки…

<div class="siema">
  <div>Hi, I'm slide 1</div>
  <div>Hi, I'm slide 2</div>
  <div>Hi, I'm slide 3</div>
  <div>Hi, I'm slide 4</div>
</div>

Вручную подключить скрипт на Ваш сайт…

<script src="siema.min.js"></script>
<script>
  new Siema();
</script>

…ИЛИ Если вы используете модуль упаковщика, такие как Browserify или Webpack

npm i -S siema

// or

yarn add siema
import Siema from 'siema';
new Siema();

Настройки

Siema можно настраивать следующими параметрами, которые можно изменить путем передачи объекта в качестве аргумента. Значения по умолчанию приведены ниже.

new Siema({
  selector: '.siema',
  duration: 200,
  easing: 'ease-out',
  perPage: 1,
  startIndex: 0,
  draggable: true,
  threshold: 20,
  loop: false,
});
  • selector — (string или DOM element) указать селектор
  • duration — (number) длительность слайдов (в мс)
  • easing — (string) такой же, как переход-времени-функция в CSS
  • perPage — (number или object) количество слайдов
  • startIndex — индекс (number) стартового слайда (с нуля)
  • draggable — (boolean) использование перетаскивания и касания пальцем
  • threshold — (number) пороговое значение при касании и перетаскивании мыши  (в пикселях)
  • loop — (boolean) петля скольжения вокруг

API-интерфейс

Как уже упоминалось выше, Siema не обладает большим количеством опций — всего несколько полезных методов. Используйте плагин с очень простым JavaScript-кодом и вуаля!

  • next() — перейти к следующему слайду
  • prev() — перейти к предыдущему слайду
  • goTo(index) — переход к определенному слайду
  • currentSlide — индекс текущего активного скольжения (только для чтения)

Пример

Базовая карусель с кнопками перехода к следующему и предыдущему слайду.

<div class="siema">
  <div><img src="assets/siema--pink.svg"></div>
  <div><img src="assets/siema--yellow.svg"></div>
  <div><img src="assets/siema--pink.svg"></div>
  <div><img src="assets/siema--yellow.svg"></div>
  <div><img src="assets/siema--pink.svg"></div>
  <div><img src="assets/siema--yellow.svg"></div>
</div>

<button class="prev">prev</button>
<button class="next">next</button>
const mySiema = new Siema();
document.querySelector('.prev').addEventListener('click', () => mySiema.prev());
document.querySelector('.next').addEventListener('click', () => mySiema.next());

Поддержка браузеров

  • IE10
  • Chrome 12
  • Firefox 16
  • Opera 15
  • Safari 4
  • Android Browser 4.0
  • iOS Safari 6.0

Заключение

Siema означает «привет» на польском языке. Когда я играл вокруг с некоторым кодом, я всегда использовать случайные имена. Вот с этого и началась история этого имени 🙂 огромное спасибо Jarkko Sibenberg за милый дизайн логотипа!

Github репозиторий – https://github.com/pawelgrzybek/siema
Документация и демо – https://pawelgrzybek.com/siema/

Крутые мобильные формы - Группируйте!

Делаем крутые мобильные формы

Заполнение форм — то, что людям не очень нравится делать. Это необходимость, в противном случае, Вы просто не получите того, чего хотели. В этой статье мы рассмотрим, как сделать формы максимально эффективными.

Конечно, мы не должны забывать про эстетику, но у нас другая цель — «облегчить» формы и сделать их заполнение максимально быстрым для людей.

Используйте сегментированные элементы управления вместо выпадающих меню

крутые мобильные формы - сегментированные элементы управления

Можно спроектировать одно-выборный сценарий, где есть 2-5 доступных опций и использовать как линейный сегментированный элемент управления, вместо выпадающего списка. Это круто, в основном потому, что все варианты видны сразу и выбор может быть сделан после первого взаимодействия, а не трех (Нажмите, чтобы открыть выбор, сделать выбор, нажмите установить).

Объединяйте несколько выпадающих списков в одно поле

Крутые мобильные формы - Объединение нескольких выпадающих меню

Да, это не всегда возможно, но самый яркий пример — выбор даты. Нам нужно ввести день, месяц и год, это означает, что при использовании выпадающих меню вы в конечном итоге вам необходимо выполнить, как минимум, 3 взаимодействия в четыре шага, который в сумме добавляет до 12 взаимодействий. Это много. Используя одно поле для всей даты всю процедуру можно проделать за пять шагов — открыть, выберите день, выберите Месяц, Год выберите, нажмите установить.

Используйте переключатели вместо выпадающих меню

Переключатели можно использовать для реализации бинарного ввода. Например, при выборе «Показать» или «Скрыть». Между прочим, это очень удобный и интуитивный UX — элемент.

Ползунки

Крутые мобильные формы - Ползунки

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

Избегайте многоколоночности

Крутые мобильные формы - Избегайте многоколоночности

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

Используйте степперы вместо выпадающих списков

Крутые мобильные формы - степперы вместо выпадающих списков

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

Показывайте ошибки рядом, а не группируйте их

Крутые мобильные формы - ошибки

Показывайте ошибки в контексте (рядом с полем). Это очень важно, поскольку в большинстве случаев, список ошибок находится вне области просмотра экрана, поэтому держать пользователей в курсе «прямо на месте» — это важно.

Не выделяйте необязательные поля

Крутые мобильные формы - Избегайте многоколоночности

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

Группируйте!

Крутые мобильные формы - Группируйте!

Группировка схожих полей помогает людям воспринимать информацию быстрее. Разделяй и властвуй!

Позаботьтесь о размере элементов

Крутые мобильные формы - Позаботьтесь о размере элементов

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

Остаайтесь верными платформе

С мобильными версиями сайтов и, особенно, в приложениях стараюсь быть верным платформе. Используйте устоявшиеся схемы взаимодействия, если это возможно, и обеспечивайте пользовательский интерфейс, знакомый пользователям. Люди имеют одинаковое ожидание от кнопки «назад» в любом приложении, выполняется на любом устройстве, не зависимо от того, это будет iOS, Android или Windows.

Если приложить немного усилий к разработке формы Вы сможете увеличить конверсию. 

Оригинал статьи: Building Great Mobile Forms

Роторный телефон ретро-ввод номера для Вашего сайта

Роторный телефон: ретро-ввод номера для Вашего сайта

Статья «Плохие веб-формы» говорила об абсурдных формах для ввода телефонных номеров, таких как в том числе incrementer, бегунок, генератор случайных чисел, и очень большой выпадающий список.

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

Демо: Смотреть
Исходники на GitHub
Оригинал статьи: Rotary: A Retro Web Input for Phone Numbers


Как думаете — как данный аппарат может повлиять на юзабилити Вашего сайта? Пишите в комментарии.

Три новых свойства CSS для изучения в 2017

Три новых CSS свойства для изучения в 2017

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

1. Запросы свойств в CSS

Ранее отмечалось, что запросы свойств (Feature Queries) являются одним из наиболее желательных свойств (features) CSS.

Теперь они представлены в основных браузерах и поддерживаются в каждом из них (в т.ч. Opera Mini). Исключение составляет только Internet Explorer.

Запросы свойств, используя правило &supports, позволяют сформировать в CSS традиционный блок, который будет применяться только тогда, когда текущий агент пользователя будет поддерживать конкретную пару свойство-значение. Простейший пример этого – использование исключительно стилей Flexbox для браузеров с использованием display: flex:

@supports ( display: flex ) {
  .foo { display: flex; }
}

Кроме того, для создания более сложных запросов свойство можно использовать операторы and и not. Например, можно установить поддержку браузером только старого синтаксиса Flexbox:

@supports ( display: flexbox ) 
          and 
          ( not ( display: flex ) ) {
  .foo { display: flexbox; }
}

 

Поддержка в браузерах

Запросы свойств CSS позволяют пользователям определять правило на основании информации о том, поддерживаются ли конкретные объявления свойств в CSS при использовании в качестве правила &supports.

2. Положение сетки

Модуль Grid Layout CSS представляет собой систему для создания макетов, основанных на представлении контента в сетчатой структуре. Он имеет сходство с модулем Flexible Box Layout, но предназначен для более конкретного формирования макетов страниц.

Точное размещение элементов

Сетка состоит из контейнера сетки (Grid Container), созданного с помощью display: grid, и элементов сетки (Grid Items) (дочерних элементов контейнера). CSS позволяет легко и точно организовать расположение элементов в зависимости от их расположения в соответствии с разметкой документа.

Например, в статье «Создание макета Заветное желание» (Holy Grail)  с помощью сетки CSS» показан способ использования данного модуля для создания макета «Заветное желание».

Создание макета Заветное желание» (Holy Grail)  с помощью сетки CSS

Для реализации этого потребовалась всего 31 строка кода.

.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }

.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 100px 
                        1fr
                        30px;
    min-height: 100vh;
}

@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
        grid-template-columns: 100%;
        grid-template-rows: 100px 
                            50px 
                            1fr
                            50px 
                            30px;
    }
}

Адаптивная длина (Flexible Lengths)

Модуль сетки CSS (CSS Grid Module) содержит следующие элементы: новое значение длины, элемент fr, содержащий информацию о части свободного пространства, оставшейся в контейнере сетки.

Это дает возможность распределить элементы сетки по ширине и высоте в зависимости от наличия доступного пространства в контейнере. Например, в макете «Заветное желание» для того, чтобы обеспечить занятие основным разделом всего пространства, оставшегося после двух боковых колонок, используется код:

.hg {
    grid-template-columns: 150px 1fr 150px;
}

Межстолбцовые промежутки (Gutters)

Для определения межстолбцовых промежутков в макете используются свойства (properties) grid-gap grid-column-gap и grid-row-gap. Значения для этих свойств представляются с помощью типа данных <length-percentage>  и выражаются в процентах, соответствующих размерам области контента.

Для формирования межстолбцовых промежутков размером 5% используется код:

.hg {
    display: grid;
    grid-column-gap: 5%;
}

Поддержка в браузерах

Модуль CSS Grid будет доступен в браузерах уже в начале весны.

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

Прим.: салатовый цвет – частичная поддержка.

3. «Нативные» переменные в CSS

«Нативные» переменные (Native Variables) – модуль установления обычных пользовательских свойств для переменных каскадирования (Custom Properties for Cascading Variables Module). Данный модуль представляет собой способ создания установленных пользователем переменных, которые могут быть определены как значения для свойств.

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

:root {
  --theme-colour: cornflowerblue;
}

h1 { color: var(--theme-colour); }  
a { color: var(--theme-colour); }  
strong { color: var(--theme-colour); }

Иногда имеется возможность выполнить это с помощью препроцессоров CSS, таких как SASS, но переменные CSS имеют преимущество перед ними, выраженное в существовании их в браузере. Это выражается в том, что их значения могут быть обновлены напрямую. Например, для изменения свойства —theme colour- можно использовать код:

const rootEl = document.documentElement;  
rootEl.style.setProperty('--theme-colour', 'plum');

Поддержка в браузерах

CSS переменные (пользовательские свойства допускают объявление и использование переменных каскадирования в таблицах стилей.

Оригинал статьи: 3 New CSS Features to Learn in 2017