Hur man planerar innehållsordning för responsiv design

I ett nyligen inlägg diskuterade jag hur visuellt innehåll relaterar till layout design. Emellertid är detta ämne väldigt detaljerat och splittras i många delämnen, varav en är visuell organisation för lyhörda layouter.

I det här inlägget vill jag dyka djupare in i responsivt innehåll för att titta på några bra metoder för Omarrangera innehåll för mindre skärmar. I UI & UX-design finns det inget enda rätt svar för varje projekt men det finns trender som fungerar bra, och från dessa trender kan du bygga dina egna idéer.

Rearrange Grids to Lists

Varje hemsida använder någon typ av nät om det är synligt eller inte. Innehåll i ett solidt nätverk samlar ofta ihop horisontellt på bredare bildskärmar, men det är inte meningsfullt om mindre enheter. Det bästa sättet är att bryta ner dessa nät på mindre skärmar, och konvertera objekten till listor.

Exempel 1: Wellington kommunfullmäktige

Ta en titt på webbplatsen för Wellington City Council som använder ett antal rasterformade sektioner på hemsidan.

Det finns ett litet bildspel av fyrkantiga länkar som minskar som webbläsarfönstret ändras. Sidfoten också blir mindre, och slutligen konverterar till en vertikal länklista.

På mycket små telefoner med 320px bredd måste du designa för enhetens storlek. När det gäller en iPhone är enheten längre än bredare, så det är vettigt att ordna innehåll på så sätt.

Exempel 2: Mooyah Burgers

Ta en titt på Mooyahs hemsida och försök att ändra storlek på layouten. Det finns ett litet bildspelsområde som innehåller tre objekt på en skrivbordsskärm, men det här krymper ner att visa bara ett objekt på mobilen (lägger till fler dolda bilder i widgeten).

De två presentförpackningarna som annonserar Mooyah app & menyn hålls fast sida vid sida tills skärmen blir tillräckligt liten att omordna dem vertikalt.

De “Anslut dig till oss!” avsnittet omarrangerar också innehållet så att varje socialt inlägg får så mycket utrymme som möjligt. Generellt sett är widescreen-skärmar bredast och smarttelefonens skärmar är de högsta.

Exempel 3: Temamarknad

När du utformar en layout med ett rutnät, bör du överväga både breda och långa layout stilar innan du skriver en enda kodrad. På så sätt kommer du vara beredd att bygga brytpunkter som är meningsfulla.

En sida med en fullständig rutnätlayout ska minska storleken på lådor innan de bryts på en ny linje. Tema marknaden har till exempel en fast max bredd av 1240, och gallret innehåller fyra kvarter per rad.

Eftersom skärmen blir mindre dessa block minska i bredd, men till sist bryta ner till lämna tre rutor per rad. Vid den minsta storleken får du en ruta per rad, och den har gott om utrymme för text och bildspråk att skina.

Det finns alltid en balans mellan hålla så mycket information i sikte som möjligt kombinerat med behovet av gör textläsbar. Ju mer du bygger gridlayouts desto lättare blir det att hitta det här balans av innehållsarrangemang.

Dölj eller ta bort kolumner

Bredare bildskärmar och mer webbläsare support tillåta utvecklare att bygga otroligt komplexa layouter. Jag ser ofta bloggar med tre eller till och med fyra kolumner som tar upp en bra del av skärmen.

Men mindre enheter behöver ett innehållsflöde som är förnuftigt vertikalt. Jag har hittat två alternativ för hanterar alltför stora sidor:

1. Släpp dem under huvudinnehållet
2. Dölj dem helt och hållet

Exempel 1: Stopp Tryck

Ta en titt på Stop Press-webbplatsen. Det har fyra vertikala kolumner på min skrivbordsskärm.

Den vänstra kolumnen är en vertikal nav-meny, nästa kolumn är huvudinnehållskolumnen med de senaste artiklarna. Sedan har vi två olika sidofältskolumner som överflödar med extra “åt sidan” innehåll.

När webbläsarfönstret ändras, är dessa kolumner sakta minska i storlek. Den första att gå är den vänstra navigeringen som blir dold bakom en hamburger menyikon.

Nästa brytpunkt döljer mellanspalten tillsammans med de övre sociala delningsknapparna. Då äntligen på de minsta skärmen, försvinner den högra högra sidofältet helt lämnar bara den primära mittkolonnen av innehållet.

Inget av sidfältets innehåll visas under huvudinnehållet. Dess helt dold från utsikten, och detta är ett helt acceptabelt val till minska sidbelastningen och för att hålla rullehöjden i en anständig storlek.

Å andra sidan många bloggar flytta sidfältet under huvudinnehållet som på Concept Art Empire som innehåller relaterade inlägg i sidofältet som så småningom släpp under innehållet.

Exempel 2: Wishpond Blog

The Wishpond Blog också tar helt bort sidofältet från skärmen på mindre visningar. Det här området innehåller typiskt annonsering, anmälningsformulär och relaterade postlänkar. Inget av innehållet är avgörande men det kan ge värde till besökare.

Jag gillar att följa a hybridinflygning där jag flyttar sidofältet under innehållet, men också gömmer några föremål i sidofältet förbi en viss brytpunkt.

Om jag till exempel har tre annonsblock i hela layouten kan jag gömma två av dessa annonsutrymmen på mobilen. Detta gör sidfältet tillgängligt men rubbar inte upp sidan med överdriven innehåll.

Exempel 3: Madame Gautier

Jag gillar också hur Madame Gautier använder sina “Senaste nytt” sidofält på hemsidan. Det så småningom faller under innehållet, och tar upp en hel vy på sidan.

Nästan varje webbplats kommer att ha minst ett sidofält i designen. Oavsett om det här är en sidovägg eller bara något som visas på en sidmall, så sida vid sida design stil är populär eftersom den passar mer innehåll på skärmen.

Det är ditt val hur man hanterar innehållet. Du kan släppa sidobalken lägre, gömma det helt eller använd en hybrid av dessa två tekniker. Men du borde göra ditt val baserat på sidoriktens relevans, och dess nödvändighet till sidan.

Justera & Squeeze Margins

Det kommer alltid att finnas en punkt där Innehållet kan inte pressas något ytterligare, och en sektion behöver fall under den andra.

Av justering av marginaler innan du sänker innehållet på sidan ger du läsare en bredare innehållsbredd att välja.

Exempel 1: En värld

Footer på One World är ett bra exempel. Det har sitewide footer länkar floated höger med en E-postformulär till vänster.

När layouten ändras, krympas marginalerna och paddningarna mellan dessa element. Länkkolumnerna komma närmare varandra, och registreringsformuläret blir lite mindre, för.

Förbi en viss punkt är det bara meningsfullt att släpp länkarna under registreringsformuläret, och ge sidfoten gott om utrymme att andas.

Ja, det gör sidan längre och ja det tar mer ansträngning att rulla ner så långt, men vid dessa mindre brytpunkter kan man anta att användarna är på vertikalt orienterade enheter.

Exempel 2: Gyllene öar

Ett annat exempel jag älskar är Golden Islands hemsida med dess unik navigeringsstil. När du ändrar webbläsarfönstret länkar naven klämma ihop. Till slut de bryta från en enda linje i två rader, sedan ner i kolumner med den allra minsta storleken.

Övriga föremål på sidan följ samma mönster. Detta exempel visar kraften hos resizing marginaler innan du omplacerar layouten helt.

Vertikal flöde på mindre skärmar

Sidinnehållet ska flödar naturligt, och vertikal anpassning är smart på mobilen. Det betyder att du måste överväga innehållsblock på sidan uppdatera innehållsstilen i enlighet med detta. Detta inkluderar punkter, rubriker, blockquotes, oorderade listor och även anpassade innehållsrutor.

Exempel 1: BodyBuilding.com Single Post

Ta till exempel denna BodyBuilding-post som använder små lådor att visa upp olika glute träningspass.

Dessa lådor inkluderar miniatyrer på höger sida att demonstrera övningen. På mindre skärmar, dessa miniatyrbilder bryta ner på en ny linje, och slutligen stack ovanpå varandra.

Din lyhörda CSS bör ta hänsyn till denna lilla minutiae för varje sida på webbplatsen.

Exempel 2: Vanity Fair

För ett större exempel, kolla in Vanity Fair hemsida som helt omarrangerar den featuredhistoriska reglaget. På en helskärmsdator skrivs historiklistan med en bild som visas till sidan. Eftersom webbläsaren ändrar mindre, berättar den här avsnittet över historier blir en glidande karusell.

Gränssnittet själv ändras helt genom att lägga till punkteringsnavigering, pilar och presenterade bilder för varje historia i listan. Deras fullskärmslista med artiklar är mer “vertikal”, men den här layouten är svårare att använda på en mobil skärm, så att byta den till en glidande karusell är ett bättre alternativ.

Tror mer om användarens flöde snarare än ditt innehållsflöde. Innehåll behöver inte alltid tvingas till en vertikal layout på liten skärm. Tänk bara på hur man organiserar innehåll på ett sätt som stöder en vertikal surfupplevelse.

Slutsatser

Responsiv design är viktigt idag, och varje webbdesigner och utvecklare ska förstå hur det fungerar. Besökare förväntar sig att alla webbplatser ska vara mobil vänliga. När jag snubblar på en icke-mottaglig webbplats kryper jag vid syn på den horisontella rullningsfältet.

Följ tipsen i det här inlägget för planeringsdesignstrategier för att omorganisera innehållet för bästa möjliga användarupplevelse på alla enheter.