Responsiv Design: Hvorfor Det Er Ditt Beste Alternativ Og Hvordan Du Gjør Det Riktig

BY admin
|

den eksplosive veksten av mobil og pågående spredning av en rekke enheter gjør RESPONSIVE web design (RWD) det beste alternativet for forhandlere og merker som ønsker å optimalisere hvordan de engasjerer seg med kunder på tvers av alle digitale berøringspunkter. Ifølge Internettforhandler, 261 millioner amerikanske forbrukere eier mobile enheter og 66 millioner av disse enhetseiere handler med dem. Faktisk Har Internettforhandler sett en 159% økning i selgere PÅ IR Mobile 500 ved hjelp av responsive fra 2013 til 2014 som selgere presser for å være konkurransedyktige og for å møte forbrukernes behov på farten.

Mobilversjoner av stasjonære nettsteder har vært en populær løsning frem til nå, men opplevelsen mangler ofte kritisk merkevarebygging og innholdselementer og knytter opp verdifullt personale og budsjett med å administrere to versjoner av et nettsted. Ved å levere informasjon fra en enkelt kodebase som gjenkjenner og tilpasser seg mobilenheten, løser responsiv design begge disse problemene, og fra en ENKELT URL.

men akkurat som å lansere et e-handelsnettsted ikke er en garanti for suksess, tar et svært effektivt responsivt nettsted like hensyn og planlegging. Hvis det ikke gjøres riktig, kan responsive nettsteder gi så mange utfordringer som de løser: langsom ytelse, dyre, tidkrevende og komplekse utviklingstestforsinkelser, og det kan avsløre arkitektoniske utfordringer som krever omskrivning av nettstedet. I En Fersk Moovweb studie av 12 responsive nettsteder, internett Forhandler bemerket at ytelsen var 513% tregere på smarttelefoner enn PÅ PC-ER og tabletter med noen områder tar 18.24 sekunder å laste, godt over 3 andre bransjens beste praksis siden lastetid.

Optimalisering For Responsive: Før Du Starter

i en nylig Magento-sponset Internett Forhandler webinar, gjest høyttaler, Forrester Research, Inc. Analytiker Mark Grannan understreket at, som de fleste prosjekter, begynner en vellykket RWD-implementering med å tilpasse forretnings-og utviklingsmål. Hvis du tar deg tid til å analysere mobiltrafikkmønstre, opprette prioriteringslister for enheter og gjennomgå informasjonsarkitektur og innhold, kan teamene dine bevege seg raskere. Tett kobling av design – og utviklingsteam og akselerere samarbeidet med prototypingsverktøy og utviklingsrammer kan på samme måte forbedre tiden til markedet. Grannan også oppmerksom på at ingeniører løse for long-tail krav fra begynnelsen, for eksempel å avgjøre om CMS eller webarkitektur endringer er nødvendig for å støtte responsive designprosjekter, og proaktivt adresse hastighet og nettstedet akselerasjon gjennom frontend optimalisering teknikker. Til Slutt anbefalte Grannan å matche beregninger av forretningsverdi (for eksempel nettstedstrafikk og konverteringer) med utviklingsomfanget.

Optimalisering For Responsiv: Kartlegge Kundenes Reise

som alt annet, optimalisere nettstedet for flere enheter starter med publikum-deres sammensetning og atferd.

  • hvor stor andel av trafikken på nettstedet ditt kommer fra mobile enheter? De fleste selgere peg 20-30% mobil trafikk som utløser for å vurdere responsive

  • Hvordan får de tilgang til nettstedet ditt i dag? Makrotrender betyr mindre enn spesifikasjonene til nettstedet ditt og kunden din

  • Hvilke enheter / nettlesere favoriserer kundepopulasjonen din? Det er viktig å huske på at responsivt webdesign implementeres ved hjelp av teknikker som er uforenlige med eldre nettlesere (spesielt IE8 og eldre). Identifisere de beste enhetene tilgang til nettstedet ditt vil også hjelpe deg å bestemme antall skjermen stoppunkter som du bør utforme nettstedet

Optimalisering For Responsiv: Definer Innholdsstrategien

Å Forberede innhold for et responsivt nettsted er en av de største utfordringene som selgere vil møte, da de må endre hvordan de tenker på innhold. Det er ofte sagt at implementering av et responsivt webdesign er mer et innholdsstrategispørsmål enn et designspørsmål.

Som Gravity Department Brendan Falkowski sa det, » Mobile First er En metodikk som ber deg om å designe interaksjoner ved å tenke på den lille skjermen først. Mobile first er ikke en nedstrippet versjon av en desktop nettsted.»

Se på søkeordene kundene dine bruker, og begynn med å definere de viktige interaksjonene for butikken din. Prioriter funksjoner og informasjon for å organisere mobilvisningen mer effektivt, og deretter skalere opp til et renere område for store skjermer. Å skape en vinnende opplevelse handler ikke om å fjerne nytte eller dybde.

tvert imot forventer brukerne å kunne utføre enhver handling fra hvilken enhet de holder. Det betyr at filtrering av søkeresultater, lesing av anmeldelser, lagring i ønskelister og utsjekking må være universelt tilgjengelig.

Optimalisering For Responsiv: Kode Og Bilder

EN utfordring MED RWD er at den enkle kodebasen kan være veldig stor og sakte å laste. Vurdere disse tipsene, mange deles Av Mark Grannan i den siste Internett-Forhandler webinar, for en optimal mobil opplevelse:

  • Last prioritert innhold først og sent («lat belastning») innhold under det for å skape oppfatningen av raskere ytelse, i stedet for å vente på å vise innhold etter at alt er lastet

  • Bruke server-side teknologi for å levere eller gjengi bilder riktig størrelse for enheten

  • Kode nettstedet ditt for å redusere antall rundturer tilbake til serveren for å redusere ventetid

  • Bruk åpne webfonter i stedet for egendefinerte fonter for å redusere sidevekten

  • Vurder å bruke tredjeparts akselerasjon leverandører, Som Cdn-er, for å optimalisere ytelsen gjennom en rekke teknologier og lokal innholdsbufring

Going Responsive: Lessons from The Trenches

Skinny Ties er en av de største forhandlerne og grossister av slips i Usa Og en av de første selskapene som selger tradisjonelle neckwear online. Så det var bare passende at forhandleren skulle være en av de første selgerne for å utvikle et responsivt nettsted tilbake tidlig i 2012.

For å skape den eksepsjonelle kundeopplevelsen Skinny Ties var ute etter, økte Gravity Department kompleksiteten i taksonomien drastisk ved å kartlegge alle attributtene til et standardisert format. Før brukerne bare kunne navigere i et stivt kategoritre. Den dynamiske taksonomien åpnet flere innganger til hvert produkt.

kombinasjonen av responsiv design og en fleksibel taksonomi bidro til en massiv økning i inntekter, SEO-verdi og konverteringsfrekvenser på tvers av hver plattform og formfaktor.

  • 58% økning i transaksjoner YOY

  • 20.8% økning I AOV

  • 187% økning i inntekter Fra Android-enheter

  • 224% økte inntekter fra ipad

  • 437% økning i inntekter fra iphone

Vax Er et bestselgende floorcare-merke I STORBRITANNIA og en del av floorcare– divisjonen I Hong Kong-baserte TTi, en global leder innen produkter for oppussing og byggebransjen.

virksomheten vokser på 40% per år og online business har opplevd 85%+ vekst.

selskapet har sett enorm suksess fra flash-salg, eller hva det kaller Verftsalg.

disse fem-dagers hendelser bringe inn 3,000 + samtidige brukere på topp og har vært svært vellykket! Da selskapet så at 40% av Trafikken for Verftsalg kom fra mobile enheter, visste de at de trengte et mobiloptimalisert nettsted.

Tti Floorcares EMEA Er Direktør Nigel Aitchison delte gode resultater fra Vax-linjen etter lansering På Magento Enterprise Edition 1.14s responsive tema, som tok dem bare fire uker å bygge og teste. Med responsive nettstedet, Vax så konvertering under deres store Verftet Salg øke 42% på tabletter og 156% på mobiltelefoner.

Tilleggsressurser:

Internett – Forhandler-23. juli 2014: Trinn For Å Oppnå Responsiv Webdesign Suksess

Forrester Research – Jan. 16, 2014: Seks Responsive Nettside Prosjekt Fallgruver Og Beste Praksis For Hvordan Å Unngå Dem

Internett-Forhandler-Mai 2, 2013: Skinny Ties får en 211% bump i mobilsalg med sin responsive designside

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

Moovweb-juli 2014: 8 Måter Å Forbedre Ytelsen Til Responsive Nettstedet

Magento Log – Mai 13, 2014: Magento Gjør Responsive Nettsteder På Halve Tiden