E-commerce design principles

E-commerce design principles


Extremely interesting article on best & current e-commerce design principles in the Adobe Dreamweaver Team Blog.

“The e-commerce world is a very particular environment to work in as a web designer. On one hand, you want your work to always look great, and to always deliver an optimized browsing experience to the visitors. But on the other, there’s only one measure of quality in existence for e-commerce. That measure is conversion rate. In other words, a well-designed e-commerce website is one that converts and makes sales.”

Here’s a list of the main points:

1. Think, content first
2. Copy is what makes or breaks e-commerce websites
3. Make room for quality product images
4. Go “material” or “flat”
5. Consider using cards
6. Have speed in mind
7. Design the checkout experience as well
8. Take advantage of large imagery
9. Use large, bold typography
10. Don’t forget about the common e-commerce site elements

Plus…These days, making your website design accessible on mobile – be it for e-commerce or otherwise – is an absolute must. Responsiveness, usable store interface, mobile-friendly checkout process … all of that simply has to be present in a quality e-commerce design.

Google’s “mobile friendly” announcement: the Magento options

Google has recently announced that it will be rewarding websites which are “mobile friendly” with better rankings, making it all the more important. “Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”

Read our important article which sets out for Magento e-commerce websites the pros & cons of responsive design compared to a separate mobile store.

Magento website design: off-the-shelf theme or custom design [article]

We are often asked why we do not use pre-built “themes” for Magento implementations. There’s a dazzling and confusing array of websites that offer pre-designed Magento Themes and people wonder whether a “standard” theme will offer economies of cost and time, as opposed to a full custom, bespoke design. “Surely it would be quicker and cheaper?”, they question.

At Screen Pages, we are in the business of designing “bespoke” websites which reflect the brand, product range, marketing and promotional activity, fulfilment and customer service of a business – exactly. This inevitably involves careful and creative thought, analysis, planning and – critically – customisation.

But there are many other reasons: so we decided to set out our full thinking on the subject: this article explores the pros and cons for Magento websites of a custom design or an “off-the-shelf” theme.

Read the whole article here: http://wp-staging.screenpages.com/magento-custom-design-or-themes

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



Pin It on Pinterest


Subscribe To Our Newsletter

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

You have Successfully Subscribed!