Need Of The Hour ei ole tundlik disain, vaid tundlik jõudlus

Tundliku disainiga on viimasel ajal ilmnenud mitmeid jõudlusprobleeme. Iroonia on see, et tundlik disain toimib uusimate nutitelefonide puhul üsna hästi, kuid mitte midagi muud.

Võite olla segaduses, kuna enamikul veebikasutajatest on tipptasemel nutitelefonid. Siiski kasutab suur elanikkond endiselt väikese ekraaniga mobiilseadmeid, mis töötavad Androidi või iOS-i vanal versioonil ja võib-olla lihtsalt vähese funktsionaalsusega funktsioonitelefoni. Seetõttu ei teeninda tundlik disain laiemat publikut, nagu peaks.

Pikaajaline arvamus, et tundlik disain on mõeldud mis tahes ekraanisuurusega mobiilseadmete jaoks, on selle probleemiga palju pistmist. Kuna jõudlus väheneb ja rahulolematus kasvab, on vaja vaadata tundlikust disainist kaugemale. Selle asemel tuleks keskenduda reageeriva jõudluse tagamisele. See postitus on umbes sama.

Niisiis, suur küsimus on, mida teha?

Loobu töölaua-kõigepealt disainikontseptsioonist

Selle püsiva probleemi oluliseks põhjuseks on see, et endiselt keskendutakse töölauapõhisele disainile. Rõhk on lauaarvuti jaoks mõeldud veebisaidi kujundamisel ja seejärel muude seadmete (nt nutitelefonid ja tahvelarvutid) jaoks. Puuduvate funktsioonide jaoks kasutavad arendajad heldelt seibe ja polütäiteid. Muidugi on kiire arengu tagamiseks tohutult raamatukogusid. See aga ei lahenda brauseri kokkusobimatuse probleemi. Kas on õigustatud tegeleda disainikontseptsiooniga, mis ei anna soovitud tulemusi?

Ei ole väga raske rakendada mobiilipõhise disaini lähenemisviisi, mille eesmärk on pakkuda mobiilikasutajale tema ekraanil ainult kavandatud teavet, mitte kõike, mis seadet tapab. Luke Wroblewski kujundas selle disainilahenduse kontseptsiooni esimest korda 2011. aastal ja sellest ajast alates on paljud valdkonna eksperdid kiitnud tema läbimurdelist disainilahendust.

Rohkem andmeid, isegi kui see võtab sekundi murdosa, võib avaldada üldist laadimisaega märkimisväärselt mõjutada. Siiski on tõsi ka see, et veebisaidid muutuvad graafilise sisuga raskemaks ja üha rohkem inimesi kasutab sellele juurdepääsuks oma mobiilseadmeid. Kui kasutaja sisestab madala eraldusvõimega ekraaniga mobiilis veebisaidi URL-i, on tema eesmärk alati veebisaidi sisule juurde pääseda, kuid see, mida ta kogeb, on õudusunenägu. Selle põhjuseks on raskused lõputute mittevajalike reklaamide kaudu navigeerimisel. Eemaldage sellised välditavad sisuelemendid, et kasutaja saaks juurdepääsu põhisisule. See suurendab saidi liiklust, kuna peale tipptasemel nutitelefonide kasutajate pääsevad paljud teie veebisaidile madala eraldusvõimega mobiilseadmete kaudu. Ainult tekstiga versiooni edastamine on täiesti loogiline, kui mobiiltelefoni võimalused on piiratud, aga jällegi võite öelda, et kasutajakogemus on ohus. On küll, aga see on siiski parem kui sisu puudumine. Vähemalt sellisel juhul pääsevad kasutajad teie saidi põhiteabele juurde. Kas on mõtet kujundada veebisait nii, et see vähendaks selle potentsiaalset ulatust?

Kindlasti nõustute tõsiasjaga, et lõputu ootamine ainult veebisaidi kontrollimiseks ei eruta kedagi. Mõnede Akamai ja Gomez.com-i küsitluste kohaselt eeldab ligikaudu 50% veebikasutajatest, et veebisait laaditakse 2 sekundi või isegi vähema aja jooksul. Kui veebisaiti ei laadita brauseris vaid 3 sekundi jooksul, on saidi hülgamise tõenäosus suurem! Veelgi enam, enamikul e-kaubanduse veebisaitidel on tänapäeval palju sotsiaalsete jagamisnuppe, nagu Facebook, Google Plus, Twitter, LinkedIn jne. Kas teate, et need nupud lisavad teie reageerivale saidile rohkem kui 500 KB ja mõjutavad selle toimivust? Ainuüksi Facebooki meeldimisnupp nõuab 270KB tihendatud koodi! See nõuab ka mitut HTTP-päringut. Selle asemel

Veebisaidi toimivus mõjutab otseselt ettevõtte toimimist ja aeglane reageerimisvõimega veebisait ei tee ettevõttele kunagi midagi head. Uskuge või mitte, enamik mobiilikasutajaid ei ole huvitatud uurimistööst ega pikkade artiklite lugemisest. Enamik neist kasutab oma mobiilseadmeid hõlpsaks juurdepääsuks Facebookile, WhatsAppile ja Twitterile ning veebiostlemise rõõmu nautimiseks. Veelgi enam, mobiil pole enam trend, see on tulevik.

Comscore’i eelmise aasta statistika kohaselt on ainult mobiiliga Interneti-kasutajate arv USA-s järsult kasvanud, samas kui ainult lauaarvutite kasutajate arv on vähenenud 10,6 protsendini.

Kas peate veenmiseks veel midagi ütlema?

Tagada graatsiline lagunemine

Võib-olla olete viimastel aastatel kohanud tundliku disaini maailmas uut moesõna ja see on „graatsiline halvenemine". Jah, graatsiline halvenemine tähendab, et isegi kui funktsioon ei tööta edukalt, peaks see ebaõnnestuma viisil, mis hõlbustab vastuvõetavat kasutatavust. See tähendab, et tuleb luua lauaarvuti veebisaidi kujundus ja seejärel järk-järgult liikuda tahvelarvutite, nutitelefonide ja funktsioonitelefonide juurde. Responsiivse kujunduse jõudlus, kus veebisait graatsiliselt halveneb, on kindlasti kõrge, kuna kasutajakogemus on siin alati tipptasemel. Veebileht jääb puudustele vaatamata funktsionaalseks ning külastajale avaldab kindlasti muljet üldine kvaliteet.

Nüüd võib teil tekkida selline küsimus, et mis on graatsilises lagunemises nii paeluvat. Vastus on lihtne. Seda seetõttu, et see muudab teie sisu nähtavaks ja loetavaks brauserist sõltumata, mis on märkimisväärne saavutus! Õnneks, kui kasutate CSS3, muutub graatsiline halvendamine lihtsaks tööks, kuna enamik CSS3 omadusi halveneb automaatselt, st ümarad nurgad muutuvad ruudukujulisteks, tekst mähitakse selle asemel, et jookseks ühele reale, kalded muutuvad tasaseks värviks ja palju muud.

Olgu meil näide graatsilise degradatsiooni kohta. Oletame, et olete loonud JavaScripti funktsioonidega tundliku veebisaidi ja teie brauser neid funktsioone ei toeta või võivad need olla teie kliendi poolel keelatud. Niisiis, mida saate sisu hankimiseks teha? Noh, sellisel juhul võimaldab graatsiline halvenemine teie brauseril kuvada sisu märgendi "noscript" sees.

Seda saate paremini mõista allpool toodud kodeerimisega:

<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>

Tahaksin jagada veel ühte näidet graatsilisest halvenemisest ja see on HTML5 kasutamine YouTube’i poolt videote esitamiseks. Oletame, et teie brauser ei toeta HTML5, video kuvatakse Flashi abil ja kui isegi Flash pole installitud, saate teate, et installige sama oma mobiilseadmesse. Mõlemal juhul saate videot vaadata. Selle graatsilise halvenemise üks puudus on aga see, et kuigi jõudlus on hea, peate aegunud brauserite kasutamisel teatud kujunduselementidega järeleandmisi tegema. Arvan, et veebisaidi oluliste visuaalsete elementide eelnevalt kindlaks määramine võib asja ära teha.

Kasutamata raamatukogusid pole vaja hoida

Üks parimaid tavasid võib olla mittekasutavate teekide säilitamine. Jah, on tõsi, et kasutatud ja kasutamata raamatukogude jälgimine on väga aeganõudev, kuid see on tõesti väärt. Mõnikord olete märganud, et kasutate pärast teegi kaasamist ainult ühte funktsiooni. Mõnikord võib see olla isegi kaks või kolm. Kõige sagedamini tundliku kujunduse loomiseks kasutan jQuery. Tegelikult on palju jQuery teeke, mis aitavad arendajatel tundlike veebisaitide loomisel. Mitme teeki, näiteks JavaScripti teekide kaasamine lihtsalt seetõttu, et teile meeldisid mõned vidinad, pikendab teie lehe laadimisaega märkimisväärselt. Siiski on hea tava analüüsida, millised raamatukogud on kasutusel ja mil määral.

Kontrollige funktsioonide saadavust

Enne selle aktiveerimist saate kontrollida, kas teie seade toetab teatud funktsiooni või mitte. Näiteks juhtub, et kuigi olete oma vananenud Android-telefoni installinud Google Chrome’i uusima versiooni, ei kuvata see ikkagi teie veebisaiti. Mõnikord jookseb brauser sellise veebisaidi laadimise katsel nii tõsiselt kokku, et kogu mobiilseade ei reageeri. Peate seadme taaskäivitama ja see on viimane asi, mida olete soovinud, kas pole? Paljud teatud veebirakenduste kasutajad kannatavad juba selle probleemi tõttu.

Seadmete funktsioonide kättesaamatus ja siiski veebisaitide või rakenduste kujundamine on põhjustanud mõningaid märgatavaid probleeme, nagu Google Hangouti rakenduste kohene kokkujooksmine Android-seadmetes kogu maailmas, sõltumata brauseri tüübist. Seda hoolimata asjaolust, et rakendus oli kerge rakendus. Võite väita, et kasutajad kasutasid Android-nutitelefonide vanemat versiooni, kuid tõsi on ka see, et sellised seadmed on endiselt saadaval kõigis mobiilipoodides täiesti uutena. Paljud mobiilikasutajad seisavad silmitsi sama toimivusprobleemiga ka YouTube’i ja Twitteri rakendusega. Isegi Google’i Android System Webview teenuse värskendus Google Play kaudu külmutab paljud nutitelefonid, et muutuda kasutajate õudusunenäoks.

Optimeerige pilte

Visuaalselt atraktiivsete suurte piltide lisamine on disainerite jaoks alati ahvatlev. Probleem tekib siis, kui nad ei tihenda neid pilte enne nende CMS-i üleslaadimist. See kehtib eriti mitme e-kaubanduse veebisaidi kohta kogu veebis. Radware’i hiljutiste uuringute kohaselt muutuvad lehed suuremaks ja ligikaudu 45 protsenti 100 populaarseimast jaemüügisaidist ei tegele piltide tihendamisega. See muudab sellised saidid mahukamaks ja selle tulemusena pikeneb laadimisaeg, kuid kujundajana saate probleemi vältida.

Tehke pildid väiksema suurusega, kasutades sobivat pildi optimeerimise tööriista. Tegelikult pole sellistest tööriistadest veebis puudust. Mõned tähelepanuväärsed, mida saate kasutada, on Dynamic Drive, Smush it ja Riot. Kui olete Photoshopi proff, saate pildi suurust ka ise optimeerida. Kasutage nutikat tihendustehnikat ja eemaldage see üleliigsetest metaandmetest. Graafika teisendamine PNG-vormingusse, värvirikaste piltide JPEG-vormingusse ja animeeritud GIF-vormingusse teisendamine teeb samuti asja ära.

Ekstreemseteks juhtudeks ette valmistatud

Kui hakkate kujundama, olete kindlasti märganud, et teil tekib kiusatus kujundada lehti, mis on lihtsamad. Vähemalt võimaldab see teil oma sidusrühmadele midagi näidata. See võib esmapilgul tunduda tore, kuid kui suunate oma jõupingutused kõige keerulisematele stsenaariumidele, saate alguses hea tulemuse.

Näiteks veebileht, millel on mõned artiklid, ajaveebid ja pressiteated. Sellel peab ka pealkiri olema. Mis juhtub nüüd, kui pealkirjaruumis, mille olete mõelnud kuvada „Reageeriva veebidisaini näpunäited”, peab olema pealkiri „10 olulist nõuannet ja tehnikat edukaks tundlikuks veebisaidi kujundamiseks”? Nüüd on see äärmuslik juhtum.

Ülalkirjeldatud pingutused teie tundliku veebisaidi toimivuse optimeerimiseks näivad olevat nähtamatud. Need jõupingutused toovad aga head tulu õnnelike ja rahulolevate kasutajatega. Võite kasutada erinevaid tööriistu, näiteks Pingdomi tööriistu, mis võimaldavad teil oma tundliku veebisaidi laadimisaega vaevata jälgida. Ärge jätke vahele testimise olulist aspekti, et veenduda, kas teie tundlik veebisait toimib ettenähtud viisil. Testige seda võimalikult paljudes tõelistes seadmetes.

Samuti saate kasutada ressursse, nagu Screenfly, mis võimaldab teil testida oma veebisaiti mitme ekraani eraldusvõimega. Võite väita, et kõik need strateegiad nõuavad palju aega, kuid jällegi tuleb kasu saamiseks kõvasti higistada. Tänapäeval on responsiivse ja tundliku jõudlusega veebisaidi loomine hädavajalik, seda enam, et Google hindab saite nende toimivuse alusel. Kui olete disainer või arendaja, ärge piirduge ühegi ülaltoodud parimate tavadega. Peaksite otsima rohkem lahendusi ja võib-olla vajate palju vaeva, et pakkuda kiiresti reageerivat veebisaiti.