Written by Giles Bennett
One of the most common questions we get asked is “How do I make my Magento site mobile-friendly?”. In web developer circles this is called making a site responsive. A responsive site is one on which the elements on the page respond to the screen width of the device it's being viewed on. Let’s take a look at an example.
Here you see a Magento e-commerce site we designed and built for a client after their previous website had attracted criticism due to slow page load times. They came to us with the common request of "make our Magento shop faster, please!” - so whilst improving the loading time of their site, we killed two birds with one stone by converting the website to a responsive design.
As you can see from the screenshot above, when viewed on a laptop or desktop device, there is plenty of space to display content, but when viewing the same page in a mobile browser, the page isn't particularly finger friendly!
Everyday, there seems to be a new type of device brought onto the market - tablets, phablets, mobiles, even now we're seeing the rise of so-called "wearable tech". A well thought out responsive site should automatically adapt, making your site as future-proof as possible.
With these changes, our client's mobile conversion rate increased by 138% - customer approval, which couldn't be measured with such accuracy, also went through the roof.
If you'd like to talk to us about making your site responsive, or increasing conversion rates on mobile devices, then please get in touch.
Before
After
When we make an e-commerce site responsive, we choose the elements of the site which we want to display and those that we don’t when the desktop real-estate starts to shrink. These elements can either be existing parts of the desktop site or can be specially redesigned responsive versions. Another issue is how elements behave on touch-screen devices - on this site, the menu on desktops reacts to the mouse hovering over it, but on most mobile devices you can't hover, so the menu wouldn't work. Responsive site design means that hover menus convert, on smaller screen widths, to menus which are opened and closed by mouse clicks, so that they work on mobiles and tablets.
