Using different types of positioning

Z-Index: HTML | CSS – The first box has been changed to be level with box 4 (from the left) and be directly below it.

Static: HTML | CSS – Colour, padding and the margins have been changed.
Fixed: HTML | CSS – The distance from the left and the padding of the box has been changed.

Basic site using CSS and HTML

http://andrewbosley.pbwiki.com/f/Activity402.htm

There is the link – it’s not brilliant but i just wanted to get to the basics of CSS!

Finding out about usability or accessibility

Below is a list of aspects involved in usability from the website – http://www.usability.gov/basics/whyusa.html
Ease of learning - How fast can a user who has never seen the user interface before learn it sufficiently well to accomplish basic tasks?
Efficiency of use – Once an experienced user has learned to use the system, how fast can he or she accomplish tasks?
Memorability – If a user has used the system before, can he or she remember enough to use it effectively the next time or does the user have to start over again learning everything?
Error frequency and severity – How often do users make errors while using the system, how serious are these errors, and how do users recover from these errors?
Subjective satisfaction – How much does the user like using the system?

Checking for usability

Website checked: http://www.direct.gov.uk/Homepage/fs/en

“Public services all in one place” – all over the place.
It must be hard to organise so much information, but i would like to think it can be done better. Given sometime you can start to use it easier, but some of the links are too close together so you end up clicking on the wrong link. Reminds me a bit of Yahoo, which i don’t like either – but i’m told its quite popular!

Colours used – 3 (Just seems a bit too much in your face for my liking – Apparently i like depressing colours thou, so i will give it a 3 for the “non-depressed-internet-users”)
Site layout (e.g. use of tables, frames, etc) – 2 (Just want a proper navigation bar)
Fonts used – 4
Images used – 3
Navigation controls – 1
Hyperlinks – 4 (But some spacing would help)
Use of language – 4
Use of scripts - 4
Use of plug-ins – 4
Overall ease of use – 3
Overall ‘look and feel’ - 3

Example CSS

Heres the link to the example webpage – http://andrewbosley.pbwiki.com/f/ExampleForCSS.htm

Heres the CSS file used – http://andrewbosley.pbwiki.com/f/example.css

Advantages of CSS

Advantages:

• File size – It’s downloaded once and also means less size on HTML files
• Consistency – The layout remains the same on all pages
• Global changes – Easier to maintain the website and not worry about modifying or losing the content.

Disadvantages:

• Compatability – Doesn’t work on all browsers
• Standards -These are not always met and not so strictly followed
• Editors – Dreamweaver etc all have limitations on CSS

Test Web Design

Here is a test web design, why i did what i did (apart from the obvious reason of being told to do it in the first place ^^) is in the main body of text.

Can someone explain why firefox never ever shows table borders? I remember battling with them last year too.

My Wiki and file upload

Here is the wiki (gasp at the wonderful content…): Boz’s Wiki

Here is the file upload: Example of a webpage

Evaluation of web sites

Website name: Information on MOT testing

Website link: E17MOT

About the website: This website appears to be designed for an independent garage, however there’s no clear indication of this until the “about page” (bottom of the navigation bar), even then you need to read the address on the “home/index” page to find out the name of the garage. Seems they concentrate on MOTs, Hand car wash and campaigning against “big” petrol companies. Oh and flying…

Likes:
Loading times - it loads quickly, but it has no reason not to, images are few and far between and there’s no multimedia content in sight.
Important sentences in bigger font – This is something I find used in a lot of magazines, an important sentence is repeated in bigger font to capture the eyes, in hope to draw you in to read more.

Dislikes:
The navigation bar - Yay! Something that isn’t static and bland – only done badly. The buttons don’t seem to fit the theme at all, then there’s the grey rectangle around them which doesn’t match the background. Also, I think it must be some protection feature of IE; you need to click on them once before they even work as links. I will give one good point, many links like this requires you to sit thru the animation before you can use them – not so here.
Navigation in general – The navigation bar has many of the main pages, however some are only found at the bottom of the “about us” and “hand car wash” pages.
“Old” feeling – the website feels like it was made some years ago, maybe it’s been lost in cyberspace for a few years and not enough uni student click “next” on google when searching for rubbish websites for website design work :p
The use of frames - I still see websites making good use of frames, but this one needs some improvement. The white lines give the impression it’s by default, but the designer may have wanted it like this. Also when changing window size it can screw the visibility of content. I just quickly validated the HTML (http://validator.w3.org/) as frames always used to cause me problems, what do you know, causes problems for this guy too.
Font – It’s not very professional, and it’s often a basic choice for beginners, don’t get me wrong it suits some websites. But this is meant to be promoting a garage, some professionalism wouldn’t go amiss.
Images -They are just too small to see detail, turning the small pictures into a hyperlink to open a new window with the full image would make details visible and keep the website from being one big image.
The content – Some pages are pretty good, such as the hand car wash page. Short and straight to the point, also gives pricing and talks it up (as much as you can talk up a hand car wash). But again the design annoys me so much I don’t really want to read the content, nor remember it.

Conclusion:
The design really bugs me; it just seems old, bland and boring. More colour would be helpful, more adult/professional feel to the font and theme in general would also win it a few more gold stars. Its all centred, no real thought put into placement.
If the site was to be done again the content, and some of the ideas, could be used again – but the theme and appearance needs to be changed in order to be successful.

Grade: 5/10 - That’s with added points for sympathy (the poor buggers got me with “Some thoughts from a long suffering petrol station operator”)