Getting Creative With CSS

http://versionsapp.com/

Design Exercise Complete

Here is my finished restaurant website. I plan on offering to sell this website with improved functionality and a CMS which I will build with Phil to The Golden Fleece pub.

http://www.erebusstyx.co.uk/goldenfleece/

http://maeda.ads.ntu.ac.uk/~n0191521/goldenfleece/

Light Box

http://www.lokeshdhakar.com/projects/lightbox2/

Design Exercise: Analysing Restaurant Sites

I decided to browse through some of the more sophisticated dining restaurants in Nottingham and luckily, I found this, the "Nottinghamshire Restaurant Awards". So I took a sample of 5 websites to review to develop a better understanding of what is required (or in some cases not required) to produce my own effective website...

1. www.mem-saab.co.uk
   
   Memsaab won the award for best Indian restaurant, unfortunately for them I don't think they would win the award for best website. The most disappointing thing about their site is that it is entirely in Flash, with no HTML alternative and that it doesn't even make an effective use of the medium. Images and text fade in, which is nice but that is as ambitious as it gets, this could easily all be displayed in static reliable, accessible HTML/CSS. Oddly enough the website is even laid out in a very similar fashion to an HTML/CSS site, with a constant header and navigation along the top, only the content below this changes. This is a classic example of an ineffective use of Flash, all of this could have easily been achieved using more conventional scripting languages but because of Flash...
   
   
   
   • Pages takes longer to open (typically 2 to 10 times more)
   
   
   • The user must wait for the intro to complete
   
   
   • A plug-in must be installed (and updated every few months)
   
   
   • Animations are impossible to ignore
   
   
   • Navigation controls, such as the URL and the Back button, don't work
   
   
   List from Flashsucks.org
   
   
2. www.ibericotapas.com
   
   
Again this website could probably be achieved without the use of Flash and again there is no HTML/CSS alternative. Fortunately "Dark Water Designs" seem to have a better understanding of what makes Flash interesting. The website features many interesting animations and fade ins, it can't be denied that the website is very well presented with effective navigation. The only major issue is accessibility but I imagine most of Iberico Tapas' intended demographic will have a Flash plug in or be capable of installing one.


3. www.delilahfinefoods.co.uk
   
   This website has been made exclusively with HTML/CSS, from checking the source code there is no sign of Java or any other dynamic code. It appears that this site has been produced by a single free lance web designer, as there is no sign of design brand and the source code is very uniform, nicely laid out and easy to understand. The website is clear, tidy and functional, perhaps my only complaint is that there are two navigational menus. One menu is at the top, for what appears to be key content navigation and the left side menu for other details such as location and contact. There is almost no nested content so despite having two menus is fast and easy to find what your looking for. I also like that there is a different colour styling to each page without using different style sheets.



4. www.larwoodandvoce.co.uk
   
   Again this website is predominately HTML/CSS but looking at the source code there is a little bit of Ajax. The navigation is relatively straight forward but again there is top and side navigation. There is very little nested content apart from the home page where there is dual top navigation that seems arbitrary and inconsistent with the rest of the site and almost suggests the developer used an existing style template. Another complaint would be that clicking on the top banner takes you to a 404 instead of a the home page which suggests the site hasn't been thoroughly tested. Apart from these subtle flaws the layout is nice, content is easy to find and there is a nice image gallery that uses Light Box 2.0.



5. www.worldservicerestaurant.com
   
   What's nice about this website is that it takes many different scripting methods and combines, HTML/CSS with Flash elements and Java navigation. Apart from this the most interesting feature is that all information is displayed horizontally, unfortunately this is flawed in two ways. Firstly, although the emphasis is on the horizontal, the website is still so large vertically that you cannot display the whole thing in a standard 800x600 browser window. In fact you can't see any of the navigation and you can't scroll down to see it either as the content is in a Java drop down. Secondly, there is so much information that needs to be displayed, that the designer has resorted to using vertical scroll boxes. ThiS pretty much leaves the idea of horizontal space redundant. A nice idea but poorly executed.