Responsive Design: Perché è la Tua Migliore Opzione & Come farlo nel modo Giusto

L’esplosiva crescita del mobile e costante proliferazione di una varietà di dispositivi di rendere responsive web design (RWD) l’opzione migliore per i retailer e i marchi che si desidera ottimizzare le modalità di interazione con i clienti attraverso tutti i punti di contatto. Secondo Internet Retailer, 261 milioni di consumatori statunitensi possiedono dispositivi mobili e 66 milioni di questi proprietari di dispositivi stanno acquistando con loro. Infatti, Internet Retailer ha visto un aumento del 159% dei commercianti sul IR Mobile 500 utilizzando reattivo da 2013 a 2014 come commercianti spingono a rimanere competitivi e per soddisfare le esigenze dei consumatori in movimento.

Le versioni mobili dei siti desktop sono state una soluzione popolare fino ad ora, ma l’esperienza spesso manca di elementi critici di branding e contenuti e lega personale e budget preziosi con la gestione di due versioni di un sito web. Fornendo informazioni da una singola base di codice che riconosce e si adatta al dispositivo mobile, responsive design risolve entrambi questi problemi, e da un singolo URL.

Tuttavia, proprio come il lancio di un sito di e-commerce non è una garanzia di successo aziendale, un sito reattivo altamente performante prende uguale considerazione e pianificazione. Se non è fatto bene, siti reattivi possono portare tante sfide come risolvono: prestazioni lente, costoso, che richiede tempo, e complessi ritardi di test di sviluppo, e può smascherare le sfide architettoniche che richiedono la riscrittura del sito. In un recente studio Moovweb di 12 siti reattivi, Internet Retailer ha osservato che le prestazioni erano 513% più lento su smartphone che su PC e tablet con alcuni siti prendendo 18.24 secondi per caricare, ben al di sopra del 3 secondo settore best practice pagina tempo di caricamento.

Ottimizzazione per Responsive: prima di iniziare

In un recente webinar del rivenditore Internet sponsorizzato da Magento, guest speaker, Forrester Research, Inc. L’analista Mark Grannan ha sottolineato che, come la maggior parte dei progetti, un’implementazione RWD di successo inizia con l’allineamento degli obiettivi di business e di sviluppo. Prendere tempo in anticipo per analizzare i modelli di traffico mobile, creare elenchi di priorità dei dispositivi e rivedere l’architettura delle informazioni e i contenuti consentirà ai team di muoversi più velocemente. Collegare strettamente i team di progettazione e sviluppo e accelerare la loro collaborazione con strumenti di prototipazione e framework di sviluppo può allo stesso modo migliorare il time to market. Grannan ha anche consigliato agli ingegneri di risolvere i requisiti a coda lunga fin dall’inizio, ad esempio determinare se sono necessarie modifiche all’architettura CMS o Web per supportare progetti di design reattivo e indirizzare in modo proattivo la velocità e l’accelerazione del sito attraverso tecniche di ottimizzazione frontend. Infine, Grannan ha raccomandato di abbinare le metriche del valore aziendale (come il traffico del sito e le conversioni) all’ambito di sviluppo.

Ottimizzazione per Responsive: Mappa il percorso dei tuoi clienti

Come tutto il resto, l’ottimizzazione del tuo sito per più dispositivi inizia con il tuo pubblico – la loro composizione e comportamenti.

• Quale percentuale del traffico del tuo sito passa attraverso i dispositivi mobili? La maggior parte dei commercianti peg 20-30% traffico mobile come il grilletto per considerare reattivo

• Come stanno accedendo al tuo sito oggi? Le macro tendenze contano meno delle specifiche del tuo sito e del tuo cliente

• Quali dispositivi / browser favorisce la tua popolazione di clienti? È importante tenere presente che il responsive web design è implementato utilizzando tecniche incompatibili con i browser più vecchi (in particolare IE8 e precedenti). Identificare i principali dispositivi che accedono al tuo sito ti aiuterà anche a determinare il numero di punti di interruzione dello schermo per i quali dovresti progettare il tuo sito

Ottimizzazione per responsive: definisci la tua strategia di contenuti

Preparare i contenuti per un sito Web responsive è una delle maggiori sfide che i commercianti dovranno affrontare, poiché dovranno cambiare il modo in cui pensano ai contenuti. Si dice spesso che l’implementazione di un web design reattivo è più una domanda di strategia di contenuto che una domanda di progettazione.

Come Brendan Falkowski del Dipartimento di Gravità ha detto, “Mobile First è una metodologia che ti chiede di progettare le interazioni pensando prima al piccolo schermo. Mobile first non è una versione ridotta di un sito desktop.”

Guarda i termini di ricerca utilizzati dai tuoi clienti e inizia definendo le interazioni importanti per il tuo negozio. Dare priorità alle funzioni e alle informazioni per organizzare la vista mobile in modo più efficiente e quindi scalare fino a un sito più pulito per schermi di grandi dimensioni. Creare un’esperienza vincente non significa togliere utilità o profondità.

Al contrario, gli utenti si aspettano di essere in grado di eseguire qualsiasi azione da qualsiasi dispositivo che stanno tenendo. Ciò significa che filtrare i risultati di ricerca, leggere le recensioni, salvare le liste dei desideri e controllare devono essere universalmente accessibili.

Ottimizzazione per Responsive: Codice e immagini

Una sfida di RWD è che la sua singola base di codice può essere molto grande e lenta da caricare. Considera questi suggerimenti, molti condivisi da Mark Grannan nel recente webinar del rivenditore Internet, per un’esperienza mobile ottimale:

• il Carico contenuto a priorità di primo e di fine del carico (“lazy load”) contenuto al di sotto di esso per creare la percezione di prestazioni più veloci, piuttosto che in attesa di visualizzare il contenuto dopo che tutto è stato caricato

• Utilizzare la tecnologia lato server per fornire o eseguire il rendering di immagini di dimensioni appropriate per il dispositivo

• Codice del tuo sito per ridurre il numero di round trip al server per ridurre la latenza

• open web fonts, piuttosto che i tipi di carattere personalizzati per ridurre il peso della pagina

• Considerare l’utilizzo di terze parti accelerazione fornitori, come Cdn, per ottimizzare le prestazioni attraverso una serie di tecnologie e locali di caching dei contenuti

Andando Reattivo: Lezioni dalle Trincee

Skinny Ties è uno dei più grandi rivenditori e grossisti di cravatte negli Stati Uniti e una delle prime aziende tradizionali di vendita accessori moda online. Quindi era giusto che il rivenditore fosse uno dei primi commercianti a sviluppare un sito reattivo all’inizio del 2012.

Per creare l’eccezionale esperienza del cliente che Skinny Ties stava cercando, Gravity Department ha drasticamente aumentato la complessità della loro tassonomia mappando ogni attributo in un formato standardizzato. Prima che gli utenti potessero navigare solo in un albero di categorie rigido. La tassonomia dinamica ha aperto più ingressi per ogni prodotto.

La combinazione di responsive design e una tassonomia flessibile ha contribuito a un enorme aumento delle entrate, del valore SEO e dei tassi di conversione su ogni piattaforma e fattore di forma.

• 58% aumento delle transazioni a / a

• 20.8% aumento AOV

• 187% incremento dei ricavi da dispositivi Android

• 224% incremento dei ricavi da ipad

• 437% incremento dei ricavi da iphone

Vax è un best-seller floorcare marchio nel regno UNITO e parte del floorcare divisione di Hong Kong, TTi, leader mondiale nei prodotti per il miglioramento della casa e dell’edilizia.

Il business cresce al 40% all’anno e il business online ha registrato una crescita dell ‘ 85%+.

L’azienda ha visto un enorme successo da vendite flash, o quello che chiama vendite cantiere.

Questi eventi di cinque giorni portano oltre 3.000 utenti simultanei al picco e hanno avuto molto successo! Quando la società ha visto che il 40% del traffico per le vendite Cantiere proveniva da dispositivi mobili, sapevano che avevano bisogno di un sito ottimizzato per dispositivi mobili.

Il direttore EMEA di TTI Floorcare Nigel Aitchison ha condiviso grandi risultati dalla sua linea Vax dopo il lancio su Magento Enterprise Edition 1.Il tema reattivo di 14, che ha richiesto loro solo quattro settimane per costruire e testare. Con il sito responsive, Vax ha visto la conversione durante il loro grande cantiere aumento di vendita 42% su tablet e 156% sui telefoni cellulari.

Risorse aggiuntive:

Rivenditore Internet – luglio 23, 2014: Passi per raggiungere il successo Web Design reattivo

Forrester Research – Jan. 16, 2014: Sei insidie responsive del progetto del sito Web e le migliori pratiche per evitarle

Rivenditore Internet-2 maggio 2013: Skinny Ties ottiene un 211% bump in vendita mobile con il suo design responsive del sito

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

Moovweb – luglio 2014: 8 Modi per Migliorare le Prestazioni del Vostro Sito Responsive

Magento Blog – Maggio 13, 2014: Magento Consente Reattivo Siti nella Metà del Tempo