Il design responsivo, o Responsive Web Design (RWD), è una tecnica che permette di realizzare ecommerce che si adattano graficamente in automatico al dispositivo con cui vengono visualizzati, quali: computer desktop, notebook, tablet, cellulari, ecc. Questa tecnologia è sempre più importante soprattutto da quanto Google ha introdotto il concetto Mobile First.

Design Responsivo e PrestaShop

Già dalla versione 1.6 di PrestaShop, la maggioranza dei template presentavano la tecnologia RWD, ma il checkout non era il massimo in ambito mobile, costringendo all'uso di moduli di terze parti quali gli addons One Page Checkout. Il passaggio al supporto completo del template Classic Theme, è avvenuto con la versione 1.7, dove sono state introdotte molte novità in ambito mobile, tra le quali in nuovo Checkout a tre fasi che risulta ottimo sia in modalità desktop che sugli smartphone.

Il concetto Mobile First introdotto da Google con gli aggiornamenti della modalità di indicizzazione SEO del motore di ricerca, si è esteso anche alla progettazione dei siti web. Oggi si progetta l'ecommerce principalmente per essere navigato da mobile, diversamente dal passato è la versione desktop che è un adattamento e espansione della versione per SmartPhone.

Come verificare come appare il nostro ecommerce in PrestaShop sui vari dispositivi?

Esistono diverse modalità per verificare come appare e come si naviga nel nostro ecommerce in PrestaShop (ma anche nel nostro sito in WordPress, Magento o altro CMS). Dai più semplici e economici ai più evoluti e costosi. Per verificare come appare il nostro ecommerce possiamo:

  • Utilizzare dei dispositivi reali, più Smartphone e diversi browser, questa soluzione è la più costosa, dovremo dotarci di iPhone, iPad, Cellulari Android, Tablet Android, Notebook e PC Desktop. Dove testare la navigazione e procedura d'ordine sul nostro ecommerce. Ogni dispositivo infatti, presenta oltre a dimensioni dello schermo e risoluzioni differenti, anche comportamenti differenti dovuti a differenze nel sistema operativo e nei sofware. 
  • Utilizzare servizi di emulazione reale tramite browser.  Servizi come browserstack.com permettono di accedere attraverso il proprio browser a un vasto parco di dispositivi più o meno recenti, potremo testare il nostro ecommerce su MAC, Windows, Android, su iPhone e iPad dal più vecchio all'ultimo uscito. I servizi di questa tipologia hanno un costo elevato a seconda del livello di accesso, si possono usare in versione live (quella indicata per testare un sito web) o app live, dove potremo testare anche le nostre APP.
  • Utilizzare il Browser Chrome e gli Strumenti per Sviluppatori, sicuramente la soluzione più economica, ci limiteremo però a testare il solo design responsive senza testare eventuali differenze dovute al diverso browser e sistema operativo.
  • Utilizzare browser dedicati come Blisk o servizi online, più semplice dell'uso degli strumenti per Sviluppatori, e con qualche  funzione in più, ma il test è sempre limitato al solo design responsivo.

Strumenti per Sviluppatori di Chrome

Sorvoliamo sull'utilizzo delle prime due modalità che sono sicuramente adatte esclusivamente a chi come noi si occupa di sviluppo delle piattaforme ecommerce e quindi alle Web Agency. E vediamo nel dettaglio gli strumenti messi a disposizione da Google Chrome (ma anche da Opera, Firefox e Edge). Con questi strumenti per sviluppatori potremo esaminare diversi aspetti del nostro ecommerce in PrestaShop:

  • Esaminare i CSS e HTML delle pagine e provare in tempo reale l'effetto di piccole modifiche, nel nostro browser. E testare come appare il nostro sito alle varie risoluzioni.
  • Utilizzare la Console per visualizzare errori quali problemi con JS, certificati SSL, immagini mancanti (errori 404), alcuni errori 500, 502 e 503 dovuti a chiamate AJAX. 
  • Visualizzare il sorgente del sito ed esaminare il codice in esecuzione sul browser. 
  • Testare le prestazioni dell'ecommerce, esaminandone come ne avviene il caricamento e identificando problemi di caricamento dei vari elementi.
  • Generare il report Lighthouse (consigliabile eseguirlo in modalità incognito) è lo stesso eseguito con Page Speed di Google, ma eseguito con la vostra connessione e soprattutto dalla vostra localizzazione, ovvero dall'Italia nel nostro caso; e quindi più veritiero e utile.

Lo strumento di Google è molto potente e può essere esteso tramite diverse estensioni del browser. Per accedere agli strumenti per sviluppatori ci sono diverse modalità:

  • Tramite scorciatoia da tastiera: Ctrl+Maiusc+I
  • Tasto destro del mouse sulla pagina e click su "Ispeziona".
  • Dal menu di Chrome in alto a destra, selezionando:
    Altri Strumenti ->  Strumenti per Sviluppatori

Una volta aperta la console selezioniamo in alto a sinistra della stessa l'icona "Toggle device toolbar" che farà apparire la barra per selezionare le varie modalità di risoluzione, vedi immagine a lato (in deskotop, in mobile sotto). Potremo selezionare i vari dispositivi, ma pure aggiungerne di nuovi. 

Importante! Passando da una risoluzione all'altra è necessario aggiornare la pagina, al fine di caricare il relativo CSS. 

Come abbiamo visto questo strumento ci permette di effettuare diversi controlli su nostro ecommerce.

Alcune estensioni utili per controllare il nostro ecommerce.

Come accennato esistono diverse estensioni utili per Chrome che ci permettono di agevolare sia i controlli che il normale lavoro. Consigliamo le seguenti:

  • Clear Cache: permette di cancellare la cache del browser per vedere le ultime modifiche apportate.
  • EditThisCookie: permette di cancellare in modo selettivo i cookies, utile quando si provano impostazioni come modifiche alla cookies law. 
  • Tag Assistant Legacy (by Google): permette di verificare la corretta installazione e configurazione dei tag di Google quali GTM e Analytics.
  • Facebook Pixel Helper Technology: permette di controllare la corretta configurazione del pixel di Facebook
  • Profiler IP Address and Domain Information: visualizza informazioni sul dominio e sull'IP pubblico dello stesso. 
  • SEOquake: effettua una rapida e veloce analisi SEO della pagina, non sostituisce strumenti come SeoZoom o SEMrush, ma può essere utile.
  • User-Agent Switcher: alcune configurazioni utilizzano una tecnologia che permette di riconoscere il dispositivo e indirizzarlo a un sito web apposito. Esempio Facebook. Può essere utile maschere il proprio dispositivo in un altro per esempio in un telefonino Android. Questa estensione permette per esempio di usare Instagram da PC Desktop senza emulatori.
  • Web Vitals: una semplice estensione che ci mostra se le pagine rispettano le metriche di Google. 
  • AVG SafePrice Confronto, offerte, coupon. Un'estensione che permette di vedere le offerte dei concorrenti per il prodotto visualizzato. 

Autore: Loris Modena

SENIOR DEVELOPER

Per Ind Loris Modena titolare di Arte e Informatica, inizia a lavorare nel settore informatico nel 1989 quale sistemista addetto alla manutenzione e installazione di sistemi informatici. Inizia a programmare per il web nel 1997 occupandosi di programmazione CGI in PERL e successivamente passando alla programmazione in PHP e JavaScript. In questo periodo si avvicina al mondo Open source e alla gestione di server Linux. 

prodotto aggiunto alla lista