mobile SmartLife screenshot laptop

SmartLife

A stylish website for this wearable tech company

Work Type

Development

Client

Pagemakers

Skills

  • UX
  • HTML5
  • JavaScript
  • PHP/MySQL
Launch Project

The brief

I was approached by Pagemakers to develop a responsive website for SmartLife's cutting-edge clothing technology.

The website had to showcase the simplicity, power and style of the SmartLife tech, and in particular needed to work across devices (desktop, tablet, mobile etc.) seamlessly. The main technical challenge in achieving this seamlessness, was in optimising page rendering in order to effectively handle the large number of high-quality (and therefore high resolution) images that can be added through the site's CMS (Content Management System).

The approach

I had to call upon my Javascript knowledge to code an intelligent management system so that the site's performance was fast and buttery-smooth. I used a Lazy loading design pattern to handle image and section display, meaning that elements are only loaded when they are seen by a user on-screen, not on the load of a page as usual. Furthermore, when the website is first accessed, the user's device is analysed to determine the best suited dimensions and resolution of images to be delivered. This optimisation allowed for the dramatic reduction of load and processing times, something that is an essential consideration on smaller, possibly low-powered, devices.

SmartLife screenshot 4

The result

The site really helps to communicate the key features of SmartLife's range of products and, as it's driven by a CMS, SmartLife are in total control of their online presence.

SmartLife screenshot 4

Ben really got his teeth into this one. The technical challenges involved in optimising the website to work cross-device were handled with great skill. Top job!