Design Responsive: de ce este cea mai bună opțiune și cum să o faceți corect

BY admin
|

creșterea explozivă a proliferării mobile și continue a unei varietăți de dispozitive face din responsive Web design (RWD) cea mai bună opțiune pentru comercianții cu amănuntul și mărcile care doresc să optimizeze modul în care interacționează cu clienții din toate punctele de atingere digitale. Potrivit retailerului de Internet, 261 de milioane de consumatori americani dețin dispozitive mobile, iar 66 de milioane dintre acești proprietari de dispozitive fac cumpărături cu ei. De fapt, retailerul de Internet a înregistrat o creștere de 159% a comercianților pe IR Mobile 500 folosind responsive din 2013 până în 2014, deoarece comercianții împing să rămână competitivi și să răspundă nevoilor consumatorilor din mers.

versiunile Mobile ale site-urilor desktop au fost o soluție populară până acum, dar experiența nu are adesea elemente critice de branding și conținut și leagă personalul și bugetul valoros cu gestionarea a două versiuni ale unui site web. Prin furnizarea de informații dintr-o singură bază de cod care recunoaște și se adaptează la dispozitivul mobil, designul receptiv rezolvă ambele probleme și dintr-o singură adresă URL.

cu toate acestea, la fel cum lansarea unui site de comerț electronic nu este o garanție a succesului în afaceri, un site receptiv foarte performant ia în considerare și planificare egală. Dacă nu sunt făcute corect, site-urile receptive pot aduce cât mai multe provocări pe care le rezolvă: performanțe lente, întârzieri costisitoare, consumatoare de timp și complexe de testare a dezvoltării și pot demasca provocările arhitecturale care necesită rescrierea site-ului. Într-un studiu recent realizat de Moovweb pe 12 site-uri responsive, retailerul de Internet a remarcat că performanța a fost cu 513% mai lentă pe smartphone-uri decât pe PC-uri și tablete, unele site-uri având nevoie de 18,24 secunde pentru a se încărca, cu mult peste timpul de încărcare a celor mai bune practici din industrie de 3 secunde.

optimizarea pentru receptiv: înainte de a începe

într-un recent Magento-sponsorizat de Internet Retailer webinar, vorbitor invitat, Forrester Research, Inc. Analistul Mark Grannan a subliniat că, la fel ca majoritatea proiectelor, o implementare de succes a RWD începe cu alinierea obiectivelor de afaceri și de dezvoltare. Luând timp în față pentru a analiza modelele de trafic mobil, a crea liste de priorități pentru Dispozitive și a revizui arhitectura și conținutul informațiilor, echipele dvs. vor putea să se miște mai repede. Conectarea strânsă a echipelor de proiectare și dezvoltare și accelerarea colaborării acestora cu instrumentele de prototipare și cadrele de dezvoltare pot îmbunătăți în mod similar timpul de lansare pe piață. Grannan a recomandat, de asemenea, ca inginerii să rezolve cerințele de lungă durată de la început, cum ar fi determinarea dacă sunt necesare modificări ale CMS sau ale arhitecturii web pentru a sprijini proiectele de proiectare receptive și să abordeze proactiv viteza și accelerarea site-ului prin tehnici de optimizare frontend. În cele din urmă, Grannan a recomandat potrivirea valorilor valorii afacerii (cum ar fi traficul site-ului și conversiile) cu domeniul de dezvoltare.

optimizarea pentru Responsive: Mapați călătoria clienților dvs.

ca orice altceva, optimizarea site – ului dvs. pentru mai multe dispozitive începe cu publicul dvs.-compoziția și comportamentele acestora.

  • ce procent din traficul site-ului dvs. vine prin dispozitive mobile? Cei mai mulți comercianți peg 20-30% trafic mobil ca declanșator pentru luarea în considerare receptiv

  • cum accesează site-ul dvs. astăzi? Tendințele Macro contează mai puțin decât specificul site-ului și al clientului

  • ce dispozitive / browsere favorizează populația dvs. de clienți? Este important să rețineți că designul web receptiv este implementat folosind tehnici incompatibile cu browserele mai vechi (în special IE8 și mai vechi). Identificarea dispozitivelor de top care accesează site-ul dvs. vă va ajuta, de asemenea, să determinați numărul de puncte de întrerupere a ecranului pentru care ar trebui să vă proiectați site-ul

optimizarea pentru Responsive: definiți strategia dvs. de conținut

pregătirea conținutului pentru un site web responsive este una dintre cele mai mari provocări cu care se vor confrunta comercianții, deoarece vor trebui să schimbe modul în care gândesc despre conținut. Se spune adesea că implementarea unui design web receptiv este mai mult o întrebare de strategie de conținut decât o întrebare de design.

după cum a spus Brendan Falkowski de la Gravity Department, „Mobile First este o metodologie care vă cere să proiectați interacțiuni gândindu-vă mai întâi la micul ecran. Mobile first nu este o versiune dezbrăcată a unui site desktop.”

uitați-vă la termenii de căutare utilizați de clienții dvs. și începeți prin a defini interacțiunile importante pentru magazinul dvs. Prioritizați funcțiile și informațiile pentru a organiza vizualizarea mobilă mai eficient, apoi scalați până la un site mai curat pentru ecrane mari. Crearea unei experiențe câștigătoare nu înseamnă eliminarea utilității sau a profunzimii.

dimpotrivă, utilizatorii se așteaptă să poată efectua orice acțiune de pe orice dispozitiv pe care îl dețin. Asta înseamnă că filtrarea rezultatelor căutării, citirea recenziilor, salvarea în listele de dorințe și verificarea trebuie să fie universal accesibile.

optimizarea pentru Responsive: Cod și imagini

o provocare a RWD este că codebase sale unice pot fi foarte mari și lent pentru a încărca. Luați în considerare aceste sfaturi, Multe împărtășite de Mark Grannan în webinarul recent al retailerului de Internet, pentru o experiență mobilă optimă:

  • încărcați conținutul prioritar în primul rând și încărcarea târzie („încărcare leneșă”) conținutul de mai jos pentru a crea percepția performanței mai rapide, mai degrabă decât să așteptați să afișați conținutul după ce totul este încărcat

  • utilizați tehnologia server-side pentru a livra sau a reda imagini dimensionate corespunzător pentru dispozitiv

  • codificați site-ul dvs. pentru a reduce numărul de călătorii dus-întors la server pentru a reduce latența

  • Utilizați fonturi web deschise, mai degrabă decât fonturi personalizate pentru a reduce greutatea paginii

  • luați în considerare utilizarea accelerației terților furnizori, cum ar fi CDN – uri, pentru a optimiza performanța printr-o serie de tehnologii și cache de conținut local

Going Responsive: lecții din tranșee

Skinny Ties este unul dintre cei mai mari comercianți cu amănuntul și angrosiști de cravate din Statele Unite și una dintre primele companii care vând îmbrăcăminte tradițională online. Așadar, a fost potrivit doar ca retailerul să fie unul dintre primii comercianți care au dezvoltat un site receptiv la începutul anului 2012.

pentru a crea experiența excepțională a clienților pe care Skinny Ties o urmărea, Gravity Department A crescut drastic complexitatea taxonomiei lor prin maparea fiecărui atribut la un format standardizat. Înainte ca utilizatorii să poată naviga doar într-un arbore de categorii rigide. Taxonomia dinamică a deschis mai multe intrări pentru fiecare produs.

combinația de design receptiv și o taxonomie flexibilă a contribuit la o creștere masivă a veniturilor, a valorii SEO și a ratelor de conversie pe fiecare platformă și factor de formă.

  • 58% creșterea tranzacțiilor YOY

  • 20.8% creșterea AOV

  • 187% creșterea veniturilor de pe dispozitivele Android

  • 224% creșterea veniturilor din iPad-uri

  • 437% creșterea veniturilor din iPhone

Vax este cel mai bine vândut brand floorcare din Marea Britanie și face parte din Divizia floorcare a TTi din Hong Kong, lider global în produse pentru industria de îmbunătățire a locuințelor și construcții.

afacerea crește cu 40% pe an, iar afacerea online a cunoscut o creștere de 85%+.

compania a cunoscut un succes extraordinar din vânzările flash sau ceea ce numește vânzări în curte.

aceste evenimente de cinci zile aduc peste 3.000 de utilizatori concurenți la vârf și au avut un mare succes! Când compania a văzut că 40% din traficul pentru vânzările în curte provine de pe dispozitive mobile, au știut că au nevoie de un site optimizat pentru mobil.

EMEA TTi Floorcare este directorul Nigel Aitchison a împărtășit rezultate excelente din linia lor Vax după lansarea pe Magento Enterprise Edition 1.Tema sensibilă a lui 14, care le-a luat doar patru săptămâni pentru a construi și testa. Cu site-ul responsive, Vax a văzut conversia în timpul vânzării lor mari în curte, crescând cu 42% pe tablete și 156% pe telefoanele mobile.

resurse suplimentare:

Internet Retailer – 23 iulie 2014: pași pentru atingerea succesului Responsive Web Design

Forrester Research – Jan. 16, 2014: Șase Capcane De Proiect Site-Ul Receptiv Și Cele Mai Bune Practici Pentru Cum Să Le Evite

Internet Retailer-Mai 2 – 2013: Skinny Ties obține o creștere de 211% a vânzărilor de telefonie mobilă cu site-ul său de design receptiv

Brendan Falkowski : https://speakerdeck.com/brendanfalkowski

Moovweb-iulie 2014: 8 moduri de a îmbunătăți performanța site-ul receptiv

Magento Blog-Mai 13, 2014: Magento permite site-uri sensibile în jumătate din timp