Session Digital: Magento Ecommerce Blog

Building a Responsive eCommerce Store for Smythson

image

imageSmythson has recently updated its digital presence to reflect the brand’s refreshed identity. One of the brand values we carried through to their website was their heritage of innovation. We did this through the implementation of a responsive eCommerce website. Session’s Eddi Chen, lead front-end developer on the project, talks about the unique features of the Smythson user experience.

Q) What makes the recently launched Smythson website unique?

Responsive web design is the idea of serving a single HTML page which can adapt the layout of content in response to the dimensions of the browser window. Introduced in 2010 by Ethan Marcotte in an A List Apart article, Responsive Web Design applies the techniques of fluid images, flexible grids and media queries. Fluid images can be achieved using a combination of HTML, CSS and JavaScript. A flexible grid is achieved through setting widths in CSS using percentages rather than pixel values, and media queries are used in CSS to adapt the display of content at set transitional points. The increasing release of responsive websites is in response to the rise in popularity of smartphone and tablet devices. Using these devices to access the web and modern browsers supporting CSS3 properties, makes responsive web design possible.

image 

Analysis of Smythson’s website analytics during the discovery stage of the project, revealed an increasing number of users accessing the site from mobile and tablet devices. To provide a better experience for these users without creating a separate mobile site, a responsive approach to redesigning the Smythson site was taken. 

Q) What are the benefits of responsive design?

From a consumers point of view, the main benefit is having a single website which can be viewed on any device and the layout will respond to the width of the browser. When a fixed-width desktop designed site is viewed on a tablet or mobile device, the site is commonly scaled to fit within the width of the device and requires the user to zoom in just to make the site readable. Whereas with a responsive site, the layout and styling adapts to suit different devices and browser widths. 

For a site owner, the main advantage is having their site more accessible across multiple device types. As well as providing users with an improved website experience, this could result in an increase in traffic and increase in sales for an eCommerce site.

Q) How did you implement this on the Smythson site? What are the special features?

Redesigning the Smythson website as a responsive site involved going back to the drawing board and taking a mobile first approach. This meant prioritising content from the top to the bottom of each page and designing for a mobile device first, followed by devices with greater screen widths such as tablets, laptops and desktops. We took a similar approach when building the frontend where pages would be structured in HTML according to the mobile design (essentially stacking content on top of each other). CSS would be used to move blocks of content as more screen space became available on wider width devices. 

image

Talking technical…

By taking this approach we only need to use min-width media queries, as devices with more screen space requiring a layout change, will overwrite or add to these base styles. Instead of defining media queries using pixel values, we’re taking the approach of setting media query values using proportional em values. This caters for users who change their default browser zoom level - taken from the Cloud Four blogpost: The EMs have it: Proportional Media Queries FTW!

Taking a progressive enhancement strategy, for browsers which don’t natively support media queries, such as Internet Explorer 7 (IE7) and Internet Explorer 8 (IE8) a separate stylesheet was created so that these browsers displayed a fixed-width, desktop-only version of the site. With a tight deadline, this strategy saved a lot of time having to find workarounds to get the site to behave responsively for browsers which don’t natively support these features. Having to debug IE7/8 takes long enough in a fixed-width desktop version let alone for tablet and mobile browser widths as well. Rather than generating the separate IE stylesheet manually, we made use of the CSS pre-processor Sass and specifically its mixin functionality to automatically generate an IE stylesheet. Sass proved to be another great time saver when writing CSS. Being able to nest styles, use variables and mixins in SCSS files which Sass then combines, compiles and compresses styles into a single CSS file. 

image

Even after using time saving strategies like only applying the responsive layout to browsers which natively support media queries, and the use of the CSS pre-processor Sass, the development time involved in building the Smythson site was broadly speaking at least double the time it would take to build a fixed-width desktop only site. Some of the additional development time was due to this being our first responsive site, but the majority of the additional development time was due to the fact that, not only are you building a site with a desktop layout, but layouts for every browser width between mobile and desktop.

During development, one notable tool used to style from mobile up to desktop browser widths was ResponsivepxResponsivepx allows you load your local development environment into an iframe within the browser to control the width and height of the viewport. Using the Google Chrome browser you’re able to increase/decrease the width or height one pixel at a time, allowing you to check at every dimension how the style appears. This then allows you to add the media queries based on when the content breaks the layout, rather than by common device screen dimensions.

The result is a site where the layout responds to the device width or browser width. This provides the user with an optimised experience, regardless of the device the site is viewed from. The best example of how the layout changes can be seen on the collection pages such as the Grosvenor collection page

Q) Are there any performance implications?

As responsive web design is achieved mainly through the modification of CSS styling, the main noticeable increase is in the size of the CSS file in comparison with a fixed-width desktop site. But once this has been downloaded on the first page load, it’ll be cached by the browser. 

One approach we haven’t implemented in the first phase of the project is responsive images. This is where images have alternate mobile optimised versions that load if you are viewing the site on a mobile device. There are currently various workaround methods for achieving responsive images, but no official native HTML solution existed at the time of development. Due to project deadlines we were unable to decide on which workaround would work best for the project and with the growing availability of retina display devices, the client didn’t want to compromise on image quality.

Q) Any last thoughts?

By building a responsive website for Smythson, we have been able to put a lot of theory and prototyping into practice. We have introduced new tools which we will use in future projects, and learnt many valuable lessons along the way. From a frontend perspective this has been our most challenging and exciting project to date. Being able to develop a site which can be viewed on a range of internet browsing devices, with varying screen widths, input methods and bandwidth availability. Altering the display of content through the use of media queries, flexible images and flexible grids is an idea we want to carry through to all our sites.