Docstoc

Critique

Document Sample
Critique Powered By Docstoc
					                     Assessment 1 Critique:
                     Nutritional Therapists' Resource
                     http://people.exeter.ac.uk/mm336/mit2100/assessment1/




Student Number:   570022965




MIT2100 - Aspects of Web Design
Assessment 1 - Navigation with CSS Critique
12/5/09
Table of Contents
Introduction ................................................................................................................................ 3
   The Existing Website ................................................................................................................ 3
   Layout...................................................................................................................................... 3
   Design...................................................................................................................................... 3
   The Navigation ......................................................................................................................... 4
   Screenshots ............................................................................................................................. 4
   The Proposed Website ............................................................................................................. 5
   Overview ................................................................................................................................. 5

Planning ...................................................................................................................................... 6
   Background Research ............................................................................................................... 6
   The New Navigation System ..................................................................................................... 7

The Website ................................................................................................................................ 7
   Layout...................................................................................................................................... 7
     Navigation ....................................................................................................................................... 7
     Pages ............................................................................................................................................... 8
   Design...................................................................................................................................... 8
     Images ............................................................................................................................................. 8
     CSS Styles ........................................................................................................................................ 8

Accessibility ................................................................................................................................. 9
   W3C Validation ........................................................................................................................ 9
   Accessibility Validation ............................................................................................................. 9
   Colour-blindness ...................................................................................................................... 9
   Browser Compatibility ............................................................................................................ 10

Conclusion ................................................................................................................................. 11
   Summary ............................................................................................................................... 11
   Benefits ................................................................................................................................. 11
   Drawbacks ............................................................................................................................. 11

References & Resources ............................................................................................................. 12
   References ............................................................................................................................. 12
   Resources .............................................................................................................................. 12




MIT2100                                                               Page 2 of 12                                            Candidate No: 570022965
Assessment 1 Critique                                                                                                                         12/5/09
Introduction
The Existing Website
The existing website, http://people.exeter.ac.uk/mm336/mit2100/assessment1/orig/, is in itself a
properly functioning website, but if you were to visit the website in the current era of internet
technologies and web design, you’d be like .. “what?”. The original websites design is very out dated,
and the poor use of colour and plain navigation does the site no justice. All in all, it’s not very
aesthetically pleasing, and rather boring.

Layout
The layout of the website is a very generic two column approach. This is where you have a main
column of content which holds the majority of the pages content, with a secondary side bar which
can be used to categorise the pages’ content and show additional content (see image below). The
website is left-aligned to the browser window, which is fine for lower resolution browsers, but for
hi/widescreen resolution browsers (like my 22” 1920x1080 monitor) there is a lot of white-space to
the right of the content. There is also quite a bit of white-space on the homepage underneath the
main content - this is because the sidebar navigation list is taking a lot of space - this is one of the
main things that will need to be addressed with the redesign.




                        Header
            Main Column                Sidebar




                        Footer


Design
The website’s design is very typical of early websites. Text and dull colours. No real use of imagery or
interesting colours, and therefore no aesthetic appeal. The website is however very clear and to the
point. The headings are well laid out, and stand out from the rest of the text, and so are the links.
The horizontal lines help to break up the header and footer sections. The design is also very
consistent throughout the website, which is very good for the user, as it doesn’t distract from the
sites content.




MIT2100                                          Page 3 of 12                       Candidate No: 570022965
Assessment 1 Critique                                                                               12/5/09
The Navigation
The current navigation system is getting out of control. There is too many links to choose from, and
although they are categorised by the different indentations of the bullet points, they are still quite
difficult to read through to find the link you are looking for. Another point about the navigation is
that it is in a non-standard position for a navigation system. Most websites have their navigation as a
‘bar’ along the top of the website, usually just below the sites title, or sometimes vertically on the
left of the page underneath the logo. Best practice would be to try and keep the navigation in the
place the user would expect to see it, it must come naturally to the user without them having to
search around the page just to find a link to another page.

The navigation issue is going to be the biggest part of the redesign.




Screenshots
Below are some screenshots of the original website in different browsers to show the consistency of
the website 4:




Figure 1 - Google Chrome                                  Figure 3 - MS IE 8




Figure 2 - Mozilla Firefox                                Figure 4 - Opera


MIT2100                                        Page 4 of 12                        Candidate No: 570022965
Assessment 1 Critique                                                                              12/5/09
The Proposed Website
URL:

http://people.exeter.ac.uk/mm336/mit2100/assessment1/
Overview
The new website brings with it a clean and clear airy feel which invites the user to come and have a
look at the site and its content. It’s neatly laid out without there being cluttered content or
navigation. The design of the site has a nice blue undertone with using white to accent the text. The
navigation bar uses a system of drop-down sub navigation menus which help to categorise the site’s
links.



Below are some screenshots of the proposed website:




Figure 5 - New Home page                                 Figure 6 - New Fruit's page




                                      Figure 7 - New Apple page



MIT2100                                       Page 5 of 12                             Candidate No: 570022965
Assessment 1 Critique                                                                                  12/5/09
Planning
Before I started planning the website’s redesign, I first looked at similar ‘competitor’ websites. I
didn’t read into the content too much of the different websites, I just wanted to get an ‘overall feel’
for them (as the current website is fictitious, there isn’t much of a market for made up information).

Background Research
I looked at 3 different websites in total:

                                                         http://www.foodalive.org/

                                                         This website is based around a centralised
                                                         layout which makes wide use of images as
                                                         links, and different boxes for sections of
                                                         content. The navigation system is right at the
                                                         top of the page, and is in a ‘tabbed’ style. The
                                                         navigation is big and clear and easy to read
                                                         and use - overall quite effective as a
                                                         navigation system (even if it is a bit sparse).


                                                         http://www.nutritionaltherapycouncil.org.uk/

                                                         This website is has significantly less content
                                                         on the homepage (similar to the one to be
                                                         redesigned). The navigation system runs
                                                         horizontally below the sites logo, as well as
                                                         vertically down the middle of the page. This
                                                         navigation system is rather dysfunctional and
                                                         confusing.



                                                         http://www.nutritional-therapy-online.co.uk/

                                                         This website makes better use of a structured
                                                         layout and a decent navigation system. Once
                                                         again situated horizontally below the logo, it
                                                         contains enough links to allow you to get
                                                         around the site. The design is also well laid
                                                         out and clear, although a better use of lists is
                                                         needed.




MIT2100                                       Page 6 of 12                           Candidate No: 570022965
Assessment 1 Critique                                                                                12/5/09
The New Navigation System
From the background research I did, I have decided that the navigation bar will be in a horizontal
position, underneath the sites logo. It shall also incorporate drop-down menus to extend the 1st tier
of navigational elements.

Once I had decided what type of navigation I wanted to use on the website was, I set about finding
out how to actually produce it. I already have a firm grounding in CSS and so could have done it off
the top of my head, but I decided to see how others did it - maybe there is a more efficient way.

Using “CSS Navigation Techniques (37 entries)” from “<CSS Showcase />” 2 I came across the best
implementation of what I wanted to achieve - the “Suckerfish Dropdown” 3. I studied the mark-up of
the HTML and CSS, and then went off and created my own version.




The Website
Layout

Navigation
As mentioned above, the new navigation system uses a multi-levelled drop-down system (see Figure
8 - Drop-Down Navigation). The HTML uses a series of unordered lists and list items (bullet points)
nestled within each other to achieve the sub-categorisation.




Figure 8 - Drop-Down Navigation

I have also incorporated a breadcrumb system which shows the user where they are in relation to
the rest of the site. The breadcrumb also provides a link to the page above it in the hierarchical
structure of the website.


Figure 9 - Breadcrumb
Pages
The layout is pretty similar to the original website. There is still the header and footer sections, a
main column, and a sidebar column. The only differences are the content in the sidebar column and
the addition of the horizontal navigation bar. Instead of the entire site’s navigation being in the
sidebar, it’s not situated in the navigation bar, and in the side column is an ‘overview’ of the sites
navigation, listing the higher level navigation nodes.

The site has a width of 900pixels, and sits in the centre of the browser window. I have decided to use
900px wide as these days common monitor resolutions are 1024x768 +.




Design
The aim of the website’s design is to provide a professional, clean and stylish feel & promote the
Nutritional Therapists' Resource in a positive manner. The site makes good use of CSS and imagery.

Images
There are only 7 images on the whole site (excluding content images). This means that the page is
quick to load, and it isn’t cluttered or overpowered by too many images. The images are there to
provide a graphical structure to the page. They allow for rounded corners (which is currently only
possible in CSS 3, but is not supported by all browsers yet), and shadow effects, and hover effects for
the navigation bar. The background image is a plain gradient which helps bring depth to the website,
as does the shadows of the main content area.

CSS Styles
CSS is used for the both the structure of the site and the design of the site. I have decided not to use
in-line styling, so there are lots of classes to suit the different needs of the website. There are 2 .css
files that are used: main.css - the main CSS file; nav.css - styles for the navigational elements.

The logo of the page is also styled using CSS. I chose to use a simple <h1> heading tag and then to
style that instead of creating my own logo image. The reasoning behind this is that it allows for
better accessibility, especially if the user has style sheets turned off.




MIT2100                                         Page 8 of 12                          Candidate No: 570022965
Assessment 1 Critique                                                                                 12/5/09
Accessibility
Whilst designing and developing the EURC website, I made sure that the site was accessible by:

         Including ‘alt’ tags on all images

         Labels on the form elements

         Keeping the HTML structured (tabbing)

         Keeping links descriptive (no “Click Here” s as these hinder up screen-readers)

         Relative font sizes

         Properly defined and semantically helpful tags for HTML and CSS styling

         I have incorporated accessibility functions throughout the project design/build process.




W3C Validation
All of the pages within the site adhere to the W3C validation services, specifically to the XHTML 1.0
Strict and CSS Level 2.1 standards. This is very important when designing and developing any
website, as it helps to ensure that the website is accessible over many browsers and operating
systems.




Accessibility Validation
To test to make sure my website was 100% accessible and usable I ran it through the “HiSoftware®
Cynthia Says™ - Web Content Accessibility Report” 6 and “Functional Accessibility Evaluator 1.0.1” 7
checkers, which checked my website against the ‘508 Standards’ and best practices. Both returned
as an automatic pass (no errors).




Colour-blindness
I also ran the new website through the “Vischeck” 8 online service which shows you what your
website would like to someone who was colour-blind. All results came back similar to what the
original website looked like, so colour-blind user should not notice much of a difference (a bit wishy-
washy).




MIT2100                                         Page 9 of 12                        Candidate No: 570022965
Assessment 1 Critique                                                                               12/5/09
Browser Compatibility
The new EURC website is compatible in the following web browsers:
     Windows XP/Vista:
           o Mozilla Firefox 2.0, 3.0
           o Microsoft Internet Explorer 7.0, 8.0
           o Google Chrome 2.0
           o Opera 9.64
     Mac OS X 10.4
           o Safari 4.0 (Mac OS X 10.4)
     Linux (Fedora 7)
           o Firefox 3.0
The screenshots below show the website in Firefox 3.0, MS IE 8, Chrome and Opera 5.




Figure 10 - Google Chrome                              Figure 12 - MS IE 8




Figure 11 - Mozilla Firefox                            Figure 13 - Opera




MIT2100                                     Page 10 of 12                      Candidate No: 570022965
Assessment 1 Critique                                                                          12/5/09
Conclusion
Summary
I feel that the original site was plain, dull, boring and very out dated. The new redesigned website
brings it back to life. The clean and clear airy blue theme helps lift the content off the page, and the
updated style fonts help bring it back into the 21st century. The new site is W3C and Section 508
validated and is very accessible. The enhanced multi-tiered navigation system adds further depth
and categorisation to the site, and the breadcrumb helps the user find where they are.

Benefits
         Clean design

         Easy to use navigation

         Aesthetically pleasing

         W3C standards valid

Drawbacks
         Fixed layout - under 1024x768 the browser has to be scrolled to access all the content. This
          could be fixed by using fluid layouts, but then the graphical elements may not be aligned
          properly at smaller resolutions.




MIT2100                                        Page 11 of 12                        Candidate No: 570022965
Assessment 1 Critique                                                                               12/5/09
References & Resources
References:
     1. Krug, Steve (2006): Don't Make Me Think!: A Common Sense Approach to Web Usability -
        Used as a guideline when writing the content.

Resources:
     2. http://alvit.de/css-showcase/css-navigation-techniques-showcase.php - CSS Navigation

     3. http://www.alistapart.com/articles/dropdowns - Suckerfish dropdown

     4. http://browsershots.org/http://people.exeter.ac.uk/mm336/mit2100/assessment1/                -
        Screenshots of the new website on different browsers and OS’s

     5. http://browsershots.org/http://people.exeter.ac.uk/mm336/mit2100/assessment1/orig/           -
        Screenshots of the original website on different browsers and OS’s

     6. http://www.contentquality.com/

     7. http://fae.cita.uiuc.edu/

     8. http://www.vischeck.com/vischeck/

     9. http://www.foodalive.org/

     10. http://www.nutritionaltherapycouncil.org.uk/

     11. http://www.nutritional-therapy-online.co.uk/




MIT2100                                      Page 12 of 12                     Candidate No: 570022965
Assessment 1 Critique                                                                          12/5/09

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:27
posted:8/28/2011
language:English
pages:12