Aimee's Blog

BAD

I’ve decided to start with the bad news and there is quite a bit coming from the bouncy castle industry. Some examples below.

http://www.allseasonshire.co.uk/

This website typography is difficult to read, inconsistent. When the web page loads the top logo does a 3d swirl which is terrible. Behind some of the  text there are drop shadows which do nothing for the readability or tone of the text. The telephone number on the top weaves around a red star! All in all this is incredibly bad!

http://www.bounceaboutcastles.com/

Although this site mainly uses verdana it uses 6 different colours and sizes of the text. I think this would probably be fine if there was a logical structure to their font use but this does not seem to be these case. This website also has the scrolling top banner with a lot of text at the top which it difficult to read.

http://www.clubdecor.co.uk/TECHNICAL.html

The website fonts used for the logo on this website vary. On one section they have a static image and then they have a rolling set of lines which create another logo image which is difficult to read. Although the font that they have chosen is quite standard the text disappears into the background until it is unreadable towards the bottom. Also, the person that put this website together used images in place of the body text.

GOOD

I was going to continue with the bouncy castle theme for the good typography websites but couldn’t find any!

http://www.wallpaper.com/

Nice clean and simple fonts which are readable and set the tone of the content well. This website is quite visual so it’s good that the fonts aren’t too attention grabbing.

http://www.smythson.com/

The fonts used in this website display contemporary and classical and work really well for this brand and message that they are trying to convey.

http://www.mamashelter.com/en/

The typography used on the Mama Shelter website is really great. The contrasting colours they have used draw your eye to the messages that the hotel are trying to convey. It looks like the website migh be using Javascript to pull their stylesheet through. EDIT: They’ve created custom fonts for the website and import them using the follwoing code:

@font-face{font-family:”Mama Shelter”;font-weight:100;src:url(/fonts/mamashelterthin-webfont.eot);

The Good:

http://www.vodafone.ie

Nice subtle use of colours with matching colours in the images. Red to re-inforce the branding. East to read contrasting text.

http://www.apple.com

Again this website uses good subtle contrasting colours which are simple yet work well.

http://www.facebook.com

Good use of blues and contrasting colours with shadows. Branding is subtle yet distinct.

The Bad:

http://milliondollarhomepage.com/

I’ve included this because although the website itself has an OK colour scheme the pixels that have been purchased by the various companies are a mad wash of different colours which makes the website very difficult to look at.

http://www.johntitor.com/

This website is very difficult to read. Although the white text on black background gives good contrast this is too much for the body text and the blue headings are terrible.

http://www.stevenlim.net/

The highlighted yellow text is difficult to read and the red text on the white background is also an eyesore and then the text colours change to blue and then black so it’s confusing for the reader.

10/1/2012: found another one here:
http://www.fabricland.co.uk/

Sources:
http://www.webmaster-designs.com/bad-website-designs/
http://www.webpagesthatsuck.com/

Hyphen V Underscore

When creating image, files or directory names two common word separators are either hyphen or underscore. If a hyphen is used then most search engines will treat this as a space therefore improving your index-ability for key words that you may be targeting. When using an underscore the search engines will not treat this as a space and this will mean that if a user was trying to search on the search engine they would need to include the underscore (this is preferred if you do not want your files/images/directories to show up under certain search terms).

Alt Attribute for Decorative Images

The alt attribute does not need to be used for decorative images. The alt attribute is meant to provide a description of the image for the user only if they can’t see it for some reason and providing this for decorative images may cause confusion. In this case the  alt tag should be included but be left blank as follows: alt=”"

Setting Image Widths

It is important to set true image widths and height attributes in the img tag. This allows the browser to prepare for the images and stops the text from scrolling as the page is loaded.

ID Selectors

ID selectors can be used only once on each web page. Precede the name with the # character. Classes are used for styling multiple items but ID selectors are used to define once-off page elements such as a footer or a heade.

Inline Styles

Inline styles are deprecated in XHTML 1.1.

The Cascade & Multiple Stylesheets

When using multiple stylesheets the cascade principle still applies. That is to say that rules in a second attached spreadsheet would be the ones that are used – overriding the first attached stylesheet.

Language Declarations

Not only can you define the language being used at the start of a web page but you can also define different language sections within  a page for example if you had a French quote within an English page.

HTML Strict

Doesn’t allow the use of presentational markup.

Content Type, Meta Tag

Can be placed anywhere in the head but some browsers struggle if it’s not the first item.

Universal Selector

* {
margin: 0;

padding: 0;
}

This will set all the elements in your stylesheet.

Much of this has been learnt from The Essential Guide to CSS and HTML Web Design by Craig Grannel.

The Dead Sea Squirrels, an upcoming indie rock band from Sheffield.

The Vines

http://thevines.com/

This is an extremely visual yet well designed site. The site is colourful and has easily recognisable social media icons and very strong branding. Even the background image matches the cover of their new album.

The Artic Monkeys

http://arcticmonkeys.com/

These are an Indie band from Sheffield so I thought it would be good to look at their website for a comparison. It is good that on their homepage there is a stream of their music. they have their gig listings and their layout is simple yet quirky as the navigation bar scrolls with the page.

Clap Your Hands Say Yeah

http://clapyourhandssayyeah.com/

This band again have a simple but quirky site which is quite visual. They have also used a great image scrolling technique which I think it really interesting.

Beech Farm, a homely bed and breakfast in Cornwall

 Canopy & Stars

http://www.canopyandstars.co.uk/

This website is extremelyvisual yet siple and uncluttered. The website is really well thought out with some great search featues amongst others.

Homelye Farm Bed and Breakfast

http://www.homelye.co.uk/around_homelye_farm.html

This website uses a drawn image to illustrate the workings of this farm/B&B. The colours are warm and welcoming and even the names suggests homeliness.

Watergate Bay

http://www.watergatebay.co.uk/

This website focuses quite heavily on demonstrating the values of Cornwall as a destination. The background is sand/beach and the homepage is full of images of the beach. There is also build in a lot of social media icons and the purple is very welcoming.

Sawdays

http://www.sawdays.co.uk/

Although this site does not display a singe B&B I thought that the use of visuals was quite good and that they offered some good functionality around displaying what each location has to offer.

Primary Health, a private healthcare company based in London.

Elite Healthcare

http://www.elitehealth.com/luxury_healthcare.php

This website is clean, professional and friendly. There are subtle shadow layers and the website is is using visuals and words to put across the message of luxury/corporate health care.

Spire Health

http://www.spirehealthcare.com/

This website’s colours are similar to the ones used in the website above. The green is subtle and the website has good clear navigation.
 

Soundcloud
http://soundcloud.com/

I like this website because it is easy to use, clean and well thought through. I also like the functionality that it offers.

Daft
http://www.daft.ie

Property sales and letting search website based in Ireland. This website’search features have everything that a user wants when searching for a house.

Hostelworld
http://www.hostelworld.com/

Search thousands of hostels online with a good user community and various recommendation levels. Nice design too.