Responsive Design: Why it’ s Your Best Option & How To Do it Right

BY admin
|

de explosieve groei van mobiele apparaten en de voortdurende toename van een verscheidenheid aan apparaten maken responsive web design (RWD) de beste optie voor retailers en merken die willen optimaliseren hoe ze omgaan met klanten op alle digitale touch points. Volgens Internet Retailer, 261 miljoen Amerikaanse consumenten bezitten mobiele apparaten en 66 miljoen van deze eigenaren van apparaten winkelen met hen. In feite, Internet Retailer heeft gezien een 159% stijging van de handelaren op de IR Mobile 500 met behulp van responsive van 2013 tot 2014 als handelaren duwen om concurrerend te blijven en aan de behoeften van de consumenten te voldoen op de weg.

mobiele versies van desktopsites zijn tot nu toe een populaire oplossing geweest, maar de ervaring ontbeert vaak kritische branding en content-elementen en verbindt waardevol personeel en budget met het beheer van twee versies van een website. Door het leveren van informatie uit een enkele codebase die herkent en zich aanpast aan het mobiele apparaat, responsive design Lost beide problemen, en van een enkele URL.

maar net zoals het lanceren van een e-commerce site geen garantie is voor zakelijk succes, neemt een goed presterende responsieve site evenveel aandacht en planning in acht. Als het niet goed wordt gedaan, kunnen responsieve sites net zoveel uitdagingen opleveren als ze oplossen: trage prestaties, dure, tijdrovende en complexe ontwikkelingstestvertragingen, en het kan architecturale uitdagingen ontmaskeren die herschrijven van de site vereisen. In een recente Moovweb studie van 12 responsieve sites, Internet Retailer merkte op dat de prestaties was 513% langzamer op smartphones dan op PC ‘ s en tablets met sommige sites die 18,24 seconden te laden, ruim boven de 3 tweede industrie best practice pagina laadtijd.

optimaliseren Voor Responsive: voordat u

Start in een recent Magento-gesponsorde Internet Retailer webinar, gastspreker, Forrester Research, Inc. Analist Mark Grannan benadrukte dat, zoals de meeste projecten, een succesvolle RWD-implementatie begint met het afstemmen van business-en ontwikkelingsdoelstellingen. Door vooraf de tijd te nemen om mobiele verkeerspatronen te analyseren, prioriteitslijsten voor apparaten te maken en uw informatiearchitectuur en inhoud te bekijken, kunnen uw teams sneller bewegen. Het nauw verbinden van ontwerp – en ontwikkelteams en het versnellen van hun samenwerking met prototyping-tools en ontwikkelingskaders kunnen eveneens time-to-market verbeteren. Grannan adviseerde ook dat ingenieurs long-tail-vereisten vanaf het begin oplossen, zoals bepalen of CMS of webarchitectuurwijzigingen nodig zijn om responsieve ontwerpprojecten te ondersteunen, en proactief snelheid en locatie-acceleratie aanpakken door middel van frontend-optimalisatietechnieken. Tot slot, Grannan aanbevolen matching business value metrics (zoals site verkeer en conversies) om de ontwikkeling scope.

optimaliseren Voor Responsive: Kaart de reis van uw klanten

net als al het andere, begint het optimaliseren van uw site voor meerdere apparaten met uw doelgroep – hun samenstelling en gedrag.

  • welk percentage van uw site verkeer komt via mobiele apparaten? De meeste handelaren peg 20-30% mobiel verkeer als de trigger voor het overwegen van responsieve

  • hoe krijgen ze toegang tot uw site vandaag? Macro trends zijn minder belangrijk dan de details van uw site en uw klant

  • welke apparaten / browsers doet uw klant bevolking voorkeur? Het is belangrijk om in gedachten te houden dat responsive web design wordt uitgevoerd met behulp van technieken die niet compatibel zijn met oudere browsers (met name IE8 en ouder). Het identificeren van de beste apparaten die toegang hebben tot uw site zal u ook helpen het aantal schermbreakpoints te bepalen waarvoor u uw site moet ontwerpen

optimaliseren Voor Responsive: Definieer uw contentstrategie

het voorbereiden van content voor een responsieve website is een van de grootste uitdagingen waar handelaren mee te maken zullen krijgen, omdat ze hun manier van denken over content moeten veranderen. Er wordt vaak gezegd dat de uitvoering van een responsieve web design is meer een inhoud strategie vraag dan een ontwerp Vraag.Brendan Falkowski van Gravity Department stelde het als volgt: “Mobile First is een methodologie die je vraagt om interacties te ontwerpen door eerst aan het kleine scherm te denken. Mobile first is niet een uitgeklede versie van een desktop site.”

Kijk naar de zoektermen die uw klanten gebruiken en begin met het definiëren van de belangrijke interacties voor uw winkel. Prioriteer functies en informatie om de mobiele weergave efficiënter te organiseren en vervolgens op te schalen naar een schonere site voor grote schermen. Het creëren van een winnende ervaring gaat niet over het strippen van nut of diepte.

integendeel, gebruikers verwachten in staat te zijn om elke actie uit te voeren vanaf welk apparaat ze ook vasthouden. Dat betekent dat het filteren van zoekresultaten, Het lezen van beoordelingen, opslaan op verlanglijstjes, en uitchecken moet universeel toegankelijk zijn.

optimaliseren Voor Responsive: Code en afbeeldingen

een uitdaging van RWD is dat de enkele codebase erg groot kan zijn en traag kan worden geladen. Overweeg deze tips, veel gedeeld door Mark Grannan in de recente Internet Retailer webinar, voor een optimale mobiele ervaring:

  • Belasting prioriteit inhoud eerst en laat load (“lazy load”) inhoud hieronder te maken met de perceptie van snellere prestaties, in plaats van te wachten om inhoud weer te geven nadat alles is geladen

  • het Gebruik van server-side technologie te leveren dan wel de te verrichten afbeeldingen van de juiste maat voor het apparaat

  • In de Code van uw site om het aantal te verminderen round-trips terug naar de server om latency te verminderen

  • open web fonts in plaats van aangepaste lettertypen te verminderen pagina gewicht

  • Overweeg het gebruik van derde versnelling providers, zoals CDN ‘ s, om de prestaties te optimaliseren door middel van een scala aan technologieën en lokale inhoud caching

Going Responsive:Lessons from the Trenches

Skinny Ties is een van de grootste retailers en groothandelaren van stropdassen in de Verenigde Staten en een van de eerste bedrijven die traditionele stropdassen online verkopen. Dus het was alleen maar passend dat de retailer moet een van de eerste handelaren om een responsieve site terug in het begin van 2012 te ontwikkelen.

om de uitzonderlijke klantervaring te creëren waar Skinny Ties op uit was, verhoogde Gravity Department drastisch de complexiteit van hun taxonomie door elk attribuut in een gestandaardiseerd formaat in kaart te brengen. Voordat gebruikers konden alleen navigeren door een starre categorie boom. De dynamische taxonomie opende meerdere ingangen naar elk product.

de combinatie van responsief ontwerp en een flexibele taxonomie droeg bij aan een enorme boost in inkomsten, SEO-waarde en conversieratio ‘ s op elk platform en elke vormfactor.

  • 58% toename van transacties op JAARBASIS

  • 20.8% verhoging AOV

  • 187% toename van de inkomsten uit Android-apparaten

  • 224% stijging in de omzet van iPads

  • 437% toename van de inkomsten uit iPhones

Vax is een best-selling floor care merk in het verenigd koninkrijk en een deel van de floor care afdeling van Hong Kong op basis van TTi, een internationale marktleider in producten voor de verbetering van de eigen woning en in de bouw.

het bedrijf groeit met 40% per jaar en het online bedrijf heeft 85%+ groei doorgemaakt.

het bedrijf heeft enorm veel succes geboekt met de verkoop van Flash, of wat het de verkoop van Werf noemt.

deze vijfdaagse gebeurtenissen brengen meer dan 3000 gelijktijdige gebruikers op piek en zijn zeer succesvol geweest! Toen het bedrijf zag dat 40% van het verkeer voor de verkoop van Werf afkomstig was van mobiele apparaten, wisten ze dat ze een mobiele geoptimaliseerde site nodig hadden.De EMEA-directeur van TTI Floorcare, Nigel Aitchison, heeft geweldige resultaten van hun Vax-lijn gedeeld na de lancering op Magento Enterprise Edition 1.14 ‘ s responsieve thema, die duurde slechts vier weken om te bouwen en te testen. Met de responsive site, Vax zag conversie tijdens hun grote werf verkoop stijgen met 42% op tablets en 156% op mobiele telefoons.

aanvullende bronnen:

Internet Retailer-23 juli 2014: stappen naar responsief Webdesignsucces

Forrester Research – Jan. 16, 2014: Six Responsive Website Project Valkuilen En De Best Practices Voor Hoe Ze Te Vermijden

Internet Retailer-2 Mei 2013: Skinny Ties krijgt een stijging van 211% in mobiele verkoop met zijn responsive design site

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

Moovweb-juli 2014: 8 manieren om de prestaties van uw responsieve Site te verbeteren

Magento Blog-13 mei 2014: Magento maakt responsieve Sites in de helft van de tijd mogelijk