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

BY admin
|

the explosive growth of mobile and continuing proliferation of a various devices make responsive web design (RWD) the best option for retailers and brands that want to optimize how they engagement with customers across all digital touch points. Internet Retailerin mukaan 261 miljoonaa yhdysvaltalaista kuluttajaa omistaa mobiililaitteita ja 66 miljoonaa näistä laitteiden omistajista tekee niillä ostoksia. Itse asiassa Internet-jälleenmyyjä on nähnyt 159%: n kasvun kauppiaiden ir Mobile 500: ssa käyttäen responsiivista 2013: sta 2014: ään, kun kauppiaat pyrkivät pysymään kilpailukykyisinä ja vastaamaan kuluttajien tarpeisiin liikkeellä.

Työpöytäsivustojen mobiiliversiot ovat olleet tähän asti suosittu ratkaisu, mutta kokemuksesta puuttuu usein kriittisiä brändäys-ja sisältöelementtejä, ja se sitoo arvokasta henkilökuntaa ja budjettia verkkosivuston kahden version hallinnointiin. Toimittamalla tietoja yhdestä koodista, joka tunnistaa ja mukautuu mobiililaitteeseen, reagoiva suunnittelu ratkaisee molemmat ongelmat, ja yhdestä URL-osoitteesta.

aivan kuten verkkokauppasivuston käynnistäminen ei ole tae liiketoiminnan menestyksestä, erittäin suorituskykyinen ja reagoiva sivusto ottaa tasapuolisesti huomioon ja suunnittelee. Jos ei tehdä oikein, reagoiva sivustoja voi tuoda niin paljon haasteita kuin ne ratkaisevat: hidas suorituskyky, kallis, aikaa vievää, ja monimutkainen kehitys testaus viivästyksiä,ja se voi paljastaa arkkitehtonisia haasteita, jotka vaativat kirjoittaa sivuston. Tuoreessa Moovweb-tutkimuksessa 12 reagoiva sivustoja, Internet-jälleenmyyjä totesi, että suorituskyky oli 513% hitaampi älypuhelimissa kuin PC: n ja tabletit joidenkin sivustojen kestää 18.24 sekuntia ladata, reilusti yli 3 sekunnin alan parhaiden käytäntöjen sivun latausaika.

optimointi Responsive: Before you Start

in a recent Magento-sponsored Internet Retailer webinar, guest speaker, Forrester Research, Inc. Analyytikko Mark Grannan korosti, että useimpien projektien tavoin onnistunut RWD-toteutus alkaa liiketoiminnan ja kehitystavoitteiden yhteensovittamisesta. Vie aikaa etukäteen analysoida mobiililiikenteen kuvioita, luoda laitteen prioriteettiluettelot, ja tarkistaa tiedot arkkitehtuuri ja sisältö mahdollistaa tiimisi liikkua nopeammin. Suunnittelu-ja kehitystiimien tiivis yhdistäminen ja niiden yhteistyön nopeuttaminen prototyyppityökalujen ja kehityskehysten kanssa voi myös parantaa markkinoille pääsyä. Grannan neuvoi myös, että insinöörit ratkaisevat pitkän hännän vaatimukset alusta alkaen, kuten määrittelevät, tarvitaanko CMS-tai web-arkkitehtuurin muutoksia reagoivien suunnitteluprojektien tueksi, ja käsittelevät nopeutta ja sivuston kiihtyvyyttä ennakoivasti frontend optimointimenetelmien avulla. Lopuksi Grannan suositteli liiketoiminnan arvomittareiden (kuten työmaaliikenteen ja muunnosten) sovittamista kehityskohteeseen.

optimointi Reagoivalle: Map your Customers ’ Journey

kuten kaikki muukin, sivustosi optimointi useille laitteille alkaa yleisöstäsi-niiden koostumuksesta ja käyttäytymisestä.

  • mikä prosentti sivustosi liikenteestä tulee mobiililaitteiden kautta? Useimmat kauppiaat peg 20-30% mobiililiikennettä laukaisimena harkitsee reagoiva

  • miten he käyttävät sivustoasi tänään? Makro trendit vähemmän kuin erityispiirteet sivustosi ja asiakkaan

  • mitä laitteita / selaimia asiakaskuntasi suosii? On tärkeää pitää mielessä, että reagoiva web-suunnittelu on toteutettu tekniikoita, jotka ovat ristiriidassa vanhempien selainten (erityisesti IE8 ja vanhemmat). Tunnistaminen alkuun laitteiden pääsy sivustoosi auttaa myös määrittämään useita näytön keskeytyspisteitä, joille sinun pitäisi suunnitella sivuston

optimointi Reagoivalle: Määrittele Sisältöstrategiasi

sisällön valmistaminen reagoivalle verkkosivustolle on yksi suurimmista haasteista, joita kauppiaat kohtaavat, sillä heidän on muutettava ajattelutapaansa sisällöstä. Usein sanotaan, että responsiivisen web-muotoilun toteuttaminen on enemmän sisältöstrategiakysymys kuin suunnittelukysymys.

kuten Gravity Departmentin Brendan Falkowski asian ilmaisi, ”Mobile First on metodologia, joka pyytää sinua suunnittelemaan vuorovaikutuksia ajattelemalla ensin pientä näyttöä. Mobile first ei ole desktop-sivuston riisuttu versio.”

Katso asiakkaiden käyttämiä hakusanoja ja aloita määrittelemällä kauppasi kannalta tärkeät vuorovaikutussuhteet. Priorisoida toiminnot ja tiedot järjestää mobiili näkymä tehokkaammin, ja sitten skaalata jopa puhtaamman sivuston suurille näytöille. Voittavan kokemuksen luomisessa ei ole kyse hyödyllisyyden tai syvyyden poistamisesta.

päinvastoin, käyttäjät odottavat pystyvänsä tekemään mitä tahansa toimia millä tahansa laitteella. Se tarkoittaa, että hakutulosten suodattaminen, arvostelujen lukeminen, toivelistojen tallentaminen ja check out on oltava yleisesti saatavilla.

optimointi Reagoivalle: Koodi ja kuvat

RWD: n yksi haaste on se, että sen yksittäinen koodebaasi voi olla hyvin suuri ja hidas ladata. Harkitse näitä Mark Grannanin viime Internet-jälleenmyyjän webinaarissa jakamia vinkkejä optimaaliseen mobiilikokemukseen:

  • Lataa priority content first and late load (”lazy load”) sisältö sen alla luodaksesi käsityksen nopeammasta suorituskyvystä sen sijaan, että odottaisit sisällön näyttämistä sen jälkeen, kun kaikki on ladattu

  • käytä palvelinpuolen tekniikkaa laitteen sopivan kokoisten kuvien toimittamiseen tai renderöintiin

  • koodi sivustosi vähentää edestakaisia matkoja takaisin palvelimelle vähentää latenssi

  • käytä avoimia web-fontteja mukautettujen fonttien sijaan vähentääksesi sivun painoa

  • harkitse kolmannen osapuolen kiihdytyksen käyttöä tarjoajat, kuten CDNs, optimoivat suorituskyvyn erilaisten teknologioiden ja paikallisen sisällön Välimuistin avulla

Going Responsive: Lessons from the Trenches

Skinny Ties on yksi suurimmista solmioiden vähittäismyyjistä ja tukkumyyjistä Yhdysvalloissa ja ensimmäisiä perinteisiä solmioita verkossa myyviä yrityksiä. Joten se oli vain sopivaa, että kauppias olisi yksi ensimmäisistä kauppiaista kehittää reagoiva sivuston alkuvuodesta 2012.

luodakseen Skinny tiesin tavoitteleman poikkeuksellisen asiakaskokemuksen Gravity Department lisäsi taksonomiansa monimutkaisuutta rajusti kartoittamalla jokaisen ominaisuuden standardoituun muotoon. Ennen käyttäjät voivat vain navigoida jäykkä luokan puu. Dynaaminen taksonomia avasi useita sisäänkäyntejä jokaiselle tuotteelle.

reagoivan suunnittelun ja joustavan taksonomian yhdistelmä lisäsi merkittävästi tuloja, SEO-arvoa ja muuntokursseja kaikilla alustoilla ja muodoissa.

  • 58% transaktioiden kasvu joy

  • 20.8% AOV: n nousu

  • 187% kasvu tuloja Android-laitteet

  • 224% iPadien tuottojen kasvu

  • 437% iPhonen tulojen kasvu

Vax on Britannian myydyin lattianhoitobrändi ja osa hongkongilaisen TTi: n lattianhoitojaostoa, joka on maailman johtava Rautakauppa– ja rakennusteollisuuden tuotteiden valmistaja.

liiketoiminta kasvaa 40% vuodessa ja verkkoliiketoiminta on kokenut 85%+ kasvua.

yritys on menestynyt huikeasti flash-myynnillä eli niin sanotulla Pihamyynnillä.

nämä viisipäiväiset tapahtumat tuovat 3000+ samanaikaista käyttäjää huippuunsa ja ovat olleet erittäin menestyksekkäitä! Kun yhtiö näki, että 40 prosenttia Pihamyynnin liikenteestä tuli mobiililaitteista, se tiesi tarvitsevansa mobiilioptimoidun sivuston.

tti Floorcaren EMEA: n johtaja Nigel Aitchison jakoi mahtavia tuloksia Vax-mallistostaan Magento Enterprise Edition 1-julkaisun jälkeen.14: n reagoiva teema, joka vei heiltä vain neljä viikkoa rakentaa ja testata. Responsiivisella sivustolla Vax näki konversioiden kasvavan isoissa Pihamyynneissään 42 prosenttia tableteissa ja 156 prosenttia matkapuhelimissa.

lisäresurssit:

Internet Retailer-July 23, 2014:Steps to Achieving Responsive Web Design Success

Forrester Research-Tammi. 16, 2014: Kuusi Responsive Website Project Sudenkuoppia Ja Parhaita Käytäntöjä, Miten Välttää Niitä

Internet Retailer – Toukokuu 2, 2013: Skinny Ties saa 211% bump mobile myynti sen reagoiva design-sivusto

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

Moovweb-heinäkuu 2014: 8 tapoja parantaa suorituskykyä reagoiva sivuston

Magento blogi-Toukokuu 13, 2014: Magento mahdollistaa reagoiva sivustoja puolet ajasta