Big Vs. Små: Utfordringer i Responsive Web Design
Ettersom antall og forskjellige enheter som vi får tilgang til fra Internett, øker, presenterer nye webdesignutfordringer seg.
Det er ikke lenger bare nok å ha en mobil versjon og en nettleserversjon. Nå må vi vurdere om personen som besøker nettstedet vårt besøker fra en nettbrett, en smarttelefon (og om denne smarttelefonen har et høyoppløselig skjerm eller ikke), en netbook, en stasjonær datamaskin eller en fullstendige bærbar datamaskin (og om det er en med høy res eller lav-res skjerm), eller en annen enhet helt.
Og å optimalisere opplevelsen for alle disse forskjellige mulighetene blir mer forventet blant kunnskapsrike internettbrukere.
For noen år siden, ville en designer ha sett på listen over enheter de måtte designe for og deretter angi om å lage individuelle webdesigner for hver enhet. Men etter hvert som antall og forskjellige enheter øker, blir det en upraktisk, tidkrevende proposisjon.
I stedet bør designere lage design som tilpasser seg behovene til hver nettleser, uavhengig av enheten.
Mange skjermer blir stadig større
Skjermoppløsningene på stasjonære og bærbare datamaskiner blir stadig større. For bare et par år siden virket en oppløsning på 1280 x 800 piksler stor. Nå er det ganske mye bunnen av vanlige skjermoppløsninger på bærbare datamaskiner, og det er ikke uvanlig at nye skjermer har full HD-skjermoppløsning (1920 x 1080 piksler).
Vi når de øvre grensene for hva som er praktisk for en skjerm (med dagens grensesnittteknologi, selv om fremtidige utviklinger kan endre det), men selv å designe for 1920 piksler er det mye annerledes enn å designe for en skjerm som bare er 1024 piksler bred. Eller i det minste bør det være.
Å legge til potensielle storskjermspørsmål er at mange spillsystemer og nye TVer nå kommer til internett. Noen av disse har faktisk veldig gode innebygde nettlesere, så det er helt mulig at noen av nettstedets besøkende vil se på nettstedet ditt på deres 55 "HD-TV.
Men så er det mobile enheter
På motsatt side av spekteret er det store antallet Internett-brukere som nå får tilgang til nettet, hovedsakelig fra smarttelefonen, nettbrettet eller netbooken. Skjermene på disse enhetene kan variere fra omtrent 240 x 320 piksler (på noen nedre og eldre smarttelefoner) til 1024 x 600 eller 768 (på enkelte netbooks og nettbrett).
Et nettsted som er designet for en skjerm som er 1280 + piksler bredt, vil åpenbart ikke se ut på en skjerm som bare er 320 piksler bred. Eller til og med en som er 600 eller 800 piksler bred. Horisontal rulle, spesielt på berøringsskjerm enheter, er i beste fall irriterende.
Utforming av et mobilnettsted pleide å være den favoriserte løsningen for forskjellige skjermoppløsninger. Men siden nå er det et stort utvalg av størrelser, i stedet for bare "normal" og "liten", det er ikke den beste ideen lenger. Mobilnettsteder designet for en 240 x 320 piksler skjerm kommer ikke til å se bra ut på en iPad (eller til og med en ny iPhone med Retina Display). Og hvis du designer for skjermhinnen eller lignende skjermbildet med høyere resenhet, vil du fremmedgjøre mange besøkende ved hjelp av andre smarttelefoner som ikke har slike høyoppløselige skjermbilder.
Et fleksibelt fundament
Å starte med et fleksibelt fundament er viktig. Et væskegitter alene er ikke nok. Du trenger også et rutenett eller en oppsett som kan endres basert på skjermoppløsninger og enhetstyper. For enkle oppsett er det ikke så høy ordre. Men hvis du vil ha noe som er litt mer komplekst, med varierende antall kolonner, avhengig av skjermbredden, er det noen ting du må ta hensyn til.
Fleksible oppsett
Å skape et fluidnett er en fantastisk måte å skape en mer på responsiv utforming . De beste fluidnettet vil kombinere omforming og omplassering av innhold etter behov, ettersom skjermbredden endres. (Et annet flott verktøy for å lage fluidnett er Tiny Fluid Grid , som lar deg lage grid med maksimalt 1200px bredde, og er basert på 1kb Grid.)
For eksempel, så lenge skjermoppløsningen forblir over 800 px bred, vil en 3-kolonne-oppsett være 3 kolonner, enkelt justere bredden på hver kolonne for best å betjene innholdet. Men når skjermbredden faller under 800px, kan den tredje kolonnen din falle under den andre kolonnen, slik at hver kolonne kan være en lettlestbar bredde.
Hvis skjermen blir enda smalere, la oss si 480px (typisk på mange smarttelefoner), hele designet faller til en enkelt kolonne, med den andre og tredje kolonnen som vises under hovedinnholdet. Hvis navigasjonen var inneholdt i en av disse kolonnene, kan den overgå til toppen av siden, slik at den fortsatt er lett tilgjengelig.
Ved hjelp av CSS3-spørringer kan vi ikke bare målrette mot en bestemt klasse enheter (for eksempel mobile enheter), men også spesifikke spesifikasjoner innenfor disse enhetene. Så vi kunne ha separate stilark for en rekke forskjellige størrelser av enheter.
Skjønnheten i medieforespørsler i CSS3 er imidlertid at de også kan brukes rett innenfor CSS. Så hvis alt vi trenger å endre er antall kolonner, eller noe lignende, kan vi bare definere a @media regelen innenfor stilarket. WebDesignerWall har en flott oversikt over hvordan du bruker CSS3 Media Queries.
Væskebilder
Å skape bilder som tilpasser seg størrelsen på kolonnen eller diven de er inne i, er et annet viktig aspekt ved å skape en mer responsiv design i et fluid layout. Når kolonnene endres, kan bildene de inneholder, endre størrelsen slik at de fortsatt passer innenfor kolonnens begrensninger.
Det er et par måter å gå om dette på: Du kan få bildet til å endre størrelsen helt, eller du kan dynamisk beskjære bildet for å bare vise de viktigste delene. I noen tilfeller, ved å bruke en kombinasjon av disse to teknikkene (slik at bildet over en viss størrelse krymper bildet, men når det kommer under den størrelsen, begynner det å beskjære) kan gi de mest ønskelige resultatene.
Unstoppable Robot Ninja har et enkelt skript som automatisk tilpasser bildene dine. Hvis du vil selektivt skjule deler av bildet dynamisk (effektivt beskjære dem), Zomigi.com har en fin metode for å gjøre det. De har også en metode for å skape glidende komposittbilder som kan være nyttig for væskedesigner.
Bredere skjermhensyn
I følge StatOwl , over 73% av de ikke-mobile Internett-brukere de siste tre månedene brukte datamaskiner med en oppløsning høyere enn 1024 x 768. Og hvis du ser på statistikken for 1024 x 768 spesielt, vil du se at den mister markedsandel. Det er klart at det allerede er et stort skifte til høyere skjermoppløsninger, en som designere ville være uheldig å ignorere.
Selvfølgelig, bare fordi det er noen brukere der ute som har flyttet videre til større skjermoppløsninger, betyr det ikke at alle designere der ute skal hoppe på bredviddevognen og begynne å skyve redesigner til sine kunder. Mobil adopsjon er viktigere for øyeblikket enn bredere bredder. Men siden vi har forhåpentligvis overbevist deg nå, er den responsive designen veien å nærme seg nye webdesign og redesigner, og det er viktig å vurdere hvordan man lager nettsteder på bredere bredder.
Hvem bruker bredere oppløsning skjermer?
Alle som jobber med design eller kreative felt, har sannsynligvis en skjermoppløsning på minst 1280 piksler bred (om ikke mye bredere). Dette inkluderer web- og grafisk designer, filmskapere, fotografer og andre. Tekniske kunnskapsrike brukere er også mer sannsynlig å bruke skjermbilder med høyere oppløsning, siden de er mer sannsynlig å oppgradere sitt datautstyr regelmessig.
Rikelig forbrukere er en annen gruppe som sannsynligvis bruker høyereoppløsningsmonitorer. Som med tekniske kunnskapsrike brukere skyldes dette at folk med mer disponibel inntekt er mer sannsynlig å kjøpe nyere datamaskiner med jevne mellomrom. Selvfølgelig multipliseres denne effekten med forbrukere som er både velstående og teknologiske kunnskapsrike.
Mac-fans vil være en annen gruppe som er mer sannsynlig å bruke en høyere skjermoppløsning på grunn av at nyere MacBooks, iMacs og andre Apple-datamaskiner alle har skjermoppløsninger på minst 1280 x 800. Selvfølgelig utelukker dette ikke produktene de har kjører på iOS (iPhone, iPod Touch og iPad).
Hvem bruker ikke bredere resskjermbilder?
Mens det er mange brukere der ute som bruker høyere oppløsning, er det fortsatt mange Internett-brukere som ikke er det. Disse faller inn i noen forskjellige grupper.
Studentene er sannsynligvis en av de største gruppene av lavere-res-brukere. Skoler må ofte gjøre med datamaskiner i fem eller ti år, og i mange tilfeller er datamaskinene de har, ikke engang toppmoderne når de kjøper dem. Hvis nettstedet ditt er rettet mot pedagogiske brukere (inkludert skolefakultet og administratorer, i tillegg til studenter), ser du sannsynligvis på mange brukere hvis skjermbilder bare er 1024 piksler bredt, og kanskje noen som fortsatt har monitorer satt til 800 piksler bredt.
Netbook-brukere er en annen stor gruppe som generelt har lavere resskjerm. De fleste netbooks, spesielt de nedre endene, har skjermoppløsninger på 1024 600 eller 728 piksler eller så. Det samme gjelder iPad (1024 × 768) og mange andre tabletter på markedet, hvorav noen har enda lavere skjermoppløsninger.
Mennesker i mindre utviklede land bruker sannsynligvis eldre eller nedre datamaskiner. Hvis du målretter mot brukere som ikke er i Nord-Amerika eller Vest-Europa, eller i områder der internettkafeer vanligvis brukes til internettilgang (som det er tilfellet i mange utviklingsland), ser du sannsynligvis på flertallet av brukere som ser på nettstedet ditt på 1024 med 768 eller lignende skjermoppløsninger.
Bedriftsbrukere har ofte også lavere skjermoppløsninger. Mange ikke-tekniske bedrifter vil henge på datautstyr til det er helt foreldet før oppgradering. Og det er fornuftig, spesielt vurderer kostnadene ved å oppgradere dusinvis eller hundrevis av datamaskiner samtidig. Hvis du målretter mot bedriftsbrukere, vil du kanskje holde fast med et design basert på 1024-bredden.
Den siste gruppen som sannsynligvis har skjermbilder med lavere oppløsning, er mennesker som ikke verdsetter teknologien. Mens disse menneskene pleide å ikke bry seg med datamaskiner i det hele tatt, ser mange nå verdien av å ha en PC hjemme. Men de er heller ikke sannsynlig å gå ut og bruke mer enn noen få hundre dollar på en PC, eller de kan få en brukt datamaskin fra et familiemedlem eller de klassifiserte annonsene. Hvis nettstedet ditt er fokusert på ikke-tekniske forbrukere, spesielt de på landsbygda, vil du nøye vurdere hva de sannsynlige skjermoppløsninger er, og designe tilsvarende.
Spor dine besøkende
Alt nevnt ovenfor gir oss en av de viktigste skrittene å ta hvis du vurderer å designe for en bredere skjermoppløsning: spor de besøkende som kommer til nettstedet ditt og se på hvilken skjermoppløsning de bruker. Ethvert godt analyseprogram vil gi deg denne informasjonen, og det er utrolig verdifullt å ta beslutninger som dette.
Hvis du oppdager at det store flertallet av brukerne kommer fra datamaskiner med høyere skjermoppløsninger, kan du sannsynligvis designe nettstedet ditt for de brukerne uten å se for mye innvirkning. Men hvis du finner ut at et stort antall besøkende fortsatt bruker skjermoppløsninger på 1024 eller smalere, kan det hende du vil revurdere.
Bredere bredder er viktige for innovasjon
Jeg er sikker på at det er mange designere der ute som egentlig ikke ser poenget i bredere bredder. De er glade for å designe ved 960 piksler. De har systemer på plass for å designe på disse bredder. De har forhåndsdefinerte CSS-filer alt satt til 960 piksler. Hvorfor vil de gå bredere? Spesielt når en stor del av internettbrukere fortsatt jobber med skjermer som er 1024 piksler brede.
Det enkle svaret er at så lenge vi fortsetter å designe for 1024, er det ikke noe incitament for de fleste forbrukere å oppgradere. Og det betyr at det er lite incitament for produsenter å lage produkter med høyere oppløsninger.
Hvis for eksempel 1280 var standarden, og hvis flertallet av nettsteder der ute var 1140 piksler bredt eller bredere, er det sannsynlig at iPad ville ha blitt utviklet med en oppløsning på minst 1280. Men fordi 1024 er standarden, gjør ikke iPad trenger ikke å være høyere res enn det. Det samme prinsippet gjelder for netbooks. Siden nettet er utformet rundt skjermbredder på 1024 piksler, trenger ikke enheter som er primært beregnet for nettbruk, å være høyere res enn det.
Ved å presse webdesign til bredere bredder, oppfordrer vi oppgraderinger og innovasjon. I tillegg kan de ekstra 180 piksler (forskjellen mellom 960 og 1140) åpne opp nye muligheter i verden av brukergrensesnittdesign og brukeropplevelse. Akkurat som de 160 piksler som ble oppnådd da vi byttet fra 800 til 960, gjorde det mulig flere ting.
Ulemper til brede bredder
Mens det er bestemte fordeler for å skape bredere design, er det også endelige ulemper for øvelsen. Noen av disse er lett å overvinne, men det er viktig å være klar over hva de er hvis du forventer å forhindre dem.
Bred linjelengder reduserer lesbarheten
Det er fristende når du lager et bredere design for å dra nytte av alt som ekstra skjerm fast eiendom for å gjøre ditt hovedinnhold bredere. Dette er ikke alltid en god ide, skjønt. Lengre linjelengder er vanskeligere å lese, da øyet må reise videre på slutten av en linje for å komme til begynnelsen av neste linje, noe som betyr at leseren lettere kan gå seg vill og ende opp på feil linje. Dette forverres av mindre type størrelser. Det er viktig å finne et godt medium mellom linjelengde, skriftstørrelse og linjehøyde.
Det er et par forskjellige metoder for å beregne riktig linje lengde. Den første er alfabet og en halv regel, noe som resulterer i en lengde på 39 tegn (26 bokstaver i alfabetet x 1,5). Tilpass skriftstørrelsen slik at omtrent 39 tegn passer på den valgte linjelengden (eller omvendt).
Den andre metoden for å beregne optimal linjelengde er å bruke "poeng ganger to" -regelen. Dette er et holdover fra verdens verden, men kan tilpasses til nettet lett nok. Med denne regelen tar du punktstørrelsen på fonten din, multipliserer den med to, og gjør deretter linjene som lengden i picas (som i print er 12 poeng). Så, for å beregne linjelengder i piksler, ville du ta skriftstørrelsen og multiplisere den med 24 (en 12-punkts skrifttype ville ha en linjelengde på 288 piksler).
Det kan være nyttig å beregne linjelengder med begge disse metodene, og sammenlign deretter. Gjør dine siste linjelengder et sted mellom de to.
For mye informasjon
Bredere innholdsområder kan lett bidra til at sidene dine blir rotete og at det er for mye som skjer. Det gjør det også enklere å legge til ekstra kolonner, widgets eller annet innhold som ikke kan legge til noen verdi på siden. Det er viktig å holde prinsippene for god innholdsdesign i tankene når du lager nettstedet ditt. Rikelig hvit plass er også nyttig for å sørge for at nettstedet ditt ikke ser rotete ut.
Bredere bredder gir deg flere alternativer når det gjelder design, men det multipliserer også sjansene for at du tar fattige designbeslutninger. Gå for minimalistisk, og det kan se kjedelig og tom. For mye skjer og det ser bare opptatt og rotete.
Vær oppmerksom på skala, hvitt rom, proporsjon og hierarki i designene dine for å sikre et utmerket sluttprodukt. Og vær forsiktig med at dine bredere design ikke ender med å være "for mye" generelt.
Så hvorfor gjør ikke alle lydhør design?
Mens lydhør design tar opp mange kjerneproblemer som presenteres av det brede utvalget av enheter som brukes til å få tilgang til internett, kan det også skape noen nye problemer.
Ta for eksempel mobile enheter. Hvis en person har tilgang til et kino-nettsted på sin smarttelefon, er det sannsynlig at deres primære bekymring er showtider, veibeskrivelse til teatret, eller kanskje telefonnummeret til teatret. De vil ha umiddelbar tilgang til den slags informasjon. Laster opp hele nettstedet, som også inkluderer ting som filmanmeldelser og annen informasjon, bare for å skjule en god del av den fra den mobile brukeren, er en sløsing med ressurser.
Så det er viktig å se på responsiv design fra tilfelle til sak, for å finne ut om det er den beste løsningen for et bestemt nettsted. I mange tilfeller er det, men det er fortsatt noen tilfeller der et mer tradisjonelt mobilt nettsted kan være å foretrekke.
Som designere er det imidlertid viktig å forstå responsiv design, og å kunne vite når det er riktig løsning for prosjektene dine. Siden mye av lydhør design er bygget på å skape godt utformede, fleksible nettsteder, kan den tjene som en slags best practices guide for designere når vi går videre med webdesign og webstandarder.
Flere ressurser for å skape responsive design
- Flurid : Flurid er et fluidnettdesign som tilpasses over en rekke vindusbredder. Selv om den ikke er spesielt følsom (unntatt justering av kolonnebredder), kan den fungere som ryggraden for å skape et responsivt nettsted.
- Fluid Grids : Denne artikkelen fra A List Apart drøfter fordelene og detaljene for å jobbe med væskenett.
- Fluid Grid System : Et annet væske grid rammeverk.
- Hardboiled CSS3 Media Queries : En annen flott guide til Media Queries.
Eksempler på responsive nettside design
Ikke alle designene nedenfor tilpasser seg helt ned til mobilstørrelser, men noen gjør det, og de kan alle gi deg ideer om hvordan du kan tilpasse webdesignene dine til å være mer lydhør over enheter.
Kolonnene her stabler basert på skjermbredde, men er alltid minst 4-tvers.
Dette rutenettet omarrangerer seg selv og endrer størrelsen på kolonnene dynamisk slik at de passer best i nettleservinduet.
Dette omarrangerer også bildene slik at de fyller ditt nettleservindu best.
CSS-Tricks tilpasser seg større skjermoppløsninger, mens du flytter sidebjelken under hovedinnholdet for smalere skjermbilder.
Abduzeedo skifter innholdet rundt på hjemmesiden basert på nettleserbredden.
Psdtuts + nettsiden (sammen med alle de andre Tuts + nettstedene) tilpasser og restacks deres sidebjelker basert på bredden på nettleservinduet. De endrer også bredden på hovedinnholds-kolonnen for å imøtekomme forskjellige størrelser.
Gitteret her skifter fra fire kolonner til to til en basert på skjermbredden.
Oppsettet her justerer bildestørrelser basert på bredde, samt skiftende kolonner rundt for smalere skjermer.
Et godt eksempel på et oppsett der kolonnene endrer posisjon for mindre skjermoppløsninger.
Præsidedesignet skifter fra en væskebreddsdesign med faste søylebredder for meget brede skjermbilder til en fast breddeform for de fleste skjermstørrelser til et annet fluidum for smalere bredder.
Skrevet utelukkende for WDD av Cameron Chapman .
Har du selv tatt på å designe for bredere skjermer og lydhør design? Del i kommentarene!