Optimizare pentru dispozitive mobile

postat acum 4 ani de Stefanescu Mihai in categorie iNoob

Estimarile spun ca pana in 2014, aproximativ 1 miliard de oameni vor detine un smartphone. In prezent, aproximativ 2.5 miliarde de oameni folosesc internetul – se pare nu doar ca dispozitivele mobile devin din ce in ce mai populare, dar si site-urile pentru acestea sunt din ce in ce mai cautate.
In acest articol, ne vom uita la problemele cu care se confrunta designerii si programatorii creeand site-uri pentru dispozitive mobile. Ne vom uita si la ce-l mai bun mod de a lucra cu site-urile pentru dispozitive mobile.

Aplicatii web vs Aplicatii Native

Pe un smartphone exista decat 2 tipuri de aplicatii. Acelea ce sunt bazate pe interfata web, sunt programate la modul general si nu foloseste controalele si interfata telefonului si cele ce au fost creeate special pentru acel smartphone sau acel sistem de operare. Te-ai putea gandii ca o aplicatie creeata pentru anumit tip de telefon este ce-a mai buna cale de a atinge obiectivul, dar acestea sunt trecute cu vederea destul de usor.

Sa luam ca exemplu iPhone, in primul rand aplicatia ta trebuie sa fie aprobata de Apple, deci nu ai libertate de functionaliatate completa, pentru ca au un anumit set de conditii legate de modul de functinare, pe cand cu o aplicatie web poti folosi orice cod vrei tu si poti face totul exact cum iti doresti (cum spunea cineva mai demult: esti limitat decat de tehnologie si imaginatie).

In al doilea rand, App Store (cat si Google Play) devine din ce in ce mai aglomerat si este din ce in ce mai greu sa iti faci loc printre toate aplicatiile de acolo (chiar daca nu sunt la feld e bune ca a ta).Bineinteles, web-ul poate fi si el acuzat ca este supra-populat cu site-uri prost creeate, dar atunci cand vorbim de un website nu impartim decat un URL, o aplicatie de telefon este cu totul altceva.

In ultimul rand, oamenii nu descarca toate aplicatiile de care nu au nevoie. Vrei sa aduci functionalitate sau informatie? Aplicatia firmei tale ofera aceleasi informatii ca si website-ul? Bineinteles ca site-ul va avea mai multe vizite decat numarul de descarcari al aplicatiei.

Moduri de lucru simple si eficiente

De multe ori, in mijlocul procesului de creere a unui website designerii si programatorii uita de restrictiile pe care le au cnad vine vorba de dispozitivele mobile. Iata o lista cu ce trebuie si ce nu trebuie sa faci:

  • Creeaza o pagina ce poate fi redimensionata pana la rezolutii de 320 x 480 pixeli.
  • Aminteste-ti ca vizitatorul nu poate observa fiecare mic detaliu al designului de pe un dispozitiv mobil (ca si cum ai incerca sa apesi un buton in tren cand acesta merge destul de repete).
  • Adauga atributul “alt” imaginilor pentru ca pe dispozitivele mobile utilizatorii blocheaza imaginile pentru a reduce consumul de banda.
  • Nu folosi Flash, JavaScript in excess sau alta tehnologie ce necesita multe resurse.
  • Nu folosi frame-uri.
  • Nu folosi obiecte cu marime predefinita
  • Nu folosi imagini extrem de mari – pe langa locul mare ocupat pe display consuma si multa banda.
  • Nu scrie articole extrem de lungi, pentru ca oamenii vor sa afle informatia repede nu sa afle ce ai mancat tu la micul dejun.

Redirect

Multi programatorii vor ca totul sa fie cat se poate de eficient, de aici a si aparut ideea ca designul de mobil si cel de desktop trebuie sa fie in acelasi fisier. Nu este bine sa aveti acelasi fisier pentru ambele, daca ai un website extrem de simplu, iar continutul se adapteaza display-ului mai mic totul este OK, dar daca ai un design mai complex trebuie sa folosesti fisiere diferite.

Cu un redirect poti creea 2 site-uri complexe. Incercarea de a ingloba un site de mobil si unul de desktop in aceleasi fisiere folosind media query nu iti va oferi decat mai mult de munca(cand vei realiza ca am dreptate…).

Redirectul va trebuii sa trimita utilizatorul pe o versiune evidenta a site-ului tau, de exemplu m.siteultau.ro sau mobil.siteultau.ro .

Structura Site Mobil
Can creezi un design de site mobil si creezi o structura este usor sa fii distras si sa incepi sa creezi ceva ce nu va functiona cum trebuie pe un dispozitiv mobil. Dispozitivele mobile au ecrane de diverse dimensiunii.Un utilizator poate sa viziteze site-ul tau la 320×460 si altul la 1024×768. Este imposibil de prezis. Aici intervin media query in css.

Bara de navigare este ceva ce ar trebuii sa fie discret si sa fie pozitionata in partea de sus a site-ului. Asigurate ca butoanele sunt accesibile si nu sunt prea multe pentru a-l obosi pe utlizator. In mod normal pe un dispozitiv mobil nu ar trebuii sa existe mai mult de 5 link-uri intr-un meniu.

Multi designeri folosesc iconite in loc de text. Acesta este un mod de lucru bun, atat timp cat nu abuzati de el. Prea multe imagini vor ingreuna incarcarea site-ului mai ales pe dispozitivele mobile.

Feriti-va de butoanele cu mouseover pentru ca acestea nu functioneaza pe dispozitivele mobile cu touchscreen.

In fine, daca esti un designer ce isi face grafica site-ului in functie de sezon, trebuie sa stii de ce ai nevoie pentru ca site-ul tau sa arate si sa functioneze bine.

Concluzia?
Daca nu ai mai creeat un design pentru mobil pana acum, sper ca ti-ai facut o vaga idee despre ce trebuie sa faci.

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!