Michael Doyle | Blog

Design – Web Page Headers

I'm begining to redesign my portfolio. I'm basing it on the 960 grid system. I've placed an notice on my site which has the basic color scheme of things at the moment. The typography needs further work, but I'll leave it for the moment.

I'll be pixel obsessing for a while. First thing's first, I found a good article on the size of headers in web pages:

http://desizntech.info/2009/03/how-improtant-the-header-is/

CSS – Styling Forms

Found a great resource listing different articles and tutorials on how to style HTML forms using CSS.

http://socialcmsbuzz.com/40-css-web-form-style-tutorials-for-web-developers-14082008/

SEO – Internal Linking

Quick summary of it all....

• To internally link pages, keywords should be used for the link and the page it's linking to should have the same title
• Emboldening keywords should be done
• If keywords appear in text paragraphs, try and link them to the associated parts of the website. For example, if there is a gallery of photos, mention it in the body text, link it to the gallery page. The gallery page should have a title of gallery and a heading of gallery. The main body of text should have some mention of it being the gallery and it should be bold.
• This method also counts the internal links as votes.

The way I look at it all, it's just creating good clean metadata. Google indexes your pages so it knows the location of them all. Inserting metadata (title, headings, alt text, etc.) into these locations allows Google to know what it's indexing.

SEO – Meta Tag Analyzer

SeoCentro provide a very good resource for checking your meta tags

http://www.seocentro.com/tools/search-engines/metatag-analyzer.html

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.

CSS – CSS Sprites

I remember when I used to do the old javascript onMouseOver and onMouseOut to get those amazing image rollover buttons to work. That was back when I had a 56k connection, and normally I rolled over a button and waited for it to load to see it's rollover state. Those days are long gone thanks to CSS sprites.
Basically, say you have one rollover button and want to have 3 states for it, normal, hover and active. You create 1 image file with each of these images in the one file. Then you specify (in CSS) what co-ordinates of the image to go to based on the mouse state.
So you have one image file loaded when the page is accessed, only one http request and less resource usage.
Here's the smashing magazine article explaining everything you need to know.

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.