Big Vs. Små: Udfordringer i Responsive Web Design
Da antallet og antallet af enheder, som vi har adgang til internettet øges, præsenterer de nye webdesignudfordringer sig selv.
Det er ikke længere bare nok at have en mobil version og en browser version. Nu skal vi overveje, om den person, der besøger vores websted, besøger en tablet, en smartphone (og om den pågældende smartphone har en high-res-skærm eller ej), en netbook, en stationær computer eller en bærbar computer (og om det er den ene med et high-res eller low-res skærm) eller en anden enhed helt.
Og optimering af oplevelsen for alle disse forskellige muligheder bliver mere forventet blandt kyndige internetbrugere.
For nogle år siden ville en designer have kigget på listen over enheder, de skulle designe for og derefter satte op om at skabe individuelle website designs for hver enhed. Men som antallet og antallet af enheder stiger, bliver det en upraktisk, tidskrævende proposition.
I stedet skal designere oprette design, som tilpasser sig hver enkelt browsers behov, uanset enhed.
Mange skærme bliver stadig større
Skærmopløsningerne på stationære og bærbare computere bliver stadig større. For kun et par år siden syntes en opløsning på 1280 x 800 pixel stor. Nu er det stort set bunden af almindelige skærmopløsninger på bærbare computere, og det er ikke ualmindeligt, at nye skærme har fuld HD-skærmopløsninger (1920 x 1080 pixels).
Vi nåer de øvre grænser for, hvad der er praktisk for en skærm (med nuværende grænsefladeteknologier, selv om fremtidige udviklinger kan ændre det), men selv at designe for 1920 pixelbredder er meget anderledes end at designe for en skærm, der kun er 1024 pixels bred. Eller i det mindste bør det være.
Tilføjelse til potentielle problemer i storskærmen er, at mange spil systemer og nye tv nu kommer internet klar. Nogle af disse har faktisk meget gode indbyggede browsere, så det er helt muligt, at nogle af dine hjemmesides besøgende vil se dit websted på deres 55 "HD-tv.
Men så er der mobile enheder
På den modsatte ende af spektret er det enorme antal internetbrugere, der nu får adgang til internettet, primært fra deres smartphone, tablet eller netbook. Skærme på disse enheder kan variere fra omkring 240 x 320 pixels (på nogle lavere og ældre smartphones) til 1024 x 600 eller 768 (på nogle netbooks og tablets).
Et websted, der er designet til en skærm, der er 1280 + pixels bredt, vil naturligvis ikke se ud på en skærm, der kun er 320 pixels bred. Eller endda en der er 600 eller 800 pixels bred. Horisontal scroll, især på touchscreen-enheder, er i bedste fald irriterende.
Design af et mobilt websted plejede at være den favoriserede løsning til forskellige skærmopløsninger. Men siden nu er der et stort udvalg af størrelser, snarere end bare "normal" og "lille", det er ikke den bedste idé længere. Mobilwebsteder, der er designet til en 240 x 320 pixel skærm, ser ikke godt ud på en iPad (eller endda en ny iPhone med nethinden). Og hvis du designer til nethinden eller lignende skærme med højere resenhed, vil du alienere mange besøgende ved hjælp af andre smartphones, der ikke har sådanne højopløsningsskærme.
Et fleksibelt fundament
Begyndende med et fleksibelt fundament er vigtigt. Et væskegitter alene er ikke nok. Du har også brug for et gitter eller et layout, som kan ændres baseret på skærmopløsninger og enhedstyper. For enkle layouter er det ikke så høj ordre. Men hvis du vil have noget, der er lidt mere komplekst, med varierende antal kolonner afhængigt af skærmens bredde, er der et par ting, du skal tage i betragtning.
Fleksible layouts
Oprettelse af et fluidgitter er en fantastisk måde at skabe en mere på lydhør design . De bedste fluidnetværk vil kombinere resizing og omplacering af indhold efter behov, da skærmens bredde ændres. (Et andet godt værktøj til at skabe fluidnet er Tiny Fluid Grid , som giver dig mulighed for at lave gitter med op til 1200px maksimale bredder og er baseret på 1kb Gitteret.)
For eksempel, så længe din skærmopløsning forbliver over 800 px bred, vil et 3-kolonne layout være 3 kolonner, hvilket nemt justerer bredden af hver kolonne for bedst at betjene indholdet. Men når skærmens bredde falder under 800px, kan din tredje kolonne falde under din anden kolonne, så hver kolonne kan være en letlæselig bredde.
Hvis skærmen bliver endnu snæver, lad os sige 480px (typisk på mange smartphones), hele designet falder til en enkelt kolonne, med den anden og tredje kolonne, der vises under hovedindholdet. Hvis navigationen var indeholdt i en af disse kolonner, kan den migrere til toppen af siden, så den stadig er let tilgængelig.
Ved hjælp af CSS3-medieforespørgsler kan vi ikke kun målrette mod en bestemt klasse enheder (f.eks. Mobile enheder), men også specifikke specifikationer inden for disse enheder. Så vi kunne have separate stylesheets til en række forskellige størrelser af enheder.
Skønheden i medieforespørgsler i CSS3 er imidlertid, at de også kan bruges inden for CSS. Så hvis alt vi skal ændre er antallet af kolonner eller noget lignende, kan vi bare definere en @media regel inden for stilarket. WebDesignerWall har et godt overblik over, hvordan man bruger CSS3 Media Queries.
Flydende billeder
Oprettelse af billeder, der tilpasser sig størrelsen af den kolonne eller div, som de er inde i, er et andet vigtigt aspekt ved at skabe et mere responsivt design inden for et fluid layout. Når søjlerne ændres, kan de billeder, de indeholder, ændres, så de stadig passer inden for søjlens begrænsninger.
Der er et par måder at gøre ved dette: Du kan få dit billede til at ændre størrelsen helt på flugt, eller du kan dynamisk beskære billedet for kun at vise de vigtigste dele. I nogle tilfælde ved at bruge en kombination af disse to teknikker (således at billedet bare over en bestemt størrelse krymper billedet, men når det kommer under denne størrelse, begynder det at beskære), der kan give de mest ønskelige resultater.
Ustoppelig Robot Ninja har et simpelt script, som automatisk ændrer dine billeder. Hvis du vil selektivt skjule dele af dit billede dynamisk (effektivt beskære dem), Zomigi.com har en god metode til at gøre det. De har også en metode til at skabe glidende kompositbilleder der kan være nyttigt til væskeformige konstruktioner.
Bredere skærm overvejelser
Ifølge StatOwl , har over 73% af de ikke-mobile internetbrugere i de seneste tre måneder brugt computere med en opløsning højere end 1024 x 768. Og hvis du ser på statistikken for 1024 x 768 specifikt, vil du se, at det taber markedsandel. Det er klart, at der allerede er et stort skift til højere skærmopløsninger, en som designere ville være ukorrekt at ignorere.
Bare fordi der er nogle brugere derude, der har flyttet videre til bredere skærmopløsninger, betyder det ikke, at hver designer derude skal hoppe på bredviddevognen og begynde at skubbe redesigner til deres kunder. Mobil vedtagelse er vigtigere i øjeblikket end bredere bredder. Men da vi forhåbentlig har overbevist dig nu, at det lydhørige design er vejen til at henvende sig til nye website designs og redesigner, er det vigtigt at overveje, hvordan man laver websites med bredere bredder.
Hvem bruger bredere opløsningsskærme?
Enhver, der arbejder inden for design eller kreative felter, har sandsynligvis en skærmopløsning på mindst 1280 pixels bred (hvis ikke meget bredere). Dette omfatter web- og grafisk designer, filmskabere, fotografer og andre. Tekniske brugere er også mere tilbøjelige til at bruge skærme med højere opløsning, da de er mere tilbøjelige til at opgradere deres computerudstyr regelmæssigt.
Velhavende forbrugere er en anden gruppe, der sandsynligvis vil bruge skærme med højere opløsning. Ligesom hos tech-savvy brugere skyldes det, at folk med mere disponibel indkomst er mere tilbøjelige til at købe nyere computere regelmæssigt. Denne effekt multipliceres selvfølgelig med forbrugere, der både er velhavende og teknologiske.
Mac-fans vil være en anden gruppe, der er mere tilbøjelige til at bruge en højere skærmopløsning, fordi nyere MacBooks, iMacs og andre Apple-computere alle har skærmopløsninger på mindst 1280 x 800. Dette udelukker selvfølgelig de produkter, de har kører på iOS (iPhone, iPod Touch og iPad).
Hvem bruger ikke bredere resskærmbilleder?
Mens der er masser af brugere derude ved hjælp af skærme med højere opløsning, er der stadig mange internetbrugere, der ikke er. Disse falder ind i et par forskellige grupper.
Studerende er nok en af de største grupper af lavere-res brugere. Skoler skal ofte gøre med computere i fem eller ti år, og i mange tilfælde er de computere, de har, ikke engang state-of-the-art, når de køber dem. Hvis dit websted er rettet mod pædagogiske brugere (herunder skolefakulteter og administratorer, udover studerende), ser du sandsynligvis mange brugere, hvis skærmbilleder kun er 1024 pixel brede, og måske endda nogle der stadig har monitorer indstillet til 800 pixels bred.
Netbook-brugere er en anden stor gruppe, der generelt har lavere-res-skærmbilleder. De fleste netbooks, især de nedre end, har skærmopløsninger på 1024 600 eller 728 pixel eller deromkring. Det samme gælder for iPad (1024 × 768) og mange andre tabletter på markedet, hvoraf nogle har endnu lavere skærmopløsninger.
Mennesker i mindre udviklede lande bruger sandsynligvis ældre eller nedre computere. Hvis du målretter mod brugere, der ikke er i Nordamerika eller Vesteuropa eller i områder, hvor internetcafeer almindeligvis bruges til internetadgang (som det er tilfældet i mange udviklingslande), så ser du sandsynligvis et flertal af Brugere, der ser dit websted på 1024 ved 768 eller lignende skærmopløsninger.
Forretningsbrugere har ofte også lavere skærmopløsninger. Mange ikke-tekniske virksomheder vil hænge på computerudstyr, indtil det er helt forældet, før de opgraderes. Og det giver mening, især i betragtning af omkostningerne ved at opgradere snesevis eller hundredvis af computere på én gang. Hvis du målretter op til forretningsbrugere, kan du holde fast i et design baseret på 1024 bredden.
Den sidste gruppe, der sandsynligvis vil have skærme med lavere opløsning, er mennesker, der ikke værdsætter teknologi. Mens disse mennesker plejede at ikke generere computere overhovedet, ser mange nu værdien i at have en pc derhjemme. Men de er også usandsynligt at gå ud og bruge mere end et par hundrede dollars på en pc, eller de kan få en brugt computer fra et familiemedlem eller de klassificerede annoncer. Hvis dit websted er fokuseret på ikke-tekniske forbrugere, især dem i landdistrikterne, vil du nøje overveje, hvad de sandsynlige skærmopløsninger er og designe i overensstemmelse hermed.
Spor dine besøgende
Alt nævnt ovenfor bringer os til et af de vigtigste skridt, der skal tages, hvis du overvejer at designe for en bredere skærmopløsning: Spor de besøgende, der kommer til dit websted, og se på hvilken skærmopløsning de bruger. Ethvert godt analytics program vil give dig disse oplysninger, og det er utroligt værdifuldt ved at træffe beslutninger som dette.
Hvis du opdager, at langt størstedelen af dine brugere kommer fra computere med højere skærmopløsninger, kan du sikkert designe dit websted til de brugere uden at se for meget indflydelse. Men hvis du finder ud af, at et stort antal af dine besøgende stadig bruger skærmopløsninger på 1024 eller mindre, så vil du måske overveje.
Bredere bredder er vigtige for innovation
Jeg er sikker på, at der er mange designere derude, der virkelig ikke ser punktet i bredere bredder. De er glade for at designe ved 960 pixel. De har systemer til rådighed til at designe i disse bredder. De har præfabrikerede CSS-filer alt indstillet til 960 pixels. Hvorfor ville de gerne gå bredere? Især når en stor del af internetbrugere stadig arbejder med skærme, der er 1024 pixel brede.
Det enkle svar er, at så længe vi fortsætter med at designe for 1024, er der intet incitament for de fleste forbrugere at opgradere. Og det betyder, at der ikke er noget incitament for producenterne til at skabe produkter med højere opløsninger.
For eksempel, hvis 1280 var standarden, og hvis de fleste websteder derude var 1140 pixels bred eller bredere, er det sandsynligvis, at iPad ville være blevet udviklet med en opløsning på mindst 1280. Men fordi 1024 er standarden, gør iPad ikke Jeg behøver ikke at være højere res end det. Det samme princip gælder for netbooks. Da nettet er designet omkring skærmbredder på 1024 pixel, behøver enheder, der primært er beregnet til brug på internettet, ikke være højere res end det.
Ved at skubbe website designs til bredere bredder, opmuntrer vi opgraderinger og innovation. Desuden kan de ekstra 180 pixel (forskellen mellem 960 og 1140) åbne nye muligheder i verden af brugergrænsefladedesign og brugeroplevelse. Ligesom de 160 pixel, der blev opnået, da vi skiftede fra 800 til 960, gjorde det muligt flere ting.
Nedskæringerne til brede bredder
Selvom der er bestemte fordele ved at skabe bredere design, er der også endelige ulemper for øvelsen. Nogle af disse er let at overvinde, men det er vigtigt at være opmærksom på, hvad de er, hvis man forventer at forhindre dem.
Bred linjelængder mindsker læsbarheden
Det er fristende, når du opretter et bredere design for at udnytte alle de ekstra skærmmuligheder til at gøre dit hovedindholdsareal bredere. Det er dog ikke altid en god idé. Længere linjelængder er sværere at læse, da øjet skal rejse længere i enden af en linje for at komme til begyndelsen af den næste linje, hvilket betyder, at læseren lettere kan komme tabt og ende på den forkerte linje. Dette forværres af mindre typestørrelser. Det er vigtigt at finde et godt medium mellem linjelængde, skriftstørrelse og linjens højde.
Der er et par forskellige metoder til beregning af den korrekte linjelængde. Den første er alfabet-og-halv-reglen, hvilket resulterer i en linjelængde på 39 tegn (26 bogstaver i alfabetet x 1,5). Tilpas din skriftstørrelse, så ca. 39 tegn passer til din valgte linjelængde (eller omvendt).
Den anden metode til beregning af optimal linjelængde er at anvende "point times two" -reglen. Dette er et holdover fra verden af print, men kan nemt tilpasses til nettet. Med denne regel tager du punktstørrelsen på din skrifttype, multiplicerer den med to, og gør dine linjer sådan længden i picas (som i print er 12 point). Så for at beregne dine linjelængder i pixels, skal du tage din skriftstørrelse og formere den med 24 (en 12-punkts skrifttype ville have en linjelængde på 288 pixels).
Det kan være nyttigt at beregne dine linjelængder med begge disse metoder, og sammenlign derefter. Lav dine sidste linjelængder et sted mellem de to.
For megen information
Bredere indholdsområder kan nemt bidrage til at gøre dine sider rodet og som om der er for meget på gang. Det gør det også lettere at tilføje ekstra kolonner, widgets eller andet indhold, der muligvis ikke kan tilføje nogen værdi til siden. Det er vigtigt at holde principper for god indholdsdesign i tankerne, når du opretter dit websted. Rigelig hvid plads er også nyttigt for at sikre, at dit websted ikke ser rodet ud.
Bredere bredder giver dig flere muligheder når det gælder design, men det forøger også chancerne for, at du træffer dårlige designbeslutninger. Gå for minimalistisk, og det kan se kedeligt og tomt ud. Alt for meget foregår og det ser bare travlt og rodet ud.
Vær opmærksom på skala, hvidt rum, proportioner og hierarki i dine designs for at sikre et fremragende slutprodukt. Og pas på, at dine bredere design ikke ender med at være "for meget" generelt.
Så hvorfor laver ikke alle lydhøre design?
Selvom lydhør design omhandler mange af de centrale problemer, der præsenteres af de mange forskellige enheder, der bruges til at få adgang til internettet, kan det også skabe nogle nye problemer.
Tag f.eks. Mobile enheder. Hvis en person har adgang til et biografwebsted på deres smartphone, er det sandsynligt, at deres primære bekymring er visningstider, retninger til teatret eller måske telefonnummeret til teatret. De ønsker øjeblikkelig adgang til den slags information. Indlæser hele webstedet, der også indeholder ting som filmanmeldelser og anden information, kun for at skjule et godt stykke af det fra den mobile bruger er spild af ressourcer.
Så det er vigtigt at se på responsivt design fra sag til sag for at finde ud af, om det er den bedste løsning til en bestemt hjemmeside. I mange tilfælde er det, men der er stadig nogle tilfælde, hvor et mere traditionelt mobilt websted måske foretrækkes.
Som designere er det dog vigtigt at forstå lydhørt design og at kunne vide, hvornår det er den rette løsning til dine projekter. Da meget responsivt design er bygget på at oprette velformede, fleksible hjemmesider, kan det fungere som en slags bedste praksis guide til designere, da vi bevæger os fremad med webdesign og webstandarder.
Flere ressourcer til at skabe lydhøre design
- Flurid : Flurid er et væskeformet design, som vil tilpasse sig på tværs af en række vinduebredder. Selvom det ikke er særligt lydhør i sig selv (bortset fra justering af kolonnebredder), kan det fungere som rygraden for at skabe et lydhørt websted.
- Fluidgitter : Denne artikel fra A List Apart drøfter fordelene og detaljerne ved at arbejde med væsker.
- Fluid Grid System : Et andet væskegrundramme.
- Hardboiled CSS3 Media Queries : En anden stor guide til Media Queries.
Eksempler på lydhør hjemmeside design
Ikke alle nedenstående designs tilpasser sig helt til mobilstørrelser, men nogle gør det, og de kan alle give dig ideer om, hvordan du kan tilpasse dit website design til at være mere lydhør over enheder.
Kolonnerne her stabler baseret på skærmbredde, men er altid mindst 4-tværs.
Dette net omstiller sig selv og ændrer kolonnerne dynamisk, så de passer bedst til dit browservindue.
Dette omarrangerer også billederne, så de bedst udfylder dit browservindue.
CSS-Tricks tilpasser til bredere skærmopløsninger, mens du flytter sidebjælken under hovedindholdet til smalere skærme.
Abduzeedo skifter indholdet rundt på hjemmesiden baseret på din browserbredde.
Psdtuts + webstedet (sammen med alle de andre Tuts + sites) ændrer og restacks deres sidebjælker baseret på bredden af dit browservindue. De ændrer også bredden af hovedindholdssøjlen for at rumme forskellige størrelser.
Gitteret her skifter fra fire kolonner til to til en baseret på skærmens bredde.
Layoutet her justerer billedstørrelser baseret på bredde, samt skiftende kolonner rundt for smalere skærme.
Et godt eksempel på et layout, hvor kolonnerne ændrer position for mindre skærmopløsninger.
Præsidiet design skifter fra en væskebredde design med faste søjle bredder til meget brede skærme til en fast bredde design for de fleste skærmstørrelser til en anden fluid en for smalere bredder.
Skrevet udelukkende til WDD af Cameron Chapman .
Har du selv til opgave at designe for bredere skærme og lydhør design? Del i kommentarerne!