Як планувати вміст композиції для чуйного дизайну
У недавній публікації я обговорював, як візуальний вміст відноситься до макет. Проте ця тема дуже детальна, і розколюється на багато підтемів, один з яких є візуальна організація для реагування макетів.
У цій публікації я хотів би глибше заглибитися в вміст, що відповідає за відповіді, щоб переглянути деякі найкращі практики для переставляння вмісту для невеликих екранів. У дизайні UI та UX немає жодної правильної відповіді для кожного проекту, але є тенденції, які добре працюють, і з цих тенденцій ви можете побудувати свої власні ідеї.
Переставити сітки до списків
Кожен веб-сайт використовує певний тип сітки, чи є він видимим чи ні. Вміст в твердій сітці часто групується горизонтально на більш широких моніторах, але це не має сенсу на менших пристроях. Найкращим засобом є розбиття цих сіток на невеликих екранах конвертувати елементи в списки.
Приклад 1: Міська рада Веллінгтона
Погляньте на веб-сайт Міської ради Веллінгтона, який використовує декілька розділи у стилі сітки на домашній сторінці.
Там є невелике слайд-шоу квадратних посилань, що зменшує змінюється розмір вікна браузера. Розділ нижнього колонтитула також стає менше, і врешті-решт перетворюється у вертикальний список посилань.
На дуже маленьких телефонах з шириною 320px потрібно розробити розмір пристрою. У випадку з iPhone пристрій вище, ніж ширше, тому має сенс організувати вміст таким чином.
Приклад 2: Burger Mooyah
Погляньте на домашню сторінку для Mooyah і спробуйте змінити розмір макета. Там є невелика область показу слайдів, яка містить три елементи на екрані робочого столу, але це зменшується для показу лише одного елемента на мобільному пристрої (додавання більше прихованих слайдів до віджета).
Дві рекламні скриньки, що рекламують програму та меню Mooyah, залишаються встановленими поруч доки екран не стане досить маленьким переставити їх по вертикалі.
The “Зв'яжіться з нами!” Розділ також переставляє зміст так, щоб кожна соціальна посада отримує якомога більше місця. Взагалі кажучи, широкоекранні монітори є найширшими, а екрани смартфонів - найвищими.
Приклад 3: Тематичний ринок
При проектуванні макета з сіткою слід враховувати широкі та високі стилі макета перед написанням одного рядка коду. Таким чином ви будете готові будувати контрольні точки, які мають сенс.
Сторінка з повним макетом сітки повинна зменшити розмір коробок перед тим, як розбити їх на нову лінію. Наприклад, Theme Market має a фіксована максимальна ширина 1240, і сітка містить чотири блоки в рядку.
Як екран стає менше цих блоків зменшити ширину, але зрештою зламатися до залиште три коробки в рядку. У найменшому розмірі ви отримуєте одне поле в рядку, і це є багато місця для відображення тексту та зображень.
Завжди є баланс зберігаючи якомога більше інформації на екрані у поєднанні з необхідністю зробіть текст читабельним. Чим більше ви будуєте макети сітки, тим простіше це буде знайти баланс контенту.
Приховати або видалити стовпці
Більш широкі монітори і більше підтримки браузера дозволяють розробникам створювати неймовірно складні макети. Я часто бачу блоги з три або навіть чотири колонки які займають значну частину екрана.
Однак менші пристрої потребують потоку вмісту має сенс по вертикалі. Я знайшов два варіанти обробка зайвих бічних панелей:
- Відкиньте їх під основний вміст
- Сховати їх зовсім
Приклад 1: Зупинити прес
Погляньте на сайт Stop Press. Це має чотири вертикальні колонки на моєму настільному моніторі.
Лівий стовпець - вертикальне меню навігації, наступний стовпець - головний стовпець вмісту з останніми статтями. Потім ми маємо дві різні стовпці бічної панелі, переповнені додатковими “осторонь” зміст.
Як змінюється розмір вікна браузера, ці стовпці повільно зменшуйте розміри. Першим, хто піде, є ліва навігація, яка ховається за іконкою меню гамбургера.
Наступна точка розриву приховує середній стовпчик разом з кнопками спільного доступу. Потім, нарешті, на найменших екранах, крайня права бічна панель повністю зникає залишивши лише первинну центральну колонку змісту.
Жоден із вмісту бічної панелі не відображається під основним вмістом. Його повністю прихований від зору, і це цілком прийнятний вибір зменшити завантаження сторінки і зберегти висоту смуги прокрутки пристойним розміром.
З іншого боку, багато блогів пересунути бічну панель під основним вмістом як на імперії Concept Art, яка має відповідні пости в бічній панелі, що зрештою опуститься нижче вмісту.
Приклад 2: Блог доповіді
Блог Wishpond також повністю видаляє бічну панель на екрані менших вікон. Ця область бічної панелі зазвичай містить рекламу, форми реєстрації та пов’язані посилання на публікації. Жоден із змісту не є життєво важливим, але він може підвищити цінність для відвідувачів.
Мені подобається слідувати a гібридний підхід де я переміщую бічну панель під вмістом, але також приховую декілька елементів у бічній панелі за певною точкою переривання.
Наприклад, якщо я маю три рекламні блоки в повному форматі, я можу приховати два рекламних місця на мобільному телефоні. Це робить доступним вміст бічної панелі але не заважає сторінці з надмірним вмістом.
Приклад 3: Мадам Готьє
Мені також подобається, як мадам Готьє використовує їх “Останні новини” на головній сторінці. Це зрештою падає нижче вмісту, і займає повну позицію перегляду на сторінці.
Майже на кожному веб-сайті буде принаймні одна бічна панель в дизайні. Незалежно від того, чи це бічна панель для всього сайту або просто щось, що відображається на шаблоні сторінки, стиль дизайну пліч-о-пліч популярний тому, що він більше вмісту на екрані.
Це твій вибір як обробляти вміст. Ви можете опустити бокову панель нижче, сховати її взагалі, або використовувати гібрид цих двох методів. Але ви повинні зробити свій вибір на основі релевантності бічної панелі, і його необхідності на сторінку.
Відрегулюйте & Стисніть поля
Там завжди буде точка, де вміст не можна стискати будь-який подальший, і один розділ повинен опуститься нижче іншого.
До коригування полів перед тим, як знизити вміст сторінки, ви даєте читачам широкий вибір вмісту.
Приклад 1: Один світ
Нижній колонтитул на One World є прекрасним прикладом. Це має посилання на нижній колонтитул сайту право з форма реєстрації електронної пошти ліворуч.
Як змінюється розмір розміщення, поля та прокладки між цими елементами стискаються. Стовпці посилання зблизитися, і форма реєстрації стає трохи менше, теж.
Минувши певний момент, це просто має сенс скиньте посилання під формою реєстрації, і дайте колонтитул багато місця для дихання.
Так, це робить сторінку довшою, і так, потрібно більше зусиль, щоб прокрутити вниз так далеко, але на цих менших точках перемикання можна припустити, що користувачі на вертикально орієнтованих пристроях.
Приклад 2: Золоті острови
Іншим прикладом, який я люблю, є головна сторінка Золотих островів з її унікальний стиль навігації. При зміні розміру вікна браузера навігаційні посилання стиснути разом. Зрештою вони перерва з однієї лінії на два ряди, а потім вниз на стовпці з найменшим розміром.
Інші елементи на сторінці слідуйте тій же схемі. Цей приклад демонструє силу Росії зміна розмірів полів перед тим, як повністю переставити макет.
Вертикальний потік на менших екранах
Вміст сторінки має бути потік природно, і вертикальне вирівнювання має сенс на мобільному телефоні. Це означає, що потрібно враховувати блоки вмісту сторінки відповідно оновити стиль вмісту. Це включає абзаци, заголовки, цикли блоків, невпорядковані списки, а також вікна спеціального вмісту.
Приклад 1: BodyBuilding.com Один пост
Візьміть для прикладу цей пост BodyBuilding, який використовує невеликі коробки щоб демонструвати різні тренування з глютену.
Ці коробки включають мініатюри з правого боку продемонструвати вправу. На менших екранах ці мініатюри розбиваються на новий рядок, і врешті-решт укладайте один на одного.
Ваш чуйний CSS повинен враховувати ці дрібні деталі для кожної сторінки веб-сайту.
Приклад 2: Ярмарок марнославства
Для більшого прикладу перевірте домашню сторінку Fair Fair, яка повністю переставляє повзунок історії. На повноекранному робочому столі розповіді описують заголовки з одним зображенням, що показується в бік. Оскільки розмір веб-переглядача зменшується, цей розділ переліку найпопулярніших стає розсувним каруселем.
Сам інтерфейс повністю змінюється шляхом додавання навігації точок, стрілок і зображень для кожного матеріалу у списку. Їх повноекранний список статей більше “вертикальні”, але цей макет більш складний для роботи на екрані мобільного пристрою, тому зміна його на розсувний карусель є кращим варіантом.
Подумайте більше про потік користувача замість потоку вмісту. Вміст не завжди потрібно примушувати вертикальне розташування на маленькому екрані. Просто подумайте, як організувати вміст таким чином підтримує вертикальний досвід перегляду.
Замикаючі думки
Чуйний дизайн має важливе значення в ці дні, і кожен веб-дизайнер і розробник повинні розуміти, як він працює. Відвідувачі очікують, що всі сайти будуть мобільний. Всякий раз, коли я натрапляю на невідповідний веб-сайт, я здригаюся, бачачи цю горизонтальну смугу прокручування.
Дотримуйтесь підказок у цій публікації планування стратегій розробки змісту змісту для найкращого користування на всіх пристроях.
