Responsive design for Magento: how, when & why [article]

Many clients ask us about the advantages and disadvantages of “going responsive”. We decided to set out the full story in our latest article: “Responsive design: how, why, pros & cons

In particular, the article looks at  the pros and cons for Magento websites of a responsive design as opposed to a separate mobile optimised store.

The main themes covered are – apart from a definition:

1. Device proliferation
2. Managing your website
3. How your marketing “reaches” your customer
4. A special case: social
5. What Google says
6. What Magento says
7. Planning a responsive project
8. What are the downsides

Read the full article about responsive e-design for Magento here.

Declutter your e-commerce site [study by Smart Insights]

Smart Insights reports on how an EyeQuant team took a sample of 960 ecommerce designs and showed them to 500 users in pairs, asking which design felt ‘cleaner’. EyeQuant is a German neuro-technology company that specialises in quantitative user experience metrics.

Summary of conclusions:

– Not only did the 50 fastest growing ecommerce sites prove to be significantly ‘cleaner’ in design than the rest of the internet (as measured by the Alexa 5000), but the best-of-the-best (top 10)  ecommerce sites noticeably outperformed the other high achievers.

– The most important thing is that the shopping experience on your site is better than realistic substitutes. If you sell fishing tackle online, the real ROI from clarity optimization is going to be in making your site cleaner than the other fishing tackle providers’ sites.

– Since studies suggest that the average user only reads 20% of the text on a page anyway, removing some of the less critical text on a page is a sure-fire way to improve the visual clarity of your designs.

– Users treat images much more favourably. Even if they have lots of visual content, images tend to be processed in the brain as a single, coherent picture, so users consider them to look much cleaner.

– One of the easiest ways to boost design clarity is to space it out more. Marketers often try to cram too much content into one screen view, particularly above the fold. Processing content in bite sizes is more pleasant for users, as long as they know where to look.

Read the whole article on Smart Insights– with case studies.

Browser sizes for e-commerce websites

Browser sizes for e-commerce websites

Prompted by a retailer who discussed a “large” screen size format, we looked at what browser sizes were accessing a typical “retail” e-commerce website.  The site had about 200,000 visitors in the recent month that we looked at in Google Analytics.

The data is summarised in the table below, with 92% of all visitor sessions coming from the 20 most common screen sizes listed below (width being shown first).

It was a relatively straightforward task to comment upon what sizes represented what kinds of devices (assisted by a pivot table with a dimension showing operating system):


Our conclusions:

  • Design for 768 * 1024 (iPads in portrait mode), accounting for nearly a quarter of all traffic
  • 768 * 1024 represents a good balance point between using all the available screen size and not having horizontal scroll bars on fixed zoom browsers (desktops & laptops) while still allowing the customer to see detail in the content on the site without having to zoom on a dynamic zoom device (tablets)
  • It’s more important to review how customers are using devices on your sites than what devices they’re using (iPad in portfolio mode)
  • Don’t worry about gaps at the edges of high resolution browsers (e.g. large iMacs), which don’t actually account for a lot of the traffic
  • Building the website with “responsive” design would still need to account for the different screen size “breakpoints” for determining which display size is used



The importance of good landing pages

The importance of good landing pages

When discussing website design we naturally  focus on the homepage. In reality, the majority of your customers who come from search engines will be directed straight to your landing pages, category pages or product pages. The effectiveness of the different pages deeper within the site is vital to persuading these browsers into buying customers.

How much thought and effort do you apply to your landing pages in comparison to your homepage?





Convert visitors into buyers

• The design should make the next step clear
• Don’t understimate the importance of quality graphics
• What content will help visitors make decisions?
• What objections do you need to overcome to persuade visitors to convert?
• How does the page need to work to enable visitors to take positive actions?
• How can the content and functional components be organised to make the page easy to follow?
• Where are the possible dead-ends and how can you adapt these to continue the customer journey on your website?


Favourite e-commerce websites

When we take on new clients, we ask them what websites they like and where websites their customers shop. Overwhelmingly, they say John Lewis and Net-a-Porter. To a certain extent, this is driven by the fact that we take on niche brands selling to the ABC1 demographic, mostly with “robust” average order values. Many of them are apparel, homeware, gifting and luxury/premium goods companies.

Here’s the list of the favourite e-commerce websites.

Oh and they admire Amazon but don’t really like it.


Sign Up To Our Newsletter

Join our mailing list to receive the latest e-commerce & Magento news from Screen Pages.

For information on how we process the data that you give us, please see our privacy policy.

You have Successfully Subscribed!

Pin It on Pinterest