8 minute timp de citire

Pentru ca analizele noastre arata ca in Romania mai sunt inca multe magazine online si site-uri de prezentare care trebuie sa-ti adapteze design-ul pentru dispozitivele mobile, am ales sa-ti vorbesc azi despre responsive design.

Cand vine vorba de un website, probabil singurele intrebari pe care ti le pui despre utilizatorii de pe desktop sunt: “Ce l-a atras in magazinul meu? Ce problema incearca sa rezolve?”

Ei bine, intrebarile sunt diferite cand cineva ajunge in site prin intermediul unui smartphone:

“Ce l-a atras in magazinul meu de acolo de unde provine? Ce problema incearca sa rezolve acum?”

Te intrebi ce tip de dispozitiv foloseste, care este marimea ecranului si ce sistem de operare foloseste (Android sau iOS). Toate acestea conteaza, ca sa afli cum il poti convinge sa converteasca in magazinul tau.

Numarul persoanelor care folosesc telefonul mobil pentru a accesa diferite site-uri este in crestere.

Statisticile prevad faptul ca la nivel global, pana in 2017, mai mult de 90% dintre utilizatorii de internet vor accesa continut online de pe telefon.

In aceeasi directie, echipa Silkweb a realizat un infografic privitor la situatia SEO pentru Mobil in Romania, in care se observa o disproportie evidenta intre evolutia numarului consumatorilor de internet pe mobil si numarul mic de website-uri optimizate corespunzator.

Avand in vedere acest aspect, optimizarea website-urilor pentru mobil devine varful de lance pe care trebuie sa il pregatesti pentru un impact pozitiv.

Aceasta reprezinta de multe ori prima impresie a companiei tale. Sa fii optimizat pentru mobil nu mai e doar o optiune, un moft, daca vrei sa faci bani (si presupun ca vrei). Cateva schimbari pot influenta radical numarul de conversii pe mobil sau desktop.

super gomag

Vrei sa iti deschizi un magazin online?

Descopera cum iti gasesti produsul vedeta

Primesti acces la video-ul in care iti arat cum sa iti alegi cel mai bun produs in magazin! Vrei?

decizie cumparare

E greu, aproape imposibil si deloc practic sa creezi versiuni diferite pentru toate device-urile folosite de catre clienti pentru a accesa magazinul online. Lista dispozitivelor se intinde de la diferite tipuri de smartphone-uri, tablete, iPad, iPhone, Kindle si pana la infinit, daca stam sa apreciem cum evolueaza tehnologia moderna.

Adica, nu m-as mira daca in viitorul apropiat am ajunge sa intram pe net direct de pe…frigider. De exemplu, sa comanzi mancare si produse alimentare direct de pe lista pe care a lasat-o sotia pe frigider. Suna bine, nu? 🙂

Deci care este solutia pentru a remedia aceasta situatie? Problema este usor de rezolvat prin conceptul de Responsive Web Design, un trend intens discutat la ora actuala. Este, practic, cea mai simpla si eleganta solutie.

Design-ul Responsive este o combinatie intre griduri flexibile, imagini flexibile si Media Queries ce permit website-ului sa se adapteze oricarui dispozitiv folosit.

Practic, design-ul raspunde caracteristicilor fiecarui device prin care utilizatorul acceseaza un site. Numarul ratiunilor pentru care ar trebui sa te orientezi si tu spre acest tip de design (in caz ca nu ai facut-o pana acum) incepe sa creasca din ce in ce mai mult.

Salveaza timp, salveaza bani si, cea mai buna parte, permite utilizatorului sa-ti acceseze continutul de pe orice dispozitiv prefera.

Citeste si: Vezi Legatura Dintre Web Design Si Afacerea Ta

De cand a fost mentionat pentru prima data de catre Ethan Marcotte in 2010, in articolul sau Responsive Web Design, publicat pe A List Apart, conceptul a capatat o importanta uriasa, transformandu-se intr-un adevarat trend.

Cu ceva timp in urma, majoritatea site-urilor aveau la baza griduri fixe si treaba functiona pentru ca cele mai multe calculatoare aveau cam aceeasi rezolutie. Situatia s-a schimbat tocmai datorita dispozitivelor cu rezolutii variate.

Sistemul flexibil de griduri urmareste ca toate elementele din layout sa fie redimensionate astfel incat sa creeze un intreg coerent, deci se bazeaza pe calculul proportiilor. Design-ul responsive este diferit de definirea unui site in pixeli. In acest caz, codurile responsive sunt scrise in procente si unitati relative.

Al doilea ingredient, imaginile flexibile, isi pot modifica latimea si inaltimea in functie de dimensiunea gridurilor.

In ceea ce priveste al treilea element, Media Queries, reprezinta o metoda practica de a incarca diferite stiluri CSS pentru diferite rezolutii, in vederea unei experiente calitativ superioare a vizitatorului in site.

RWD este potrivit atat pentru site-urile B2C cat si pentru cele B2B.

Cel mai proeminent beneficiu al site-urilor vine pe partea de SEO: au rate de respingere mai scazute datorita unui rank superior in Google, au un singur nume de domeniu mai usor de cautat, cu rezultate vizibile, optimizeaza si mentin un singur website comparativ cu efortul depus pentru a avea grija de versiuni separate pentru desktop si mobil.

Totusi, design-ul responsive nu influenteaza consumatorul doar in stadiul de recunoastere dar si in cel de finalizare a unei comenzi sau abonare. Prin urmare, conversiile se intampla si pe mobil iar numarul acestora creste.

Atunci cand construiesti un website si implementezi un design responsive, vei avea un singur URL catre care traficul din orice cuvant cheie folosit va fi redirectionat.

Principiul “La inceput a fost mobilul…”

Fara conotatii biblice, acest principiu se refera la tehnica realizarii unui site pornind de la o baza simpla.

Multi developeri aleg sa creeze un site incepand cu varianta pentru un dispozitiv cu capacitate limitata, cu mai putine optiuni (pentru mobil) si apoi, sa adauge diferite functionalitati pentru a ajunge la versiunea website-ului pentru desktop. Logic, este mai usor sa dezvolti ceva adaugand optiuni decat sa te decizi ce elimini pentru a realiza ceva mai simplu.

Haide sa discutam putin si despre opinia lui Google despre design responsive.

Cel mai recent, pe 21 aprilie, Google a lansat un mobile-friendly update, pe care cei mai multi l-au numit Mobilegeddon. Sincer, mi se pare ca foarte multa lume a intrat in panica, crezand ca toate rezultatele vor fi afectate.

In fapt, Mobilegeddon actioneaza doar in momentul in care cautarea se face de pe telefonul mobil. Rezultatele afisate de Google pe desktop, laptop sau tablete au ramas la fel.

Practic, aceasta actualizare a avantajat site-urile optimizate pentru smartphones si rezolutii mici, urmarind modul de afisare si nivelul de usability al site-urilor pentru telefoanele inteligente. Daca inca nu stii daca magazinul tau este mobile-friendly, verifica-ti statusul in instrumentul pus la dispozitie de Google.

Partea trista, in aceasta situatie, este faptul ca a fost nevoie de penalizari din partea motorului de cautare pentru ca magazinele online sa se mobilizeze, sa ofere o experienta mai placuta clientilor magazinului lor.

Gandeste-te doar la email-urile pe care le trimiti clientilor, cu newslettere, oferte, mesaje etc.

Sunt acestea optimizate pentru mobil? Sau utilizatorul se enerveaza si il sterge doar pentru ca trebuie sa se chinuie sa-l citeasca pe smartphone? Clientul tau nu are timp si rabdare sa citeasca un mesaj care nu este optimizat pentru mobil si nici nu va cauta in graba un PC sau laptop doar ca sa-ti faca tie un favor.

Da, mesajele tale sunt minunate si de impact dar ce influenta au daca nici macar nu sunt citite?

utilizare cercetare mobil

Citeste si: Google Modifica Pozitiile In Afisarile Pe Mobile

RWD pe care il cunoastem acum nu este inca solutia perfecta, are atat avantaje cat si dezavantaje; este doar un pas al unui proces de dezvoltare. Avand in vedere faptul ca tehnologia de pe piata si preferintele utilizatorilor sunt in continua schimbare, practicile pentru cum folosim si dezvoltam web-ul se vor ajusta.

Avantajele responsive design sunt urmatoarele:

→ o singura versiune de site care functioneaza adaptat pentru orice dispozitiv, astfel ca poti pastra aceeasi strategie SEO;

→ posibilitatea de sharing a aceluiasi URL intre diverse device-uri;

→ layout-ul se adapteaza la browser si elimina scroll-ul orizontal;

→ nu trebuie sa manageriezi diferite pagini web, prin urmare se reduc costurile de mentenanta ale site-ului;

→ Google recomanda RWS deoarece ii este mai usor sa manipuleze acelasi HTML si continut pe diferite dispozitive.

→ Rapoartele din Google Analytics vor cuprinde toate datele privitoare la magazinul tau online, provenind atat din cautarile din desktop dar si mobile

Totusi, nu ma voi arunca inainte sa afirm ca RWD este solutia perfecta pentru afacerea ta. Insa este cea mai potrivita, dupa cum recomanda multi specialisti iar Google favorizeaza site-urile optimizate astfel, in comparatie cu crearea unei versiuni separate.

Chiar daca nu alegi varianta RWD din cauza bugetului, te sfatuiesc sa ai totusi si o versiune pentru mobil.

Prin urmare, sa trecem in revista si dezavantajele unui design responsive:

→ se intalnesc dificultati datorita introducerii unui nou nivel de complexitate pentru layout-uri;

→ apar, uneori, probleme la compatibilitatea dintre browsere;

→ daca nu te implici serios, poti afecta viteza de incarcare pe mobil, neavand grija la codurile HTML/CSS inutile sau imaginile prea mari.

Inca dezvolti website-uri pentru o rezolutie standard (1024×768)? Te rog, opreste-te! Doar nu traiesti sub o piatra. Trebuie sa intelegi ce impact au trendurile in schimbare asupra magazinului tau online.

In ceea ce priveste situatia magazinelor implementate pe platforma Gomag, acestea au un design responsive prin definitie. Scopul nostru dar si cel al clientilor nostri este siguranta unei experiente cat mai bune in site pentru toti utilizatorii.

Un utilizator satisfacut, care are la indemana rezolvarea nevoilor si cerintelor sale intr-un site pe care il acceseaza indiferent de dispozitiv, se va converti, rezultand un numar mai mare de vanzari.

Fie ca vorbim despre design, functionalitati, noi module sau strategii de marketing, trebuie sa stii ca toate aceste lucruri au un singur numitor comun, cresterea vanzarilor sau imbunatatirea experientei pentru clientii tai.

Cosmin Daraban

CEO la Gomag
18 ani experienta online
Sunt cofondator SilkWEB & Gomag din 2005.
Scriu din experienta despre marketing in eCommerce,
optimizare rata de conversie, crestere trafic si vanzari (SEO, SEM & UX)
Implicat in lansarea si dezvoltarea a peste 600 de magazine online din nise diferite.