Како планирати уређење садржаја за одговарајући дизајн

У недавном посту сам дискутовао о томе визуелни садржај односи се на распоред дизајн. Међутим, ова тема је веома детаљна, и расцјепкана на многе под-теме, од којих је једна визуелна организација за одговарајући распоред.

У овом посту, желио бих се дубље упустити у одговарајући садржај како бих погледао неке најбоље праксе за преуређивање садржаја за мање екране. У УИ и УКС дизајну, не постоји један прави одговор за сваки пројекат, али постоје трендови који добро функционишу, и из ових трендова можете изградити своје идеје.

Преуредите Гридс то Листс

Сваки сајт користи неку врсту мреже било да је видљива или не. Садржај у чврстој мрежи често се групише хоризонтално на ширим мониторима, али то нема смисла на мањим уређајима. Најбољи лек је да се те мреже распадају на мањим екранима и претворите ставке у листе.

Пример 1: Градско вијеће Велингтона

Погледајте веб страницу Градског вијећа Велингтона која користи одређени број секције у облику мреже на почетној страници.

Постоји мали слидесхов квадратних веза смањује промени величине прозора прегледача. Одељак подножја такође постаје мања, и на крају претвара у вертикалну листу веза.

На веома малим телефонима ширине 320пк потребно је дизајнирати величину уређаја. У случају иПхоне уређаја, уређај је виши него шири па има смисла тако уређивати садржај.

Пример 2: Мооиах Бургерс

Погледајте почетну страницу Мооиах-а и покушајте да промените величину распореда. Постоји мала област слајдова која садржи три ставке на екрану радне површине, али ово смањује се да бисте приказали само једну ставку на мобилном уређају (додавање више скривених слајдова у виџет).

Две промотивне кутије за рекламирање Мооиах апликације и менија остају фиксиране једна уз другу док екран не постане довољно мали да их преуредите вертикално.

Тхе “Повежите се са нама!” Одјељак такођер прерасподјељује садржај тако да свака друштвена пошта добија што више простора. Генерално говорећи, монитори са широким екраном су најшири, а екрани паметних телефона су највиши.

Пример 3: Тематско тржиште

Приликом дизајнирања распореда са решетком, размислите широке и високе стилове распореда пре писања једне линије кода. Овако ћете бити спремни правите тачке прекида које имају смисла.

Страница са пуним распоредом мреже смањите величину кутија пре него што их разбијете на нову линију. На пример, Тхеме Маркет има а фиксна максимална ширина 1240, и мрежа садржи четири блока по реду.

Како се екран смањује, ови блокови смањите ширину, али је на крају слом до оставите три кутије по реду. У најмањој величини, добијате једну кутију по реду, и то има доста простора да би текст и слике биле сјајне.

Увек постоји равнотежа чување што је могуће више информација у комбинацији са потребом учинити текст читљивим. Што више градите решетке, то ћете лакше пронаћи балансирање садржаја.

Сакриј или уклони колоне

Шири монитори и више подршке за прегледач омогућити програмерима да изграде невероватно сложене изгледе. Често видим блогове са три или чак четири ступца који заузимају добар део екрана.

Међутим, мањим уређајима је потребан проток садржаја има смисла вертикално. Нашао сам две опције руковање претераним бочним тракама:

1. Баци их испод главног садржаја
2. Сакријте их

Пример 1: Заустави Притисните

Погледајте веб страницу Стоп Пресс. Има четири вертикалне колоне на мом десктоп монитору.

Лева колона је вертикални мени, следећа колона је главна колона садржаја са скорашњим чланцима. Тада имамо два различита ступца бочне траке који преплављују екстра “у страну” садржаја.

Како се прозор прегледника мијења, ови ступци полако смањити у величини. Први који треба да иде је лева навигација која се скрива иза иконе менија хамбургера.

Следећа тачка прекида скрива средњу колону заједно са врхом друштвених дугмади за дељење. На крају на најмањим екранима, крајњи десни бочни трак потпуно нестаје остављајући само примарну централну колону садржаја.

Ни један садржај бочне траке не појављује се испод главног садржаја. Његово потпуно скривен од погледа, и то је савршено прихватљив избор смањите оптерећење странице и да задржите висину клизача на пристојној величини.

С друге стране, многи блогови померајте бочну траку испод главног садржаја Као и на Цонцепт Арт Емпире-у, који на крају има повезане постове у сидебар-у спустите испод садржаја.

Пример 2: Блог са одговором

Тхе Висхпонд Блог алсо потпуно уклања бочну траку са екрана на мањим прозорима. Ова област бочне траке обично садржи рекламе, обрасце за пријаву и повезане линкове за постове. Ниједан од ових садржаја није од виталног значаја, али може додати вриједност посјетитељима.

Волим да следим а хибридни приступ где померам бочну траку испод садржаја, али и сакријем неколико ставки у бочној траци поред одређене тачке прекида.

На пример, ако имам три блока огласа у пуном распореду, могу да сакријем два од тих огласних простора на мобилном уређају. Ово чини садржај бочне траке приступачним али не гужва страницу са претераним садржајем.

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

Такође ми се свиђа како Мадаме Гаутиер користи њихову “Најновије вести” на почетној страници. То на крају пада испод садржаја, и заузима пуну позицију на страници.

Скоро свака веб страница ће имати барем један сидебар у дизајну. Без обзира да ли је то бочна трака за читаву локацију или само нешто што се појављује на предлошку странице, стил дизајна један поред другог је популаран због тога одговара више садржаја на екрану.

То је твој избор како се носити са садржајем. Можете спустити бочну траку ниже, потпуно је сакрити, или користити хибрид ове две технике. Али би требало да одаберете на основу релевантности бочне траке, и његове нужност на страницу.

Подесите и исциједите маргине

Увек ће бити места где садржај се не може стиснути даље, и један део треба падни испод другог.

Од стране подешавање маргина пре него што смањите садржај на страници, читаоцима дајете ширу ширину садржаја.

Пример 1: Један свет

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

Како се распоред мења, маргине и паддови између ових елемената се смањују. Ступци везе приближите се, и образац за пријаву постаје мало мањи, такође.

Прошла је одређена тачка, има смисла спустите линкове испод обрасца за пријаву, и дати подножје доста простора за дисање.

Да, то чини страницу дужом, и да, потребно је више труда да се помакнете доље тако далеко, али на тим малим точкама прекида можете претпоставити да су корисници на вертикално оријентисаним уређајима.

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

Још један примјер који волим је почетна страница Голден Ислес са својом јединствени стил навигације. Када промените величину прозора претраживача, нав линкови стисни заједно. На крају они пауза од једне линије у два реда, а затим у колоне у најмањој величини.

Остале ставке на страници пратите исти образац. Овај пример показује моћ промена марже пре него што потпуно преуредите распоред.

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

Садржај странице треба проток природно, и вертикално поравнање има смисла на мобилном. То значи да морате да размотрите блокове садржаја на страници у складу са тим ажурирајте стил садржаја. То укључује параграфе, заглавља, блокове, неуређене листе, као и кутије прилагођеног садржаја.

Пример 1: БодиБуилдинг.цом Сингле Пост

Узмимо за пример овај пост БодиБуилдинг који користи мале кутије показати различите глуте тренинге.

Ове кутије укључују минијатуре на десној страни демонстрирати вјежбу. На мањим екранима, ове сличице сломите се на нову линију, и на крају наслагати један на други.

Ваш одговарајући ЦСС треба да узме у обзир ову ситницу у свакој страници веб сајта.

Пример 2: Сајам Ванити

За већи пример, погледајте почетну страницу Ванити Фаир-а која потпуно преуређује клизач истакнуте приче. На десктопу преко целог екрана, приче наводе наслове са једном истакнутом сликом која се приказује са стране. Будући да прегледач мења мању величину, овај одељак са најбољим причама постаје клизни карусел.

Сам интерфејс потпуно се мења додавањем тачке навигације, стрелица и приказаних слика за сваку причу на листи. Њихова комплетна листа чланака је више “вертикала”, али овај распоред је тежи за рад на мобилном екрану, тако да је промена у клизни карусел боља опција.

Мисли више о току корисника радије него проток садржаја. Садржај не мора увек бити присиљен на вертикални распоред на малом екрану. Размислите само о томе како да организујете садржај на такав начин подржава вертикално прегледавање.

Цлосинг Тхоугхтс

Одговарајући дизајн је од суштинског значаја ових дана, и сваки веб дизајнер и програмер би требало да разумеју како функционише. Посетиоци очекују да ће сви сајтови бити мобилне. Кад год наиђем на не-одговарајући вебсајт, згрчим се при виђењу тог хоризонталног клизача.

Следите савете за овај пост планирање дизајнерских стратегија за прерасподелу садржаја за најбоље могуће корисничко искуство на свим уређајима.