Design pentru dispozitive mobile

Schimbarea majora in felul in care sunt construite site-urile s-a produs acum cativa ani si a coincis cu explozia in rata de utilizare a tabletelor si telefoanelor inteligente. Acum, noul fel de design si dezvoltare nu mai este „nou” ci este deja „normal”. Acest fel, denumit design pentru dispozitive mobile, uneste mai multe cai si concepte de design si dezvoltare, precum:

mobile first
responsive web design
native, hybrid, HTML5 mobile apps design
…etc.

Deci, astazi site-ul responsive, sau cel cu interfata responsive plus una numai pentru telefoane, este un site normal. Dar un site optimizat numai pentru calculatoarele desktop, cu ecran mare, este unul deficient.

Prowebdesign a inceput sa utilizeze responsive web design inca din anul 2010. Aproape imediat dupa ce acest concept a aparut pentru prima data. Astazi Prowebdesign ofera o gama larga de tehnici pentru a livra cele mai potrivite solutii clientilor nostri, tinand cont de audienta proiectului, bugetul, termenul de livrare, etc.:

adaptarea site-urilor vechi, desktop, pentru dispozitive mobile – responsive retrofitting;
design site responsive de la zero, adaptat pentru orice dispozitiv de la inceput – mobile first;
design site responsive, plus o varianta pentru cele mai mici ecrane (telefoane);
aplicatii mobile (native, hybrid, HTML5)

Care dintre aceste tehnici este cea mai potrivita pentru proiectul dv.? Aceasta decizia se bazeaza pe mai multe criterii. Prowebdesign ofera consultatii gratuite pentru a ajuta pe clientii sa aleaga solutia optima.

Cereti o consultatia gratuita!
– sau continuati sa cititi acest articol. –

Design pentru dispozitive mobile nu este egal cu responsive web design.

Exista cateva modalitati de a livra continutul site-ului pe o gama larga de dispozitive. Strategia mobile nu se rezuma numai la a face site-ul responsive. In tabelul mai jos sunt expuse cateva abordari cu plusuri si minusuri pentru fiecare.

Tip	Ce inseamna	Avantaje	Dezavantaje
site-uri web responsive	Siteul (sau aplicatia) responsive este un site care se auto-ajusteaza pentru o experienta optima a utilizatorului pe o multitudine de dispozitive. Este independent de rezolutie si dispozitivul pe care este folosit, are un layout fluid care se micsoreaza sau se extinde pentru a se „aseza” cat mai bine pe o multitudine de ecrane de diverse dimensiuni.	Trebuie dezvoltata doar o singura aplicatie. Usureaza mentenanta. Optimizeaza experienta utilizatorului pentru o gama foarte larga de dispozitive. Cea mai ieftina solutie.	Cu toate ca sunt multe moduri de a reaseza continutul pentru ecranele mai mici, unele parti ale site-ului trebuie totusi „ascunse” in aceste cazuri. Dar de cele mai multe ori aceste parti „ascunse” sunt totusi incarcate de dispozitiv si consuma trafic. Functionalitatea complexa trebuie complet regandita pentru dispozitivele cu ecran mic. Aceasta abordare devine des o cale de compromis.
combinatie intre un site desktop si un site separat pentru telefoane (ecrane mici)	O combinatie intre un site „normal”, de latime fixa si un altul, tot de latime fixa, dar mai mic (de obicei in jur de 320 px). Cel de-al doilea site (mai mic) are in mod uzual continut, functionalitate si numar de pagini reduse.	Aceasta solutie a fost folosita la inceputul erei „mobile” si nu are prea multe avantaje. Un avantaj de mentionat ar fi ca este o solutie ieftina si rapida pentru cei care au de mult timp un site desktop, dar care vor totusi sa faca ceva pentru a permite si accesul dispozitivelor mobile.	Abordare perimata. Optimizeaza experienta utilizatorului pentru o gama foarte restransa de dispozitive mobile. Necesita crearea si intretinerea a doua seturi de cod front-end.
combinatie intre un site „mare” responsive pentru dispozitive cu ecrane mai mari si un site „mic”, separat, pentru telefoane (ecrane mici)	Aceasta este o abordare foarte raspandita pentru siteuri complexe, interactive. Siteul „mare” se adreseaza dispozitivelor cu ecrane mari: desktop, laptop, tablete. Siteul „mic”, de obicei tot responsive, este folosit de smartphones si alte dispozitive mici.	Ofera o excelenta experienta a utilizatorului, performanta si timpi de incarcare optimizati. Permite crearea unei experiente de utilizare foarte personalizata pentru dispozitivele mobile mici, care poate fi mult diferita de experienta pe ecranele mai mari. Elimina compromisurile si nevoia ascunderii unor parti ale paginii pentru dispozitivele mici.	Mai scumpa. Necesita crearea si intretinerea a doua seturi de cod front-end.
aplicatii mobile – dedicate, hybrid sau HTML5	Aplicatiile mobile dedicate sunt cele mai bune daca vreti sa utilizati functionalitati specifice ale unui anume dispozitiv mobil, cum ar fi: functionalitatea de a face fotografii, inregistrarea vocala, GPS… si asa mai departe… Multe siteuri mari, de renume (booking.com, airbnb.com, ebay.com), ofera de asemenea aplicatii mobile dedicate. Se poate argumenta ca aplicatiile mobile + siteul responsive + plus siteul responsive mobil, este mult prea mult. Dar noi credem ca aceste firme si-au bazat alegerea pe cercetarea preferintelor publicului tinta.	Permite accesul la functionalitati speciale pe care dispozitivele mobile le au, dar computerele obisnuite, nu. Atrage parte din publicul tinta care este fidel unui anume siustem de operare, de exemplu: utilizatorii iOS. Permite o si mai buna experienta a utilizatorului, performata si timpi de incarcare optimizati.	Dezvoltarea poate fi foarte scumpa. Aplicatiile dedicate trebuie dezvoltate separat, pentru fiecare sistem de operare. Aceasta mareste costurile si face intretinerea codului un proces permanent si costisitor. Trebuie tinut cont daca INTR-ADEVAR este nevoie de o aplicatie mobila. De multe ori doar un site mobil separat este de ajuns.

Cereti o consultatia gratuita!
– sau –

Vedeti exemple din portofolio de mobile-optimized websites & apps

Care strategie este cea mai buna pentru proiectul dv.?

Pentru a raspunde adecvat la aceasta intrebare e nevoie de o solida experienta in web development. Dar sunt cateva criterii care simplifica raspunsul si ajuta la alegerea echipei potrivite pentru dezvoltarea proiectului.

1. Aveti statistici despre vizitatori?

Proiectul este nou sau deja existent? Daca este nou, treceti direct la #2. Daca este deja existent puteti lua o decizie pe baza statisticilor de trafic. Care este procentul de vizitatori care acceseaza siteul/aplicatia de pe dispozitive mobile? Daca este mai mare de 5% probabil trebuie sa investiti macar o suma moderata pentru a inbunatati experienta de utilizare a acestor vizitatori.

2. Bugetul.

Daca proiectul este nou si nu aveti statistici si nici idee despre ce dispozitive utilizeaza publicul tinta pentru browsing, atunci primul criteriu este bugetul. Daca proiectul urmareste doar testarea publicului iar bugetul este mic, renuntati pentru inceput la optimizarea pentru dispozitive mobile. Totusi cautati o echipa de dezvoltare capabila sa va ofere o solutie care poate fi mai tarziu tansformata in responsive si optimizata cu minimum de efort. Daca aveti un buget suficient, alegeti strategia in functie de complexitatea si tipul proiectului.

3. Care este tipul proiectului si complexitatea lui?

Daca proiectul doar ofera informatii si este putin sau deloc interactiv, alegerea cea mai buna este un site sau aplicatie responsive. Exemple de proiecte de acest gen:

blog
revista online
portal de stiri
website firma mare
website firma
aplicatii care permit introducerea de date pentru a le afisa sub forma de grafice

Daca proiectul are multe intercactiuni complexe cu utilizatorul, multe functiuni suplimentare sau auxiliare, elemente interactive complexe (filtre, harti, sliders), atunci alegeti doua siteuri separate: unul responsive pentru o categorie de dispozitive (desktop laptop, tablete) si altul optimizat pentru ecrane mici si conexiuni lente. Exemple:

aplicatii rezervari hotel
siteuri e-commerce mari
configurari vizuale drag-n-drop

4. Dar aplicatiile mobile?

Alegeti aplicatii mobile daca trebuie sa folositi functionalitati mobile dedicate. Exemple de proiecte:

joc
album foto cu posibilitatea de a afisa instant fotografii nou facute
tracker de activitati (ex: activitati sportive)
navigator GPS sau avertizor depasire viteza

De asemenea considerati angajarea si pastrarea semi-permanenta a unei echipe de dezvoltatori, pe o perioada mai lunga, printr-un contract de tip retainer (rezervarea unui anumit numar de ore de lucru in avans). Acest tip de contract este indicat in proiectele complexe, fiindca asigura disponibilitatea echipei atunci cand este nevoie. Altfel va putei lovi de indisponibilitatea temporara a echipei (angajata in alte proiecte), ceea ce va va provoca intarzieri cu efecte imprevizibile asupra afacerii dv.