Протягом останніх кількох місяців я досліджував, як ми можемо бути креативними, використовуючи добре підтримувані ресурси CSS. Мета кожної статті полягає в тому, щоб відійти від одноманітності веб-дизайну до більш характерного та такого, що запам’ятовується. Відповідь від Філіпа Баглега варто переглянути:
Усі посібники Енді дуже цікаві, але здебільшого непрактичні в реальному житті. Дуже мало вказівок щодо того, як працює журнальний стиль дизайну в адаптивному середовищі.
Чесна думка, добре зроблено, Філіпе. Отже, давайте розвіємо міф про те, що веб-дизайн у редакційному стилі непрактичний на маленьких екранах.
мій короткий опис: Петті Мелт — сенсація кантрі-музики, яка зростає, і їй потрібен був веб-сайт, щоб запустити свій новий альбом і почати тур. Вона хотіла, щоб це було виразно на вигляд і запам’ятовувалося, тому вона назвала його «Щощі та нісенітниця». Петті не справжня, але проектувати та розвивати сайти, подібні до її, є труднощі.
проблема з нескінченними стовпцями
На мобільних пристроях люди можуть втратити відчуття контексту й не можуть легко визначити, де починається чи закінчується розділ. Хороший дизайн малого екрану може допомогти їм зорієнтуватися за допомогою різноманітних технологій.
Коли простір на екрані обмежений, більшість дизайнерів згортають свої макети в одну довгу колонку. Це добре для зручності читання, але може мати негативний вплив на взаємодію з користувачем, якщо ієрархія відсутня; Ритм стає монотонним, а вміст прокручується, поки не стає розмитим. Тоді нічого не з’являється, і сторінки перетворюються з розроблених інтерфейсів на канали вмісту.
Подібно до журналу, макет надає візуальні підказки в середовищі робочого столу, повідомляючи людям, де вони знаходяться, і підказуючи, куди йти далі. Цей ритм і структура можуть бути такою ж частиною візуального оповідання, як колір і типографіка.
Але ці підказки часто зникають на менших екранах. Оскільки ми не можемо покладатися на складні колонки, як ми можемо розробити візуальні підказки, які допоможуть читачам почуватися зорієнтованими та залученими в потік контенту? Однією з відповідей на це є перестати думати категоріями однієї довгої колонки вмісту взагалі. Натомість сприймайте кожен розділ як окремий витвір, розроблений момент, який веде читачів через історію.
Проектування моментів замість стовпів
Навіть у вузькій колонці ви можете додати різноманітності та зменшити монотонність, розглядаючи вміст як серію осмислено розроблених моментів, кожен з яких має відмінну поведінку та стилі. Ми можемо використовувати альтернативні композиції та розміри, розташовувати елементи за допомогою різних візерунків або використовувати горизонтальне та вертикальне прокручування, щоб створювати враження та розповідати історії, навіть коли простір обмежений. І, на щастя, у нас є необхідні інструменти для цього:
Ці моменти можуть рухатися горизонтально, розбивати монотонність вертикального прокручування, надавати розділу власного ритму та зберігати пов’язаний вміст разом.
використовуйте горизонтальну прокрутку
Мій дизайн робочого столу для дискографії Петті включає обкладинки її альбомів, розташовані в модульній сітці. Такі макети легко створити за допомогою мого модульного генератора сіток.
Але таке розташування не обов’язково працюватиме на менших екранах, де практичним рішенням є перетворити модульну сітку на елемент горизонтальної прокрутки. Горизонтальне прокручування — це звична поведінка та спосіб надати згрупованому вмісту власну сцену, як це можливо для поширення журналу.
Я почав із визначення батьківського елемента модульної сітки – в даному випадку названий художньо modular-wrap – Як контейнер:
.modular-wrap {
container-type: inline-size;
width: 100%;
}Потім я додав стилі сітки, щоб створити модульний макет:
.modular {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
overflow-x: visible;
width: 100%;
}На менших екранах було б спокусливо згорнути ці модулі сітки в один стовпець, але це просто поклало б один альбом на інший.
Тож замість цього я використав запит-контейнер, щоб розташувати обкладинки альбомів горизонтально та дозволити комусь прокручувати їх:
@container (max-width: 30rem) {
#example-1 .modular {
display: grid;
gap: 1.5rem;
grid-auto-columns: minmax(70%, 1fr);
grid-auto-flow: column;
grid-template-columns: none;
grid-template-rows: 1fr;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
Тепер обкладинки альбомів Патті розташовані горизонтально, а не вертикально, що створює єдиний компонент, не даючи людям втратити своє місце в загальному потоці вмісту.
виштовхувати елементи з полотна
Минулого разу я пояснював, як користуватися shape-outside І створіть ілюзію тексту, що тече з обох боків зображення. Ви часто побачите цей ефект у журналах, але рідко в Інтернеті.
На настільних дисплеях достатньо місця, але як щодо менших дисплеїв? Ну я можу видалити shape-outside Загалом, але якби я це зробив, я б також втратив індивідуальність цього дизайну та його вплив на візуальне оповідання. Натомість я можу підтримувати shape-outside І розмістіть його всередині горизонтально прокручуваного компонента, де частина його вмісту буде поза полотном і поза вікном перегляду.
Мій вміст поділено на два розділи: у першому половина зображення плаває праворуч, а в другому половина зображення плаває ліворуч. Два зображення з’єднуються, створюючи ілюзію єдиного зображення в центрі дизайну:
Я знав, що ця реалізація потребуватиме запиту контейнера, тому що мені потрібен був батьківський елемент, ширина якого визначатиме, коли макет має перемикатися зі статичного на прокручування. Отже, я додав a section За межами цього вмісту, щоб я міг посилатися на його ширину, щоб визначити, коли його вміст має змінитися:
section {
container-type: inline-size;
overflow-x: auto;
position: relative;
width: 100%;
}Моя техніка передбачає розподіл вмісту на дві частини однакової ширини, і ці властивості стовпця сітки застосовуватимуться до кожного розміру екрана:
.content {
display: grid;
gap: 0;
grid-template-columns: 1fr 1fr;
width: 100%;
}Тоді, коли ширина секції нижче 48remЯ змінив ширину своїх двох стовпців:
@container (max-width: 48rem) {
.content {
grid-template-columns: 85vw 85vw;
}
}Встановлення ширини кожного стовпця на 85% — трохи нижче ширини вікна перегляду — робить видимим частину вмісту правого стовпця, що сигналізує про те, що є ще що побачити, і заохочує прокручувати, щоб побачити це.
Цей же принцип працює і в більших масштабах. Замість того, щоб вносити невеликі зміни, ми можемо перетворити цілий розділ на мініатюрний журнал, який прокручується, як друкована історія.
Створіть міні-розворот, який можна прокручувати
Розробляючи адаптивне середовище, немає причин втрачати виразність макета, натхненного журналом. Замість того, щоб зводити все в одну довгу колонку, розділи можуть поводитися як самодостатні мініатюрні розвороти журналів.
мій останній shape-outside Приклад текучого тексту між двома фотомонтажами. Частини цих зображень вирвалися зі своїх контейнерів, створивши глибину та макет із чітким редакторським відчуттям. Мій контент складався з двох зображень і кількох абзаців:
Два зображення плавають ліворуч або праворуч shape-outside Реалізовано так, що текст перетікає між ними:
.content img:nth-of-type(1) {
float: left;
width: 45%;
shape-outside: url("https://css-tricks.com/getting-creative-with-small-screens/left.webp");
}
.spread-wrap .content img:nth-of-type(2) {
float: right;
width: 35%;
shape-outside: url("https://css-tricks.com/getting-creative-with-small-screens/right.webp");
}Він чудово поводиться на екрані більшого розміру, але відчуває себе тісним на менших розмірах. Щоб зберегти суть дизайну, я використав запит контейнера, щоб змінити його макет на щось зовсім інше.
По-перше, мені потрібен був інший батьківський елемент, ширина якого визначатиме, коли макет має змінитися. Отже, я додав a section щоб я міг посилатися на його ширину, і дав йому трохи padding І межа, щоб відокремити його від навколишнього вмісту:
section {
border: 1px solid var(--border-stroke-color);
box-sizing: border-box;
container-type: inline-size;
overflow-x: auto;
padding: 1.5rem;
width: 100%;
}Коли ширина розділу зменшена 48remЯ представив горизонтальний макет flexbox:
@container (max-width: 48rem) {
.content {
align-items: center;
display: flex;
flex-wrap: nowrap;
gap: 1.5rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
}І оскільки цей макет залежить від запиту контейнера, я використав сутності запиту контейнера (cqi) для ширини моїх гнучких стовпців:
.content > * {
flex: 0 0 85cqi;
min-width: 85cqi;
scroll-snap-align: start;
}
Тепер на менших екранах макет перетікає від зображення до абзацу до зображення, причому кожен елемент стає на місце, коли людина проводить пальцем убік. Цей підхід переставляє елементи й таким чином уповільнює швидкість читання, роблячи кожне змахування навмисною дією.
Щоб мої зображення не спотворювалися під час повороту, я застосував автоматичну висоту до комбінованих object-fit,
.content img {
display: block;
flex-shrink: 0;
float: none;
height: auto;
max-width: 100%;
object-fit: contain;
}Перед викликом flexbox order Властивість для розміщення другого зображення в кінці моєї послідовності маленького екрана:
.content img:nth-of-type(2) {
order: 100;
}Такі міні-розвороти додають темпу та ритму, але також забезпечують інший спосіб змінити перспективу без прокручування орієнтації. Просте обертання може стати підказкою для абсолютно нового творіння.
Створюйте макети, що реагують на орієнтацію
Коли хтось повертає свій телефон, ця зміна орієнтації може сигналізувати про новий макет. Замість того, щоб розповсюджувати дизайн в одну колонку, ми можемо повністю його рекомбінувати, щоб альбомна орієнтація виглядала як новий розворот.
Повернувши телефон набік, ви можете відтворити макет, а не просто змінити його. Коли шанувальники Патті повертають свої телефони в альбомну орієнтацію, я не хочу, щоб той самий складений макет поширювався широко. Натомість я хочу використати цю додаткову ширину, щоб забезпечити інший досвід. Це може бути так само просто, як додавання додаткових стовпців до композиційного медіа-запиту, який викликається, коли пристрій увімкнено orientation Я дізнався в landscape,
@media (orientation: landscape) {
.content {
display: grid;
grid-template-columns: 1fr 1fr;
}
}Для довгострокового вмісту на сторінці біографії Петті Мелт текст обтікає багатокутником clip-path Розміщено на великому підробленому фоновому зображенні. Це зображення є вбудованим, плаваючим, і його ширина встановлена на 100%:
.content > img {
float: left;
width: 100%;
max-width: 100%;
}Тоді я додав shape-outside Додано використання координат полігону shape-margin,
.content > img {
shape-outside: polygon(...);
shape-margin: 1.5rem;
}Я хочу лише, щоб текст обтікав багатокутник, а зображення з’являлося у фоновому режимі, коли пристрій тримається в альбомній орієнтації, тому я включив це правило в запит, який визначає орієнтацію екрана:
@media (orientation: landscape) {
.content > img {
float: left;
width: 100%;
max-width: 100%;
shape-outside: polygon(...);
shape-margin: 1.5rem;
}
}
Ці властивості не застосовуватимуться, коли вікно перегляду знаходиться в портретному режимі.
Історії дизайну, які адаптуються, а не макети, які руйнуються
Менші екрани не ускладнюють дизайн; Вони роблять його більш стриманим, вимагаючи від дизайнерів уваги, як зберегти індивідуальність дизайну, коли простір обмежений.
Філіп мав рацію, запитуючи, як редакторський стиль може працювати в делікатному середовищі. Це відбувається, але не через зменшення макета друку. Це працює, коли ми по-іншому думаємо про те, як вміст згинається, зміщується та прокручується, і коли дизайн реагує не лише на пристрій, але й на те, як хтось його тримає.
Мета полягає не в тому, щоб імітувати мініатюрні журнали на мобільних пристроях, а в тому, щоб передати їхню енергію, ритм і відчуття відкриття, що так добре вдається друкованим виданням. Дизайн — це оповідання історій, і те, що там менше місця, щоб щось розповісти, не означає, що він повинен мати менший вплив.
