Jeg surfer på Internett hver dag, på flere enheter. Jeg bruker Macbook Pro, iMac, PC, iPad, iPhone og ja, selv min TV. Så det plager meg egentlig når jeg ser nettsteder som ikke er optimalisert for større skjermoppløsninger, eller det tar to minutter å laste inn på mobilenheten min.
Vi har alle tatt imot begrepet responsivt design. Svært få mennesker krangler mot det. Faktisk er den eneste overbevisende repost jeg har hørt nylig, at en klient ikke er villig til å betale for den ekstra tiden som er involvert. Men som med ny praksis har myter vokst opp for å motvirke det.
La oss se om vi kan buste noen av disse misforståelsene ...
Ja mobilbanen eksploderer og ja det er drivkraften bak responsiv design, men når vi tenker på responsiv design, må vi vurdere mer enn bare mobil. Med introduksjon av netthinnen og nettlesere av nettlesere, ser internettbrukere nå nettsteder på større skjermoppløsninger og i mange forskjellige sammenhenger.
Prøv å ta hensyn til ulike brukerkontekster når du utformer og utvikler lydhemmede nettsteder. Du må tenke på hvilken enhet en bruker bruker: Er brukeren på en mobilenhet eller hjemme foran fjernsynet? Du må tenke på hvor brukeren befinner seg: er brukeren i kø på matbutikken eller camping ute i villmarken? Å ha godt innhold betyr ingenting hvis nettstedet ditt tar ti minutter å laste mens brukerne sitter på stranden med margarita.
Innhold er alt, men kontekst er overalt, og det er noe du har absolutt ingen kontroll over. Det er derfor realistisk at innholdet ditt skal skaleres til en hvilken som helst oppløsning, stor eller liten. Vi har et sett med verktøy til disposisjon som gjør at vi kan manipulere oppsett, optimalisere tekststørrelser og øke ytelsen for enhver kontekst, så husk å bruke dem.
Husk at konteksten skifter hele tiden, og derfor er det så viktig å balansere den visuelle utformingen, brukerens behov og ytelse når den nærmer seg en responsiv design. Det handler ikke bare om mobil.
Jeg pleide å hevde at responsivt webdesign ikke vil fungere for hvert prosjekt, og at det avhenger av brukstilfellet. Vel, jeg har nylig endret visningen min og jeg tror fast at hvis vi skal være brukerfokuserte designere og utviklere, må vi nærme oss hvert prosjekt med responsiv design i tankene.
Webområder med fast bredde kan begrense større og mindre skjermoppløsninger. Poenget er at våre nettsider skal være tilgjengelige for alle, uansett hvilken enhet eller skjermoppløsning de bruker, uten begrensninger.
Jeg har lagt merke til en trend som dukker opp i bransjen der designere og utviklere bygger opp lydhemmede nettsteder som bare skal til enkelte enhetsoppløsninger, og jeg er også skyldig i dette. De tre vanligste enhetene er selvfølgelig bærbare datamaskiner / skrivebord, iPads og iPhones (eller andre mobile enheter). Som designere må vi innse at lydhør design handler om designbruddspunkter og gjør innholds lesbar og tilgjengelig for alle, ikke bare brukerne av bestemte enheter.
Når det er sagt, hvis du designer nettsteder i et program, er det viktig å ha en slags ramme med breakpoints å jobbe med. Jeg foreslår å lage din egen. Optimaliser layoutet ditt i henhold til innholdet. Den beste måten å finne ut hva breakpoints fungerer best er å skisse noen wireframes først for å få en ide, så du kan begynne å legge ned piksler i valgfri programvare. Pass på at du arbeider av det samme rutenettet når du legger på wire og utformer.
Hvis du er som meg, kodes du for din wireframes og lager en levende prototype. Dette har hjulpet meg mye med min responsive arbeidsflyt fordi jeg kan lage en fluid mockup og legge til breakpoints i designen som design bryter i stedet for å prøve å kramme piksler i Photoshop.
Et av de største problemene jeg har lagt merke til på mange raske nettsteder er at typografi kastes til ulvene når designere og utviklere velger å bruke enhetsbruddspunkter over designbruddspunkter. Etter min mening å velge enhet over design viser en fullstendig bortseelse for innholdet som blir publisert og brukeren bruker det innholdet. Innholdet bør opprettholde lesbarheten til den må justeres for å opprettholde denne lesbarheten. Innhold vil alltid være konge, og tilgjengeligheten og lesbarheten av innholdet ditt bør alltid ha høyeste prioritet.
En av måtene jeg liker å håndtere lesbarheten av innholdet i en responsiv design er å bruke relative enheter som ems for skriftstørrelse, polstring, marginer og layout. Responsive design handler om forholdsmessige layouter, og etter min mening er ems en perfekt passform.
Ems er relative enheter som er skalerbare til skriftstørrelsen til foreldreelementer, de kan spare deg for mye tid og problemer, og de bidrar til å opprettholde strukturen i hele oppsettet. Hva betyr dette at du spør? Vel, det betyr at når fontstørrelsen øker eller reduseres, tilpasser layoutet jevnt uten å fukte noe opp.
Her er et eksempel, kan vi si at vi har funnet to design breakpoints, en for en veldig stor skrivebordsbeskjerm med en superoppløsning og en for en liten nettbrett. La oss også si at vår basestørrelsesstørrelse er 16px, som tilsvarer 1.0em, og vi støter på basestørrelsen på opptil 22px når nettstedet vises ved en oppløsning på 3840 x 2160 (superoppløsning) og vi senker den grunnleggende skrifttypestørrelsen til 14px med en oppløsning på 800 x 600 (liten laptop / nettbrett). Vi har nettopp dramatisk endret størrelsen på typen og utformingen av nettstedet vårt på to utpekte brytepunkter, en stor og en liten. En overskrift på 1.4em med en skriftstørrelse på 22px for større oppløsninger betyr at 1.4em er 30,8px og ved den mindre basen skriftstørrelsen på 14px, ville 1.4em være 19,6px. Selv om fontstørrelsen vår er dramatisk større på 3840 x 2160, trenger vi ikke å bekymre oss for at layoutet bryter fordi det også har justert. La oss si at vårt inneholdende element hadde en bredde på 50em. Ved en oppløsning på 800 x 600 ville det være 700px, men ved oppløsningen på 3840 x 2160 ville det være 1100px. Våre polstring og marginer vil også tilpasses. Ved den større oppløsningen som har skriftstørrelser og layout sett i ems, har det muliggjort at vårt design skaleres proporsjonalt, noe som gjør innholdet mer tilgjengelig og mer lesbart.
Formålet med lydhør design er å gjøre innholdet ditt tilgjengelig for alle, selv deaktiverte, på tvers av alle skjermoppløsninger og enheter. Gjemmer innhold er aldri en god ide, og sjansene er at hvis du må skjule det, behøvde du ikke å begynne med det. Skjul innhold gjør det ulestelig for skjermlesere, og du gjør nå innholdet utilgjengelig for personer med visuell eller kognitiv funksjonshemning. Husk at innholdet skal være universelt på tvers av alle enheter, ikke straffe brukerne dine ved å begrense det de kan se på en separat enhet.
Når det er sagt, finner jeg fremdeles noen brukstilfeller hvor displayet: ingen; kommer til nytte. For det meste gjelder alle brukssaker med en slags navigasjon, og jeg bruker skjerm: ingen; på navigasjonselementer som endrer skjema på forskjellige enheter. Det er aldri en god idé å begrense eller skjule innhold på forskjellige enheter fordi du mest sannsynlig har basert den beslutningen på en antagelse, og noen brukere, et sted, vil ha en veldig dårlig opplevelse.
Det har vært en rekke nettsteder jeg har sett på sistone, som har vist mangel på empati mot brukere med lav båndbredde. De fleste av disse nettstedene har de samme tingene til felles, store bilder og store JavaScript-biblioteker, og mange av disse nettstedene kan ha blitt optimalisert dersom de ble designet med en mobil første tilnærming.
Fordi det fortsatt er mye diskusjon om responsive bilder, er det vanskelig for alle å forplikte seg til en løsning. Jeg forstår dilemmaet, men venter på en perfekt løsning som er standard på alle nettlesere, og enheter gjør ikke ditt nåværende nettsted enklere å bruke på enheter med begrenset båndbredde. Finn en løsning som best løser problemet ditt og løp med det. Ikke å finne en løsning betyr ytelsesproblemer for alle, og det slår helt opp formålet med lydhør design.
Store JavaScript-biblioteker kan også forårsake problemer på mindre enheter. Prøv å finne en måte å kalle dem betinget basert på skjermoppløsning eller type enhet. Ytelse bør ikke være en ettertanke når det gjelder responsiv design.
Internettet har eksplodert, og med advent av mobil- og smarttelefonteknologi kan vi få tilgang til innhold hvor som helst og i hvilken som helst sammenheng. Det er viktig å sikre at vi kan nå alle våre brukere og gi dem det de vil ha, når de vil ha det. Responsive design er en helt ny teknikk, og etter min mening er det den perfekte teknikken for å forene innholdet vårt på nettet.
Hvilke andre myter om responsivt design ønsker du å debunk? Er det noen ulemper til responsiv design? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, responsivt webbilde via Shutterstock.