responsivt Design: hvorfor det er din bedste mulighed og hvordan man gør det rigtigt

BY admin
|

den eksplosive vækst i mobil og løbende spredning af en række enheder gør responsivt design til den bedste mulighed for detailhandlere og mærker, der ønsker at optimere, hvordan de interagerer med kunder på tværs af alle digitale berøringspunkter. Ifølge internetforhandler ejer 261 millioner amerikanske forbrugere mobile enheder, og 66 millioner af disse enhedsejere handler med dem. Faktisk har internetforhandler set en stigning på 159% i købmænd på IR Mobile 500 ved hjælp af responsive fra 2013 til 2014, da Købmænd skubber for at forblive konkurrencedygtige og imødekomme forbrugernes behov på farten.

Mobile versioner af desktop sites har været en populær løsning indtil nu, men oplevelsen mangler ofte kritisk branding og indholdselementer og binder værdifuldt personale og budget sammen med administration af to versioner af en hjemmeside. Ved at levere oplysninger fra en enkelt kodebase, der genkender og tilpasser sig den mobile enhed, responsive design løser begge disse problemer, og fra en enkelt URL.

men ligesom lancering af et e-handelssite ikke er en garanti for forretningssucces, tager et højtydende responsivt sted lige hensyn og planlægning. Hvis ikke gjort rigtigt, responsive sites kan bringe så mange udfordringer, som de løser: langsom ydeevne, dyre, tidskrævende, og komplekse udvikling test forsinkelser, og det kan afsløre arkitektoniske udfordringer, der kræver omskrivning af sitet. I en nylig undersøgelse af 12 responsive sider bemærkede internetforhandler, at ydeevnen var 513% langsommere på smartphones end på PC ‘ er og tablets, hvor nogle steder tog 18,24 sekunder at indlæse, langt over 3 sekunders branchens bedste praksis side indlæsningstid.

Optimering til responsiv: før du starter

i en nylig Magento-sponsoreret internetforhandler, gæstetaler, Forrester Research, Inc. Analytiker Mark Grannan understregede, at som de fleste projekter begynder en vellykket implementering af RVD med at tilpasse forretnings-og udviklingsmål. At tage tid på forhånd til at analysere mobile trafikmønstre, oprette enhedsprioritetslister og gennemgå din informationsarkitektur og indhold giver dine teams mulighed for at bevæge sig hurtigere. Tæt forbindelse mellem design-og udviklingshold og fremskyndelse af deres samarbejde med prototypeværktøjer og udviklingsrammer kan på samme måde forbedre time to market. Grannan rådede også til, at ingeniører løser krav til lang hale fra starten, såsom at bestemme, om CMS-eller internetarkitekturændringer er nødvendige for at understøtte responsive designprojekter, og proaktivt adressere hastighed og stedacceleration gennem frontend-optimeringsteknikker. Endelig anbefalede Grannan at matche forretningsværdimålinger (såsom site trafik og konverteringer) til udviklingsomfanget.

Optimering til responsiv: Kortlæg dine kunders rejse

som alt andet starter optimering af din side til flere enheder med dit publikum – deres sammensætning og adfærd.

  • hvilken procentdel af din trafik kommer via mobile enheder? De fleste købmænd peg 20-30% mobil trafik som udløseren til at overveje lydhør

  • Hvordan får de adgang til din hjemmeside i dag? Makro tendenser betyder mindre end detaljerne i din hjemmeside og din kunde

  • hvilke enheder / brugere foretrækker din kundepopulation? Det er vigtigt at huske på, at responsivt internetdesign implementeres ved hjælp af teknikker, der er uforenelige med ældre bro.sere (især IE8 og ældre). Identificering af de bedste enheder, der får adgang til din side, hjælper dig også med at bestemme antallet af skærmbrudspunkter, som du skal designe din side til

Optimering til responsiv: definer din indholdsstrategi

forberedelse af indhold til en lydhør hjemmeside er en af de største udfordringer, som handlende vil stå over for, da de bliver nødt til at ændre, hvordan de tænker på indhold. Det siges ofte, at implementering af et responsivt internetdesign mere er et indholdsstrategispørgsmål end et designspørgsmål.

som Gravity Department ‘ s Brendan Falkovsky udtrykte det, “Mobile First er en metode, der beder dig om at designe interaktioner ved først at tænke på den lille skærm. Mobile first er ikke en fjernet version af et desktop-sted.”

se på de søgeudtryk, dine kunder bruger, og start med at definere de vigtige interaktioner for din butik. Prioriter funktioner og information for at organisere mobilvisningen mere effektivt, og skal derefter op til et renere sted til store skærme. At skabe en vindende oplevelse handler ikke om at fjerne nytte eller dybde.

tværtimod forventer brugerne at kunne udføre enhver handling fra den enhed, de holder. Det betyder at filtrere søgeresultater, læse anmeldelser, gemme på ønskelister, og tjek skal være universelt tilgængelig.

Optimering til responsiv: Kode og billeder

en udfordring ved RVD er, at dens enkeltkodebase kan være meget stor og langsom at indlæse. Overvej disse tip, Mange deles af Mark Grannan i den nylige internetforhandler, for en optimal mobiloplevelse:

  • Indlæs prioriteret indhold først og sent belastning (“doven belastning”) indhold under det for at skabe opfattelsen af hurtigere ydeevne i stedet for at vente på at vise indhold, når alt er indlæst

  • brug server-side teknologi til at levere eller gengive billeder passende størrelse til enheden

  • kode dit site for at reducere antallet af rundrejser tilbage til serveren for at reducere latenstid

  • Brug åbne skrifttyper i stedet for brugerdefinerede skrifttyper for at reducere sidevægten

  • overvej at bruge tredjeparts acceleration udbydere, som CDN ‘ er, for at optimere ydeevnen gennem en række teknologier og caching af lokalt indhold

går lydhør: lektioner fra skyttegravene

Skinny Ties er en af de største detailhandlere og grossister af slips i USA og en af de første virksomheder, der sælger traditionelt halstøj online. Så det var kun passende, at forhandleren skulle være en af de første købmænd, der udviklede et responsivt sted tilbage i begyndelsen af 2012.

for at skabe den ekstraordinære kundeoplevelse, som Skinny Ties var efter, øgede Gravity Department drastisk kompleksiteten af deres taksonomi ved at kortlægge hver attribut til et standardiseret format. Før brugere kun kunne navigere i et stift kategoritræ. Den dynamiske taksonomi åbnede flere indgange til hvert produkt.

kombinationen af responsivt design og en fleksibel taksonomi bidrog til et massivt løft i omsætning, SEO-værdi og konverteringsfrekvenser på tværs af hver platform og formfaktor.

  • 58% stigning i transaktioner YOY

  • 20.8% stigning i AOV

  • 187% stigning i indtægter fra Android-enheder

  • 224% øget omsætning fra iPads

  • 437% øget omsætning fra iPhones

vi er et bedst sælgende gulvplejemærke i Storbritannien og en del af floorcare-divisionen i Hong Kong– baserede TTi, en global leder inden for produkter til boligforbedring og byggebranchen.

virksomheden vokser med 40% om året, og online-forretningen har oplevet 85%+ vækst.

virksomheden har oplevet enorm succes fra flash salg, eller hvad det kalder værftet salg.

disse fem-dages begivenheder bringer 3.000 + samtidige brugere i top og har været meget succesrige! Da virksomheden så, at 40% af trafikken til Gårdssalg kom fra mobile enheder, vidste de, at de havde brug for et mobiloptimeret sted.

TTI Floorcare ‘ s EMEA er direktør Nigel Aitchison delte gode resultater fra deres vækstlinje efter lanceringen på Magento Enterprise Edition 1.14S responsive tema, som tog dem kun fire uger at bygge og teste. Med den responsive site, så vi konvertering under deres big Yard salg stigning 42% på tabletter og 156% på mobiltelefoner.

yderligere ressourcer:

Internet forhandler – juli 23, 2014: skridt til at opnå responsiv hjemmeside Design succes

Forrester Research – Jan. 16, 2014: Seks Responsive Hjemmeside Projekt Faldgruber Og Den Bedste Praksis For, Hvordan Man Undgår Dem

Internet Forhandler-Maj 2, 2013: Skinny Ties får en 211% bump i mobil salg med sin lydhør design site

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

juli 2014: 8 måder at forbedre effektiviteten af din Responsive Site

Magento Blog – Maj 13, 2014: Magento aktiverer Responsive Sites i halve tid