Sådan Planlægger Content Arrangement For Responsive Design

I en nylig indlæg diskuterede jeg hvordan visuelt indhold forholder sig til layout design. Men dette emne er meget detaljeret og splinter ud i mange underemner, hvoraf den ene er visuel organisation for responsive layouts.

I dette indlæg vil jeg gerne dybere dybere ind i lydhørigt indhold for at se nogle gode metoder til Omlægning af indhold til mindre skærme. I UI & UX design er der ikke noget enkelt svar for hvert projekt, men der er Trends, der fungerer godt, og fra disse tendenser kan du bygge dine egne ideer.

Omstil grids til lister

Hvert websted bruger en eller anden type net, om det er synligt eller ej. Indhold i et solidt netværk samler ofte sammen horisontalt på bredere skærme, men det giver ikke mening på mindre enheder. Det bedste middel er at nedbryde disse net på mindre skærme, og konvertere elementerne til lister.

Eksempel 1: Wellington City Council

Se på hjemmesiden for Wellington City Council, der bruger en række gitter-stil sektioner på hjemmesiden.

Der er et lille lysbilledshow med firkantede links som reducerer som browservinduet ændres. Fodersektionen også bliver mindre, og til sidst konverterer til en lodret liste over links.

På meget små telefoner med 320 px bredde skal du designe for enhedsstørrelsen. I tilfælde af en iPhone er enheden højere end bredere, så det giver mening at arrangere indhold på den måde.

Eksempel 2: Mooyah Burgere

Se på hjemmesiden for Mooyah, og prøv at ændre størrelsen på layoutet. Der er et lille diasshowområde, der indeholder tre genstande på en skærm, men dette krymper ned at kun vise ét element på mobilen (tilføjer flere skjulte dias til widgeten).

De to reklamekasser, der reklamerer for Mooyah app & menuen, forbliver fast side om side indtil skærmen bliver lille nok at omarrangere dem lodret.

Det “Forbindelse med os!” Afsnit omarrangerer også indholdet, så hver social post får så meget plads som muligt. Generelt er widescreen skærme den bredeste, og smartphone skærme er den højeste.

Eksempel 3: Tema Marked

Når du designer et layout med et gitter, bør du overveje både brede og lange layout stilarter før du skriver en enkelt kode kode. På denne måde vil du være parat til bygge breakpoints, der giver mening.

En side med et fuldt grid layout skal reducere størrelsen af ​​bokse før de brydes på en ny linje. For eksempel har temamarkedet en fast maksimal bredde af 1240, og gitteret indeholder fire blokke pr. række.

Da skærmen bliver mindre disse blokke reducere i bredden, men i sidste ende sammenbrud til Forlad tre kasser pr. række. Ved den mindste størrelse får du en boks pr. Række, og den har masser af plads til tekst og billedsprog til at skinne.

Der er altid en balance i holde så meget information i udsigt som muligt kombineret med behovet for gøre tekst læselig. Jo mere du bygger gitterlayouts, jo lettere bliver det at finde dette balance af indholdsarrangementet.

Skjul eller fjern kolonner

Bredere skærme og mere browser support tillade udviklere at opbygge utroligt komplekse layouter. Jeg ser ofte blogs med tre eller endda fire kolonner der optager en god del af skærmen.

Men mindre enheder har brug for en indholdsstrøm der giver mening vertikalt. Jeg har fundet to muligheder for håndtering af overdreven sidebjælker:

1. Drop dem under hovedindholdet
2. Skjul dem helt

Eksempel 1: Stop tryk

Tag et kig på Stop Press-webstedet. Det har fire lodrette søjler på min stationære skærm.

Den venstre kolonne er en lodret nav menu, den næste kolonne er hovedindholds kolonnen med de seneste artikler. Derefter har vi to forskellige sidebjælke kolonner overfyldt med ekstra “til side” indhold.

Som browservinduet ændres, disse kolonner reducere langsomt i størrelse. Den første til at gå er den venstre navigation, der bliver gemt bag et hamburger menuikon.

Det næste breakpoint gemmer midtkolonnen sammen med de øverste sociale delingsknapper. Så til sidst på de mindste skærme forsvinder langt højre sidebjælke helt forlader bare den primære center kolonne af indholdet.

Intet af sidebjælkens indhold vises under hovedindholdet. Det er helt skjult fra visning, og dette er et helt acceptabelt valg til reducer sidebelastningen og for at holde rullehøjden i en anstændig størrelse.

På den anden side mange blogs Flyt sidebjælken under hovedindholdet lignende på Concept Art Empire, som indeholder relaterede indlæg i sidebjælken, som i sidste ende slip under indholdet.

Eksempel 2: Wishpond Blog

The Wishpond Blog også fjerner helt sidepanelet fra skærmen på mindre viewports. Dette sidebjælkeområde indeholder typisk reklame, tilmeldingsskemaer og relaterede postlinks. Intet af dette indhold er afgørende, men det kan øge værdien for besøgende.

Jeg kan godt lide at følge a hybrid tilgang hvor jeg flytter sidebjælken under indholdet, men også skjul et par punkter i sidepanelet forbi et bestemt brudpunkt.

Hvis jeg f.eks. Har tre annonceblokke i det fulde layout, kan jeg gemme to af disse annoncepladser på mobilen. Dette gør indholdet af sidefeltet tilgængeligt men Roter ikke op på siden med for stort indhold.

Eksempel 3: Madame Gautier

Jeg kan også lide hvordan Madame Gautier bruger deres “Seneste nyt” sidebjælke på startsiden. Det til sidst falder under indholdet, og optager en fuld synsposition på siden.

Næsten hver hjemmeside vil have mindst et sidebar i designet. Uanset om dette er et sidebillede sidebjælke eller bare noget der vises på en sideskabelon, vil side ved side design stil er populær fordi det passer til mere indhold på skærmen.

Det er dit valg hvordan man håndterer indholdet. Du kan droppe sidebjælken lavere, skjule det helt eller bruge en hybrid af disse to teknikker. Men du bør gøre dit valg baseret på sidebarets relevans, ogdet er nødvendighed til siden.

Juster & Klem marger

Der vil altid være et punkt hvor indhold kan ikke presses yderligere, og et afsnit skal slip under den anden.

Ved justering af margener før du sænker indholdet på siden, giver du læsere en bredere bredde af indhold at vælge.

Eksempel 1: En verden

Fodbolden på One World er et godt eksempel. Det har sitewide footer links floated højre med en email tilmeldingsformular til venstre.

Efterhånden som layoutet ændres, krympes margenerne og paddlingerne mellem disse elementer. Linket kolonner Kom tættere sammen, og tilmeldingsformularen bliver lidt mindre, også.

For et bestemt punkt er det bare fornuftigt at slip linkene under tilmeldingsformularen, og giv fodfoden masser af plads til at trække vejret.

Ja, det gør siden længere, og ja det kræver mere kræfter at rulle ned så langt, men på disse mindre breakpoints kan man antage, at brugerne er på vertikalt orienterede enheder.

Eksempel 2: Golden Isles

Et andet eksempel jeg elsker er Golden Isles hjemmeside med sin unik navigationsstil. Når du ændrer størrelsen på browservinduet, linker navet klemme sammen. Til sidst de bryde fra en enkelt linje Ind i to rækker, så ned i kolonner i den mindste størrelse.

Andre emner på siden følg det samme mønster. Dette eksempel demonstrerer kraften af størrelsesmarginaler før helt omarrangere layoutet.

Lodret flow på mindre skærme

Sidens indhold skal flyde naturligt, og lodret justering giver mening på mobilen. Det betyder, at du skal overveje indholdsblokke på siderne Opdater indholdsstilen i overensstemmelse hermed. Dette omfatter afsnit, overskrifter, blokeringer, uordnede lister og også brugerdefinerede indholdskasser.

Eksempel 1: BodyBuilding.com Single Post

Tag for eksempel dette BodyBuilding-indlæg som bruger små bokse at vise frem forskellige glute træningsprogrammer.

Disse felter inkluderer miniaturer på højre side at demonstrere øvelsen. På mindre skærme, disse miniaturebilleder bryde ned på en ny linje, og til sidst stable oven på hinanden.

Din responsive CSS bør tage denne lille minutiae i betragtning for hver side af hjemmesiden.

Eksempel 2: Vanity Fair

For et større eksempel, tjek den Forfængelighed Fair hjemmeside som fuldstændig omarrangerer den fremhævede historie skyder. På et fuldskærms skrivebord er historiklisten overskrifter med et udvalgt billede, der viser til siden. Da browseren ændrer mindre, er denne top-historik sektion bliver en glidende karrusel.

Interfacet selv helt ændres ved at tilføje priknavigation, pile og fremhævede billeder for hver historie i listen. Deres fuldscreen liste over artikler er mere “lodret”, men dette layout er vanskeligere at betjene på en mobil skærm, så det er en bedre løsning at skifte det til en glidende karrusel.

Tænke mere om brugerens flow snarere end din indholdsstrøm. Indhold behøver ikke altid at blive tvunget til et lodret layout på lille skærm. Tænk bare på, hvordan man organiserer indhold på en sådan måde understøtter en vertikal browsing oplevelse.

Afsluttende tanker

Responsivt design er afgørende i disse dage, og hver webdesigner og udvikler skal forstå, hvordan det virker. Besøgende forventer, at alle hjemmesider skal være mobilvenlige. Når jeg snuble på et ikke-lydhurt websted, kryber jeg ved synet af den vandrette rullebjælke.

Følg tipsene i dette indlæg til planlægning design strategier til at omarrangere indhold for den bedst mulige brugeroplevelse på alle enheder.