Archive for the ‘Design’ Category

beautiful web design book

Monday, September 1st, 2008

Our worlds greatest guest speaker brendon Sinclair is now also our most generous one as well. He has sent us a copy of “the Principles of Beautiful Web Design” by Jason Beaird which will be handy for those of us that are artistically challenged :)

the book has sections on :

  • the design process, from discovery to implementation
  • what makes good design
  • developing pleasing layouts
  • using colour effectively
  • and lots more

let me know if you’d like to have a look

More creative web design feedback

Sunday, August 17th, 2008

Margs page titled creative web design margaret is demonstrating lovely colour balance and also creativity in your banner which I thinks has huge potential. The concept of the monitor and it being the focus point is great without any competing elements is a good starting point.

I really like Garry‘s shopping bags but the page overall needs alot more work just like my creative web design page.

Kevs creative web design page is looking nice. Layout is simple but colour scheme is harmonious. Although on some monitors there won’t be enough contrast between the banner text and background colour. Also for the the search engine optimizations exercise it’ll be interesting to see if you have over loaded your key words of kevs creative web design but for the time being when I did a search on these words you came up number 4 so congratulations.

CSS IE Hacks – conditional comments

Sunday, August 17th, 2008

As many of you are doing the right thing and testing your sites in more than just one browser you are becoming more likely to face the dreaded problem of ie browsers not rendering your styles as you expecting. The problems that we notice are usually are not subtle rendering issues but full blown nightmares such as your 3rd column is sitting below your other columns not next to them!!!

Possible solution- a JavaScript browser detection but I think this is overkill and pointless if the user has JavaScript turned off.

Which brings are to the other possible solutions of CSS hacks and conditional comments.

Conditional comments only work in IE so are perfect for giving instructions just for IE. They are supported from Internet Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.

Conditional comments work as follows:

<!–[if IE 6]>

Special instructions for IE 6 here

<![endif]–>

As you can see the basic structure is the same as an HTML comment (<!– –>). Therefore all other browsers will see them as normal comments and will ignore them entirely.

Internet explorer though, has been programmed to recognize the special <!–[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.

Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

So one possible options to avoid your ie problems is to create an alternative style sheet and use a conditional statement to which feed specific style sheets for specific browsers.

Here’s some example syntax rules to feed the different IE versions:

<link rel=”stylesheet” href=”styles.css” type=”text/css” />

<!–[if IE]>
<link rel=”stylesheet” href=”IEStyles.css” type=”text/css” />
<![endif]–>

<!–[if IE 5]>
<link rel=”stylesheet” href=”IE5Styles.css” type=”text/css” />
<![endif]–>

<!–[if IE] 5.5>
<link rel=”stylesheet” href=”IE5_5Styles.css” type=”text/css” />
<![endif]–>

<!–[if IE 6]>
<link rel=”stylesheet” href=”IE6Styles.css” type=”text/css” />
<![endif]–>

<!–[if IE 7]>
<link rel=”stylesheet” href=”IE7Styles.css” type=”text/css” />
<![endif]–>

<!–[if gte IE 5]>
<link rel=”stylesheet” href=”IE+5Styles.css” type=”text/css” />
<![endif]–>

<!–[if lt IE 6]>
<link rel=”stylesheet” href=”IE-6Styles.css” type=”text/css” />
<![endif]–>

<!–[if gt IE 6]>
<link rel=”stylesheet” href=”IE+6Styles.css” type=”text/css” />
<![endif]–>

Code

The syntax means:

<!–[if IE]>

According to the conditional comment this is Internet Explorer

<![endif]–>

<!–[if IE 5]>

According to the conditional comment this is Internet Explorer 5

<![endif]–>

<!–[if IE 5.5]>

According to the conditional comment this is Internet Explorer 5.5

<![endif]–>

<!–[if IE 6]>

According to the conditional comment this is Internet Explorer 6

<![endif]–>

<!–[if IE 7]>

According to the conditional comment this is Internet Explorer 7

<![endif]–>

<!–[if gte IE 5]>

According to the conditional comment this is Internet Explorer 5 and up

<![endif]–>

<!–[if lt IE 6]>

According to the conditional comment this is Internet Explorer lower than 6

<![endif]–>

<!–[if lte IE 5.5]>

According to the conditional comment this is Internet Explorer lower or equal to 5.5

<![endif]–>

<!–[if gt IE 6]>

According to the conditional comment this is Internet Explorer greater than 6

<![endif]–>

Note the special syntax:

  • gt: greater than
  • lte: less than or equal to

These conditional statements can also be used to override just single style declarations rather than having to have complete alternative style sheets but more on that later.

Creative web design colour harmony

Sunday, August 3rd, 2008

Here is some more great information on colour theory and harmony. Creative web design can be greatly improve for not creative types by being aware of the rules of colour and design which this page lays out in simple terms especially for non designers.

Another example of design principles at work

Thursday, July 31st, 2008

Here is another site which demonstrates the principles of repetition (especially in the use of colour) to create a unified harmonious look. The Murwillumbah District Plumbing site is not one that you would automatically expect to exhibit a high level of visual design but like the quality of their plumbing work their site is also a quality item.

Creative Web Design Principles

Tuesday, July 29th, 2008

The design principles applicable to creative web design are pretty fundamental design principles that allow you to create visually pleasing, aesthetic and creative web sites without being the worlds greatest artists. In fact by sticking to some simple principles those of us who are not artists will at least produce designs and layouts that are clean effective and functional.

On this page creative web design I will be outlining some simple principles that I have learnt.

What’s a div tag

Saturday, April 19th, 2008

According to the O’Reilly HTML Reference, “the DIV element gives structure and context to any block-level content in the document. Each DIV element becomes a generic block-level container for all content within the required start and end tags.”

So the DIV tag is a powerful generic element well suited for being used as a container within our Web page rahter than tables or cells because the div tag can be use for creating sections or (div)isions of Web pages.

The concept is very intuitive. Instead of using tables as layout elements, we can use DIVS as excellent content containers to build our page layout. In conjunction with several CSS declarations, DIVS based layout are pretty easy to get.

They reduce the amount of code in our documents which is good for the search engine and if we use an external style sheet we will be separating the formatting/presentation information from the content which is great for maintenance and readability.