Responsive design, or Responsive Web Design (RWD), is a technique that allows you to create e-commerce that automatically adapt graphically to the device with which they are displayed, such as: desktop computer, notebook, tablet, mobile phone, etc. This technology is increasingly important especially since Google introduced the Mobile First concept.

Responsive Design and PrestaShop

Already from version 1.6 of PrestaShop , most of the templates featured RWD technology, but the checkout was not the best in the mobile environment, forcing the use of third-party modules such as One Page Checkout addons. The transition to full support of the Classic Theme template took place with version 1.7, where many new features were introduced in the mobile field, including a new three-phase Checkout which is excellent both in desktop mode and on smartphones.

The Mobile First concept introduced by Google with the updates of the search engine's SEO indexing mode has also extended to website design. Today ecommerce is designed mainly to be navigated from mobile, unlike in the past it is the desktop version which is an adaptation and expansion of the version for SmartPhone.

How to check how our e-commerce in PrestaShop looks on various devices?

There are several ways to check how it looks and how you navigate in our e-commerce in PrestaShop (but also in our site in WordPress, Magento or other CMS). From the simplest and cheapest to the most advanced and expensive. To check how our ecommerce looks we can:

  • Using real devices , more Smartphones and different browsers, this solution is the most expensive, we will have to equip ourselves with iPhone, iPad, Android Phones, Android Tablets, Notebooks and Desktop PCs. Where to test navigation and ordering on our ecommerce. In fact, each device has different screen sizes and resolutions, also different behaviors due to differences in the operating system and software.
  • Use real emulation services via browser. Services such as browserstack.com allow you to access through your browser to a vast range of more or less recent devices, we will be able to test our ecommerce on MAC, Windows, Android, on iPhone and iPad from the oldest to the latest released. Services of this type have a high cost depending on the level of access, they can be used in live version (the one indicated for testing a website) or live app, where we can also test our APPs.
  • Using the Chrome Browser and Developer Tools , certainly the cheapest solution, we will limit ourselves to testing only the responsive design without testing any differences due to the different browser and operating system.
  • Using dedicated browsers such as Blisk or online services, simpler than using Developer tools, and with a few more features, but the test is always limited to responsive design only.

Chrome Developer Tools

Let's overlook the use of the first two modes which are certainly suitable exclusively for those who, like us, are involved in the development of ecommerce platforms and therefore for Web Agencies. And let's see in detail the tools made available by Google Chrome (but also by Opera, Firefox and Edge). With these developer tools we will be able to examine different aspects of our ecommerce in PrestaShop:

  • Examine the CSS and HTML of the pages and test the effect of small changes in real time, in our browser. And test how our site looks at various resolutions.
  • Use the Console to view errors such as problems with JS, SSL certificates, missing images (404 errors), some 500, 502, and 503 errors due to AJAX calls.
  • View the site source and examine the code running on the browser.
  • Test the performance of the ecommerce, examining how it loads and identifying problems with loading the various elements.
  • Generating the Lighthouse report (it is advisable to run it in incognito mode) is the same as performed with Google Page Speed, but performed with your connection and above all from your localization, or from Italy in our case; and therefore more truthful and useful.

Google's tool is very powerful and can be extended via various browser extensions. There are several ways to access the developer tools:

  • Via keyboard shortcut: Ctrl + Shift + I
  • Right click on the page and click on "Inspect".
  • From the Chrome menu at the top right, by selecting:
    Other Tools -> Developer Tools .

Once the console is open, select the "Toggle device toolbar" icon at the top left of the console, which will bring up the bar to select the various resolution modes, see image on the side (in deskotop, in mobile below). We will be able to select the various devices, but also add new ones.

Important! When switching from one resolution to another, it is necessary to update the page in order to load the relevant CSS.

As we have seen, this tool allows us to carry out various checks on our ecommerce.

Some useful extensions to control our ecommerce.

As mentioned, there are several useful extensions for Chrome that allow us to facilitate both controls and normal work. We recommend the following:

  • Clear Cache : allows you to clear the browser cache to see the latest changes made.
  • EditThisCookie : allows you to selectively delete cookies, useful when trying settings such as changes to the cookies law.
  • Tag Assistant Legacy (by Google) : allows you to check the correct installation and configuration of Google tags such as GTM and Analytics.
  • Facebook Pixel Helper Technology : allows you to check the correct configuration of the Facebook pixel
  • Profiler IP Address and Domain Information : displays information about the domain and public IP of the same.
  • SEOquake : does a quick and easy SEO analysis of the page, it does not replace tools like SeoZoom or SEMrush, but it can be useful.
  • User-Agent Switcher : some configurations use a technology that allows you to recognize the device and direct it to a specific website. Facebook example. It may be useful to mask your device in another one, for example in an Android mobile phone. This extension allows for example to use Instagram from PC Desktop without emulators.
  • Web Vitals : a simple extension that shows us if the pages comply with the Google metrics.
  • AVG SafePrice Comparison, Offers, Coupons. An extension that allows you to see the offers of competitors for the displayed product.

Author: Loris Modena

SENIOR DEVELOPER

For Ind Loris Modena , owner of Arte e Informatica , he began working in the IT sector in 1989 as a system engineer in charge of the maintenance and installation of IT systems. He started programming for the web in 1997 dealing with CGI programming in PERL and then moving on to programming in PHP and JavaScript. In this period he approaches the Open source world and the management of Linux servers.

Product added to wishlist