Cursuri online de creare site web

Testează programul nostru pentru creare site web și obține acces la cursul online gratuit. La înregistrare îți vom expedia un mesaj e-mail cu un click către înregistrare la cursul online. La acel curs vei afla cum poți crea un site web gratis, singur și fără cunoștințe de programare.

Testează gratuit

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?

Alătură-te celor 200 000 de utilizatori, care creează site web gratis și fără cunoștințe de programare.

Programul pentru creare site-uri, WebWave, permite crearea paginilor web  în plină libertate. Poți începe procesul de creare site web de la o pagină curată sau folosește un șablon.

CREEAZĂ SITE-UL PROPRIU GRATUIT

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.

 

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.


În partea următoare a articolului, vom descrie detaliat care sunt avantaje / dezavantajele site-urilor responsive față de cele mobile. Însă este important să menționăm că Goolge confirmă în mod deschis și clar că promovează site-urile responsive în cadrul algoritmilor sale și consideră că tehnologia RWD este una superioară. Argumentul principal a echipei Google este faptul că conținutul site-ului trebuie să fie accesibil tuturor utilizatorilor independent de dispozitivul pe care îl utilizează.

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.

Site-urile repsonsive îmbunătățesc performața SEO - lucru confirmat atât de Google cât și de specialiștii SEO

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.

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

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, …

Folosește elemente mari și simple

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.

 

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.

Break point-urile - Lățime ecranelor dispozitivelor mobile. UXplanet

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.
    Testarea optimizării site-ului cu Mobile-Friendly test de la Google

  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. 
    Testarea optimizării site-ului pentru dispozitivele mobile cu ajutorul browserului Google Chrome

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

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

Articole similare pe care trebuie să le citești:

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

Tot ce trebuie șă știi despre cumpărarea unui domeniu
27/12/2018

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

WebWave - program pentru creare site web

Începe acum

PANOUL WEBMASTER

LOGIN

Logo, WebWave - program pentru crearea site-urilor web

Creează Site-uri Web Uimitoare cu ajutorul platformei WebWave ! 
Începe cu o pagină curată sau alege un șablon deja optimizat pentru dispozitivele mobile și modifică-l după propriile cerințe.

Panoul webmaster

Acest WebSite a fost creat în totalitate cu ajutorul Platformei WebWave (Program Gratuit pentru crearea Site-urilor Web).
Această pagină utilizează module Cookie. Află mai multe

CUNOAȘTE-NE MAI BINE ÎN REȚEA

ÎNCEPE ACUM

EN

PL

PROGRAM

wEBwAVE

Tutoriale

Prețuri

Pentru clienți