Slik planlegger innholdsordning for responsiv design
I et nylig innlegg diskuterte jeg hvordan visuelt innhold Relaterer til Layout design. Men dette emnet er svært detaljert, og splinter av i mange underemner, hvorav en er visuell organisasjon for responsive oppsett.
I dette innlegget vil jeg gjerne dykke dypere inn i responsivt innhold for å se på noen gode fremgangsmåter for Omarrangere innhold for mindre skjermer. I UI og UX-design er det ikke noe enkelt svar for hvert prosjekt, men det er trender som fungerer bra, og fra disse trendene kan du bygge dine egne ideer.
Omstil Grids To Lists
Hvert nettsted bruker en eller annen type grid om den er synlig eller ikke. Innhold i et solidt nettverk samler ofte sammen horisontalt på bredere skjermer, men dette gir ikke mening på mindre enheter. Det beste middelet er å bryte ned disse nettene på mindre skjermer, og konverter elementene til lister.
Eksempel 1: Wellington byråd
Ta en titt på nettstedet til Wellington City Council som bruker en rekke rutenettformede seksjoner på hjemmesiden.
Det er en liten lysbildefremvisning av firkantede lenker som reduserer som nettleservinduet endres. Fotenavsnittet også blir mindre, og etterhvert konverterer til en vertikal liste over lenker.
På svært små telefoner med 320px bredde må du designe for enhetsstørrelsen. I tilfelle av en iPhone er enheten høyere enn bredere, så det er fornuftig å ordne innhold på den måten.
Eksempel 2: Mooyah Burgere
Ta en titt på hjemmesiden for Mooyah, og prøv å endre størrelsen på oppsettet. Det er et lite lysbildeserieområde som inneholder tre elementer på en skjerm, men dette krymper ned for å vise bare ett element på mobilen (legger til flere skjulte lysbilder til widgeten).
De to reklameboksene som annonserer Mooyah app & menyen, holdes fast side ved side til skjermen blir liten nok å omorganisere dem vertikalt.
De “Koble til oss!” delen omarrangerer også innhold slik at hvert sosialt innlegg får så mye plass som mulig. Generelt sett er widescreen-skjermer bredest, og smarttelefonene er de høyeste.
Eksempel 3: Temamarked
Når du designer en layout med et rutenett, bør du vurdere både brede og lange layout stiler før du skriver en enkelt linje med kode. På denne måten vil du være forberedt på bygge breakpoints som gir mening.
En side med et fullstendig gridoppsett bør redusere størrelsen på boksene før de bryter dem på en ny linje. For eksempel har temamarkedet en fast maksimal bredde av 1240, og rutenettet inneholder fire blokker per rad.
Da skjermen blir mindre disse blokkene redusere i bredden, men til slutt sammenbrudd til la tre bokser per rad. I den minste størrelsen får du en boks per rad, og den har god plass for tekst og bilder å skinne.
Det er alltid en balanse mellom holder så mye info i sikte som mulig kombinert med behovet for gjør tekstleselig. Jo mer du bygger gridoppsett, desto lettere blir det å finne dette balanse av innholdsarrangement.
Skjul eller fjern kolonner
Bredere skjermer og mer nettleserstøtte la utviklere bygge utrolig komplekse layouter. Jeg ser ofte blogger med tre eller til og med fire kolonner som tar opp en god del av skjermen.
Men mindre enheter trenger en innholdsstrøm som gir mening vertikalt. Jeg har funnet to alternativer for håndtering av overdreven sidebjelker:
- Slett dem under hovedinnholdet
- Skjul dem helt
Eksempel 1: Stopp Trykk
Ta en titt på Stop Press-nettsiden. Det har fire vertikale kolonner på min stasjonære skjerm.
Den venstre kolonnen er en vertikal nav-meny, neste kolonne er hovedinnholds-kolonnen med nyere artikler. Deretter har vi to forskjellige sidebar kolonner overfylt med ekstra “side” innhold.
Når nettleservinduet endres, blir disse kolonnene sakte redusere i størrelse. Den første til å gå er den venstre navigasjonen som blir skjult bak et hamburger menyikon.
Det neste brytepunktet skjuler midtkolonnen sammen med de øverste sosiale delingsknappene. Så til slutt på de minste skjermene forsvinner langt høyre sidebjelke helt forlater bare den primære senterkolonnen av innholdet.
Ingen av innholdet på sidefeltet vises under hovedinnholdet. Det er helt skjult for visning, og dette er et helt akseptabelt valg til reduser sidelast og å holde rullehøyden i en anstendig størrelse.
På den annen side, mange blogger Flytt sidefeltet under hovedinnholdet som på Concept Art Empire, som inneholder relaterte innlegg i sidebjelken som til slutt slipp under innholdet.
Eksempel 2: Wishpond Blog
The Wishpond Blog også fjerner helt sidepanelet fra skjermen på mindre visninger. Dette sidebarområdet inneholder vanligvis annonsering, påmeldingsskjemaer og relaterte innleggslinker. Ingen av innholdet er viktig, men det kan gi verdier til besøkende.
Jeg liker å følge a hybrid tilnærming hvor jeg flytter sidelinjen under innholdet, men også skjul noen elementer i sidefeltet forbi et bestemt bruddpunkt.
Hvis jeg for eksempel har tre annonseblokker i det fulle oppsettet, kan jeg gjemme to av disse annonsene mellomrom på mobilen. Dette gjør sidebarinnholdet tilgjengelig men Roter ikke opp siden med overdreven innhold.
Eksempel 3: Madame Gautier
Jeg liker også hvordan Madame Gautier bruker deres “Siste nytt” sidebar på hjemmesiden. Det til slutt faller under innholdet, og tar opp en full visningsposisjon på siden.
Nesten hver nettside vil ha minst ett sidebar i designet. Hvorvidt dette er et sidebar-sidebar eller bare noe som vises på en sidemal, vil side-by-side design stil er populær fordi den passer til mer innhold på skjermen.
Det er ditt valg hvordan å håndtere innholdet. Du kan slippe sidebjelken lavere, skjule den helt eller bruke en hybrid av disse to teknikkene. Men du bør gjøre ditt valg basert på sidebarets relevans, og dets nødvendighet til siden.
Juster & Klem marger
Det vil alltid være et punkt hvor innholdet kan ikke presses videre, og en del må slipp under den andre.
Av justere marginer før du senker innholdet på siden, gir du leserne en bredere bredde av innhold å velge.
Eksempel 1: En verden
Foten på One World er et godt eksempel. Det har sideoverskridende footer-linker flyttet rett med en e-post påmeldingsskjema til venstre.
Når utformingen endres, krympes margene og paddingene mellom disse elementene. Lenk kolonnene komme nærmere sammen, og påmeldingsskjemaet blir litt mindre, også.
Forresten et visst punkt, er det bare fornuftig å Slett linkene under registreringsskjemaet, og gi bunnteksten rikelig med plass til å puste.
Ja, det gjør siden lengre, og ja, det tar mer arbeid å bla ned så langt, men på disse mindre bruddpunktene kan du anta at brukerne er på vertikalt orienterte enheter.
Eksempel 2: Golden Isles
Et annet eksempel jeg elsker er Golden Isles hjemmeside med sin unik navigasjonsstil. Når du endrer størrelsen på nettleservinduet, kobles naven klem sammen. Til slutt de pause fra en enkelt linje inn i to rader, deretter ned i kolonner med den aller minste størrelsen.
Andre elementer på siden følg det samme mønsteret. Dette eksemplet demonstrerer kraften til endring av marginer før du omarrangerer layoutet helt.
Vertikal flyt på mindre skjermer
Sidens innhold skal flyt naturlig, og vertikal justering gir mening på mobilen. Dette betyr at du må vurdere blokker for innhold på siden oppdater innholdsstilen tilsvarende. Dette inkluderer avsnitt, overskrifter, blokkeringer, uordnede lister og også tilpassede innholdsrutiner.
Eksempel 1: BodyBuilding.com Enkelt innlegg
Ta for eksempel dette BodyBuilding innlegget som bruker små bokser å vise frem forskjellige glute treningsøkter.
Disse boksene inkluderer miniatyrbilder på høyre side å demonstrere øvelsen. På mindre skjermer, disse miniatyrbildene bryte ned på en ny linje, og etterhvert stable oppå hverandre.
Din responsive CSS bør ta hensyn til denne lille minutiae for hver side på nettstedet.
Eksempel 2: Vanity Fair
For et større eksempel, sjekk ut Vanity Fair hjemmeside som Fullstendig omarrangerer glidebryteren. På et fullskjermstasjon skriver historikklisten overskrifter med ett kjennetegnet bilde som vises til siden. Siden nettleseren endrer seg mindre, er dette toppenhistorikk-delen blir en glidende karusell.
Grensesnittet selv endres helt ved å legge til dotnavigasjon, piler og uthevede bilder for hver historie i listen. Deres fullscreen liste over artikler er mer “vertikal”, men denne utformingen er vanskeligere å operere på en mobil skjerm, så det er et bedre alternativ å bytte det til en glidende karusell.
Synes at mer om brukerens flyt i stedet for innholdsstrømmen din. Innhold trenger ikke alltid å bli tvunget til en vertikal layout på liten skjerm. Tenk bare på hvordan du organiserer innhold på en måte som støtter en vertikal surfing opplevelse.
Avsluttende tanker
Responsiv design er viktig i disse dager, og hver webdesigner og utvikler bør forstå hvordan det fungerer. Besøkende forventer at alle nettsteder skal være mobil-vennlig. Når jeg snubler inn på et ikke-responsivt nettsted, kryper jeg ved synet av den horisontale rullefeltet.
Følg tipsene i dette innlegget for planlegger designstrategier for å omarrangere innhold for best mulig brukeropplevelse på alle enheter.
