Top design tips: Creating custom iBook widgets with HTML5 and Hype

We’ve been creating bespoke iBooks for various iPad projects for a while now, and think they’re great. Sometimes, though, the templates in Apple’s iBooks Author software don’t exactly allow you to do everything you want to do.

So when we needed to get a bit more creative in a recent iBook project, we sneaked in a bit of HTML5 and an app called Hype to break the coding barriers and create some custom widgets. Here’s how we did it…

A custom contents page

As part of our e7 iPad scheme for schools, we created two iBooks to be deployed to teachers’ iPads – a ‘Getting Started’ guide and a collection of ‘Lesson Ideas’. For the lesson ideas iBook, we wanted one section of the iBook to be a central contents page which linked to the subject area and a list of suggested apps. Ideally the user would be able to click on a subject header (e.g. English or Geography), see the lesson ideas and related apps, then either return to the subject list or click on to the next subject.

Hype -1

As the lesson ideas iBook contained so much information though, all grouped by different subjects with lists of suggested apps, it soon became clear that the linear structure of the iBooks Author templates would make this very cumbersome and non-user-friendly to navigate.

Adding custom functionality

To get the results we wanted, we were going to need some outside help. Step in Hype – a third-party app that lets you create HTML5 web content (including interactive content and animations for both mobile devices and desktops) without needing any coding. This would allow us to create our own custom widgets to give us the navigational functionality we needed.

Hype -2

Using Hype, we created an individual ‘Scene’ for each subject page and linked the contents to the pages. Each subject page had a ‘forward’ to next subject button, ‘back’ to previous subject button, and a return to subject list button. We also made it possible for the user to close the whole section with just one click.

Hype -3

Much easier navigation

By creating these custom widgets with Hype, we made the whole navigation process much easier, allowing the user to get to the information they needed without having to swipe through so many pages, then return to the contents page with just one click. After we’d done, we then added a little bit of HTML5 animation to the pages just to make it a bit more interesting when you tapped a button – and because we could!

For more information on Apple iPad, iBooks Author and designing for mobile devices, call us on 03332 409 306 or email For all the latest news, follow @WeAreJigsaw24 on Twitter or ‘Like’ us on Facebook.

Paul S
Paul S
Call us: 03332 409 306

Leave a Reply

Your email address will not be published. Required fields are marked *