Nevoia orei nu este un design receptiv, ci performanță receptivă

Designul responsive a prezentat mai multe probleme de performanță în ultima vreme. Ironia este că designul receptiv se descurcă destul de bine pe cea mai recentă gamă de smartphone-uri, dar nimic în afară de același lucru.

S-ar putea să fii confuz, deoarece majoritatea utilizatorilor web au smartphone-uri de ultimă generație. Cu toate acestea, o populație mare folosește încă dispozitive mobile cu o dimensiune mică a ecranului care rulează pe o versiune veche de Android sau iOS și poate doar un telefon cu funcții reduse. Drept urmare, designul responsive nu deservește un public mai larg așa cum ar trebui să facă.

Convingerea de mult timp că designul responsive este pentru dispozitive mobile de orice dimensiune a ecranului are mult de-a face cu această problemă. Pe măsură ce performanța scade și nemulțumirea crește, este nevoie să privim dincolo de designul receptiv. Ar trebui să se concentreze în schimb pe asigurarea unei performanțe receptive. Această postare este cam aceeași.

Deci, marea întrebare este ce să faci?

Renunțați la conceptul de proiectare pe desktop

Un contributor semnificativ la această problemă persistentă este faptul că accentul se pune în continuare pe o abordare de proiectare care să primească în primul rând desktop-ul. Accentul se pune pe proiectarea unui site web pentru un desktop și apoi pe proiectarea pentru alte dispozitive precum smartphone-uri și tablete. Pentru orice funcționalitate lipsă, dezvoltatorii folosesc cu generozitate shim-uri și polyfills. Desigur, există biblioteci vaste pentru a asigura o dezvoltare rapidă. Cu toate acestea, acest lucru nu abordează problema incompatibilității browserului. Este justificat să te angajezi într-un concept de design care nu dă rezultatele dorite?

Nu este foarte greu să implementați o abordare de design care să primească în primul rând mobilul, în care scopul va fi să ofere utilizatorului de mobil doar informațiile dorite pe ecranul său, în loc de toate lucrurile care distrug dispozitivul. Luke Wroblewski a conceptualizat această abordare de design pentru prima dată în 2011 și de atunci, mulți experți din industrie au lăudat abordarea sa de design inovatoare.

Mai multe date, chiar dacă durează o fracțiune de secundă, pot avea un impact remarcabil asupra timpului general de încărcare. Cu toate acestea, este, de asemenea, adevărat că site-urile web devin din ce în ce mai grele cu conținut bogat în grafică și mai mulți oameni își folosesc dispozitivele mobile pentru a-l accesa. Când un utilizator introduce adresa URL a unui site pe un mobil cu un ecran de rezoluție scăzută, scopul său este întotdeauna să acceseze conținutul site-ului, dar ceea ce experimentează este un coșmar. Acest lucru se datorează dificultății de a naviga prin reclamele inutile. Eliminați astfel de elemente de conținut evitabile pentru a permite utilizatorului dvs. să acceseze conținutul principal. Acest lucru crește traficul pe site, deoarece în afară de utilizatorii cu smartphone-uri de ultimă generație, mulți vor accesa site-ul dvs. prin intermediul dispozitivelor mobile cu rezoluție joasă. Furnizarea unei versiuni numai text are perfect sens dacă mobilul are capabilități limitate, dar, din nou, puteți spune că experiența utilizatorului este compromisă. Ei bine, este, dar este totuși mai bine decât să nu primești deloc conținut. Cel puțin într-un astfel de caz, utilizatorii vor accesa informațiile de bază despre site-ul dvs. Are rost să proiectezi un site web în așa fel încât să-i reducă acoperirea potențială?

Cu siguranță vei accepta faptul că așteptarea la nesfârșit doar pentru a verifica un site web nu entuziasmează pe nimeni. Conform unor sondaje realizate de Akamai și Gomez.com, aproximativ 50% dintre utilizatorii de web se așteaptă foarte mult ca un site web să se încarce în 2 secunde sau chiar mai puțin. Există mai multe șanse de abandonare a site-ului dacă un site web nu se încarcă în browser în doar 3 secunde! Mai mult, majoritatea site-urilor de comerț electronic din ziua de azi au un număr mare de butoane de partajare socială, cum ar fi Facebook, Google Plus, Twitter, LinkedIn etc. Știi că aceste butoane adaugă mai mult de 500KB site-ului tău responsive și îi afectează performanța? Numai butonul de like de pe Facebook necesită un cod comprimat de 270KB! De asemenea, necesită mai multe solicitări HTTP. În schimb, utilizați butoanele de partajare socială bazate pe adrese URL, deoarece o dimensiune atât de mare afectează în mod inevitabil timpul de încărcare a site-ului dvs. responsive, chiar dacă conexiunea mobilă este rapidă.

Performanța unui site web are un impact direct asupra performanței unei afaceri, iar un site web cu răspuns lent nu face niciodată nimic bun pentru o afacere. Credeți sau nu, majoritatea utilizatorilor de telefonie mobilă nu sunt interesați să facă cercetări sau să citească articole lungi. Cei mai mulți dintre ei își folosesc dispozitivele mobile pentru un acces ușor la Facebook, WhatsApp, Twitter și pentru a se răsfăța cu bucuria cumpărăturilor online. Mai mult, mobilul nu mai este o tendință, este viitorul.

Conform statisticilor Comscore de anul trecut, numărul utilizatorilor de Internet numai pentru dispozitive mobile din SUA a crescut brusc, în timp ce utilizatorii numai pentru desktop au scăzut la 10,6%.

Mai trebuie să spui ceva pentru a convinge?

Asigurați degradarea grațioasă

În ultimii câțiva ani, este posibil să fi întâlnit noul cuvânt la modă în lumea designului responsive și este „degradare grațioasă”. Da, degradarea grațioasă implică faptul că, chiar dacă o caracteristică nu funcționează cu succes, ar trebui să eșueze într-un mod care să faciliteze o utilizare acceptabilă. Aceasta înseamnă crearea unui design de site web pentru un desktop și apoi trecerea treptat la tablete, smartphone-uri și telefoane cu caracteristici. Performanța unui design responsive în care site-ul web se degradează cu grație este neapărat să fie ridicată, deoarece experiența utilizatorului este aici întotdeauna una de top. Site-ul web va rămâne funcțional în ciuda oricăror deficiențe, iar un vizitator va fi cu siguranță impresionat de calitatea generală.

Acum, s-ar putea să aveți această întrebare în minte că ceea ce este atât de fascinant despre degradarea grațioasă. Răspunsul este simplu. Acest lucru se datorează faptului că vă face conținutul vizibil și lizibil indiferent de browser, ceea ce este o performanță remarcabilă! Din fericire, dacă utilizați CSS3, degradarea grațioasă devine o treabă ușoară, deoarece majoritatea proprietăților CSS3 se degradează automat, adică colțurile rotunjite devin pătrate, textul este înfășurat în loc să ruleze într-o singură linie, gradienții devin culori plate și multe altele.

Să avem un exemplu de degradare grațioasă. Să presupunem că ați proiectat un site web receptiv cu funcții JavaScript și aceste caracteristici nu sunt acceptate de browserul dvs. sau pot fi dezactivate de partea clientului. Deci, ce poți face pentru a obține conținutul? Ei bine, într-un astfel de caz, degradarea grațioasă permite browserului dvs. să afișeze conținutul în eticheta „noscript”.

Acest lucru îl puteți înțelege mai bine cu codarea de mai jos:

[xhtml]
<noscript>
<h1>Dragă John, ați întâmpinat o problemă!</h1>
<p>Browserul dvs. nu acceptă JavaScript sau este dezactivat temporar.
Vizitați <a href="/support/browsers/">asistența pentru browser</a> pentru ajutor.</p>
</noscript>
[/xhtml]

Mai există un exemplu de degradare grațioasă pe care aș dori să-l împărtășesc și este utilizarea HTML5 de către YouTube pentru redarea videoclipurilor. Să presupunem că browserul dvs. nu acceptă HTML5, videoclipul se va afișa folosind Flash și, dacă nici măcar Flash nu este instalat, veți primi un mesaj pentru a instala același lucru pe dispozitivul dvs. mobil. În ambele cazuri, veți putea viziona videoclipul. Cu toate acestea, un dezavantaj al acestei degradări grațioase este, deși performanța este bună, trebuie să faceți compromisuri cu anumite elemente de design dacă utilizați browsere învechite. Bănuiesc că determinarea elementelor vizuale esențiale ale site-ului dvs. în prealabil poate face truc.

Nu este nevoie să păstrați biblioteci nefolosite

O bună practică poate fi să nu păstrați biblioteci care nu sunt utilizate. Da, este adevărat că ținerea evidenței bibliotecilor folosite și a celor nefolosite necesită foarte mult timp, dar într-adevăr merită. Uneori, este posibil să fi observat că utilizați doar o singură funcționalitate după includerea unei biblioteci. Uneori pot fi chiar două sau trei. Cel mai des instrumentul pe care îl folosesc pentru a crea un design receptiv este jQuery. De fapt, există o mulțime de biblioteci jQuery care ajută dezvoltatorii să creeze site-uri web receptive. O includere a mai multor biblioteci, cum ar fi bibliotecile JavaScript, doar pentru că v-au plăcut unele widget-uri, va crește timpul de încărcare a paginii într-o măsură semnificativă. Cu toate acestea, va fi o practică bună să analizați ce biblioteci sunt utilizate și în ce măsură.

Verificați disponibilitatea funcțiilor

Puteți verifica dacă dispozitivul dvs. acceptă sau nu o anumită funcție înainte de a o activa. De exemplu, se întâmplă că, deși ați instalat cea mai recentă versiune de Google Chrome pe telefonul dvs. Android învechit, site-ul dvs. este încă să nu fie afișat. Uneori, în încercarea de a încărca un astfel de site web, browserul se blochează atât de grav încât întregul dispozitiv mobil nu răspunde. Trebuie să reporniți dispozitivul și acesta este ultimul lucru pe care l-ați dorit, nu-i așa? Mulți utilizatori ai anumitor aplicații web suferă deja din cauza acestei probleme.

Indisponibilitatea funcțiilor pe dispozitive și totuși proiectarea site-urilor web sau a aplicațiilor a dus la unele probleme vizibile, cum ar fi blocarea instantanee a aplicațiilor Google Hangout pe dispozitivele Android din întreaga lume, indiferent de tipul de browser. Acest lucru se întâmplă în ciuda faptului că aplicația era o aplicație ușoară. Puteți argumenta că utilizatorii foloseau o versiune mai veche de smartphone-uri Android, dar este, de asemenea, adevărat că astfel de dispozitive sunt încă disponibile de la raft ca una nou-nouță în oricare dintre magazinele mobile. Mulți utilizatori de telefonie mobilă se confruntă cu aceeași problemă de performanță și cu aplicația YouTube și Twitter. Chiar și o actualizare a serviciului Google Android System Webview prin Google Play îngheață multe smartphone-uri pentru a deveni un fel de coșmar al utilizatorilor.

Optimizați imaginile

Includerea imaginilor mari atractive din punct de vedere vizual este întotdeauna tentantă pentru designeri. Problema apare atunci când nu comprimă aceste imagini înainte de a le încărca în CMS. Acest lucru este valabil mai ales pentru mai multe site-uri de comerț electronic de pe web. Conform cercetărilor recente ale Radware, paginile devin mai mari și aproximativ 45% dintre primele 100 de site-uri de vânzare cu amănuntul nu se angajează în compresia imaginii. Acest lucru face ca astfel de site-uri să fie mai voluminoase și, ca urmare, timpul de încărcare este crescut, dar, în calitate de designer, puteți evita problema.

Realizați imagini cu dimensiuni mai mici utilizând un instrument adecvat de optimizare a imaginii. De fapt, nu există lipsă de astfel de instrumente pe web. Unele dintre cele notabile pe care le puteți folosi sunt Dynamic Drive, Smush it și Riot. Dacă sunteți profesionist în Photoshop, puteți optimiza și singur dimensiunea imaginii. Utilizați o tehnică de compresie inteligentă și îndepărtați-o de orice metadate redundante. Conversia graficelor în PNG, a imaginilor bogate în culori în JPEG și a celor animate în GIF face, de asemenea, truc.

Pregătit pentru cazuri extreme

Când începi să proiectezi, trebuie să fi observat că te tentează să proiectezi paginile care sunt mai ușor. Cel puțin, acest lucru vă permite să arătați ceva părților interesate. Acest lucru poate părea frumos la prima vedere, dar dacă îți concentrezi eforturile către cele mai provocatoare scenarii, la început, vei obține un rezultat bun.

De exemplu, o pagină web cu unele articole, bloguri și comunicate de presă. Trebuie să aibă și un titlu. Acum, ce se va întâmpla dacă spațiul de titlu pe care v-ați gândit să îl afișați „Sfaturi pentru design web responsiv” trebuie să arate un titlu „10 sfaturi și tehnici esențiale pentru un design web responsiv de succes”? Acum, acesta este un caz extrem.

Un efort ca cel de mai sus de a optimiza performanța site-ului dvs. responsive pare invizibil. Cu toate acestea, aceste eforturi produc profituri bune cu utilizatori fericiți și mulțumiți. Puteți folosi diverse instrumente, cum ar fi instrumentele Pingdom, care vă pot permite să monitorizați fără efort timpul de încărcare al site-ului dvs. responsive. Nu sări peste aspectul vital al testării pentru a vă asigura că site-ul dvs. responsive funcționează conform intenției. Testați-l pe cât mai multe dispozitive reale.

De asemenea, puteți utiliza resurse precum Screenfly, care vă permite să vă testați site-ul pe mai multe rezoluții de ecran. Puteți argumenta că toate aceste strategii au nevoie de o perioadă semnificativă de timp, dar, din nou, trebuie să transpirați din greu pentru a culege beneficiile. În zilele noastre, crearea unui site web responsive cu o performanță responsive este esențială, cu atât mai mult cu cât Google evaluează site-urile în funcție de performanța lor. Dacă sunteți designer sau dezvoltator, nu vă limitați la oricare dintre cele mai bune practici de mai sus. Ar trebui să căutați mai multe soluții și s-ar putea să faceți eforturi pentru a oferi un site web care să prezinte performanțe receptive.