Mobile phones are becoming the ubiquitous universal device, whether we like it or not, and this also applies to ecommerce. That’s why it is inevitable to have to address, sooner rather than later, the adaptation of ecommerce websites to make them usable (and profitable) from mobile phones (and tablets although this, nowadays, is residual).
To display a different version of your online store than what you see on a normal computer, you have 2 options: a sensitive design or a different domain.
Responsive or adaptative
This is the same desktop version that uses CSS (style sheets) to fit smaller screens. The common way to adapt it is by making some disturbing elements such as sliders or images disappear.
Normally, WooCommerce or PrestaShop themes will be adapted by default without requiring any action on your part. However, if you want to modify something, you have to use the media queries. This is a bit more advanced, and if you don’t know anything about CSS, don’t worry. Media queries are CSS rules that tell you what to show or not to show depending on the size of the screen.
With this rule we can define how we want our website to look when the screen is at 320 x 480px. These are the common dimensions of smart phones. With this one, besides the pixels, we can also specify the orientation of the screen. From 700px and more, we are usually talking about tablet screens.
As you can imagine, there are almost an infinite number of combinations in terms of device sizes and orientations, right? This is the difficulty we were talking about earlier.
This method consists of having a different version of your website at a different URL, that is, not simply adapting it. This way, when users connect to their mobile devices, the mobile URL is where they arrive.
The rule is to use an ‘m’ before the original URL. This is how Twitter does it, for example. If you go to https://m.twitter.com, you will see the mobile version even if you are using your computer.
Our advice is that it is not necessary to go that far. It is more than enough if your e-commerce can be clearly and easily seen on a small screen.
AMP, Google’s initiative for mobile browsing
You may have already noticed that when you search for something on Google, some results are displayed with this mark.
It’s a Google project that focuses on improving the speed of mobile browsing. It speeds up the website by limiting it to text and images, making it load much faster.
In Google’s own words: “AMP is ideal for e-commerce because AMP makes websites faster, and fast websites promote sales conversions.
To adapt your WordPress store to AMP, you can use one of these plugins:
– AMP WooCommerce: a free and super easy to use plugin.
– WP AMP: a paid plugin that allows you to add AdSense videos and banners, among other things.
A good way to start getting familiar with AMP is to adapt a blog post and measure the improvement in upload speed before starting with WooCommerce.
If you use PrestaShop, these modules offer AMP customization:
– AMP module: costs about 72.59 euros and allows you to create AMP pages for categories, products and home.
– Google AMP: this module is a bit more expensive, but worth it. It allows you to customize almost anything you can think of and claims to make sites 7 times faster. It’s 149 euros.
Create your own application.
Using an application is advisable only if you have recurring sales because nobody is going to download an application to buy only once. Amazon’s, for example, is one of the most used applications, but it is Amazon …