Design Your Next Ecommerce Site
August 2, 2012 • Armando Roggio
Like a master architect, modern website designers must be concerned with both site engineering and aesthetics, balancing available technology, platform limitations, and business needs with a visually pleasing palette, readable yet fresh fonts, and attractive layouts.
In general, it is a good idea to redesign — or at least recode — a business website every 18-to-24 months in order to keep up with everything that is new in both website technology and design trends.
As an example, a regional retailer in the Northwest has seen mobile smartphone and tablet traffic grow from about 2 percent of its site traffic in July 2010 to more than 20 percent of site visits in July 2012. When this retailer’s most recent site design was deployed in late 2010, it included many hover features, very large graphics, and a number of very desktop-oriented layouts. A new design slated to launch in just two months (less then 24 months from the last launch) is tablet centric, significantly faster, and responsive.
These sorts of changes are just the things every designer should be considering when planning a new ecommerce site design. What follows are several brief suggestions or “consideration points” that aim to help you plan your next site.
Engineering Your New Site
Build One Site
Many, if not most, leading developers now recommend building just one website and making it responsive rather than building a separate mobile website.
Google puts this quite simply on its Webmaster Tools blog, saying that the best approach is to build “sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.”
There is only one Internet, and customers that access it may be looking for exactly the same content whether they are using a mobile smartphone, a tablet, laptop or even a television.
Design for Tablets First
Focusing on the engineering-side, if you will, of site design, the best way to build a responsive, multi-platform design is to use CSS3 media queries in combination with flexible layouts.
Even within the flexible and responsive context, most designs are going to need somewhere to start, and in 2012 that somewhere is probably the tablet. Tablets are a fast growing segment that is as well suited to online shopping as laptops. Consider building a tablet layout first.
Design for Smartphone’s Next
Mobile commerce is the future of ecommerce. So use your CSS3 media queries to adapt the layout to a smartphone’s smaller screen and clumsy little keyboard. Be sure to remember that operating a touch device is very different from interacting with a site via a mouse.
Design Applications Not Pages
Websites do not need to be static. Rather, aim to build sites that act more like applications, learning from visitors and personalizing the user experience whenever possible.
Make use of application programming interfaces to add the sort of functionality that will separate a retailer from its competition.
As a simple example, consider including a SMS (text) notification system that will let loyal visitors know when an item goes on sale, or just updates them about order status. SMS messages don’t get lost in spam folders (which can happen to transactional emails) and users may be more likely to notice.
Push the Technology
Don’t be afraid to push the technology. If you can imagine a feature that will wow visitors and boost sales, implement it.
Build for Search, Sort, and Filter
Finally for the engineering side of your next ecommerce design, consider the search, sort, and filter design pattern that is popular on many mobile applications.
Searching on a smartphone is not as easy as searching on a laptop or even a tablet. So consider returning search results that can be narrowed or filtered with a tap or a swipe, allowing the user to look for better results without having to type a brand new query string.
Making Your Site Beautiful
Integrate HTML5 Video
Video is compelling content that can inform and entertain a site visitor, and HTML5 video will play on nearly any platform from a smartphone to a wide-screen LED television. Here is an example from Blendtec. Positioned on a product detail page, this is just the sort of multimedia that could help sell products.
Consider Canvas
HTML5 Canvas allows a designer to add game-like interaction without a huge hit to performance. In fact, it may be that building a site’s logo or motif graphics in Canvas will actually result in better load times.
Fearlessly Use Fonts
Fonts and font usage on the web has exploded, so to speak, in the last few years. For so long, designers were limited to “web safe” fonts, and now that embedding makes it possible to use just about anything you could imagine there are boundless and excellent uses of font on all kinds of sites. While no one wants to relive the comic-sans-loving era of early desktop publishing when every resume and letter featured five faces, don’t be afraid to use fonts liberally.
Armando, you’ve championed the use of non-”web safe” fonts for years. Now I see them everywhere, and they are so easy to use in designs using your articles as a guide.
Responsive design is not hard either (1140 CSS Grid), but requires a lot of testing. Also, it is recommended that you start from scratch when developing a responsive site. Trying to work backwards from a non-responsive to responsive site is headache inducing!
The example with the SMS notification is a good advice when a company wants to differ from the competitors. And to summarize the site design should be not only user friendly, but outstanding.