A face for your field guide

19 August, 2011 09:30 by Simon O

Part Four: HTML Layouts

This is the final and perhaps the juiciest part in the series because it’s where the design meets the code in a harmonious display of passion.

Alright, enough flowery language, let’s have a look at how the ‘species’ page of the app works. This is the destination page your users will land on once they’ve selected an animal/item. On the iPad version of the Field Guide it’s a single page that consists of all the details. On the iPhone/iPod app, these sections are split into individual tabs.

Once you’ve downloaded the code, you’ll notice that we’ve chosen to lay out the details with HTML.

Where the HTML things are.The detail view area consists of HTML (in a UIWebView container).
Image: Simon O'Shea
Source: MV

This allows you to easily change presentation, links and styling, but above all, it allows you to transfer an existing design to an iOS app if you already have a web-based version of your field guide. Vice versa, with a bit of tweaking and testing, it also allows you to transfer these layouts to the web or other mobile platforms.

So let’s see what makes up a Species/Item page…


The Files

  • Species/Item Page (iPad): template-ipad.html
  • Details Page (iPhone): template-iphone-details.html
  • Distribution Page (iPhone): template-iphone-distribution.html
  • Scarcity Page (iPhone): template-iphone-scarcity.html
  • Stylesheet (iPad): style.css
  • Stylesheet (iPhone): style-iphone.css


The Markup

If you’re familiar with HTML, these layout template files should be pretty straightforward. For the iPad template, the page is divided into two main <div>s, with class names leftcolumn and rightcolumn. I’ve labelled these for identification practicality over formal semantics, so feel free to change the names if you’re partial to the latter school of thought. These are set to float left in the stylesheet, next to one another.

The leftcolumn holds the <header> of each animal/item, containing the common and scientific names. This is followed by the main details, each of which has a heading (<h3>), followed by a custom tag that tells the app where to insert specific animal data. The custom tag takes the form <%propertyname%>. For example, to display Distinctive Markings as a paragraph, you would insert the custom tag <%distinctive%> between paragraph tags.

eg:  <p><%distinctive%></p>

The taxonomic data of the animal is displayed as tabular data using a <table> element.

The rightcolumn in the template consists of ‘widgets’ or styled containers that we’ve created to display key information. There are three of these widgets: Distinctive Markings, Distribution and Endangered Status. On the iPad version of the app Distribution and Endangered Status each have information on the ‘back’ to explain the graphical data displayed on the map and status chart. This is initially hidden and can be viewed by the user by tapping the i icon. We’ve enabled this to be accessed using a combination of CSS3 and JavaScript to create a ‘Flip’-style animation. On the iPhone version this information is displayed in a separate widget underneath both the map and status chart.

You may notice that the map <img> tag is repeated in the back div of #distribution, seemingly printing two map images within the widget. This is to give consistent height to the Distribution widget when it is ‘flipped’ and with the styling included it also gives the effect of translucency, showing the reversed map when reading the back pane of the widget.


Detail View of the iPad App. Mouse-over to see HTML elements and classes.Detail View of the iPad App. Mouse-over to see HTML elements and classes.
Image: Simon O'Shea
Source: MV


The Styles 

The styles for the Species page templates are contained within the linked files style.css and style-iphone.css. I’ve written a number of properties assigned to HTML elements, classes (.) and IDs (#).

Please note that because this is an app for iOS and it’s using the latest Safari rendering engine, there are many CSS properties that may not display when testing in your standard desktop web browser. In particular I’ve used CSS3 properties such as gradients, transformations and animated transitions as well as –webkit specific properties that may not yet be standardised CSS. These fancy styles allow you to push the boundaries of HTML and iOS and can significantly save load time and file size. However, it is worth noting that in order to view them on your computer, you’ll need to test them in a recent version of Apple’s Safari or Google Chrome and to get the best results you should test their compatibility on various versions of iOS.


The Images 

Another advantage of using HTML and CSS is that you can save on the amount of images you use. For example each icon used on the Endangered Status widget is an 88px x 88px image. Simply setting a width and height of half the dimensions (44px x 44px) in your CSS means that the icon will render crisply for both the Retina Display and regular displays using just the one image file.

Another example of cutting back on images is using CSS entirely to create graphics. The Endangered Status ‘tracks’ and ‘bars’ are made entirely of CSS gradients and rounded corners. This means that they require no image files and are resolution independent, looking great no matter how far the user zooms in.

By now you’re probably exhausted, so I think that’s enough! If you have any questions, comments or suggestions, please don’t hesitate. We look forward to seeing what you can build on top of our Field Guide. Good luck with your app!

<< A Face For Your Field Guide: Part 3  |  704 days later >>

Comments (8)

sort by
Eleanor 15 March, 2012 16:55
I played with the app on a friends phone last night and I love it! Brilliant work by all involved. I would dearly love to see the app available on the android platform also. Obviously these things happen one step at a time, but are there plans for that in the future? Please say yes!
Discovery Centre 16 March, 2012 12:39
Hi Eleanor, we're glad you like the app, regarding the android query we have received quite a number of requests such as yours and have thought about doing this. Unfortunately, we don’t have the resources to do produce one in house. We have recently released the source code and people are therefore doing their own android conversions.
Carla Khoo 14 June, 2012 18:50
Hello there! I'm really dissapointed that I can't download this onto my Samsung Galaxy - why make it only available for Apple products? Shouldn't learning be accessable via all mediums? Warm and heartbroken regards, An avid animal watcher
Discovery Centre 15 June, 2012 11:26

Hi Carla,

The Field Guide app was originally released only for i-devices (iPhones, iPod touch and iPads) as this was what we could manage with the funds and in-house developer skills. We have received a number of enquiries about getting the Field Guide released for Android devices. We’re pleased to announce that we have received a grant from the Federal Government under the Inspiring Australia program that will allow us to create a version of the Field Guide for Android devices. We anticipate releasing this later in 2012.

As well as creating the Android version, the new grant will allow us to address another common feedback comment – “can you do one for Queensland?” or “I live in NSW, is there an app coming for us?” Using the Inspiring Australia grant, we will work in collaboration with six other Museums around the country to create a series of apps for animals right around Australia. These apps will have a similar format and presentation to the existing app, will also be free, and will be released for both i-devices and for Android devices. The new apps are due to be created over the next year and we plan to have them all delivered by December 2013.

Noah 17 February, 2013 10:05
After toying with the app for some time now, I love how the code works. I did notice that I cannot get any other audio file name than bloop.mp3 to actually play. I went so far as to rename a file of different content to bloop.mp3 and it works. Just something in the name? Also, when changing markup (%distinctive%) which documents need changed? We are even thinking of adding new markup, so with additional categories, etc. where will these need added to the list. Oh, and another thing, how do you add/customize the widgets. Any help would be great, and keep up the fantastic work! Sorry for all of the questions. I love the app!
John Brisbin 17 February, 2013 22:06
Hi guys: very excited to hear about porting to Andorid. What IDE will you be using? Will you put this up on github so maybe you can have others join in? Keep up the great work...looking forward to the FNQ version (funky north Queensland...we've got all your tree kangaroos, remember?)
Antonio 8 June, 2013 00:59
I'm not sure any devs still read this, but I have a problem with the code. I'm using latest xcode and latest iOS SDK (6.1) so I had to do some small modifications (to make rotation work for example). When launching the app in landscape mode on iPad, the animal picture in AnimalDetailiPad.m has wrong dimensions. If I rotate the iPad the image dimensions are correct again. You can find a picture of the bug here: http://imgur.com/ZON84Lo Do you have any idea how to solve this? Thanks, your app rocks!
Mark D 17 June, 2013 03:13
Bell minor missing from field guide?
Write your comment below All fields are required

We love receiving comments, but can’t always respond.

About this blog

We've released the source code for MV's Field Guide Project under a MIT style license. This blog will help you identify all the material you need to collect so that you can publish a field guide of your own.

MV's Open Sourced Code on Github

View all Museum Victoria's apps

Blog authors

Simon S is the programmer behind the field guide app.

Simon O is the designer behind the field guide app.