Need Of The Hour er ikke responsiv design, men responsiv ytelse

Responsiv design har vist flere ytelsesproblemer den siste tiden. Ironien er – responsiv design gjør det ganske bra på den nyeste serien av smarttelefoner, men ingenting utover det samme.

Du kan bli forvirret ettersom de fleste nettbrukere har avanserte smarttelefoner. Imidlertid bruker en stor befolkning fortsatt mobile enheter med liten skjermstørrelse som kjører på en gammel versjon av Android eller iOS og kanskje bare en funksjonstelefon med lite funksjonalitet. Som et resultat tjener responsiv design ikke et bredere publikum slik det er ment å gjøre.

Den langvarige troen på at responsiv design er for mobile enheter uansett skjermstørrelse har mye å gjøre med dette problemet. Ettersom ytelsen drypper og misnøyen øker, er det behov for å se forbi responsiv design. Fokus bør i stedet være på å sikre en responsiv ytelse. Dette innlegget handler om det samme.

Så det store spørsmålet er hva du skal gjøre?

Kast desktop-første designkonsept

En betydelig bidragsyter til dette vedvarende problemet er at fokus fortsatt er på en desktop-first design-tilnærming. Det legges vekt på å designe et nettsted for en stasjonær datamaskin og deretter designe for andre enheter som smarttelefoner og nettbrett. For enhver manglende funksjonalitet bruker utviklere shims og polyfills sjenerøst. Selvfølgelig er det enorme biblioteker for å sikre en rask utvikling. Dette løser imidlertid ikke problemet med nettleserinkompatibilitet. Er det berettiget å engasjere seg i et designkonsept som ikke gir ønskede resultater?

Det er ikke veldig vanskelig å implementere en mobil-først designtilnærming der målet vil være å tilby kun den tiltenkte informasjonen til mobilbrukeren på skjermen hans eller hennes i stedet for alle tingene som dreper enheten. Luke Wroblewski konseptualiserte denne designtilnærmingen for første gang i 2011, og siden den gang har mange bransjeeksperter hyllet hans banebrytende designtilnærming.

Mer data, selv om det tar en brøkdel av et sekund, kan ha en bemerkelsesverdig innvirkning på den totale lastetiden. Det er imidlertid også sant at nettsider blir tyngre med grafisk innhold, og flere bruker mobilenhetene sine for å få tilgang til det samme. Når en bruker skriver inn URL-en til et nettsted på en mobil med en lavoppløsningsskjerm, er målet alltid å få tilgang til innholdet på nettstedet, men det han opplever er et mareritt. Dette er på grunn av vanskelighetene med å navigere via de endeløse unødvendige reklamene. Fjern slike unngåelige innholdselementer for å gi brukeren tilgang til hovedinnholdet. Dette øker trafikken på nettstedet, siden mange, bortsett fra brukere med avanserte smarttelefoner, vil få tilgang til nettstedet ditt via mobilenheter med lav oppløsning. Å levere en tekstversjon gir perfekt mening hvis mobilen har begrensede muligheter, men igjen, du kan si at brukeropplevelsen blir kompromittert. Vel, det er det, men det er fortsatt bedre enn å ikke motta noe innhold i det hele tatt. I det minste i et slikt tilfelle vil brukere få tilgang til grunnleggende informasjon om nettstedet ditt. Er det noen vits i å designe en nettside på en slik måte at den reduserer dens potensielle rekkevidde?

Du vil helt sikkert akseptere det faktum at det å vente i det uendelige bare for å sjekke en nettside ikke begeistrer noen. I henhold til noen undersøkelser fra Akamai og Gomez.com forventer omtrent 50 % av nettbrukerne at et nettsted skal lastes innen 2 sekunder eller enda mindre. Det er større sjanser for at nettstedet forlates hvis et nettsted ikke laster inn i nettleseren innen bare 3 sekunder! Dessuten har de fleste e-handelsnettsteder i dag et stort antall sosiale delingsknapper som Facebook, Google Plus, Twitter, LinkedIn osv. Vet du at disse knappene legger til mer enn 500KB til ditt responsive nettsted og påvirker ytelsen? Liker-knappen på Facebook alene krever en komprimert kode på 270KB! Det krever også flere HTTP-forespørsler. I stedet,

Et nettsteds ytelse har en direkte innvirkning på ytelsen til en bedrift, og en sakte responsiv nettside gjør aldri noe bra for en bedrift. Tro eller ei, de fleste mobilbrukere er ikke interessert i å forske eller lese lange artikler. De fleste av dem bruker sine mobile enheter for enkel tilgang til Facebook, WhatsApp, Twitter og for å nyte gleden ved netthandel. Dessuten er mobil ikke lenger en trend, det er fremtiden.

I henhold til fjorårets statistikk for Comscore, har antallet Internett-brukere som kun er mobil i USA økt kraftig, mens brukere som kun bruker datamaskiner er redusert til 10,6 prosent.

Trenger du å si noe mer for å overbevise?

Sørg for grasiøs nedbrytning

I løpet av de siste årene har du kanskje kommet over det nye buzzwordet i verden av responsiv design, og det er "grasiøs degradering". Ja, grasiøs nedbrytning innebærer at selv om en funksjon ikke fungerer vellykket, bør den mislykkes på en måte som muliggjør en akseptabel brukervennlighet. Dette betyr å lage et nettsteddesign for en stasjonær datamaskin og deretter gradvis gå over til nettbrett, smarttelefoner og funksjonstelefoner. Ytelsen til et responsivt design der nettsiden er nedverdigende, vil garantert være høy, siden brukeropplevelsen her alltid er førsteklasses. Nettstedet vil forbli funksjonelt til tross for eventuelle mangler, og en besøkende vil sikkert bli imponert over den generelle kvaliteten.

Nå har du kanskje dette spørsmålet i tankene om hva som er så fascinerende med grasiøs nedbrytning. Svaret er enkelt. Dette er fordi det gjør innholdet ditt synlig og lesbart uavhengig av nettleseren, noe som er en bemerkelsesverdig bragd! Heldigvis, hvis du bruker CSS3, blir grasiøs nedbrytning en enkel jobb ettersom de fleste egenskapene til CSS3 degraderes automatisk, dvs. avrundede hjørner blir firkantede, teksten pakkes inn i stedet for å kjøre i en enkelt linje, gradienter blir flate farger og mye mer.

La oss ta et eksempel på grasiøs nedbrytning. Anta at du har designet et responsivt nettsted med JavaScript-funksjoner, og disse funksjonene støttes ikke av nettleseren din eller kan være deaktivert på kundens side. Så, hva kan du gjøre for å få innholdet? Vel, i et slikt tilfelle lar grasiøs nedbrytning nettleseren din vise innholdet i "noscript"-taggen.

Dette kan du forstå bedre med kodingen gitt nedenfor:

<noscript>
<h1>Dear John, you have encountered a problem!</h1>
<p>Your browser lacks support for JavaScript or is temporarily disabled.
Visit our <a href="/support/browsers/">browser support</a> for help.</p>
</noscript>

Det er enda et eksempel på grasiøs degradering som jeg vil dele, og det er bruken av HTML5 av YouTube for å spille av videoer. Anta at nettleseren din ikke støtter HTML5, videoen vil vises ved å bruke Flash, og hvis selv Flash ikke er installert, vil du motta en melding om å installere det samme på mobilenheten din. I begge tilfeller vil du kunne se videoen. En ulempe med denne grasiøse degraderingen er imidlertid at selv om ytelsen er god, må du gå på akkord med visse designelementer hvis du bruker utdaterte nettlesere. Jeg antar å bestemme de essensielle visuelle elementene på nettstedet ditt på forhånd kan gjøre susen.

Du trenger ikke å beholde ubrukte biblioteker

En beste praksis kan være å ikke beholde biblioteker som ikke er i bruk. Ja, det er sant at det er veldig tidkrevende å holde styr på de brukte bibliotekene og de ubrukte, men det er virkelig verdig. Noen ganger har du kanskje lagt merke til at du bare bruker en enkelt funksjon etter inkludering av et bibliotek. Det kan noen ganger være to eller tre til og med. Det oftest verktøyet jeg bruker for å lage et responsivt design er jQuery. Faktisk er det mange jQuery-biblioteker som hjelper utviklere med å lage responsive nettsteder. En inkludering av flere biblioteker som JavaScript-bibliotekene bare fordi du har likt noen widgets kommer til å øke lastetiden for siden din i betydelig grad. Det vil imidlertid være en ryddig praksis å analysere hvilke biblioteker som er i bruk og i hvilken grad.

Sjekk tilgjengeligheten av funksjoner

Du kan sjekke om enheten din støtter en bestemt funksjon eller ikke før du aktiverer den. For eksempel hender det at selv om du har installert den nyeste versjonen av Google Chrome på din utdaterte Android-telefon, viser den fortsatt ikke nettstedet ditt. Noen ganger, i et forsøk på å laste et slikt nettsted, krasjet nettleseren så kraftig at det gjør at hele mobilenheten ikke reagerer. Du må starte enheten på nytt, og dette er det siste du har ønsket deg, er det ikke? Mange brukere av visse nettapplikasjoner lider allerede på grunn av dette problemet.

Utilgjengelighet av funksjoner på enheter og likevel utforming av nettsteder eller applikasjoner har resultert i noen merkbare problemer som umiddelbar krasj av Google Hangout-apper på Android-enheter over hele verden, uavhengig av nettlesertype. Dette til tross for at appen var en lettvektsapp. Du kan argumentere for at brukere brukte en eldre versjon av Android-smarttelefoner, men det er også sant at slike enheter fortsatt er tilgjengelige fra hyllevare som en helt ny i alle mobilbutikkene. Mange mobilbrukere møter det samme ytelsesproblemet med YouTube og Twitter-appen også. Selv en oppdatering av Googles Android System Webview-tjeneste via Google Play fryser mange smarttelefoner til å bli et slags mareritt for brukere.

Optimaliser bilder

Å inkludere visuelt tiltalende store bilder er alltid fristende for designerne. Problemet oppstår når de ikke komprimerer disse bildene før de laster dem opp til CMS. Dette gjelder spesielt med flere e-handelsnettsteder på nettet. I henhold til den nylige forskningen fra Radware, blir sidene større, og omtrent 45 prosent av de 100 beste forhandlernettstedene driver ikke med bildekomprimering. Dette gjør slike nettsteder større, og som et resultat øker lastetiden, men som designer kan du unngå problemet.

Lag bildene med mindre størrelse ved å bruke et passende bildeoptimaliseringsverktøy. Det er faktisk ingen mangel på slike verktøy over nettet. Noen av de bemerkelsesverdige du kan ta i bruk er Dynamic Drive, Smush it og Riot. Hvis du er en proff i Photoshop, kan du også optimere bildestørrelsen selv. Bruk en smart komprimeringsteknikk og fjern den fra eventuelle overflødige metadata. Konvertering av grafikk til PNG, fargerike bilder til JPEG og animerte til GIF gjør også susen.

Klart for ekstreme tilfeller

Når du begynner å designe, må du ha lagt merke til at du blir fristet til å designe sidene som er enklere. Dette gjør i det minste at du kan vise noe til interessentene dine. Dette kan virke fint ved første øyekast, men hvis du fokuserer innsatsen mot de mest utfordrende scenariene, i begynnelsen, vil du få et godt resultat.

For eksempel en nettside med noen artikler, blogger og pressemeldinger. Den må ha en tittel også. Nå, hva vil skje hvis tittelplassen du har tenkt å vise "Responsive Web Design Tips" må vise en tittel "10 Essential Tips and Techniques for Successive Responsive Website Design"? Nå er dette et ekstremt tilfelle.

Et forsøk som ovenfor for å optimalisere ytelsen til den responsive nettsiden din virker usynlig. Denne innsatsen gir imidlertid god avkastning med fornøyde og fornøyde brukere. Du kan ta hjelp av ulike verktøy som Pingdom- verktøy som kan gjøre deg i stand til å overvåke lastetiden til det responsive nettstedet ditt uten problemer. Ikke hopp over det viktige aspektet ved testing for å sikre at det responsive nettstedet ditt fungerer som det skal. Test den på så mange ekte enheter du kan.

Du kan også bruke ressurser som Screenfly som lar deg teste nettstedet ditt på flere skjermoppløsninger. Du kan argumentere for at alle disse strategiene trenger en betydelig mengde tid, men igjen må man svette hardt for å høste fordelene. I dag er det viktig å lage et responsivt nettsted med responsiv ytelse, enda mer siden Google vurderer nettsteder basert på ytelsen deres. Hvis du er en designer eller en utvikler, ikke begrense deg til noen av de ovennevnte beste praksisene. Du bør se etter flere løsninger og kan presse hardt for å levere et nettsted som viser responsiv ytelse.