How to check if the ecommerce is responsive, that is suitable for all devices?

Responsive design, or Responsive Web Design (RWD), is a technique that allows for the creation of e-commerce sites that automatically adjust their layout to the device being used to view them, such as desktop computers, laptops, tablets, mobile phones, etc. This technology is becoming increasingly important, especially since Google introduced the Mobile First concept.

Responsive Design and PrestaShop

Starting from version 1.6 of PrestaShop, the majority of templates featured RWD technology, but the checkout was not optimal for mobile, forcing the use of third-party modules such as the One Page Checkout addons. The transition to full support for the Classic Theme template occurred with version 1.7, where many new features were introduced for mobile, including a new three-step Checkout that works great both in desktop mode and on smartphones.

The Mobile First concept introduced by Google with updates to the SEO indexing mode of the search engine has also extended to website design. Today, e-commerce is primarily designed to be navigated on mobile, unlike in the past where the desktop version was an adaptation and expansion of the version for smartphones.

How to check how our eCommerce appears in PrestaShop on various devices?

There are several ways to check how our ecommerce in PrestaShop (as well as our site in WordPress, Magento, or other CMS) appears and how it navigates. From the simplest and cheapest to the more advanced and expensive. To check how our ecommerce looks, we can:

  • Use real devices, more smartphones and different browsers; this solution is the most expensive, as we will need to equip ourselves with iPhones, iPads, Android phones, Android tablets, notebooks, and desktop PCs. We will test navigation and the ordering process on our ecommerce. Each device, in fact, presents not only different screen sizes and resolutions but also different behaviors due to differences in the operating system and software.
  • Use real emulation services through browsers. Services like browserstack.com allow access through your browser to a wide range of more or less recent devices, enabling us to test our ecommerce on MAC, Windows, Android, on iPhones and iPads from the oldest to the latest models. Services of this type have a high cost depending on the level of access; they can be used in live version (which is suitable for testing a website) or app live, where we can also test our apps.
  • Use the Chrome Browser and Developer Tools, definitely the most economical solution, but we will be limited to testing only the responsive design without checking for any differences due to different browsers and operating systems.
  • Use dedicated browsers like Blisk or online services, which are simpler than using Developer Tools and come with some additional features, but the test is still limited to responsive design only.

Chrome Developer Tools

Let's skip the use of the first two modes that are certainly suitable exclusively for those like us who deal with the development of ecommerce platforms and therefore for Web Agencies. Let's take a closer look at the tools provided by Google Chrome (but also by Opera, Firefox, and Edge). With these developer tools, we can examine various aspects of our ecommerce in PrestaShop:

  • Examine the CSS and HTML of the pages and try in real-time the effect of small changes in our browser. And test how our site appears at various resolutions.
  • Use the Console to view errors such as issues with JS, SSL certificates, missing images (404 errors), some 500, 502, and 503 errors due to AJAX calls.
  • View the source of the site and examine the code running in the browser.
  • Test the performance of the ecommerce by examining how it loads and identifying loading issues of various elements.
  • Generate the Lighthouse report (recommended to run it in incognito mode), which is the same as running it with Google Page Speed, but executed with your connection and especially from your location, that is, from Italy in our case; and therefore more truthful and useful.

The Google tool is very powerful and can be extended through 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 in the top right, selecting:
    More Tools -> Developer Tools.

Once the console is open, we select the "Toggle device toolbar" icon at the top left, which will display the bar to select various resolution modes, see the image on the side (on desktop, on mobile below). We can select various devices, but also add new ones.

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

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

Some useful extensions to manage our ecommerce.

As mentioned, there are several useful extensions for Chrome that help facilitate both checks and regular 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 like changes to the cookie law.
  • Tag Assistant Legacy (by Google): allows you to verify 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 its public IP.
  • SEOquake: performs a quick and fast SEO analysis of the page; it does not replace tools like SeoZoom or SEMrush, but can be useful.
  • User-Agent Switcher: some configurations use technology that recognizes the device and directs it to a specific website. For example, Facebook. It can be useful to mask your device as another, for instance, an Android phone. This extension allows you to use Instagram from a Desktop PC without emulators.
  • Web Vitals: a simple extension that shows us if the pages meet Google's metrics.
  • AVG SafePrice Comparison, offers, coupons. An extension that allows you to see competitors' offers for the displayed product.

Author: Loris Modena

SENIOR DEVELOPER

For Ind Loris Modena, owner of Arte e Informatica, started working in the IT sector in 1989 as a system administrator responsible for the maintenance and installation of computer systems. He began programming for the web in 1997, focusing on CGI programming in PERL and later transitioning to programming in PHP and JavaScript. During this time, he became familiar with the Open Source world and the management of Linux servers.

Product added to wishlist