eCommerce

Responsive design: This is what the ideal customer journey looks like

Responsive design has given eCommerce new possibilities for optimizing the customer journey on all devices.

16 Sep. 2015 Stefan Hofer

Modern web design

Responsive-Design-1
Responsive web design seeks to provide the same user experience on all devices. (Photo: Shutterstock.com/Pressmaster)

The share of the eCommerce sector in German retail is steadily growing. This is gratifying for internet and multichannel retailers, but growing digitization brings with it the challenge that consumers' information and buying processes are increasingly taking place across various devices. Webshop operators therefore need to provide a seamless buying experience – no matter whether the customer is shopping from a computer, a laptop, a smartphone or a tablet. In this area, the Bundesverband Digitale Wirtschaft (BVDW) has published a guide to the principles of successful web design.

The development of new mobile devices is also noticeably escalating the complexity of multichannel business for retailers because no clear trend – settling on smartphones, turning to tablets, or the good old computer – is apparent. For example today, around one out of every ten purchases made from a desktop computer is begun with research on a smartphone. Inversely, three out of five orders made from a smartphone were preceded by an information search with a computer or laptop.

This means that webshop operators need to optimize their products' presentation and usability for the prevailing operating systems and screens, to provide their customers with a seamless customer journey. If a page does not provide a satisfying experience on a smartphone, potential sales can quickly be lost.

Retailers have various possibilities for the mobile optimization of their online appearance and webshops: adaptive and responsive layout, native and hybrid apps, iOS and Android – or a combination of different alternatives.

Success across all platforms with responsive layouts

A mobile website does not necessarily have to fulfill all the functionalities offered by the native website – or be used exactly like applications on the desktop computer. It is worth taking a comprehensive look at the entire lifetime of the application.

Overview of web design layouts

  • Static web design
    Static web design designates a static and unchanging layout, creating websites with a specific width and fixed content. This means that the website view does not change when the size of the viewing window varies or if accessed from a different device. If the window is too small, users must scroll – horizontally or vertically – to be able to view all the content. This design usually includes a link to a mobile site optimized for the screen size of mobile devices.
  • Liquid or fluid web design
    Websites with liquid or fluid web design use percentages to define the widths of their different components, which are used to adapt to different screen sizes. The components are sized relative to each other and to the browser, and can be scaled to different dimensions when the size of the browser window changes.
  • Adaptive web design
    Adaptive web design can be broken down into a number of defined layouts for various screen resolutions on different devices. When the resolution of a given site falls below a certain value, the layout changes. This works a little bit as if different static websites were developed for different devices – but with the advantage of needing to manage only a single site.
  • Responsive web design
    The term responsive web design is used for a mix of liquid and adaptive web design features. The website components adapt to the available screen resolution on the fly.

    Responsive layouts can also be understood as a series of interconnected liquid layouts. These websites are designed against a fluid grid and use media queries to determine screen size and adapt the design and content. The scope of elements presented can be different for the different resolutions, which means that functions can be set aside for smaller screen sizes.

Which of the possible design principles is used depends on each application situation. An objective cost-benefit analysis requires a thorough analysis and weighing of advantages and drawbacks, as well as consideration of the website's existing design.

Responsive-Design-2
Responsive design can be viewed as the ideal presentation based on the context of use. (Photo: Shutterstock.com/Mathias Rosenthal)

Here, responsive design means equipping all important devices with a design that is perfectly suited to the user context. Additional effort and resources needed in the design and implementation phase can easily be offset by the long-term benefits. Over the long term, significant savings in technical maintenance and editorial upkeep can be achieved, according to the BVDW.

The general trend is towards responsive design – whether a given web retailer opts for a native or hybrid mobile application or a responsive design approach, based on their individual analysis of use scenarios and long-term investment planning.

eCommerce CEBIT RSS Feed