The Dragon and the Eagle
An interactive ebook regarding the history of Welsh-Americans, with dual releases for English and Welsh language.
We collaborated with author Colin Thomas to create The Dragon and the Eagle; an enhanced eBook that explores the history of the Welsh men and women who emigrated to America to start a new life. With Colin’s own family history reaching back to a great great grandfather who took many Welsh emigrants over the Atlantic himself, the text is described as ‘a story of conflict and conciliation, of antagonism and integration, of greed and generosity. It speaks of the way Welsh emigrants became Welsh-Americans, and the way in which they struggled to maintain a distinctive identity over 400 years.’
Starting with Colin Thomas’ original text, we incorporated exclusive historical photographs, audio clips, interactive graphics/maps and a series of videos narrated by Cerys Matthews to create a rich, interactive eBook package.
We combined all of this with helpful study aids, such as interactive footnotes across all 13 chapters, and full English-Welsh translations in order to provide a varied and innovative reading experience for students, scholars and enthusiasts alike.
Bill Jones, the Professor of Modern Welsh History at Cardiff University, describes the app as ‘a very lively, entertaining and informative work; it tells the story of the Welsh in America in an excitingly new and innovative way.’
Design
Designing an interface and reading experience for this text was given a great deal of consideration. We were not looking to directly replicate a book layout or reading experience, but rather utilise the benefits of connected media consumption with quick access to the book’s resources at any point.
Wrapped in a textured, aged overlay, the app launches with the iconography of the two nations before rolling into the opening prologue set on top of merged flag backdrop. This works in parallax with the background image spanning the length of the book, giving a subtle idea of progress – rather than a bar or a book’s physical thickness.
Further benefits of this digital approach can be found in the annotations/footnotes that can be launched with a tap when a reference is cited in the body of the text. This could be useful for research texts, historical or otherwise, as it condenses the information. This density is also evident in the interactive maps that can e.g. toggle through the civil war union advance.
We built the app using animated carousels with horizontal sliding, initially intending to simulate the turning pages of a book, but it evolved into a more important feature throughout the app when accessing content and features.
We also applied the carousels across the photo, video and audio galleries, as well as the slide-out panels from the top and sides of the screen and chapter selector. All the pages were built using iframes, which allowed for separate design and development work on the book’s content without the author or entire app build being present.
Review of app progress from external contributors and invested parties was made easier with our webview approach; generated links to build versions could also be easily examined in different device ratios using Google Chrome.
Development
The Dragon and the Eagle was our first web app, and initially we looked into using PhoneGap as architecture to build it and bridge to a mobile device’s APIs (Application Programming Interface). In the end, however, the project didn’t require any of the phone’s APIs, so we built through a webview instead, cutting out unnecessary memory usage. The webview displays the app like a single page website with content dynamically loading within.
Video content formed a significant part of the resources within the app, and we used the app’s browser HTML5 video and audio tags to display and play media on IOS.
However, we encountered issues with Android’s inability to play HTML5 videos that are hosted in an app, so we constructed a native video player in Java using Android Studio to counter this. Javascript and Java Bridge code could then switch between a webview activity and our new media view activity.
The content rich nature of The Dragon and the Eagle meant it exceeded Google’s app packet size limit (50mb at the time), so we had to submit all of the app content (such as videos and audio) as an app expansion. This required our app to have a customised OBB installer that could download the assets from the Play Store at the point of installation.