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.
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.
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!