Как да планирате Съгласуване на съдържанието за реагиращ дизайн

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

В тази публикация бих искал да задълбавам по-дълбоко в отзивчивото съдържание, за да разгледам някои най-добри практики за пренареждане на съдържанието за по-малки екрани. В дизайна на UI & UX не съществува единен правилен отговор за всеки проект, но има тенденции, които работят добре, и от тези тенденции можете да изградите свои собствени идеи.

Пренаредете решетките към списъци

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

Пример 1: Градски съвет на Уелингтън

Разгледайте уебсайта на Градския съвет на Уелингтън, който използва няколко секции, оформени в мрежа на началната страница.

Има малко слайдшоу на квадратни връзки намалява променя размера на прозореца на браузъра. Секцията на долния колонтитул също става по-малък, и накрая преобразува във вертикален списък с връзки.

На много малки телефони с ширина 320px трябва да проектирате за размера на устройството. В случай на iPhone устройството е по-високо от по-широк, така че има смисъл да подредите съдържанието по този начин.

Пример 2: Mooyah Burgers

Обърнете внимание на началната страница на Mooyah и опитайте да преоразмерите оформлението. Има малка област за слайдшоу, която съдържа три елемента на екрана на работния плот, но това свива за показване само на един елемент в мобилното устройство (добавяне на още скрити слайдове в него).

Двете рекламни кутии, които рекламират приложението и менюто Mooyah, остават фиксирани рамо до рамо докато екранът стане достатъчно малък да ги пренареждате вертикално.

Най- “Свържи се с нас!” разделът също така пренарежда съдържанието, така че всяка социална длъжност получава колкото е възможно повече място. Най-общо казано, широкоекранните монитори са най-широки и екраните на смартфоните са най-високите.

Пример 3: Тематичен пазар

Когато проектирате оформление с мрежа, трябва да имате предвид широк и висок стил на оформление преди да напишете един ред код. Така ще бъдете подготвени изграждане на точки за прекъсване, които имат смисъл.

Трябва да има страница с пълна мрежа намали размера на кутиите преди да ги разбие на нов ред. Например, Theme Market има a фиксирана максимална ширина от 1240, и мрежата съдържа четири блока на ред.

Тъй като на екрана става по-малки тези блокове намаляване на ширината, но в крайна сметка съборят да се оставете три кутии на ред. При най-малък размер получавате едно поле на ред и то има много място текстът и изображенията да блестят.

Винаги има баланс запазване на възможно най-много информация в комбинация с необходимостта направете четенето на текст. Колкото повече изграждате мрежови оформления, толкова по-лесно ще ги намерите баланс на съдържанието.

Скриване или премахване на колони

По-широки монитори и повече поддръжка на браузъра позволява на разработчиците да изградят невероятно сложни оформления. Често виждам блогове с три или дори четири колони които заемат голяма част от екрана.

Обаче по-малките устройства се нуждаят от поток от съдържание има смисъл вертикално. Открих две възможности за работа с прекомерни странични ленти:

1. Пуснете ги под основното съдържание
2. Скрийте ги напълно

Пример 1: Стоп натиснете

Разгледайте уебсайта Stop Press. То има четири вертикални колони на десктопа ми.

Лявата колона е вертикално меню, следващата колона е основната колона с последните статии. След това имаме две различни колони в страничната лента, препълнени с допълнителни “настрана” съдържание.

С промяната на прозореца на браузъра тези колони бавно намаляване на размера. Първият, който отиде, е лявата навигация, която се скрива зад иконата на менюто за хамбургер.

Следващата точка на прекъсване скрива средната колона заедно с най-добрите бутони за споделяне на социални контакти. Накрая на най-малките екрани, крайната дясна странична лента напълно изчезва оставяйки само основната централна колона съдържание.

Никое от съдържанията в страничната лента не се показва под основното съдържание. е напълно скрит от погледа, и това е напълно приемлив избор намаляване на зареждането на страницата и да поддържа височината на плъзгача на приличен размер.

От друга страна, много блогове преместете страничната лента под основното съдържание подобно на Concept Art Empire, която впоследствие включва свързани мнения в страничната лента падне под съдържанието.

Пример 2: Блогът Wishpond

Блогът Wishpond също напълно премахва страничната лента от екрана на по-малки екрани. Тази област на страничната лента обикновено съдържа реклами, формуляри за регистрация и сродни връзки за публикации. Никое от тези съдържания не е от жизненоважно значение, но може да добави стойност за посетителите.

Обичам да следвам a хибриден подход където премествам страничната лента под съдържанието, но също така скривам няколко елемента в страничната лента покрай определена точка на прекъсване.

Например, ако имам три рекламни блока в пълното оформление, мога да скрия две от тези рекламни пространства на мобилни устройства. Това прави достъпно съдържанието в страничната лента но не затрупва страницата с прекомерно съдържание.

Пример 3: Мадам Готие

Също така ми харесва как мадам Готие използва техните “Последни новини” страничната лента на началната страница. Това в крайна сметка пада под съдържанието, и заема пълна позиция за преглед на страницата.

Почти всеки уебсайт ще има поне една странична лента в дизайна. Независимо дали това е страничната лента за целия сайт или просто нещо, което се показва на шаблон на страницата, стил в дизайна е популярна, защото тя подхожда на повече съдържание на екрана.

Ти избираш как да се справяте със съдържанието. Можете да изпуснете страничната лента по-ниско, да го скриете напълно или да използвате хибрид от тези две техники. Но вие трябва да направите своя избор въз основа на релевантността на страничната лента, и е необходимост към страницата.

Регулирайте & Стиснете полета

Винаги ще има точка, в която съдържанието не може да бъде притиснато по-нататък, и един раздел трябва падайте под другото.

от коригиране на полетата преди да намалите съдържанието на страницата, вие давате на читателите по-широка гама от съдържание, което да изберете.

Пример 1: Един свят

Краят на One World е чудесен пример. То има страничните връзки на долния колонтитул с право формуляр за регистрация по имейл наляво.

Тъй като размерът на оформлението се променя, полетата и подложките между тези елементи се свиват. Колоните на връзката се сближи, и формуляра за регистрация става малко по-малък, също.

Минавайки определена точка, то просто има смисъл пуснете връзките под формуляра за регистрация, и дайте долния колонтитул много място за дишане.

Да, това прави страницата по-дълга и да, необходимо е повече усилия, за да превъртите надолу толкова далеч, но на тези по-малки прекъсвания можете да приемете, че потребителите са върху вертикално ориентирани устройства.

Пример 2: Златни острови

Друг пример, който обичам, е началната страница на Golden Isles с нейната уникален стил на навигация. Когато преоразмерявате прозореца на браузъра, връзките за навигация стиснете заедно. В крайна сметка те почивка от един ред в два реда, след това надолу в колони с най-малък размер.

Други елементи на страницата следвайте същия модел. Този пример демонстрира силата на преоразмеряване на маржовете преди пълното пренареждане на оформлението.

Вертикален поток на по-малки екрани

Съдържанието на страницата трябва поток естествено, и вертикално подравняване има смисъл в мобилния. Това означава, че трябва да вземете под внимание блоковете със съдържание в страницата съответно обновете стила на съдържанието. Това включва параграфи, заглавия, блокове, неупоменати списъци, както и полета за персонализирано съдържание.

Пример 1: Единична публикация в BodyBuilding.com

Вземете например този пост на BodyBuilding, който използва малки кутии да покаже различни тренировки с приплъзване.

Тези кутии включват миниатюри отдясно да демонстрира упражнението. На по-малки екрани, тези миниатюри прекъсване на нов ред, и накрая стека един върху друг.

Вашият отзивчив CSS трябва да вземе под внимание тази малка подробност за всяка страница на уебсайта.

Пример 2: Панаир за суета

За по-голям пример проверете началната страница на панаир за суетност, която напълно пренарежда плъзгача на представената история. На десктоп на цял екран историите съдържат заглавия с едно изображение, което се показва отстрани. Тъй като браузърът преоразмерява по-малък размер, този раздел с най-важните истории става плъзгаща се въртележка.

Самият интерфейс напълно се променя чрез добавяне на навигация с точки, стрелки и изображения за всяка история в списъка. Техният пълен списък на статии е повече “вертикален”, но това оформление е по-сложно за работа на мобилен екран, така че превръщането му в плъзгащ въртележка е по-добър вариант.

Мисля повече за потока на потребителя по-скоро от потока от съдържание. съдържание не винаги трябва да се налага във вертикално положение на малък екран. Просто помислете как да организирате съдържанието по такъв начин поддържа вертикално сърфиране.

Заключителни мисли

Отзивчивият дизайн е от съществено значение в наши дни и всеки уеб дизайнер и разработчик трябва да разберат как работи. Посетителите очакват всички уебсайтове да бъдат удобна за мобилни устройства. Всеки път, когато се препъвам в неотговарящ на уебсайта уебсайт, се свивам при вида на този хоризонтален плъзгач.

Следвайте съветите в тази публикация за планиране на стратегии за проектиране за пренареждане на съдържанието за най-доброто потребителско изживяване на всички устройства.