One Sky Media = Accessible Web Design

Tips

One thing that I've noticed is that you can tell how much attention to detail goes into someone's markup by how nicely organized and commented it is. I prefer my css to look like this:

/* ****** navigation container ******* */

#menu {

background: url('images/waterfootshade.jpg') repeat-y top left;

position: fixed;/* fixes menu div on page */

top: 14em;

width: 12em;

left: 3em;

background-color: #76ADC2;

}

Note: I've been having lots of problems with using the property: position: fixed;. It appears that IE7 has real issues with it.

Notice the label of the div is not indented at all nor is the closing bracket. The various properties applied to the div are all indented one tab. This allows you to quickly scan the page for the div you're looking for and it becomes easy to see whether your closing bracket is there. This makes it much easier to fix mistakes. No matter how careful you are you eventually make them and have to find them. Well organized code is the difference between making it, or breaking it!

Labeling each section using a comment makes things easier as well. The extra asterisks really help to find your way around.

If you're having trouble getting things to work out with page layouts etc., validate the page and it many times will point you towards the problem.

I've been building web pages since 1997. I started out using notepad, a simple text editor, and still use it today. I occassionally use homesite because of global search and replace which comes in really handy when you find you need to edit something out of 40 different pages.

You can find the tools that I use most commonly on the tutorials page.

The only browsers I've found so far that pass the acid 2 test are Opera 9.24 and Safari 3.0. It makes sense to design for those browsers do that and in the long run your code will be more likely to be forward compliant. You end up limited by what Firefox and IE7, IE6 etc. cannot do. There are lots of ways to work around those problems.

I go back and forth between a screen resolution of 600 x 800 and my laptop which is 1024 x 768. I do my best to keep it viewable in both.

Use em's not pixels. Em's resize in IE pixels don't. In em's your layout becomes elastic.

To get an idea of where the boundries of your containers are give them all borders at first. I've found it helps quite a bit in constructing your layout. I find myself doing this when I'm just about to throw in the towel, it invariably points me in the direction I need to think in order to solve the "issue".

When designing color schemes do it with images off. Design a good color scheme in your css and use only a few images and you cut download time. Your site won't degrade as much when viewed without images if you give it good colors to start with.


Theme: Original View css file

Theme: Night View css file

Theme:Spring  View:css file

Theme: Sunshine
View css file

Theme: Simple
View css file

Theme: Deluxe View css file

Theme: Sunset View css file

Theme: Paper View css file

Theme: Water View css file

Theme: Space
View css file

I set this style sheet up for printing. It also is handy for just getting rid of the menu entirely. Fun stuff. You can take a look at the css file if you want.