Optimizarea pentru Mobile: Cum trebuie să arate un website pe mobile

Optimizarea pentru mobile este o tehnică modernă, esențială de creare a unui website. Un website trebuie să arate perfect indiferent de dispozitivul de pe care este vizualizat. Cu atât mai mult este important întrucât utilizarea dispozitivelor mobile este în continuă creștere.

În 2019, conform statisticilor publice, mai bine de 62% din traficul din internet provine de pe dispozitivele mobile. În afara cazului în care te afli într-o nișă apare și foarte exclusivistă, majoritatea persoanelor ce îți vizitează website-ul folosesc telefoane inteligente pentru navigare. Drept urmare, un website neoptimizat îți afectează performanța website-ului dar și încrederea publicului față de brand-ul tău. Unde mai punem că Google consideră optimizarea pentru mobile unul dintre cele mai importante criterii de SEO. Alt motiv să acorzi mai multă atenție dispozitivelor mobile.

Aspectul unui website pe mobile

Optimizarea pentru mobile presupune proiectarea website-ului astfel încât să poată fi vizualizat complet și corect de pe telefoane sau tablete. Să fie funcțional nu este suficient, trebuie să se comporte natural. Adică să fie gândit atât pentru navigarea cu mouse-ul cât și navigarea tactilă. Toate elementele să fie vizibile fără să iasă din ecran. Font-urile trebuie să scaleze pentru ca textul să își păstreze lizibilitatea iar imaginile să se redimensioneze. Cel mai important, website-ul trebuie să se încarce în timp util pe orice dispozitiv.

Trebuie aplicată o filozofie de design complet diferită față de afișajul pe monitoare. Pe laptop și desktop conținutul beneficiază de lățimea ecranului, pe când pe mobile și tablete, distribuirea se face pe înălțime.

Mobile First vs Mobile Only vs Responsive Web Design

Există trei filozofii de design în cadrul optimizării pentru mobile. Fiecare a apărut la câte un stagiu al popularizării utilizării mobilelor.

• Mobile Only: Sunt acele website-uri care au alternative dedicate exclusiv pentru dispozitivele mobile. Spre exemplu facebook.com și m.facebook.com. Este o practică populară la momentul apariției telefoanelor inteligente și o soluție oarecum primitivă. Spunem primitivă pentru că necesită un volum dublu de muncă să întreții două website-uri individuale. Redirecționând utilizator imediat ce accesează pagina va afecta negativ scorul SEO al website-ului.
• Responsive Web Design: Este soluția optimă pentru a nu mări excesiv volumul de muncă în timp ce satisfaci toate tipurile de dispozitive. Optimizarea pentru mobile prin Responsive Web Design (Design Adaptiv) presupune ca elementele și conținutul să se auto amplaseze sau să fie înlocuite în funcție de rezoluție. Adică website-ul să se adapteze și să se muleze automat pe dispozitiv. Cu câteva reguli create în CSS, poate fi o metodă rapidă și eficientă pentru optimizare. La momentul actual, este cea mai populară soluție
• Mobile First: O abordare diferită ce a început să fie tot mai populară. Optimizarea pentru mobile Mobile First presupune ca întreg design-ul website-ului să fie gândit în special pentru mobile. Ideea este simplă: proiectând website-ul din start pentru mobile satisfacem peste 70% din trafic, în timp ce orice display de laptop sau desktop va putea afișa orice design mobil. Deși teoretic o idee nu tocmai rea, problemele încep să apară când cineva vizualizează website-ul de pe un monitor, fie el la birou sau acasă. Aceste persoane vor avea parte de un design mai „sec” ce nu va beneficia de dimensiunile vaste ale ecranului. Dilema devine și mai apăsătoare când ne gândim că monitoarele 4k capătă popularitate. Chiar și televizoarele au început să fie folosite pentru navigarea online, chiar dacă reprezintă un segment infim, aproape inexistent din cota de trafic. Totuși, laptop-urile cu rezoluții mare sunt un caz de utilizare real și tot mai frecvent.

Înainte de a decide filozofie de optimizare pentru mobile, trebuie să analizezi publicul țintă și tendințele acestora de navigare. Lupta reală are loc între Responsive Web Design și Mobile First Design. Mobile Only Design aducând prea multe dezavantaje pentru a mai fi luată în calcul.

Cum se face optimizarea pentru mobile

Există foarte multe aspecte de luat în calcul pentru a te asigura că website-ul tău arată bine pe orice dispozitiv. Le vom enumera pe toate fără a intra prea mult în detalii tehnice:

Poziționează elementele în funcție de rezoluția și orientarea dispozitivului. Pentru o lățime de ecran între 240 și 768 pixeli sunt telefoanele. Aici trebuie să profiți de înălțimea ecranului atât în modul portret cât și în modul landscape. Între 769 și 1280 pixeli sunt tabletele. Având ecranul mai mare poți distribui conținutul pe maxim 2 coloane în modul portret și maxim 3 coloane în modul landscape. Evident, distribuția depinde și de dimensiunea elementelor, dar vom presupune că vorbim de text și imagini mari și medii într-un design aerisit. Conținutul să nu depășească limitele vizibile ale ecranului. Altfel Google nu va lua în considerare optimizarea pentru mobile.

Redimensionează elementele. Butoanele și imaginile trebuie să fie proporționale pe mobile. O imagine de 1400x1400px nu va avea loc pe un ecran de telefon. Folosește unități de măsură relative, precum % sau vw. Acestea se vor redimensiona sigure în funcție de rezoluția sau dimensiune.

Asigură-te că textul și titlurile rămân vizibile. De regulă, pe telefon dimensiunile textului sunt mai mici. Un titlu de 40px are șanse să iasă din ecran pe mobile dacă cuvântul este prea lung. O redimensionare la 25px ar fi necesară pentru a păstra aspectul și a satisface optimizarea pentru mobile. Nu plasa textul pe imagini! Acesta nu va mai fi vizibil când imaginea se va micșora.

Meniul este înlocuit cu un buton. Este un comportament clasic, întâlnit frecvent. Meniul este afișat doar la apăsarea butonului. Fie se deschide un container lateral, fie apare sub buton în funcție de dimensiune.

Păstrează o distanță suficient de mare între elementele cu interacții. Nu apropia prea tare două butoane sau două elemente cu link-uri. De asemenea asigură-te că sunt suficient de mari pentru a fi utilizate cu ușurință. Imaginează-ți un utilizator cu degete mai groase utilizând website-ul tău.

Nu utiliza elementele care nu se redimensionează sau ascunde-le pe mobil. Aici optimizarea pentru mobile are în vizor în special tabelele. În funcție de dimensiunea ecranului și lungimea cuvintelor, doar un anumit număr de coloane vor încăpea pe ecran. Maxim 4. Dacă chiar îți sunt necesare poți păstra tabelele doar pe desktop iar pe mobil să utilizezi liste sau alt amplasament. De asemenea, dacă utilizezi ferestre de tip Popup, asigură-te că pot fi ușor și rapid închide.

Oferă link-uri de descărcare pentru documentele PDF incorporate. Deși majoritatea browserelor pot reda un document direct în pagina website-ului, pe mobile situația nu este la fel de veselă. Chiar dacă utilizezi o librărie sau un modul ce afișează cât de cât incorporarea pentru mobile, navigarea va fi deficitară. Afișează un link de descărcare pe mobile. Astfel documentul este descărcat în dispozitiv și vizualizat cu o aplicație nativă, optimizată.

Folosește-te de avantajele dispozitivului. Tot parte din optimizarea pentru mobile este să utilizezi la maxim de îți oferă dispozitivul mobil. Spre exemplu, pentru carusele înlocuiește navigarea prin săgeți prin gesturi orizontale pe ecran.

Ia în calcul publicul țintă. Acesta nu este un criteriu tehnic, ci mai mult filozofic și opțional. Frecvent, cei care utilizează mobilele pentru navigare sunt în mișcare, în autobuz, în metrou, într-o sală de așteptare, uneori chiar la baie. Așadar, timpul de destinat lecturii este scurt. Folosește paragrafe scurte și evident segmentate pentru ca cititorul să poate reveni cu ușurință asupra textului fără a-și pierde sau uita progresul.

Navigarea trebuie să fie intuitivă și naturală pe mobile. Utilizatorii nu trebuie să petreacă timpul căutând metodele de navigare ci bucurându-se de conținutul oferit.

Utilizează formate multimedia compatibile. Deși mobilele și tabletele moderne pot reda o largă varietate de formate atât audio cât și video, unele formate încă nu sunt sau nu vor fi niciodată compatibile. Un bun exemplu ar fi elementele Flash sau documentele pdf incorporate.

Sacrifică conținutul, nu audiența. Dacă ceva nu se conformează cu optimizarea pentru mobile sau pagina devine prea lungă pentru derularea cu degetul, renunță la conținut. Scopul este să satisfaci audiența și să îți mărești traficul pe website. Nicidecum să expui blocuri de text și imagini pentru uz exclusiv personal.

Optimizează viteza de încărcare. Un aspect final dar extrem de important. Dacă o pagină durează prea mult până să se încarce va alunga o bună parte a vizitatorilor. Un ghid util poate fi vizualizat aici.

Google și Optimizarea pentru mobile

În 2015 Google a lansat Mobile Friendly Update numit și Mobilegeddon sau Mobilepocalyse. Este un update la algoritmul de căutare și o amenințare la adresa website-urilor neoptimizate. Pe scurt, dacă un website nu se conformează cu optimizarea pentru mobile, nu apare în paginilor rezultatelor de căutare de pe mobile sau are o poziție foarte prostă. Sunt vizate paginile website-ului. Neconformarea unei pagini, nu va penaliza întreg website-ul.

Cum se face verificarea? Google îți accesează frecvent website-ul printr-un robot și simulează un dispozitiv mobil. Acesta verifică dacă:

• Elementele ies din ecran.
• Textul poate fi citit.
• Viteza de încărcare este bună.
• Butoanele sunt suficient de depărtate
• Se poate realiza navigarea cu ușurință

Din fericire Google a pus la dispoziție o unealtă pentru verificarea optimizării disponibilă aici. Trebuie doar să introduci adresa URL a paginii ce o dorești testată.

Web Design Modern în optimizarea pentru mobile

Design-ul web este o artă în continuă redefinire. Nu are timp să se plafoneze să își atingă potențialul maxim pentru că mereu apare ceva nou. Născut în anii 90, a făcut trecerea de la monitoare pătrate, internet slab și rezoluții mici la monitoare late, internet optim și rezoluții de înaltă definiție în anii 2000. În 2010 a renăscut iar odată cu lansarea HTML5 și a standardelor de optimizare pentru mobile.

Aceste schimbări pot, și de multe ori chiar sunt frustrante. Evoluția nepermițând suficient timp pentru perfecționare. Așadar, acum când avem numeroase tehnici și stiluri de design, nu avem suficient spațiu să le expunem. Oricât de bun ar fi design-ul unui website pe un display lat, echivalentul pe telefoane va fi mult mai redus. Impactul vizual are mult de suferit din cauza lipsei de spațiu. O animație impresionantă își poate pierde din detalii atunci când este micșorată.

Cine are de suferit? Utilizator final, pentru că primește o experiență standard, uniformă și mediocră indiferent de website. Artistul pentru că capodopera sa nu va putea fi apreciată de publicul larg. În final și posesorul website-ului  pentru că mijloacele de a atrage atenția sunt mult mai puține.

Cine are de câștigat? Persoanele care nu au timp de artă. Persoanele orientate pe business, flexibilitate și accesibilitate. Persoanele care caută serviciul sau produsul și nu au timp să admire website-ul. Timpul este esențial pentru un mare segment de oameni. De aceia recurg la telefoane și de aceia o fac de multe ori din mers. Chiar în absența dispozitivelor mobile, aceștia nu ar fi acordat atenția cuvenită tehnici artistice utilizat.

Ce e de făcut? Soluția e simplă! Folosește optimizarea pentru mobile astfel încât să mulțumesc toate segmentele demografice. Livrează o experiență excepțională pe desktop și o funcționalitate perfectă pe mobile.

Hai să dăm naștere website-ului ideal împreună! Trimite-ne un mesaj și te contactăm noi!

Pentru a afla cum sa-ti optimizezi site-ul click aici: firma SEO Bucuresti.

Daca doresti sa realizezi un site de prezentare cick aici: realizare site de prezentare.