Ce este un site responsiv și cum îl optimizezi pentru mobil?

Trăim într-un secol când lumea adoarme cu smartphone-ul în mână în toate sensurile acestei expresii. Acest lucru se întâmplă pentru că de fapt aceasta a fost ideea smartphone-urilor: un dispozitiv cu ajutorul căruia poți obține acces liber la orice conținut de pe internet și nu doar, din orice colț al lumii. Deci de fapt realitatea pe care o vedem nu trebuie să ne mire.

Am creat acest articol cu scop de a defini specificul conceptului de site responsiv și de a prezenta anumite recomandări, indicii acționabile (îmi cer scuze pentru englezism) în privința optimizării site-ului web pentru dispozitivele mobile, la care trebuie să fim atenți.

Cuprins:

1. Ce este un site responsiv? Ce este Responsive Web Design?

   1. Diferența dintre un site responsiv și unul mobil.

   2. Avantajele tehnologiei RWD

   3. Avantajele site-urilor mobile

2. De ce este așa de important să ai un site optimizat pentru dispozitivele mobile?

   1. Ce este și ce a schimbat Mobile First Indexing?

3. Cum optimizezi site-ul pentru dispozitivele mobile

   1. Decide care sunt prioritățile.

   2. Alege minimalismul

   3. Folosește elemente mari

   4. Ajustează stilul textului

   5. Păstrează același conținut pe toate versiunile site-ului

   6. Folosește imagini optimizate pentru dispozitivele mobile

   7. Culoarea potrivită a fundalului site-ului

   8. Asigură-te că ai un număr suficient de moduri RWD

4. Cum verific dacă site-ul este optimizat pentru dispozitivele mobile?

Ce este un site responsiv? Ce este Responsive Web Design?

Web design responsive (RWD - eng. Responsive Web Design) este o tehnică de design a site-urilor web care face posibilă ajustarea automată a site-ului la dispozitivul folosit pentru accesarea site-ului. În mare parte este vorba despre ajustarea la dimensiunea ecranului acestui dispozitiv, dar nu numai. Un site responsive se diferențiază de un site mobil prin faptul că nu implică crearea unui site separat, special pentru dispozitivele mobile - fapt datorită căruia apar un șir de avantaje care țin de optimizarea SEO și de costuri de administrare a site-ului. 

Site-urile responsive sunt site-uri care arată bine pe orice dispozitiv, ajustându-și design-ul la dimensiunile ecranului, cu alte cuvinte răspund la necesitățile dispozitivului. Subliniem însă că optimizarea site-urilor pentru dispozitivele mobile nu ține doar de dimensiunile ecranului. Mai exact este vorba de ajustarea site-ului la următoarele cerințe ale dispozitivului specific:

1. Dimensiunile ecranului

2. Rezoluția ecranului

3. Memoria operativă dispozitivului

4. Viteza conexiunii la interne

Prima dată conceptul de site responsiv a fost folosit Ethan Marcotte în articolul său scris pe AListApart în 2010.

Alătură-te celor 600 000+ de utilizatori și creează site-uri gratuit, fără cunoștințe de programare

Diferența dintre un site responsiv și unul mobil.

Pentru a înțelege mai bine ce înseamnă un site responsiv este important să înțelegem diferențele între un site mobil și un site responsiv.

Diferența cea mai importantă ține de faptul că site-ul repsonsiv este reprezintă un sigur site, care își schimbă modul în care arată conținutul acestuia în dependență de dispozitivul utilizat de utilizator. 

Site-ul mobil însă reprezintă un al doilea site - diferit, separat și independent de cel pentru desktop.

Avantajele tehnologiei RWD

Avantajele tehnologiei RWD rezultă din faptul că de fapt avem de a face un singur site. Lucru deloc de neglijat, luând în considerare că numărul de dispozitive, platforme și browsere cu care website-ul tău va fi accesat crește de la o zi la alta. Ca rezultat avem următoarele avantaje:

1. Accesibilitate – conținutul site-ului este accesibil de pe orice dispozitiv. 

2. Micșorează costurile de administrare a site-ului într-o măsură considerabilă. De exemplu în timpul actualizărilor va fi necesar să lucrezi doar la o versiune a site-ului și la două.

3. Folosirea unui singur URL atunci când se dorește share-uirea conținutului paginii. Site-urile mobile de obicei au adresele create în baza subdomeniului m. sau mobile.: m.domeniu.ro/adresa-web

4. Eliminarea erorilor de navigare - există doar un sigur site și nu este necesar să verifici dacă link-urile sunt direcționate spre versiunea corespunzătoare a site-ului

5. Un website realizat cu un design de tip responsive corespunde noilor criterii de indexare anunțate de Google – mobile-first index.

6. O experiență superioară a utilizării site-ului chiar și pe desktop - atunci când accesezi site-ul într-o fereastră care este deschisă doar pe o jumătate de ecran.

Avantajele site-urilor mobile

1. Versiunile mobile ale site-urilor, pot fi implementate mult mai repede.

2. Optimizarea vitezei de încărcarea site-urilor mobile este mult mai simplă decât în cazul site-urilor responsive.

3. Este mult mai simplu să creezi o navigare și un conținut separat pentru versiunea site-ului accesate de pe smartphone. Deși acest lucru este posibil și pentru site-urile responsive.

De ce este așa de important să ai un site optimizat pentru dispozitivele mobile? 

În ziua de azi mai mult de 60% din traficul din Internet provine de pe dispozitivele mobile. Daca nu ești convins de asta, încearcă să afli de unde provine traficul pe site-ul tău. Google Analytics te poate ajuta :).

Tot ce trebuie să faci este să selectezi “Public” și mai apoi “Dispozitive mobile” pentru a vedea rezultatele. Dacă traficul de pe mobil este majoritar, atunci ai răspunsul la întrebarea de mai sus.

Un alt motiv este îmbunătățirea User Experience. Utilizatorilor pur și simplu le este mai comod să accesezi site-urile de pe smartphone lucru care îmbunătățește comunicarea cu utilizatorii și indirect mărește valoarea site-ului prin expedierea semnalelor pozitive către roboții Google: o rată de respingere mai mică o timp mai îndelungat pe site.

Ce este și ce a schimbat Mobile First Indexing?

Google cunoaște aceste tendința de creștere a traficului mobil și de mai mult timp promovează conceptul site-ului responsiv și prietenos pentru utilizatorii smartphone-urilor. Însă Mobile First nu ar fi Mobile First dacă nu s-ar opri la o simplă promovare.

Conform anunțului său, începând cu iulie 2018, algoritmii Google analizează paginile web începând cu versiunea mobilă.

Motivul este următorul: în 2017 volumul traficului de utilizatori care provine de la dispozitivele mobile (doar smartphone-urile, fără tablete și alte dispozitive) a înregistrat cota de 52% din traficul total, ceea ce înseamnă că traficul de pe dispozitivele mobile a depășit traficul de pe celelalte dispozitive.

Nu este de mirare că Google, la sfârșitul anului 2016, a declarat că preconizează modificări ale algoritmului de poziționare. La urma urmei, cea mai mare parte a traficului, în acest motor de căutare, provine de pe dispozitivele mobile. Deși în acel moment, detaliile erau încă necunoscute, concluzia era simplă și clară - algoritmul căutărilor de pe dispozitivele mobile se va schimba într-un mod destul de radical, cel puțin din punct de vedere tehnic.

Din această cauză, la sfârșitul anului 2017, pe blogul oficial Google a apărut o postare care explica totul. Compania a subliniat că aceasta este o modificare considerabilă a algoritmului de căutare și indexare. Deși proiectul noului algoritm este doar la etapa de implementare, sugestia era clară: se cereau pregătiri.

Astfel versiunea mobilă a site-ului nu e pur și simplu importantă ci este mai importantă de cât versiunea de desktop.

Orice dificultate întâlnită de utilizatori / roboții Google pe versiunea mobilă a site-ului va avea un impact enorm asupra poziției site-ului în rezultatele Google. Cu alte cuvinte cerințele față de performanța versiunii mobile a site-ului au devenit foarte mari.

Fiecare pagină care arată frumos pe desktop, va trebui să fie regândită de la început, sau reproiectată special pentru dispozitivele mobile. Dacă câțiva ani în urmă proiectarea site-urilor începând cu modul smartphone a fost una de avangardă, astăzi devine un standard. Și acest standard necesită o regândire a designului site-urilor pentru că modul smartphone al site-ului este unul cu foarte multe constrângeri față de posibilitățile de navigare și spațiul disponibil. Respectiv proiectanții sunt nevoiți să reconsidere necesitatea prezenței fiecărui element / fiecărei părți de conținut.

Cum optimizezi site-ul pentru dispozitivele mobile

O metodă de a crea un site web optimizat pentru dispozitivele mobile ține de alegerea Platformei WebWave - Este suficient să alegi unul din șabloanele noastre responsive. Sau poți folosi grupele de elemente - secțiuni care la fel sunt responsive.

Mai jos am prezentat câteva recomandări foarte importante pentru a crea un site web cu adevărat resposniv.

Decide care sunt prioritățile. 

Cu alte cuvinte fă o listă cu ceea ce nu poate fi eliminat. Ecranele mici ale smartphone-lor sunt foarte exigente. Acest lucru nu este ceva rău - Less is More (mai puțin înseamnă mai mult).

Alege minimalismul

Efectele de animație și alte ”artificii” îngreunează funcționarea site-ului pe dispozitivele mobile. Site-urile trebuie să fie simple, cu un meniu de navigare extrem de clar. Acest lucru va îmbunătăți confortul de utilizare a site-ului și nu va supraîncărca puterea de calcul al dispozitivului.

Folosește elemente mari

99,99% din utilizatori folosesc pe smartphone-uri degetul și nu cursorul, respectiv dacă vei crea butoane mari le vei ușura mult navigarea pe site. Această regulă se referă de fapt nu doar butoane ci la tot ce reacționează la click-uri: galerii, slidere, …

Ajustează stilul textului

Textul e forma de bază a conținutului și de fapt este prezent peste tot. Dina ceastă cauză trebuie să aibă dimensiuni suficient de mari - cel puțin 20px și interlinia de cel puțin 1,6. Cele mai bune fonturi sunt cele neșerife.

Păstrează același conținut pe toate versiunile site-ului

Este o cerință de bază ale algoritmului Google. Ideea este să păstrezi accesibilitatea conținutului principal al site-ului în cadrul fiecărui mod RWD.

Vezi mai multe despre crearea unui site web în acest articol.

Folosește imagini optimizate pentru dispozitivele mobile

De foarte multe ori dispozitivele mobile au o viteză de conexiune la Internet limitată. Respectiv est foarte important ca site-ul nostru să fie unul ușor și să se încarce repede. Pentru aceasta este bine să alegem formatele potrivite pentru imagini: .svg și .webp. La fel este important să alegi rezoluția potrivită pentru imagini: 1920px pentru desktop ș.i 1000px pentru smartphone-uri.
Mai multe detalii despre îmbunătățirea vitezei de încărcare a site-ului vei găsi în acest articol.

Culoarea potrivită a fundalului site-ului

Culoarea fundalului trebuie să asigure o lizibilitate foarte bună a textului. Deși la prima vedere arată ca ceva firesc, în cazul dispozitivelor mobile apar cerințe mai mari deoarece aceste dispozitive sunt folosite destul de des în condițiile de afară, când lumina solară limitează contrastul elementelor de pe text. Standardul setat de Google este următorul: Un contrast de 3:1 pentru textul de dimensiunea 14, 18 px sau textul boldat (aldin) și 4,5:1 în cazul celorlalte texte.

Asigură-te că ai un număr suficient de moduri RWD

Atunci când ne gândim la RWD, ne gândim la smartphone-uri verticale. Însă trebuie să recunoaștem că pe lângă aceasta există și tablete și dispozitive cu dimensiuni mai puțin obișnuite. Adevărul este că utilizatorii din ziua de azi au foarte multe tipuri de dispozitive folosite pentru a accesa site-urile: pot fi tablete mai mici și smartphone-uri mai mari. Acest lucru îl putem observa în acest inforgrafic creat de la UXplanet.com.

Platforma WebWave se conformează standardelor stabilite de Google oferind posibilități avansate de optimizare a site-urilor pentru dispozitivele mobile. În primul rând în WebWave poți dezvolta site-uri pentru 4 moduri RWD - Desktop, Tabletă, Smartphone orizontal și Smartphone vertical. Majoritatea platformelor oferă doar 2 sau 3 moduri.În al doilea rând, în caz de necesitate, cu ajutorul platformei WebWave poți ajusta / seta cu o exactitate de 1px breakpoint-ruile - lățimea asociată fiecărui dispozitiv, în baza căruia site-ul va decide care versiune a site-ului va fi afișată. În acest mod proiectanții de site-uri care folosesc WebWave obțin un control suplimentar asupra modului în care arată site-ul pe diferite dispozitive - un lucru foarte util de exemplu în situațiile când observăm că utilizatorii accesează site-urile de pe smartphone-uri mai largi de cât cele standarde.

Cum verific dacă site-ul este optimizat pentru dispozitivele mobile?

Există mai multe metode de a verifica dacă site-ul este repsonsiv:

1. Cea mai bună metodă este de a accesa site-ul de pe smartphone. Dacă totul se scalează bine atunci site-ul este responiv. Dacă trebuie să mărești pagina sau să o scrolezi pe orizontală, atunci site-ul nu este repsonsiv. Recomandăm această metodă pentru că este cea mai sigură, pentru că ia în calcul nu doar dimensiunile ecranului dar și specificul backgroundului software a smartphone-urilor: sistemele de operare aplicațiile și stilurile deservite de acestea.

2. O altă opțiune este pur si simplu să folosești Mobile-Friendly test de la Google pentru a verifica dacă subpagina este optimizată bine pentru dispozitivele mobile.
   

3. Accesează site-ul cu ajutorul browserului Google Chrome și apasă tasta F12 și bifează opțiunea de a previzualiza modurile RWD ale site-ului. Vei avea posibilitatea să alegi dispozitivul necesar și să modifici poziția dispozitivului: orizontal - vertical. 
   

4. Conectează site-ul la Google Search Console și corectează erorile referitoare la optimizarea pentru dispozitive mobile semnalate de sistem.
   

Vezi cât de ușor este să creezi site-uri responzive cu ajutorul programului WebWave

Autor: Cristian Lenga, Bartek Raducha, Florentina Raicu, Ivan Prozorovschi

Cele mai citite articole. 

Programul WebWave.

Creat în WebWave
Șabloane
Landing page
Magazin online
Experți WebWave
Recomandă și câștigă
Integrări și module
Îți lipsesc funcții?
Accesibilitatea serviciului
Șabloanele comunității
Domeniu gratuit
Hosting gratuit

Companie.

Despre Noi

Echipa WebWave

Termeni si Condiții

Cookies

Politica de confidențialitate

Acord privind prelucrarea datelor

Materiale. 

Prețuri. 

Planuri Premium

Creează mai multe site-uri

Domenii

Creează Site-uri Web si Magazine Online cu ajutorul platformei WebWave ! Alege unul dintre șabloanele deja optimizate pentru dispozitivele mobile și modifică-l după propriile necesități sau începe cu o pagina curată.

contact@webwave.ro

Scrie-ne pe chat
De luni până vineri, de la 9:00 până la 17:00

Acest site a fost creat în cu ajutorul platformei WebWave 

Urmărește-ne pe: