1. Interactive history

2. To provide a visually attractive and interactive timeline of the major scientific discoveries throughout history.

3. I’ve always been interested in the history of science and what provoked people to find out more about space and the natural world. It’s difficult to get a sense of how a subject develops from the list of discovery dates alone, but an interactive graphic timeline is more engaging and more likely to hold the viewers attention.

4. The target audience is still members of the public with an interest in the subject. The language is comprehensible. There is:  Text  Links  Pictures Suitable for all ages

5. The timeline is populated with clickable boxes and dots. Yellow boxes indicate more information on the event. For yellow box events there is:  Text up to 130 words  3 or 4 links  a picture. Content can be accessed through the visual timeline or through text timelines

12.  There are 4 ways to scroll through the timeline – Jquery  On rolling over the link, a description of the event appears – Javascript  Navigation through individual pages – Rollovers  Positioning in the event page – CSS

13.  Text timeline navigation and other support pages  Comparison of timelines

15.  - minimal clicks  - comfortable user experience  Layout  Colour  Scannability  Usability  Accessibility  Compatibility

16.  Logo is the corner and sitemap at the base.  Because it’s a horizontal website, the navigation is at the top and bottom.  Pictures on the timeline make it more lively.  Z-index used to feed nav bar into container to show connection.

18.  Navigation is intuitive. The guidelines on the main timeline go off left and right and are ordered with ascending numbers which indicated the website continues left and right.  The vertical lines at the back show the progress of scientific activity through the decades and centuries, which helps the user get a sense of the context in which the discoveries were made.  Each box contains only a small amount of information. Just date, name, discovery and nationality so the information can be taken in quickly and easily.

19.  Clear from the top where the user is  The links with dates on either side provide context.  CSS styling used to position boxes, text and links

23.  I decided I liked the combination of dark red and sandy yellow and found two colour schemes on Kuler that included both.  They were ‘Campfire’ and ‘Copy of burnt clay’. I kept these in mind throughout development and used the ones I liked.  The colour scheme is consistent and, aside from white, black and gray, only five colours are used throughout, which is the recommendation.

26.  Buttons highlight to show location  Navigation at top and bottom so choice with user  Instead of overloading the top nav bar, there is a drop down at the end indicated by an arrow.  Multiple navigation methods on timeline:  Nav bar buttons  Mouse scroll  Keyboard arrow keys  Draggable scrollbar

29.  Some people, such as the partially sighted, will be using screen readers to view the site and it will be difficult to get a sense of the timeline from the main pages. This is the main reason for text timelines.  Alternative methods of navigation improve accessibility,  Full CSS styling puts the user in control

31.  I had to include this code in the header to make the site accessible in older browsers.   #supWrapper {  /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/supWrapper_ie.png', sizingMethod='scale');*/  background:none !important;  }   It degrades gracefully if javascript is switched off - the scrolling bar is not javascript dependent and the CSS gradients and radius styling have alternatives.

32.  Right-hand navigation. Title tags link to all subtags  CSS posts - lots of links to favourite sites  Design principles posts - it details how I learnt about colour and layout in particular  Rich media - it shows some Photoshop techniques I used for the images on the site

33.  Website tag brings up all pages with Websites  Images tag does the same for images  Tips and tricks  Project tag charts progress - I’ve hosted the project as it’s different stages on an external website so it’s possible to look back on the site’s development.