responsiv Design: varför det är ditt bästa alternativ och hur man gör det rätt

BY admin
|

den explosiva tillväxten av mobil och pågående spridning av en mängd olika enheter gör responsiv webbdesign (RWD) det bästa alternativet för återförsäljare och varumärken som vill optimera hur de engagerar sig med kunder över alla digitala beröringspunkter. Enligt internethandlare äger 261 miljoner amerikanska konsumenter mobila enheter och 66 miljoner av dessa enhetsägare handlar med dem. I själva verket, Internet återförsäljare har sett en 159% ökning av handlarna på IR Mobile 500 använder lyhörd från 2013 till 2014 som handlarna driva att förbli konkurrenskraftiga och för att möta behoven hos konsumenterna på språng.

mobila versioner av stationära webbplatser har varit en populär lösning hittills, men erfarenheten saknar ofta kritiska varumärkes-och innehållselement och binder värdefull personal och budget med att hantera två versioner av en webbplats. Genom att leverera information från en enda kodbas som känner igen och anpassar sig till den mobila enheten löser responsiv design båda dessa problem och från en enda URL.

men precis som att lansera en e-handelsplats inte är en garanti för affärsframgång, tar en högpresterande responsiv webbplats lika hänsyn och planering. Om det inte görs rätt kan responsiva webbplatser ge så många utmaningar som de löser: långsam prestanda, dyra, tidskrävande och komplexa utvecklingstestförseningar, och det kan avslöja arkitektoniska utmaningar som kräver omskrivning av webbplatsen. I en nyligen genomförd moovweb-studie av 12 responsiva webbplatser noterade Internet-återförsäljaren att prestandan var 513% långsammare på smartphones än på datorer och surfplattor med vissa webbplatser som tog 18.24 sekunder att ladda, långt över 3 second industry best practice-sidans laddningstid.

Optimera för lyhörd: innan du börjar

i en nyligen Magento-sponsrade Internet återförsäljare webinar, gästtalare, Forrester Research, Inc. Analytiker Mark Granan betonade att, liksom de flesta projekt, börjar en framgångsrik RWD-implementering med att anpassa affärs-och utvecklingsmål. Om du tar dig tid att analysera mobiltrafikmönster, skapa prioriteringslistor för enheter och granska din informationsarkitektur och innehåll kan dina team gå snabbare. Att nära koppla samman design-och utvecklingsteam och påskynda deras samarbete med prototypverktyg och utvecklingsramar kan på samma sätt förbättra tiden till marknaden. Grannan rekommenderade också att ingenjörer löser långa krav från början, till exempel att bestämma om CMS eller webbarkitekturändringar behövs för att stödja responsiva designprojekt och proaktivt adressera hastighet och platsacceleration genom frontendoptimeringstekniker. Slutligen rekommenderade Grannan att matcha affärsvärdesmått (som webbplatstrafik och konverteringar) till utvecklingsomfånget.

Optimera för responsiv: Kartlägg dina kunders resa

precis som allt annat börjar optimering av din webbplats för flera enheter med din publik – deras sammansättning och beteenden.

  • vilken procent av din webbplatstrafik kommer via mobila enheter? De flesta Handlare pekar 20-30% mobiltrafik som utlösare för att överväga lyhörd

  • Hur får de tillgång till din webbplats idag? Makrotrender spelar mindre roll än detaljerna på din webbplats och din kund

  • vilka enheter / webbläsare gynnar din kundpopulation? Det är viktigt att komma ihåg att responsiv webbdesign implementeras med hjälp av tekniker som är oförenliga med äldre webbläsare (särskilt IE8 och äldre). Att identifiera de bästa enheterna som kommer åt din webbplats hjälper dig också att bestämma antalet skärmbrytpunkter som du ska designa din webbplats för

Optimera för responsiv: definiera din innehållsstrategi

att förbereda innehåll för en responsiv webbplats är en av de största utmaningarna som handlare kommer att möta, eftersom de kommer att behöva ändra hur de tänker på innehåll. Det sägs ofta att implementering av en responsiv webbdesign är mer en innehållsstrategifråga än en designfråga.

som Gravity Department Brendan Falkowski uttryckte det, ”Mobile First är en metod som ber dig att designa interaktioner genom att tänka på den lilla skärmen först. Mobile first är inte en avskalad version av en stationär webbplats.”

titta på söktermerna som dina kunder använder och börja med att definiera de viktiga interaktionerna för din butik. Prioritera funktioner och information för att organisera mobilvyn mer effektivt och skala sedan upp till en renare webbplats för stora skärmar. Att skapa en vinnande upplevelse handlar inte om att ta bort verktyg eller djup.

tvärtom förväntar sig användarna att kunna utföra någon åtgärd från vilken enhet de håller. Det innebär att filtrera sökresultat, läsa recensioner, spara till önskelistor, och kolla måste vara allmänt tillgängliga.

Optimera för responsiv: Kod och bilder

en utmaning med RWD är att dess enda kodbas kan vara mycket stor och långsam att ladda. Tänk på dessa tips, många delade av Mark Grannan i det senaste webbseminariet för internethandlare, för en optimal mobilupplevelse:

  • ladda prioriterat innehåll först och sen belastning (”lazy load”) innehåll under det för att skapa uppfattningen om snabbare prestanda, snarare än att vänta på att visa innehåll efter att allt har laddats

  • använd serverteknik för att leverera eller återge bilder som är lämpliga för enheten

  • koda din webbplats för att minska antalet rundresor tillbaka till servern för att minska latensen

  • Använd Öppna webbfonter snarare än anpassade teckensnitt för att minska sidvikten

  • överväg att använda tredjepartsacceleration leverantörer, som CDN, för att optimera prestanda genom en rad tekniker och lokal innehållscachning

Going Responsive: Lessons from the Trenches

Skinny Ties är en av de största återförsäljarna och grossisterna av slipsar i USA och ett av de första företagen som säljer traditionella nackkläder online. Så det var bara passande att återförsäljaren skulle vara en av de första handlarna att utveckla en lyhörd plats tillbaka i början av 2012.

för att skapa den exceptionella kundupplevelse som Skinny Ties var efter ökade Gravity Department drastiskt komplexiteten i deras taxonomi genom att kartlägga varje attribut till ett standardiserat format. Innan användare bara kunde navigera i ett styvt kategoriträd. Den dynamiska taxonomin öppnade flera ingångar till varje produkt.

kombinationen av responsiv design och en flexibel taxonomi bidrog till en massiv ökning av intäkter, SEO-värde och omvandlingsfrekvenser över varje plattform och formfaktor.

  • 58% ökning av transaktioner YOY

  • 20.8% ökning av AOV

  • 187% ökning av intäkter från Android-enheter

  • 224% ökade intäkter från iPads

  • 437% ökade intäkter från iPhone

Vax är ett bästsäljande floorcare-varumärke i Storbritannien och en del av floorcare– divisionen i Hong Kong-baserade TTi, en global ledare inom produkter för hemförbättrings-och byggindustrin.

verksamheten växer med 40% per år och online-verksamheten har upplevt 85%+ tillväxt.

företaget har sett enorm framgång från flash-försäljning, eller vad det kallar Yard Sales.

dessa femdagarshändelser tar in 3,000 + samtidiga användare på topp och har varit mycket framgångsrika! När företaget såg att 40% av trafiken för gårdsförsäljning kom från mobila enheter visste de att de behövde en mobiloptimerad webbplats.

tti Floorcares EMEA är direktör Nigel Aitchison delade fantastiska resultat från sin Vax-linje efter lanseringen på Magento Enterprise Edition 1.14: s responsiva tema, som tog dem bara fyra veckor att bygga och testa. Med den responsiva webbplatsen såg Vax konvertering under sin stora gårdsförsäljning 42% på surfplattor och 156% på mobiltelefoner.

ytterligare resurser:

Internet återförsäljare – Juli 23, 2014: åtgärder för att uppnå responsiv webbdesign framgång

Forrester Research – Jan. 16, 2014: Sex Responsive Webbplats Projekt Fallgropar Och Bästa Praxis För Hur Man Undviker Dem

Internet Återförsäljare-Maj 2, 2013: Skinny Ties får en 211% bump i mobilförsäljning med sin responsiva designwebbplats

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

Moovweb-juli 2014: 8 sätt att förbättra prestanda för din responsiva webbplats

Magento Blog-Maj 13, 2014: Magento möjliggör responsiva webbplatser på halva tiden