Пример из практики: обновление lynnandtonic.com 2017

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

некоторые прошлые итерации lynnandtonic.com

Я делаю это каждый год по нескольким причинам:

  • чтобы я выполнил хотя бы один неработающий проект
  • экспериментировать и изучать новые методы (несколько выдающихся обновлений были моими первыми попытками адаптивного дизайна, flexbox и CSS-сетки в этом году)
  • год - это подходящее время для существования версии, когда мне не грустно, когда я сажусь, чтобы изменить ее

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

Очень маленький процент посетителей моего портфолио - энтузиасты аэропорта, зрители Top Chef и семья (привет, мама). Но основная аудитория - это веб-дизайнеры, разработчики и рекрутеры. Это люди, которые знают, как создаются веб-сайты, и могут потратить лишнюю минуту, чтобы проверить вещи. Я хотел создать дизайн вокруг этого.

Концепция и вдохновение

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

Но могу ли я заставить людей хотеть испытать все это? Могу ли я удивить их, доведя эти понятия до абсурда?

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

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

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

У ранее существовавшего смысла в том, чтобы сайт имел три (или еще несколько) разных макетов: поддержка общих устройств. Но что бы это значило для 10, 15 или, в конечном счете, 21 различных дизайнов, которые «сидят» рядом, чтобы вы могли открывать по одному, один за другим. Каждый из них может быть ничем не примечательный сам по себе, но именно отношения (и различия) с теми слева / справа и с восемью другими делают каждый достойным внимания.

Предварительный просмотр lynnandtonic.com

Выполнение идеи

Я уже знал, что можно использовать CSS, чтобы превратить базовую разметку во что-то необычное. CSS Zen Garden неоднократно показывал нам это годами. Другой мой сторонний проект, a.singlediv.com, доводит эту концепцию до смешных крайностей (здесь я чувствую закономерность).

Таким образом, выполнение этого редизайна началось с базового HTML. За годы экспериментов с CSS я понял, что вы можете многого достичь, не жертвуя чистой разметкой. Вот то, на чем я приземлился. Элементы внутри

и

позволили бы мне по-разному стилизовать каждую строку, а элемент позволил бы создать отзывчивое изображение, а также предоставил дополнительные: before и: после псевдоэлементов (что не позволяет).


  

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

Я использую Stylus для предварительной обработки CSS (и буду в следующих примерах). Сначала я создал home.styl, куда будут импортированы сброс и переменные, будут объявлены основные стили страниц и где будут установлены медиазапросы. Это, плюс другие страницы, будет импортировано в один main.styl, который будет скомпилирован и свернут. Структура выглядит так:

 _styl
   компоненты
   глобалы
   страницы
     о.стиль
     home.styl
     мысли.стиль
     труд.стиль
   main.styl

Я планировал использовать CSS-сетку для этого редизайна, поэтому я создал супер базовый запасной макет для отображения по умолчанию (разделенный на собственный файл в домашнем каталоге) и поместил все остальное в объявление @supports.

 _styl
   страницы
     домой
       fallback.styl
     home.styl
   main.styl
/ * home.styl * /
@import 'home / fallback'
@supports (отображение: сетка)
  body.home
    [базовые стили здесь]

Если браузер не поддерживает display: grid, он будет отображать запасной вариант, который выглядит следующим образом:

Имея запасной вариант, я мог бы сосредоточиться на множестве разных макетов. Для удобства управления я разделил каждый макет на отдельный файл вместе с fallback.styl в домашнем каталоге (не обращайте внимания на мои нелепые названия).

 _styl
   страницы
     домой
       b-and-w-and-gold-all-over.styl
       big-nav.style
       биг.стиль
       blockhead.styl
       болт.стиль
      Out cutout.styl
      Gonal diagonal.styl
      Gu disguise.styl
       fallback.styl
       пятьдесят-пятьдесят.стиль
       пол.стиль
       L-Y-N-N.styl
       landscape.styl
       movie.styl
       pop-out.styl
      Tate rotate.styl
      Ran stranger.styl
       третий.стиль
       triangle.styl
       white-bars.styl
       white-box.styl
       х.стиль
     home.styl
   main.styl

Затем я смог импортировать каждый макет в свой собственный медиа-запрос:

/ * home.styl * /
@supports (отображение: сетка)
  body.home
    [базовые стили здесь]
  экран @media и (максимальная ширина: 400 пикселей)
    @import 'home / diagonal'
  экран @media и (минимальная ширина: 401 пикселей) и (максимальная ширина: 500 пикселей)
    @import 'home / L-Y-N-N'
  экран @media и (минимальная ширина: 501 пикселей) и (максимальная ширина: 600 пикселей)
    @import 'home / blockhead'
  Еще 18 (2300 пикселей - самый широкий медиа-запрос)

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

Дальнейшее обучение

Если вы хотите больше узнать о CSS или изучить отдельные макеты, я опубликовал репозиторий на GitHub.

Я не буду вдаваться в то, как использовать сетку, поскольку Рэйчел Эндрю и Джен Симмонс написали и много говорили на эту тему. Посмотрите Rachel's Grid by Example и Jen Experimental Layout Lab как хорошие места для начала.

Патрик Броссет из Mozilla создал видео, рассказывающее об использовании сетки для одного из макетов моего сайта, что довольно круто:

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

отклик

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

Реакция была ошеломляющей, и было действительно приятно видеть, как люди открывают сайт и наслаждаются им. Я так благодарен за все добрые и ободряющие слова.

Я получил один отзыв: многие люди вообще не меняют размеры своих браузеров. Это правда! И это совершенно нормально. Сайт по-прежнему функционирует, даже если вы не знаете, какие-либо другие макеты существуют. Что ж, если честно, есть одна раскладка, которая создаст непонятный опыт (фанаты Stranger Things могут знать, о чем я говорю). Но с учетом моей аудитории я полагал, что риск был низким.

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

Спасибо за проверку сайта. Это значит мир.

До следующего редизайна,
Yn Линн

Первоначально опубликовано на blog.andyet.com 9 января 2018 года.