Learn to Build HTML Prototypes

When we sayHTML prototypes, we mean a website comprising HTML markup, CSS for presentation, and JavaScript for additional interactivity. This website is built in order to prototype a particular product. It may be a simple HTML website, or a website that runs on a framework or content management system (CMS). HTML prototypes have several advanatages over other types of prototypes, including:

• Responsive design. The only way of creating a truly responsive prototype that works across multiple devices and screen sizes is with an HTML prototype.
• Flexibility. An HTML prototype can be as close to—or far from—the real thing as you want it to be. Prototypes can be ready to move into production with few amendments if you so desire, or they can be kept quick and dirty for a lower fidelity experience if that suits your needs.
• Accessibility. If you're going to use a prototype with an audience that has accessibility requirements, HTML prototyping is the way to go. You can test your prototype with tools and services as you build to ensure your creation is accessible. It also enables you to test with users in their standard situation and setup.
• Speed of change. Once set up, it can be super quick to show the effect of simple design change in an HTML prototype, especially content changes.

In Chapter 7 of Designing UX: Prototyping, Dan Goodwin and Ben Coleman share guildelines of how to get started with HTML prototypes, and some guidance on approaches. they also share srela world case studies fo succesful HTML prototyping. You'll learn the pros and cons of HTML prototypes; what projects best suit HTML prototyping; the different ways of including content in prototypes; and how to host them online in order to show them to others. You'll also discover what work you should do before you start creating an HTML prototype, and how to avoid issues if you move it into a finalised website.

Start your subscription today and you'll get access to this book, plus 300+ other web design and development books in SitePoint Premium!

Until next time,
James at SitePoint