Michael Doyle | Blog

Web Design – Inspiration

Six revisions have made up a list of nice web site designs. They're technically not websites, but just mock-ups made in PS. They do serve their purpose very well though.

30 inspiring Web Design Layouts from deviantART

Web Design – Proportions

Smashing Magazine discuss divine proportions and the rule of thirds.

Web Design – Inspiration

Here is a list of web sites for design inspiration

Fonts – Web Safe

Here is a list of web safe fonts that are commonly packaged with all platforms.

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

This list was found here

CSS – 20 Helpful Websites

A list of 20 websites to master CSS

CSS – CSS Reset

There are many hacks to get past cross-browser compatibility problems. I've run into way too many of them, even though I regularly check sites in both IE and FF. One of the reasons for the problems is that some browsers add padding and margin sizes to certain elements. To remove this Yahoo has a utility called Reset CSS. IT removes all added borders, margins, everything to level the playing field so you can precisely define how you want elements defined without anything added by a browser.

UPDATE: After reading some of the comments and advise on resetting, a lot of people have highly recommended Eric Meyer's CSS Reset stylesheet.

Flash – Transparent Backgrounds

Trying to finish my Graphic design project tonight and discovered how to make a swf with a transparent background. HTML code is:

Add these parameters to the "param" tag:

param name="wmode" value="transparent"

Add this parameter to the embed tag:

wmode="transparent"

So the full code I used to embed a swf file called "brain.swf" is:

<object width="216" height="144" data="brain.swf" type="application/x-shockwave-flash"><param name="wmode" value="transparent" /><param name="src" value="brain.swf" /></object>

This works in Firefox 3 and IE 7, haven't tested it out on any other browsers yet. Flash 6 or higher is needed.

Web Design – Web background tutorials

Here's an excellent list of resources from noupe

Web Design – Background Generators

Here is a list of 15 different background pattern generators.

I threw one together quickly:

I made it with http://bgpatterns.com/

Colour levels are way off, and it isn't optimised for use, but it's a good example of what can be done in 5 minutes