The website utilises the many functions including a flexible homepage slider and flexible layouts.

The website utilises the many functions including twitter integration and flexible layouts.

The website utilises the blog functionality to allow authors to publish articles and readers to post comments.

http://designingfortheweb.co.uk/book/index.php

or buy the PDF version for £12

Table of contents:

Getting Started

• Introduction – Getting Started
• Designing for the web – ‘How can I get my first job?’
• The Job – Working for an Agency
• Understanding Workflow – One Mockup or Many?
• The Tools – Just like a carpenter, a designer will have his favourite tools.
• Working for yourself – So you want to work for yourself? And why not.

Research and Ideas

• Introduction – Research and Ideas
• The Design Process – The Traditional Design Process
• The Brief – The Brief, in its different forms, represents the start of a project.
• Research – Research is a profession in its own right.
• Ideas – Ideas. They’re at the heart of every creative process.
• Putting it together – Case Study for a gardening website

Typography

• Introduction – Typography
• Anatomy – Typefaces, like most things, are made up of constituent parts.
• Classification – Typefaces have defining characteristics that give them personalities.
• Hierarchy – Typographic hierarchy, put simply, is how different faces structure a document
• Typesetting – The font industry is big business, and rightly so.
• Printing the web – The screen is just one of the media types for which we have to design.

Colour

• Introduction – Colour
• The Colour Wheel – Colour theory involves a great deal of complex terminology.
• Hue, Saturation and Brightness – Describing colour can often be confusing.
• Colour Combinations and Mood – Colours chosen from different spokes on the Colour Wheel will provide a variety of colour combinations.
• Designing without Colour – Lowering the Tone.
• Colour and Brand – Can you imagine a classic coke can in any other colour?

Layout

• Introduction – Layout
• The Basics of Composition – For centuries there has been a link between art and mathematics.
• Spatial Relationships – Space is important in layout.
• Grid Systems – A grid is an instrument for ordering graphical elements of text and images.
• Breaking the Grid – Should Everything Always Line Up?
• Bringing it all together – Case study for De Standaard.

Conclusions

• What does it really feel like to be a designer in this industry today?

I stumbled upon a great video (recorded webinar) on – Website Redesign Strategy for 2010. Some of the content covered in the video are…

The wrong reasons for doing a web redesign:
- “we have a new corporate look and feel”
- “I’m tired of the old website”
- “Its been 12 months since the last redsign”
- “the design department wants to”
- “The CEO wants to do it”

The right reasons for doing web redesign:
- “Get found by more prospects”
- “Convert more prospects into leads and sales”
- “Branding” might be a good reason if it drives the goals above

3 keys to a successful website:
- Get Found: attract visitors
- Convert: visitors to leads & sales
- Analyse: produce measurable ROI

Web redesign tips:
- Audit your site and protect your key assets (e.g. content, inbound links, keyword ranking, conversion tools)
- spend resources on creating content (especially a blog), more than beautiful design
- make it easy to run conversion experiments

View the video webinar – Website Redesign Strategy for 2010

View the slides on SlideShare -

Although there is a lot of talk in the industry about not supporting IE6 and even launching campaigns to bring it down for good, I think it’s still important to support IE6 until Microsoft actually do something about it.

Why? Well in most cases, users probably don’t have a choice of upgrading their browser and a lot of large corporations still use the default browser that came with the Microsoft package they bought many years a go (i.e. IE6).

I think as web designers we should at least try to make our websites readable and accessible even in IE6. If the user has a much newer browser then they should be rewarded with a better user experience. This is called progressive enhancement and it’s starting to make waves.

Anyway, Chris Coyier from CSS-Tricks has written a fantastic article called “IE CSS Bugs That’ll Get You Every Time“. It walks you through common bugs found in IE6 and gives you solutions to them.

The article covers the following:
- The Box Model
- The Double Margin Bug
- No Min Widths / Min Height
- Stepdown
- No Hover States
- No Alpha Transparent PNG Support

Anyway, back in the days when tables used to dominate website design (probably still does!), it was very easy to horizontally and vertically align elements. You simply did the following:

<table width=100% height=100%>
<tr>
<td align=center valign=center>element goes here</td>
</tr>
</table>

The good old “valign” property has helped and still does in many different ways.

Well, the days of designing a layout using a table is just wrong for all sorts of reasons.

To align elements both horizontally and vertically in CSS you can apply the following to your element:

.hor_ver_align {
position:absolute;
display:block; // only need if it’s an inline element
height:200px; // need to know the height
width:300px; // need to know the width
top: 50%;
left: 50%;
margin-top: -100px; // half the value of your height
margin-left: -150px; // half the value of your width
}

This should work in most cases but if you don’t know that height/width of the element then you can use jQuery to find it out dynamically.

I read about Zen Coding a while back and thought it was very interesting and powerful but didn’t really get into it because I was thinking that it made you lazy and may make you forget how to actually do HTML mark-up.

But there’s another side of it that I discovered.

Zen Coding is very closely linked to CSS syntax, especially how ’selectors’ are used. If you’re good at hooking into elements with CSS then using Zen Coding should be an ease. Using it can actually improve your CSS (to some degree I guess).

Anyway, it’ll be something I’ll be experimenting very soon.

Here are some useful links:

Excellent tutorial by James Scariati – An Introduction to Zen Coding
The official Zen Coding site where you can download the plug-in for various text editors

Because the Safari web browser on the iPhone/iTouch does a pretty good job at rendering most websites, I haven’t had the need to create a complete workaround for mobile devices. If your website is standard compliant, you don’t need to worry too much about users accessing your website through such devices.

However, what if you wanted to give your iPhone/iTouch users not just the regular desktop website to look at but an provide them with the ‘ Apple experience’  when browsing your site?

One way to do this, is to create an app of your website but this is probably not suitable for everyone. Another way is to create an iPhone/iTouch friendly version of your website without having to maintain two different websites. I like this way too!

I came across an excellent article that has collected useful code snippets that you’ll need when creating an iPhone/iTouch. The code snippets include:

- Detect iPhones and iPods using Javascript
- Detect iPhones and iPods using PHP
- Set iPhone width as the viewport
- Insert an iPhone specific icon
- Prevent Safari from adjusting text size on rotate
- Detect iPhone orientation
- Apply CSS styles to iPhones/iPods only
- Automatically re-size images for iPhones
- Hide toolbar by default
- Make use of special links
- Simulate :hover pseudo class

The article is written by Jean-Baptiste Jung – 10+ useful code snippets to develop iPhone friendly websites.