Responsive HTML prototyping for user experience design

A 90 minute Hands-On by:

David Barker (Sheff)


Will Scott

Sift Digital

About this Hands-On

The majority of what we design is built in code, but often as user experience designers, we design using proprietary software, whether that's Omingraffle, Axure or one of many other solutions. These solutions all have their pros and cons, but typically they aren't producing semantic code. With the evolution of front end frameworks such as Foundation and Bootstrap, we can rapidly create prototypes in HTML and CSS. This removes a level of abstraction as we are now working in the browser. It also provides us with some powerful tools and functionality which allow us to build richer interactions that can then be validated with users.

In the first part of this session we will introduce our approach and how prototyping fits in to our user experience design process. We will introduce our framework of choice (Foundation) along with some other tools and services that help us rapidly create HTML prototypes.

Next, we will take you through a typical prototyping process, from set up to testing. We will cover the basics of using Foundation to create an interactive and responsive prototype.

The focus of the session is about providing you with the opportunity to create your own responsive prototype. We will provide an example project (or you can create one of your own!) and you will get to build a simple prototype that will work responsively across different devices.

Please note, everyone is welcome to attend this session, however, if you would like to code during the session it would be beneficial to have a laptop running OS X/MAC OS (ideally a MacBook).

About the Speakers

David Barker (Sheff)

Sheff has over 15 years' experience in digital. He started out as a front end developer before transitioning into the realm of user experience. He has a keen interest in cognitive psychology and understanding how the principles can be applied to digital. He is passionate about creating evidence based solutions.


Will Scott

Will is a UX consultant at Sift Digital, where he has worked on design and digital transformation projects with clients such as Ofcom, St John Ambulance and the Joseph Rowntree Foundation. Will used to run an insight agency that worked with some of the largest organisations in financial services and higher education, and has a ton of experience in not only gathering research insights, but communicating them and coming up with strategies to resolve those human issues arising from research.