The Boar Online Final Project Analysis http://theboar.ca
Mohammad Jangda | http://digitalize.ca | mo@digitalize.ca
This work is licensed under the Creative Commons Attribution‐Share Alike 2.5 Canada License. To view a copy of this licence, visit http://creativecommons.org/licenses/by‐sa/2.5/ca/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
Technical Overview The project was built on existing platforms in wide‐use to support ease of implementation and a minimal learning curve. As The Boar is still in its early inception stages, costs of the project were to be kept minimal, and platform choices were restricted to free and open‐source options. The website was built using Wordpress (www.wordpress.org), an online blog‐publishing platform. While primarily intended as a blog engine, the flexibility Wordpress allows for customized displays and data extensions via custom meta‐data making it easily extensible to other applications. As such, it was an easy choice to work with for a publication. Mimbo, an existing theme for Wordpress created specifically for magazines, was modified extensively to adapt to the planned site structure and The Boar look‐and‐feel. The digital edition was created using Adobe Flash, which lends itself very well to interactive user interfaces. The widespread deployment of Flash also made it a prime candidate, as opposed to other technologies. The digital edition was built on top of an open‐source Flash project called “Page Flip” created by Steve Palmer of 76 Design (http://76design.com/shiftcontrol/index.php/2006/08/22/dynamic‐page‐flip‐v2/). Page Flip allows a Flash designer to compile images or Flash documents into a flipbook style animation that a user can browse through. Various enhancements were made to Page Flip, including a interface overhaul to replace the rudimentary interface included with the package with one that again, matched The Boar look‐and‐feel. Additional functionality was added which allows for integration of comments and a table of contents to allow for easier browsing and more interactivity with the digital edition.
Design Overview Many design choices on the website were chosen to match the many design patterns existing in the print magazine. The minimalistic colour palette consists of the magazine's three core colours: orange, blue and gray, along with a minimal number of complementary colours. Fonts on the site are mostly serif to follow with the classic, arts style of the magazine. Similarly, the basic layout of an article was Mohammad Jangda | http://digitalize.ca University of Waterloo (DAC 400) Page 2
designed to closely match what one would see in the magazine, for example, displaying the article title followed by the content type and then the author’s name, in the article’s header.
The layout of the website itself was adapted from similar styles used by websites of mainstream magazines such The Walrus, as well utilizing general design patterns used by publication websites across the board. Some of these include large feature stories on the main page, and embedded tools within each article to enable sharing, printing, discussion, etc. The website is also extensively catalogued to allow for maximum points of entry to the content. Users can view content as decided by the publisher on the main page, or deep‐dive into the content lists by section, content type, or author. This will enable easier searching for content as additional issues of The Boar are published.
The interface of the digital edition leverages existing user interface patterns from existing publishing portals such as Scribd and Issuu. The iconography and overall layout of the digital edition was heavily inspired by the Issuu online reader, which has one of the more prolific and efficient interfaces of any application on the internet. The colour palette and font choices again, were chosen to match those of the print magazine. Easy access points are provided into the digital edition: all pages have a jump point from the sidebar by clicking on the magazine cover. Additionally, single articles are linked to the digital edition which allows the user to jump directly to the page in the digital edition where the article can be found. As the digital edition is developed further into a more concrete product, users can be given a splash page where they can choose their preferred mode of viewing, which would be remembered for future visits.
Opportunities for enhancement While the website is largely functional, the digital edition is still in a preliminary prototype state and requires much work to be done. Publishing the digital edition is largely a manual process. The PDF must Mohammad Jangda | http://digitalize.ca University of Waterloo (DAC 400) Page 3
first be converted to Flash‐compatible SWF files ‐‐ currently done using SWF Tools (www.swftools.org) ‐‐ , and then compiled into the digital edition via an XML file, which must be manually written. Creating a toolkit that automates these functions and places them in one continuous workflow, while still allowing for extensibility, can ease the publisher’s pain when producing a digital edition. Existing publishing portals like Scribd and Issue do allow for this to a certain extent. Users of these services simply upload a file to the portal, which is then automatically converted and prepared for publishing as a digital edition.
The core strength (and certainly where it excels when compared to existing publishing platforms) of the digital edition of The Boar is its tight integration with website comments. However, further opportunities to extend this are available. Extracting all functions available on website and enabling them on the digital edition can provide a richer browsing experience. Such functionality includes:
Ability to search within the digital edition Embedded annotations on pages much like Flickr allows with images Smart logic that provide links to similar articles, referenced materials and related websites
Given the capabilities of Flash and its ability to create fluid and extremely dynamic interfaces, we can create an entire experience around the digital edition. cooliris (www.cooliris.com) is already providing an immersive experience with photo and video sites by creating a 3D space that the user can fly through and select the content they desire. In fact, HTML, CSS and JavaScript are enabling dynamic interfaces of a similar caliber as demonstrated by Zoomii (www.zoomii.com), which allows a user to navigate through Amazon using visual bookshelves. The main point is that using these technologies, we can create an interface that allows the user to browse through digital versions of magazine, access issues, past and present (as well as similar magazines) and interact with the community at‐large from within this interface, taking reading, which is normally a solitary activity and converting it into a community‐focused activity.
Mohammad Jangda | http://digitalize.ca University of Waterloo (DAC 400) Page 4