We recently designed an HTML5 web app for an e-commerce company. The product is targeted towards iPad users and we wanted to create an immersive, fun environment that felt more like an app than a traditional e-commerce website. The solution for this particular project involved a responsive design so we could target different tablet resolutions and still allow desktop users to experience the fun.
We’re pretty big fans of Axure here at Fell Swoop and it happens to be our go-to tool for prototyping these days. So during the design process for this project we created wireframes like we usually do in Axure, but when we focused on building a prototype to test on the iPad we ran into several problems:
- Fixed position elements are a critical part of the design and Axure’s support for this on iOS is still a bit buggy.
- The way Axure handles scrolling and swipe events was cumbersome and didn’t represent what the performance would be like in the finished product.
- Finally, our biggest issue with Axure was it’s lack of proper support for responsive design. We would have had to build multiple prototypes to evaluate portrait vs. landscape orientation on an iPad for example.
It’s certainly possible that we could have worked around these problems in Axure, but deadlines were quickly approaching. We had a desire to build a prototype that reflected the performance of the final product and we knew HTML was the only way to get there, so we shifted gears.
To get started quickly we decided to build off an existing framework. We picked Twitter’s Bootstrap because it had support for many of the UI features we needed and we knew its responsive grid would suit our needs. Working with frameworks of any type has its tradeoffs — and there were definitely several times where we were banging our heads against Bootstrap’s default design.
That said, the responsive grid and interactivity via css and data attributes were a huge win for us. With Bootstrap we were able to complete a fairly complex, responsive prototype of a multi-layered e-commerce app in just a couple of days. The project is still underway, but we’ll talk about several technical aspects of building a responsive prototype in a future post after it’s launched.