10 secrete pentru un un site bine optimizat

Consumul traficului de date mobile a crescut cu 74% numai in anul 2015 si au fot vandute peste un miliard de dispozititve mobile tot in aceasta perioada, iar aceasta tendinta nu da semne ca ar incetini. Aceasta statistica ar trebui sa fie suficienta pentru a sublinia importanta optimizarii siteurilor si adaptarea designului la dispozitivele mobile portabile.

Unele siteuri sunt mai usor de optimizat pentru dispozititvele mobile iar designul se poate adapta cu usurinta oricarei rezolutii, iar pentru cele care nu sunt mobile friendly exista o serie de implementari care aduc un plus atunci cand vine vorba de optimizare.

Sfatul 1. Adaugati iconite IOS si Splash Screens

In ciuda numeroaselor incursiuni facute de Android, dispozitivele IOS raman extrem de populare si se bucura de sprijinul unei comunitati active de dezvoltatori. Sunt numerosi utilizatori care acceseaza un site de pe un iPhone sau de pe tablete iPad si, daca le place, s-ar putea chiar sa il salveze. Un lucru ajutator pentru site si utilizatorii Apple este adaugarea de iconite IOS personalizate in tema WordPress a siteului. Acest lucru poate fi facut foarte usor adaugand codul de mai jos in fisierul header.php al temei, intre tagurile <head>:

Aceste linii de cod mentioneaza anumite iconite pentru iPhone, iPad si dispozitive Retina Display si toate includ atributul „apple-touch-icon”. Cat inca editati headerul puteti adauga si un nou ecran Splash IOS folosind urmatoarea linie de cod:

Sfatul 2. Folositi imagini de dimensiuni diferite in combinatie cu Media Queries

In cazul dispozitivelor mobile rezolutiile dispozitivelor, orientarea dispozitivului si dimensiunile browserului sunt toate elemente variabile. Cele mai multe siteuri sunt devzoltate avand pe plan secund functionalitatea si compatibilitatea cu dispozitivele mobile iar o practica mult mai utila ar fi regandirea si proiectarea fiecarui design pornind de la abordarea mobila.

Sfatul 3. Optimizarea imaginilor

Chiar daca aveti u n design fantastic, adaptat pentru toate mediile, potentialii vizitatori ar putea renunta la navigarea pe site daca dureaza prea mult ca acesta sa se incarce. Imaginile joaca un rol important in timpul de incarcareal siteului. Utilizatorii doresc sa vada imagini calitative care sa se incarce aproape instant iar pentru aceasta imaginile trebuie sa fie optimizate astfel incat sa aibe dimensiuni reduse fara ca acest lucru sa le compromita calitatea.

Chiar daca acest lucru poate parea imposibil, exista numeroase instrumente care va pot ajuta sa obtineti aceste rezultate ca EWWW Image Optimizer sau WP Smush, care imediat instalat, va comprima si optimiza fiecare imagine incarcata pe platforma WordPress. Daca nu doriti sa adaugati pluginuri suplimentare siteului, exista alte instrumente ca Tiny JPG si TinyPNG care aduc rezultate similare prin reducerea selectiva a numarului de culori si inlaturarea datelor meta neimportante.

Sfatul 4. Folosirea SVG – Grafica Vectoriala Scalabila

Grafica Vectoriala Scalabila (Scalable Vector Graphics sau simplu SVG) este alegerea potrivita pentru elementele grafice simple ca logouri, pictograme sau alte aplicatii similare. Un lucru important este faptul ca sunt scalabile ceea ce le face usor de adaptat pentru orice mediu online. Mai mult decat atat, pot fi usor animate folosind CSS.

Sfatul 5. Folositi culori contrastante in avantajul vostru

Oricine este familiarizat cu elementele fundamentale de dgrafica va va spune cat de important este contrastul intr-ul design web. Nu trebuie sa va limitati doar la nuante de alb si negru, elementele colorate pot fi armonios imbinate chiar si cand este vorba de text. Daca nu sunteti siguri ce coluri se potivesc si care sunt in conformitate cu cerintele de design puteti consulta un instrument online gratuit Worl Wide Web Consortium. Tot ce trebuie sa faceti este sa alegeti doua culori iar aplicatia va va spune daca contrastul dintre acesrea este potrivit din punct de vedere al proiectarii grafice.

Sfatul 6. Folositi CSS3 in locul imaginilor (acolo unde este posibil)

Desi tentatia de a folosi elemente grafice este foarte mare, CSS3 este o optiune mult mai buna daca se ia in considerare optimizarea siteurilor pentru toate mediile online. Cu putina imaginatie si putin CSS3 pot fi create butoane complexe cu grafica interactiva.

Sfatul 7. Alegeti fonturile potrivite

Designul web nu se rezuma doar la imagini. Alegerea fonturilor potrivite poate avea un impact vizual la fel de mare ca si designul grafic, din moment ce, cele mai multe siteuri folosesc textul ca principala metoda pentru transmiterea informatiilor. Din perspectiva unui designer, alegerea fonturilor potrivite tine cont de cateva aspecte, si anume: evitatea fonturilor cu grafica complexa si a celor cu spatiere prea mica intre litere care ingreuneaza cititul. Fonturile sans serif sunt printre cele mai populare si aceste tind sa se adapteze foarte bine la mai multe rezolutii.

Sfatul 8. Considerati textul o parte UI

Din moment ce veti lucra cu o varietate de rezolutii si tipuri de display, veti dori ca designul grafic sa considere textul ca o parte integrata a intregii experiente UI, in scopul maximizarii lizibilitatii. Asta ar insemna:

Limitarea numarului de caractere pe linie undeva la 45-75 de caractere
Folositi valorile CSS3 vw, vh si vhmin pentru a mentine dimensiunea fontului intr-o buna proportie cu rezolutiile de pe care este accesat siteul.

Sfatul 9. Proiectati meniuri mobile

Daca tema WordPress pe care o utilizati nu include meniuri mobile, exista destule instrumente pe care le puteti utiliza pentru a remedia aceasta problema.

Superfly este o aplicatie ce va permite sa creati o multitudine de meniuri suplimentare care pot fi folosite pentru a le inlocui sau completa pe cele implicite ale temei. De exemplu, puteti folosi Superfly pentru a afisa meniurile personalizate doar pe rezolutiile mobile nu si pe paginile selectate.

Hero Menu este o alta aplicatie care vine cu cateva caracteristici interesante si receptive. Include zeci de machete de meniuri si layouturi, in diverse combinatii de culori si pictograme personalizate pentru a face fiecare meniu unic. Meniurile create cu ajutorul pluginului se for afisa in mod automat atunci cand siteul este accesat de pe un dispozitiv mobil.

Sfatul 10. Testati desigul mobil

Una dintre cele mai mari probleme pentru designul mobil o reprezinta multitudinea de dimensiuni si rezolutii de care trebuie sa se tina cont. Desi exista cateva rezolutii care se bucura de popularitate pe scara larga, piata nu este deloc uniforma, iar noi dispozitive sunt lansate in fiecare luna. Prin urmare, pentru a va asigura ca ati realizat un design mobil functional, trebuie sa il testati. Din fericire, internetul este plin de aplicatii special create pentru acest lucru.

BrowserStack este o solutie complet echipata, care include un laborator de testare la distanta pentru dispozitive fizice ce includ o gamă larga de telefoane Android si telefoane si tablete IOS. Mai mult decat atat, veti obtine, de asemenea, acces la mai multe versiuni ale celor mai populare browsere (si unele mai putin populare ca Edge si Yandex). Aceasta combinatie de medii de testare este perfecta pentru a verifica modul in care designul creat se va comporta in scenarii reale si este utila nu numai din perspectiva designului, dar si din cea a dezvoltatorilor.

Cea mai buna parte a acestui intrumente este ca nu trebuie sa testati designul manual pe fiecare dispozitiv, deoarece serviciul include o caracteristica rapida imagini care va testa in mod automat siteul, cu peste 700 de combinatii de dispozitive, browsere si rezolutii, astfel incst sa puteti identifica rapid orice eroare.

StudioPress nu include nici jumatate din caracteristicile pe care le are BrowserStack. De fapt, acesta aplicatie permite doar testarea siteurilor live pentru latimi specifice (care pot fi configurate manual) sau cu ajutorul dimensiunilor prestabilite pentru dispozitive. Cu toate acestea, este complet gratuit si nu trebuie sa va faceti un cont pentru a o utiliza.

In afara de aceste doua aplicatii, puteti apela la Chrome Developer Tools sau Firebug Add-On pentru Firefox, care va permit sa testati modul in care siteul va fi afisat in mai multe rezolutii fara sa parasiti browserul.

Cu toate sfaturile mentionate mai sus nu trebuie sa uitati ca optimizarea mobila este un lucru ce necesita revizuire periodica si constanta, deoarece utilizatorii mobili au foarte putina rabdare in accesarea si navigarea pe un site cu erori sau timp lent de incarcare.