Introduction
This report details the design and construction of a website, World without water designed to educate and inform people about water conservation. It details the creative process of design and the technical process of construction as well as highlighting some strengths and weaknesses as well as expansion of the project.
Research
When looking into the concept of world of water research was done into competitors and peers. One of the biggest names in comics is marvel and so it was the first website i visited to do research. I was immediately struck by how visual it was. They have managed to strike a good balance between clean cut web 2.0 feel and good strong comic book visual.
At the top of each page there is a scrolling banner which helps the inner pages look less cooperate. These lay emphasis on the comic books themselves and away from products.
The second website taken as an example is home to the webcomic used as an example comic on world without water. This has a much more grungy independant feel as it is a webcomic maintained by a student.
World without Water aims to fuse these two different approaches into its own design.
Ideas Development
Several moodboards around the theme were created to give a feel of the kinds of imaergy and colour that would be used throughout the site.
The added element of a comic that readers can view every week evolved from the marvel native application to read their comics.
Design Rationale
World Without Water is a comic book based website that helps pre and early teens find out about water conservation in a fun and interesting way. The comic the website is based around is a custom comic made for the purposes of the website, set in a post apocalyptic world where there is no longer easy access to water.
The comic itself is designed to illustrate what the consequences of lack of water conservation are, as well as demonstrating how to conserve water today using techniques from the storyline of the comics. A new page is added each week to the web comic which is split up into issues.
The design of the website is based around conventions of web comics combined with the look and feel of a web application. This meant striking a balance between the authentic paper and sketchy styling a of independent websites and the glossy feel of corporate web application sites made for large companies.
The website is a grungy style using comic book and handwriting fonts effectively set in a Web 2.0 feel frame with gradient toolbars. These toolbars move away from the grey, blue or black application bars and have been made a rustic yellow colour to fuse the two elements together.
The website is an accompaniment to a game application for tablets and smart phones. EXPAND
Interactive elements are key to the website because of the young target demographic and elements such as webisodes take advantage of built in smart phone technology.
Target Audience
The webiste is primarily aimed at pre and early teens 11 – 16 of high school age of both genders though it has slightly more interest to boys. However it is also of interest to comic book fans, computer game fans and visual design/digital art fans. It is aimed at people with interest like these that are creative imaginative and indulge in fantasy or sci fi type hobbies eg. Board games
Design Fit to Target Audience
One of the most important specifications of the website is to fit the trend toward mobile devices and tablets as it is aimed at such a young audience. This meant designing the website around a multitude of screen resolutions which had a big impact on design.
Information Design
The website has a splash page as some users may be looking for the location of the game application and been directed to this website via search engines, as it is the games official website. The user is given a choice to get the game or proceed to the website.
On the first page the story and world is set out so that a user can immediately understand what the website is about. This home page is split into 3 sub pages In the beginning, The story so far and Characters. The first section, opened by default, sets the scene for the comic and websites purpose, The second section is regually updated to match with the comic as the story unfolds a little more each week and the final section gives a view into each character within the comic and their role.
The second link on the main navigation is for the comic. When clicking the comic link you are taken to a page that shows the current issue of the comic open ready to be read. Previous issues of the comic are in a table below. Each comic has its own subnavigation. This gives readers a chance to read the comic, an overview of the comic or the fact-sheet that comes with it.
The third navigation link is for the webisodes section of the website. These are short animation movies that go with the comic which show users how a task in the comic was done. Each webisode has its own sub navigation. This gives viewers a chance to view the episode, see the step by step guide or the fact-sheet that comes with it.
The fourth section is for the game. This section has a table that shows the leader board of points for users of the game. The game page is split into three sub sections Mission HQ, which explains the game, Online missions and Real world missions. These missions give users the chance to up their points and themselves up the leader board.
The facts section relates this imaginary world to our own and tells readers how they can help conserve water in our own world before it is too late and we live in a world like the comic.
‘Every web page needs:
- An informative title (which also becomes the text of any bookmark to the page)
- The creator’s identity (author or institution)
- A creation or revision date
- A copyright statement, Creative Commons statement, or other statement of ownership to protect your intellectual property rights
- At least one link to a local home page or menu page, in a consistent location on all pages
- The home page url’ (Lynch, 2008)
Navigation
The main website uses fixed positioned navigation at top with words for each page however the responsive design switches to a bottom navigation bar for smaller devices. This navigation is image based using icons with smaller labels underneath. This is the main navigation that is constant throughout the site and visible even after scrolling the screen.
The main navigation leads to the Home, comic, webisodes, game, and facts sections. Each of these sections has their own sub navigation to three sub pages. This is a simple way for users to find exactly what they want.
‘In web sites paths are the consistent, predictable navigational links that appear the same way throughout the web site. Paths can be purely in the user’s mind, as in your habitual navigation through a favorite newspaper site. Paths can also be explicit site navigation elements such as breadcrumb trails that show you where you are in relation to the overall site’ (Lynch: 2008)
In order to aid better navigation I added a breadcrumb to the website. This breadcrumb shows a user where they are helping them travel backwards to pages they have previously viewed. The breadcrumb is located after the article area on a standard desktop screen however to aid navigation on smaller screens it is fixed to the top if the page.
World without water also uses a jQuery plugin called flexislider to aid navigation and make reading more fun on mobile devices, sliding between pages.
Usability and User-friendliness
Don’t make me think is a book that heavily influenced the interface of this design, trying to simplify all actions as much as possible, limit the number of pages and links and group together relevent information into fewer section. The website was originally 8 pages and has been shrunk to 5. The navigation has been made clear and obvious and been fixed to the top or bottom of the screen to keep the placement of these links depending on a users device..
‘It means that as far as humanly possible, when I look at a Web page it should be self-evident. Obvious. Self-explanatatory.’ (Krug: 2005)
Visual Design & Language
World without water is a creative website that is image heavy and striking. More images then usual applies to younger audience and comic book, computer games and visual design/digital art fans. These make up a large part of the websites target demographic. The lanuage used is an Informal and colloquial language, this is for familiarity and ease of reading forits younger audience not wanting to seem ‘uncool’.
To fit with many comic book websites the style of the website was decidedly dark however still easy to read. To help with this the website was center aligned within a container set on top of a textured black background.
The bulk of the important information is held in a section that has a textured paper like background so not to make reading difficult without moving too far from the comic book theme and concept. This gives a artist feel with an almost behind the scenes feel to the creation if the co if in its original sketches stage.
In order to stay close to the theme and styling a of comic books very visual and detailed images are used on the header of every page. Elements designed to look like the banner text in comic books are used to add headings and subtitles or important information on top of these banners
World without ater uses a collection of comic book fonts which are provided by the google fonts api.
font-family: ‘Patrick Hand SC’, cursive;
font-family: ‘Special Elite’, cursive;
font-family: ‘Averia Sans Libre’, cursive;
Design Implementation
In the construction of the original blocked out html Nathan smiths 960 grid was used. However it was decided that a more responsive design be used to fit with the target demographics high use of smart phones.
“The 960 Grid System is an effort to streamline web development work flow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.” (Nathan Smith)
The more flexible framework unsemantic was used.
“Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages.”
The grids are labelled with two classes, one for desktop and one for mobile. This allows for the divs and sections to change their width dependent on the size of the users screen.
Screenshots of the Desktop, tablet and mobile versions of the blocked out html show how the navigation and information changes based on the resolution.
As the website took shape the bottom navigation was styled using gradients to the for app feel and the words replaced with icons. In order to make the icons load quickly css sprites were used. This meant that only one image is loaded and using the background-position css tag a different part of that image would be shown.
Testing
As one of the centric elements to world of waters concept was responsive design and the ability to use the website whilst ‘on the go’ from phones and tablets, testing on these devices was very important.
Although when viewing the website in a normal browser at the size of an iphone screen the icons are fit perfectly the actual iphone screen showed that there was a problem with the icons fitting in the list item correctly. This was fixed using a div as a break and making a slight change to the css.
Other small changes needed to be made to the css to accommodate for the change in orientation on tablets. These involved moving titles higher up and other small changes as you can see below the original display had some elements unintentionally covering other.
Within the form elements I found that the calendar produced by new html5 tags worked in chrome and did not work in safari. However the user is still able to input their details, this appears to be that these html5 tags are not yet supported in the latest release of safari.
After the initial website design was finished and before all of the content was placed screenshots on different platforms with different browsers were generated using browsershots.org. Unsurprisingly there were only minor differences between each on the mac operating system screenshots as the website was designed on a mac being routinely visited from several different browsers.
In the example below between safari (first) and firefox (second) you can see that the only difference is a minor one effecting the information displayed on the video overlay. This is also the only element on the page that is taken from another api and therefor cannot be changed (or fixed)
However the windows screenshots were less consistent and required large amounts of nips and tucks. Opera was very uncontrollable and as a result still displays badly with this browser.
When validating my website with w3c validation service i found several errors, However most of these were due to the iframe and the use of an old align tag in the img links. The alignment was written in using css and the float tag and taken out of the html.
These css was full of errors however upon closer inspection i found that all of these error involved using new tags. Either the tags used to apply shadows, gradients and rounded corners were flagged up. I decided to leave these errors in as it is more important to the design of the website that it be comic book like with these styles then have a valid css.
Difficulties Encountered & Solutions Applied
A problem with the responsive design meant that when shrunk the buttons used for sub navigation lost their gradient background. Although many different changes were made to the css and even a new class was created it was unable to be rectified and so they currently have no background.
Responsive site images too big take up too much room. flex-slider to fix images making things ugly
The unsemantic framework has css classes to hide elements based on the device width of the user. These classes use media style sheets to change the ‘display’ style tags depending on the width of the browser. By adding the class ‘hide-on-mobile’ to the image tags they are seemingly removed from the article sections text.
Strengths & Weaknesses of the Website
What was learned?
Responsive design was not required for this website brief however it was felt it was really fit to the audience. Using the unsematic framework was not sufficient and several @media stylesheet rules needed to be created.
The jQuery libary was used to create effects including the illusion of a popup and the changing of content for the sub navigation. If i created World without Water i would find another way to change the information in each section. I think this website would be more extensible and easier to run using a content management system and a database.
As a finishing touch i added some mobile specific meta tags that allowed for the website to be added to an iphone users home screen and opened without the safari browser buttons in fullscreen mode. This means it can be used as a web app. I also created a splash screen to emulate the one used in the native marvel app when a users visits the site this way, giving it a very application feel.
Conclusion
World of water has fit its brief and created a very good cross browser and device compatible website for pre and early teens to learn about water conservation. It has been completely designed arround a centric theme of comic books and all of the techniques and effects used within the construction of the site are appropriate to this.
Images
