Responsive webdesign er allerede verdensomspennende ord i tiåret, og det er ideelt for den multiscreen-tilkoblede verden vi lever i. Men avstanden til dette er i ytelse på grunn av større filstørrelser.
Dette har bedt noen eksperter om å si at, som de tidlige dagene av Flash, er responsiv design noe vi alle kan bli begeistret for uten god grunn. Imidlertid, mens det for øyeblikket er ytelsesproblemer, kan disse overvinnes til en viss grad med noen små justeringer, komprimering og bildeformatering.
Responsive design laster alle de samme HTML-elementene for hver enhet, inkludert de som er ment for nettbrett og på skrivebordet. Dette betyr at alt innhold ofte leveres, inkludert bilder og skript, uansett hvilken enhet den blir vist på.
En studie utført i fjor viste at 86% av de lydhørige nettstedene som er tilgjengelige på nettet, leverer en fullstendig stasjonær side til mobilenheter. Dette er tydeligvis en trend for designteknikken som må adresseres, hvis vi skal stoppe utviklingen av oppblåste nettsider i sporene.
For øyeblikket reagerer designet på sidestørrelser, og dette er trenden som må tas opp, spesielt når du vurderer at 57% av mobilbrukerne vil gå hvis nettstedet ikke laster inn innen 3 sekunder.
For de som allerede har et design på plass og vil nå optimalisere, Mobitest kan brukes til å måle ytelsen for å fortsette og adressere den. Selvfølgelig, når du planlegger et design, vil optimalisering bli enklere å utføre på dette stadiet, og ytelse skal alltid betraktes som en viktig del av design, snarere enn ettertanke.
For å forbedre ytelsen må størrelsen på sidene og ressursene som er lastet med den, reduseres. Dette kan utføres ved hjelp av ulike teknikker, uten å endre utseendet på nettstedet.
Det første du må vurdere er å sikre at bare de ressursene som trengs sendes til målenheten. Dette kan gjøres ved å minimere antall HTTP-forespørsler, slik at brukeren bruker mindre tid på å vente på at DOM skal lastes. Dette kan i sin tur gjøres ved å komprimere CSS og Javascript ressurser, for hvilke verktøy som Kompass - et open source CSS authoring framework - kan brukes. Dette gjør det mulig for utviklere å skape renere markup og lage sprites og utvidelser med minimal oppstyr.
Med hensyn til JavaScript, verktøy som UglifyJS kan brukes, som komprimerer kode.
Dette kan betraktes som en viktig teknikk når det gjelder lydhør design, da det kan brukes til å sørge for at mobil- og smarttelefonbrukere ikke laster ned sidene på nettstedet som reduserer det, eller at de ikke vil bruke.
Betinget lasting kan brukes til å stoppe all slags innhold fra lasting, inkludert sosiale widgets, bilder, kart og mye mer. Det er viktig å merke seg at dette nettstedet skal testes grundig på hvert trinn av optimalisering slik at det er enkelt å se hva som har gjort en forskjell når du går.
Vi vet alle at bildene vanligvis er ansvarlige for å ta opp den største mengden kilobytes i en nettside. Det er også trygt å si at bilder som er designet for en stasjonær nettleser, kommer til å underprestere når de leveres til en mobilenhet.
Hvis et nettsted også har mye eldre innhold, vil dette påvirke ytelsen enda mer, og en måte å hindre at innholdet lastes fra, må implementeres. Mens dette kan gjøres ved å endre markeringen ved å endre src eller img-elementene, PHP-løsningen Adaptive Images er sannsynligvis lettere. Programvaren registrerer skjermstørrelsen og oppretter automatisk, caches og leverer de riktige nedskalerte innebygde HTML-bildene, uten at det må endres merket. For å brukes sammen med Fluid Image teknikker, er det en praktisk løsning og en som vil spare mye tid. Adaptive Images bruker en htaccess-fil, en php-fil og en enkelt linje med Javascript for å bestemme skjermstørrelsen til besøkende på nettstedet.
Det er verdt å tenke på tekst også, da dette vil vikle naturlig når enheten er innsnevret og kan forårsake visningsproblemer. FitText er et verktøy som kan hjelpe til med å løse dette, en jQuery-plugin som automatisk oppdaterings skriftstørrelse, med muligheter for minimums- og maksimumstørrelser som vil bli tillatt.
Dette er ideelt for overskrifter som kan vises dårlig på en mobilenhet og tillater at CSS3-spesifisert skriftstørrelse ignoreres. FitText er imidlertid bare ment for overskrifter og bør ikke brukes i avsnittet tekst.
Mens lydhør design har sine problemer, akkurat som alle andre nye teknologier eller teknikker, er det fortsatt verdt å velge å bygge et nettsted på denne måten. Ingen ønsker å gå bakover, og mens det kan være enklere å bygge en mobil nettside, er det mye bedre å være så nyskapende som mulig.
Google er enig i, deres råd er å bruke responsiv design som den beste måten å designe for mobil. Selvfølgelig til søkegigantene, betyr dette at de bare har en nettadresse for å krype, i stedet for mange nettadresser for det som egentlig er det samme nettstedet, så det er i deres interesse egentlig.
Men i denne tiden med sosial deling mani er det også fornuftig, siden mobile brukere kan dele en side med noen som bruker et skrivebord. For å skape en ensartet opplevelse, bør dette levere det samme innholdet.
I tillegg til at det å ha et responsivt nettsted forbedrer produktiviteten i arbeidsstyrken, da det i hovedsak er mye mindre å gjøre. Dette gjelder innhold, oppdateringer og SEO, da dette må utføres separat hvis forskjellige nettsteder er bygget.
Mobile enheter og nettbrett blir normen for tilkobling til internett og surfing i denne nesten post-PC-epoken. Tablet-salg over hele verden har økt på bare ett år, mer enn dobling i den tiden, og med mange forbrukere velger du nå forskjellige enheter som kjører Android, samt iOS.
Det er liten tvil om at så langt responsiv design har en positiv innflytelse, til tross for ytelsesproblemer. Ifølge en rapport , som spurte noen av verdens beste merker om hvordan å ha et responsivt nettsted hadde påvirket trafikken, var besøk på tvers av alle enhetene betydelig.
Dette innebar en gjennomsnittlig økning på 23% av mobilgjestene, samt en redusert avvisningstakt på 26%, med besøkende som brukte rundt 7,5% mer tid på nettstedene enn det som tidligere ble sett.
O'Neill, den trendy surfeklæringsforhandleren, rapporterer en konverteringsfrekvens som er 65,7% høyere på iPad og iPhone som et resultat av å utvikle et responsivt nettsted. Dette utgjorde en vekst på 101,2% på disse enhetene alene.
Med hensyn til Android-enheter var konverteringsfrekvensen enda bedre, med en stor 407,3%, og utgjorde en stor omsetningsvekst på 591,4%. En mindre konverteringsfrekvens ble sett på ikke-mobile enheter, selv om veksten fortsatt var sett.
Dette er bare en av merkene som gir ut tallene sine, og det er ganske vanskelig å få dataene fra andre akkurat nå, mye som det var med virkningen av sosiale medier for noen år siden. Det går imidlertid på en måte å bevise at avkastningen fra å designe en responsiv nettside kan være betydelig.
Med den begrunnelsen, hvilken ytterligere årsak trenger noen designer å begynne å designe responsivt for sine kunder og forsøke å sikre at de utfører så vel som de muligens kan? Det er ikke en, og de designere som ikke ønsker å gå i vanskeligheten med å lære å designe, bygge og optimalisere et nettsted ved hjelp av lydhørsteknikker, kan finne seg igjen i støvet.
67% av brukerne sier at de har kjøpt via et mobilnettsted, og det antas at mobilt internettbruk vil overta det på skrivebordet neste år. Med alt dette i bakhodet, er det lett å se hvorfor bedrifter vil bli mer og mer interessert i de beste mobile nettløsninger de kan tilby.
Responsiv design kan fortsatt være i sin barndom for øyeblikket, men det synes tydelig at etterspørselen etter markedet vil gjøre den voksen raskt, så det er verdt å lære så mange aspekter til disiplinen som mulig nå.
Hvilke teknikker har du brukt til å optimalisere responsive nettsteder? Giver leveranse av alternativt innhold negativ fordelene med responsiv design? Gi oss beskjed i kommentarene.