In contextul in care exista o cerere tot mai mare din partea clientilor pentru dezvoltarea de platforme accesibile si prin intermediul device-urilor mobile, ne-am propus sa aflam care sunt criteriile care asigura functionarea optima a mobisite-urilor si care sunt regulilel de design care trebuie respectate. A raspuns Adrian Pavelescu (Managing Director, Outbox).
Cresterea numarului de mobisite-uri
Numarul de mobisite-uri este clar in crestere. Numarul touchpoint-urilor in comunicare urmeaza, in general, sau ar trebui sa urmeze consumul de media al target-ului fiecarui brand. Iar cum mobilul este deja un canal de media in plina expansiune, cum din ce in ce mai multi consumatori petrec din ce in ce mai mult timp pe smartphone, cresterea mobisite-urilor devine o tendinta normala, naturala.
Importanta mobisite-urilor
Daca suma totala de ore petrecute de audienta ta pe smartphone este in crestere, este indicat sa iti construiesti o prezenta in acest mediu. Cresterea timpului total consumat de target pe mobil are 2 vectori: orizontal, prin cresterea numarului de smartphone-uri in universul targetului si vertical, prin cresterea timpului individual de consum de mobile entertainment si mobile utilities. Iar mobisite-urile constituie o pondere importanta a prezentei unui brand in mediul mobil.
Importanta adaptarii website-ului de brand
Nu-mi vin in minte situatii in care as recomanda un site de mobil fara sa ai un site de desktop. In majoritatea situatiilor, mobisite-ul este un add-on. In orice caz, nu pot spune ca mobisite-ul este declinat din site-ul de brand. As putea spune ca ambele urmeaza o linie comuna de design pentru ca toate canalele de comunicare ale unui brand trebuie sa respecte identitatea vizuala a brand-ului si strategia curenta de comunicare. Daca www.coca-cola.com este rosu, m.coca-cola.com garantat nu va fi verde. Dar nu pentru ca site-ul de brand este rosu, ci pentru ca asta e culoarea brandului. Din punct de vedere continut si structura, fiecare canal trebuie sa urmeze propriile obiective si propriile tipare comportamentale ale utilizatorilor. Evident ca vor fi elemente comune, dar, in functie de profilul site-ului, diferentele pot fi semnificative.
Folosirea unei arhitecturi construite vs. construirea unei arhitecturi
Noi preferam sa abordam fiecare canal de la zero si sa construim in functie de specificitati, de obiective, de tipare comportamentale. Evident ca sunt elemente comune care se regasesc in ambele variante, in special elementele vizuale, dar si module intregi. Dar sunt structurate diferit.
Dimensiunea ecranului
Sunt situatii in care preferam varianta de layout fluid, adica un CSS care intinde site-ul in functie de dimensiunea display-ului. Daca lucram pe dimensiuni fixe facem mai multe variante, iar server-ul livreaza fiecarui model de smartphone varianta compatibila sau cea mai apropiata. Daca mobilul userului nu livreaza informatii legate de rezolutie, ii afisam 640x960
Importanta regulii above/below the fold
Mai mica decat pe desktop. Utilizatorii dau mai usor swipe pe mobil decat scroll pe desktop.
Informatia din zonele above the fold si below the fold
E important ca in primul ecran sa transmiti clar si succint despre ce este vorba in pagina respectiva si sa aiba o ancora relevanta care sa il faca sa dea scroll / swipe.
Tipul informatiilor de pe homepage
Depinde de obiectivele pe care brand-ul le are in stricta legatura cu segmentul audientei mobisite-ului si tiparul de utilizare. Daca brand-ul este un magazin offline si 90% din vizitatorii mobisite-ului cauta adresa magazinului, evident ca as pune adresa pe homepage. Majoritatea mobisite-urilor pe care eu le consider bune au pe homepage un mod facil, sugestiv si atractiv de navigare, cu rol atat functional, de navigare efectiva, cat si de a explica utilizatorului clar si succint ce poate face pe mobisite. Un exemplu sugestiv este m.hm.com/gb.
Importanta Responsive Web Design (RWD)
Este ceea ce noi numim layout fluid. Sunt totusi cazuri in care folosim layout-uri fixe, daca mobisite-ul are in primul rand rol de imagine, s-ar putea ca optiunea de a construi mai multe dimensiuni de design sa fie mai atractiva.
Dimensiunea imaginilor de pe un mobisite optimizat
Singurul designer care mai e la ora asta la birou zice ca depinde de imagine, de site, de varianta de CSS folosita, deci n-avem un standard.
Inregistrarea informatiilor de catre utilizatori
Pai n-ar trebui sa inregistreze nicio informatie. Server-ul ar trebui sa stie daca domeniul este accesat de pe mobil si sa livreze varianta de mobil. Doar daca user-ul are bifata optiunea “View desktop site”, o sa vada varianta de desktop pana isi debifeaza optiunea sau pana scrie in address bar m.domeniu.com. In plus, se pot folosi coduri QR ca link direct catre site.
Un singur site flexibil pentru toate platformele sau versiuni separate?
Nu, site-ul comun si flexibil va fi la fel de ineficient pe ambele canale. Trebuie construite separat. Pot exista module comune in CMS, in special pentru cataloage, magazine online sau publishing. Dar site-urile de brand sunt in general construite specific pe fiecare canal.
Metode de testare
W3C si MobiReady.
True/False: aceeasi informatie trebuie sa apara si pe versiunea desktop si pe versiunea mobile a website-ului.
False. Sunt elemente si module comune, dar design-ul, structura si continutul trebuie adaptate in functie de tiparele comportamentale specifice fiecarui canal.
True/False: designul website-ului nu tine cont de orientare (landscape/portrait)
True or false. Depinde de tipul de design. Structurile fixe sunt facute de obicei pentru portrait. Layout-ul fluid functioneaza pe ambele orientari.
True/False: cu cat mai putina nevoie de scroll, cu-atat mai bine
False. Prefer sa am informatiile aerisite, clare, usor de accesat decat sa ingramadesc totul in primul ecran.
True/False: Flash, JavaScript nu sunt recomandate
Flash clar nu, dar n-am nimic impotriva Java.
