September 11, 2012, 12:37 PM

A U.K. luxury goods retailer redesigns with mobile in mind

Smythson turns to responsive web design for rendering on desktops, tablets and smartphones.

Lead Photo

The smartphone version of the merchant's responsive web design site.

Every day more consumers purchase more smartphones and tablets, contributing to a world where mobile is becoming a major force in accessing the Internet. “The Year of Mobile” is long past—mobile commerce is mainstream, and retailers today have no choice but to address the growing percentage of shoppers coming to them via mobile devices.

The most common way to address mobile consumers is to build an m-commerce site, then perhaps a mobile app, and finally to optimize an existing e-commerce site for use on tablets or create a tablet app. U.K. luxury goods retailer Smythson, however, decided to try an up-and-coming technique—responsive web design. Now, with one site, it delivers a web site experience tailor-made for any device.

Smythson just launched its redesigned commerce site in conjunction with the company’s 125th anniversary and the re-launch of its flagship store.

“Our primary goal was to provide the very best user experience and to ensure that this was delivered consistently across all devices,” says CEO Andy Janowski. “We approach our digital experiences with a vision to the future, rather than the present day. In this vein, we embraced responsive web design rather than build a separate m-commerce site because responsive web design adapts to all devices from mobiles to tablets and desktops while delivering operational and cost efficiencies and presenting an opportunity to pioneer innovation in the e-commerce space.”

Responsive web design typically uses a grid scheme whereby elements of a page can be shifted around from left to right or top to bottom so that the size of content does not have to be diminished to be displayed on a device.  For example, a three-column page on a desktop screen could become a longer two-column page or a wider one-column page on a tablet screen, requiring a consumer only to swipe from top to bottom or left to right to see all of the page’s content. Or that three-column desktop page could become a longer one-column page on a smartphone screen, requiring a consumer to swipe top to bottom to see everything on the page. One way or another, the design scheme dynamically shifts elements within the grid to appropriate spaces on the newly aligned page.

“Responsive web design is more than just coding, it is a process of designing and building a site taking into consideration the device the user may be viewing your site from, how fast an Internet connection they are accessing the site from, and what information is important to them,” Janowski says. “First we designed for users on mobile devices as they had the greatest restrictions in terms of screen space, input methods and Internet connectivity. As we moved to devices such as tablets and desktops, which have larger screen space and generally better Internet connections, we were able to adapt the layout to make use of the extra space available and provide styling enhancements.”

Compared to a site solely designed for a desktop computer, a responsive web design site requires more coding and development effort, Janowski says. “But you are providing a single site where the layout responds to the device the user is accessing the site from to provide a more usable experience for the consumer regardless of the device used,” he says.

Smythson worked with its platform provider Magento Inc. to build the responsive web design site.

comments powered by Disqus

Advertisement

Advertisement

Advertisement

From IR Blogs

FPO

Adrien Henni / E-Commerce

eBay and Russian Post accelerate cross-border deliveriies

EBay and Russian Post have signed a memorandum of cooperation aimed at reducing the time ...

FPO

Ernie Diaz / E-Commerce

Can Tencent win the mobile commerce battle with Alibaba?

The two Chinese Internet giants are increasingly encroaching on each other’s territories. A Beijing-based marketing ...

Advertisement