Skip to content

Responsive website design for Kingfisher Sourcing & Offer

I helped Weir + Wong develop a set of responsive HTML templates for their client Kingfisher.

Multiple device view of the Kingfisher Sourcing homepage

Overview

Kingfisher is Europe’s largest home improvement retailer. Their purpose is to make it easier for customers to have better and more sustainable homes.

Kingfisher Sourcing and Offer (KSO) is the sourcing and procurement division of the Group.

Weir + Wong were tasked with designing and developing a set of responsive HTML  templates that would allow employes to be able to demo a portfolio of products to other departments within the business and hero specific suppliers.

I translated the PSDs  into responsive HTML templates using Twitter Bootstrap 3.

Product details page (desktop view)
Desktop view of the products details page showing the product image carousel.
Product details page on tablet (landscape view)
Landscape tablet view of the same page simply shifts the layout slightly to accommodate for the marginally smaller screen size. Hi-DPI images are served automatically to devices that support them.
Product details page on tablet and mobile
Portrait tablet and mobile views with a restructured menu to enable users to find products quicker on the respective devices.
Mobile view of the Kingfisher Sourcing product listing page
Portrait mobile view showing how the main navigation has not only been restyled, but restructured using a combination of media queries and JavaScript to restructure the underlying HTML.

Share This Project

If you enjoyed this project, then let others know about it by sharing it.