Har du en "responsiv nettside"? Dette er et nettsted med et oppsett som endres basert på en besøkendes enhet og skjermstørrelse. Responsive webdesign er nå en bransjens beste praksis. Det anbefales av Google og finnes på millioner av nettsteder over hele nettet. Det er imidlertid en stor forskjell mellom å ha et nettsted som bare "passer" på forskjellige skjermstørrelser og har et nettsted som er virkelig responsivt.
Jeg ser rutinemessig at selskapene redesigner deres nettside og presser ut en pressemelding som utmerker dyktighetene til deres nye, mobile, vennlige design. Når jeg besøker disse nettstedene, finner jeg ofte et oppsett som faktisk skalerer og endres for å passe på forskjellige skjermer, men det er så langt de tar ideen om lydhørhet. Dette er ikke nok. En virkelig lydhør nettside gjør mer enn bare skala for å passe til en mindre eller større skjerm. På disse områdene finner du også følgende viktige trekk.
1. Optimalisert ytelse
Ingen liker å vente på at et nettsted skal lastes, og når noen bruker en mobilenhet med en tilkobling som kan være mindre enn ideell, er behovet for et nettsted å laste raskt enda viktigere.
Så hvordan optimaliserer du ytelsen til nettstedet ditt? Hvis du starter med et nytt nettsted som en del av et redesign, bør du gjøre det til et poeng å opprette et ytelsesbudsjett som en del av prosjektet. Hvis du jobber med et eksisterende nettsted og ikke starter fra scratch, er det første trinnet å teste nettstedets ytelse for å se hvor du står i dag.
Når du har en grunnlinje av hvor nettstedet ditt står ytelsesmessig, kan du begynne å gjøre de nødvendige forbedringene for å øke nedlastingshastigheten. Et flott sted å starte er sannsynligvis med bildene dine på nettstedet. For store bilder er # 1-skyldige når det kommer til sakte lastesider, så optimalisering av bildene dine for weblevering kan virkelig hjelpe nettstedet ditt fra et ytelsesmessig synspunkt.
Virkeligheten er at forbedret nettsideytelse og raske nedlastingshastigheter er en fordel som alle besøkende vil sette pris på. Tross alt har ingen noensinne klaget over at et nettsted lastet "for fort", men hvis et nettsted tar for lang tid å laste, vil det absolutt slå folk bort om det er "respons" på deres skjerm eller ikke.
2. Smart Content Hierarchy
Når et nettsted vises på en stor skjerm, er du i stand til å legge innhold på en rekke måter på grunn av den omfattende skjermen eiendommen tilgjengelig. Du kan ofte passe viktige meldinger og bilder, nyhetsoppdateringer, hendelsesinformasjon og navigering på sidene på skjermen samtidig. Dette gjør at en besøkende enkelt og raskt kan skanne innholdet på hele siden og bestemme hva som er viktig for dem.
Dette scenariet endrer seg ganske dramatisk når du tar denne webdesign og forvandler den til små skjerm enheter, som en mobiltelefon. Plutselig jobber du med en brøkdel av skjermet eiendommen du hadde før. Dette betyr at du må bestemme hva som kommer til å vises først på nettstedet, hva som følger den, etc. I stedet for at alt settes på en gang, har du sannsynligvis bare plass til å vise en eller to ting (hvorav en er sannsynlig navigasjon). Dette betyr at beslutninger av hierarki må gjøres. Dessverre bestemmer det ofte hva som kommer først på skjermen, og deretter andre osv. Er måten selve siden er kodet på. Det er enklest, når du bygger et responsivt nettsted, for å vise det som er først i koden først på skjermen, etterfulgt av det andre elementet i kode og så videre. Dessverre kan det som er viktigst på en enhet, ikke være så kritisk på en annen. Et virkelig lydhørt nettsted forstår at innholdshierarkiet bør forandre avhengig av forskjellige situasjoner, og det bør være smart om hva det viser hvor.
Forbedringer i CSS-layoutteknikker, inkludert CSS Grid Layout, Flexbox og mer, gir webdesignere og utviklere flere muligheter når det gjelder å legge ut innhold på en intelligent måte, i stedet for å bli hamstrung av den nøyaktige rekkefølgen av innholdsområder i HTML-koden. Å dra nytte av disse nye layoutteknikkene vil bli enda viktigere da enhetens landskap, og behovene til brukerne våre, fortsetter å utvikle seg.
3. Erfaringer som tar hensyn til en enhets sterke og svake sider
Oppholder seg på emnet enheter - hver enhet som noen kan bruke til å besøke nettstedet ditt, har både sterke og svake sider som er knyttet til den plattformen. Et godt mottakelig nettsted forstår evner og begrensninger av ulike enheter og bruker dem til å skape tilpassede opplevelser som passer best til hvilken enhet en besøkende kanskje bruker i det øyeblikket.
For eksempel inneholder en mobiltelefon en rekke funksjoner som du ikke finner i en tradisjonell stasjonær datamaskin. GPS er et eksempel på en mobil-sentrisk funksjon (ja, du kan også få generell plasseringsinformasjon på skrivebord, men GPS-enheten er mye mer nøyaktig). Nettstedet ditt kan bruke GPS-informasjon til å sende en person svært detaljert og spesifikk trinnvis retningsinformasjon eller spesialtilbud basert på nøyaktig hvor de er i øyeblikket.
Et annet eksempel på denne rektor i praksis ville være et nettsted som forstår hva slags skjermdisplay du bruker og sender bilder som passer best til den aktuelle skjermen. Hvis du har en skjerm med høy pixel tetthet, kan du bestemme deg for å sende bilder av høyere kvalitet til den skjermen. Disse samme bildene ville være meningsløse på en mindre egnet skjerm, og den ekstra kvaliteten ville gå tapt mens den ekstra filstørrelsen skulle lastes ned uten egentlig grunn.
Virkelig store, responsive nettsteder vurderer hele brukeropplevelsen og jobber for å skreddersy den erfaringen som ikke bare er basert på en enhetstype eller en størrelse på skjermen, men også andre viktige aspekter ved maskinvaren.
4. Innhold med kontekst
I utgangspunktet mottok responsivt webdesign navnet på grunn av ideen om et nettsteds layout som reagerer på forskjellige skjermstørrelser, men du kan svare så mye mer enn bare skjermstørrelsen. Ved å bygge på det forrige eksempelet om bruk av enhetens styrker og svakheter, kan du bruke disse, så vel som andre data som dato og klokkeslett, for å virkelig tilpasse en nettsideopplevelse.
Tenk deg et nettsted for et stort messesenter. Mens et responsivt nettsted vil endre utformingen av sidene på nettstedet til å skalere med forskjellige skjermer, kan du også bruke datoen for å finne ut hvilket innhold som er viktigst å vise. Hvis det er tidsperioden før arrangementet, vil du sannsynligvis fremheve registreringsinformasjonen fremtredende. Hvis imidlertid hendelsen faktisk skjer i det øyeblikket, kan det hende at registreringen ikke er det viktigste innholdet. I stedet kan du bestemme at dagens tidsplan for hendelser er mer kritisk siden det er mer relevant for den brukerens umiddelbare behov.
Hvis du tar ting en skritt videre, kan du knytte deg til en enhetens GPS for å avgjøre hvor de egentlig er på messen. Du kan gi dem interaktivt innhold basert på deres plassering, og viser dem i nærheten boder eller økter om å komme i gang.
5. Tilgjengelighet
Det endelige eksempelet vi skal se på for hvordan et nettsted virkelig kan svare på en besøkers behov, er å tenke på tilgjengeligheten til nettstedet. Nettsteder skal kunne brukes av så mange mennesker som mulig, inkludert de med funksjonshemming. Nettstedet ditt skal kunne brukes av noen som trenger en skjermleser eller annen assistert programvare for å få tilgang til innholdet. På denne måten svarer nettstedet ditt på deres behov fordi du har sikret at opplevelsen, mens den er forskjellig for funksjonshemmede besøkende, fortsatt er riktig.
Ved å svare på så mange datapunkter som mulig, og ikke bare skjermstørrelsen, kan en nettside være så mye mer enn bare "mobilvennlig." Det kan bli en virkelig responsiv opplevelse i enhver forstand av uttrykket.
