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):
- 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
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?
Useful analysis of carousels – you know, those “rotating” images people put on their home pages. Bad carousels in Flash, which is a complete no-no, as they don’t work on iPhones etc.
The bottom line is that visitors get confused, frustrated and irrelevant content. The solution? Test.
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.
A summary of web design trends for 2010. Top three are, oversized logos & headers, sketch/hand-drawn illustration and Slab typefaces…
We have recently been asked to jot down a few website extensions and updates that we have implemented recently.
Screen Pages has a team whose sole purpose is to extend existing websites – fundamental to our approach of creating bespoke websites, but the trick is to develop modules that can be easily re-deployed on other clients (in the spirit of cooperation).