Responsive Web Design for Ecommerce

Responsive Web Design

Optimal viewing and interaction experience for your ecommerce website

Responsive web design provides an optimal viewing experience across a wide range of devices from desktop monitors to mobile phones. A site designed with RWD adapts the layout to the viewing environment by using fluid proportion-based grids and CSS3 media queries. We deliver all sites using our tradeit ecommerce accelerators with a responsive design.

Design, UX and Prototyping

Wireframing and user experience form an important part of the responsive design process and help visualise what you’re building. How each user navigates and moves around a site will vary greatly and will affect how they want the content to be displayed to them, maybe even what content they actually want. This is particularly valid with the prevalence of touchscreens and the different way users interact with them, compared to a desktop or laptop with a traditional display, keyboard and mouse. For instance, a smartphone user is unlikely to want large amounts of small text and scrolling, where as a desktop user may be after as much information as is available.

Red Technology has adopted a content-first approach when building responsively designed websites where the layout is adjusted for each breakpoint, using the content priority as a guide to developing the page hierarchy. We produce PSDs or high fidelity wireframes, and a prototype that covers all breakpoints (normally four), so customers can get a real feel for how their design will look and behave once live. Once approved, we create a style guide and begin to build the core HTML5 templates by using a front-end framework based upon bootstrap, as a base for faster and higher quality delivery of this prospective, responsive front-end code. This is then rolled out for all of the site’s other templates and tested to ensure compatible with all major browsers.

Resources

Responsive Web Design

Content-led responsive web design

Usability & Design

The way people use and interact with your website tends to vary quite significantly between device types, therefore it’s essential that your website reacts accordingly. Mobile devices tend to be used by people on the go, so content may be presented differently than for a desktop user who has time to look through lots of information in detail. At Red we help you think about user experience on each device and adopt a content-led rather than design-led approach. We ensure that the merchant’s content is prioritised in order of appearance so that the most important content always displays first, regardless of device type.

Navigation

With the proliferation of touchscreen smartphones, phablets and tablets now available, your navigation is key to the user experience. These mobile users navigate using taps and swipes instead of mouse and keyboard commands with rollovers and hovers, so ensure that as your site scales for smaller screen sizes, you consider these key requirements. Menus, search fields, buttons, CTAs and text need to be legible and usable on the smallest of devices, but also consistent between them all. At Red we use a style guide during the design process to ensure these requirements are met in terms of brand consistency and usability across all breakpoints.

Content Types

Be wary of content that may be fine on your desktop site functioning poorly on a smartphone or tablet. For example, large images (particularly those with text on) or video files may take too long to load or be illegible for mobile users. Plus, Flash files are not supported on most tablets and smartphones. The tradeit platform supports not only responsive web design but responsive content within the site. This enables different images, text etc… to be displayed at different breakpoints. This might simply be a smaller sized version of the same content, or a completely different piece of content that is device specific (i.e. an ad for mobile users) and can therefore be more personalised.

Speed

Mobile users rely on websites being fast, so you must make sure that content is optimised for different devices to ensure that they don’t run too slowly, and hinder the user experience. If the site and its content is not optimised, this may cause your bounce rate to rise sharply on mobile or phablet devices. By using a content-led approach, we work with customers when designing and building the sites to ensure everything that is displayed (including the content) is optimised. We also endeavour to regularly test sites throughout the design process, and once live, for speed. Poor site speed is still the biggest barrier to a successful ecommerce site. Our Hosting infrastructure is also regular monitored to ensure optimum site speed.

Why choose RWD from Red Technology?

Save time & money

By using a responsive design you no longer need to maintain separate desktop and mobile sites, saving time, resources and money.

Increase sales

By enabling customers to view and purchase from your website how, when and where they want, they are more likely to place and order, order more often and order multiple items.

A consistent user experience

Means customers are familiar with your site across any device and browser and can navigate and checkout easily, helping to increase conversions and sales. A single URL also means it’s easier for them to remember.

Device Agnostic

With the increase in how and where people view your website, creating a site that is optimised for all operating systems, browsers and device types means your site can be viewed by anybody, on any device, wherever they are.

Search Engine Optimisation

A single site means a single set of URLs and content which is more likely to improve your SEO performance and mean you have more time to optimise it. The search engines also prefer responsive design as they only need to index the page once, meaning it’s easier to crawl your site. In fact in April 15 Google’s update actively punished sites that were not ‘mobile friendly’.

Future-proofed

As more screen sizes (Phablets, Internet-ready TVs etc..) are introduced, your site is already able to cope by responding to fit them. Extra breakpoints for new device types can be added to your design for further optimisation. This means your site can be scaled upwards without any problems.

Analytics

A single site means a single set of analytics giving you a simplified view of your site activity, users and purchases.

Learn more about our Responsive Web Design services

Contact us