Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

Lessons Learned: The Making Of A Sustainable Web Site
(Part 2 of 2)

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

SPECIAL EDITION
v4 i11
Originally Published: July 3, 2008

In the last JG, I celebrated the launch of my redesigned joyofcode.com site by recalling highlights of what I'd learned over the past 16 months or so. Much of what I went through rebuilding my site using web design standards was a battle between me, myself, and I.

The two main points I made were:

  1. Set Your Design Priorities At The Start
  2. Build A Perfect Web Page Template

Ok, you're going to say, "Bud, you of all people must have known those two things from the get-go." In truth, I did, but I did not know - or appreciate - the fullness of those simple ideas.

However, the following 3 ideas are pretty new to me, and so I continue on with Lessons Learned.

1. Use The Most CSS Compliant Browser For Your Default Design Environment

This one I got while reading Pro CSS Techniques. It makes so much sense.

I had been using WIN IE6 figuring that it was probably the most widely used browser. Why not design for the most widely used browser and then fix the design problems that would come up with other (newer) browsers?

But IE6 was hardly the most CSS compliant browser around. It would mean I would have to restrict myself from using more of what CSS could do.

What I should have done - and eventually did - was design for Firefox as my default since it was the best CSS browser in wide spread use. To make things even nicer during ny re-development IE7 cam out. IE7 handles CSS a lot more like Firefox than it does IE6. (Good old Microsoft, Always one step behind).

So the rule that I took from the Pro CSS Techniques book was to design for the most CSS compliant browser and then test the design in legacy browsers like IE6. As it would turn out, that idea was perfect. I got my design to work well in Firefox, IE7, Mac Safari, and Firefox browsers. Then I hacked, tweaked, and worked my way around until I was happy with how the new site looked in IE6.

Remember that everyday that passes is one less day we'll have IE6 to kick around - and that's a good thing!!

2. Keep Things Simple

The better I got at CSS, the more I realized just how little code is needed to make fantastic design. CSS, as I would come to appreciate, is a thinking person's game. There was far more time spent in thinking through how I would do something than in typing the code to do it.

I got into the most trouble when I needlessly used tortured coding and created barriers to achieving the design I was after. However, when I took out redundant and useless XHTML and CSS, I was able to get to where I needed to go. Both of these systems - XHTML and CSS - are remarkably efficient. "Less is more" is not just a slogan in web design. The idea of keeping things simple was the sub-text of a past JG, The Code To Content Ratio.

3. Push Yourself

Never do any project - especially your own - and learn nothing. That's my definition of a failed endeavor.

I went into my site makeover thinking I knew just about everything I needed to know to accomplish what I wanted to do. I was so wrong.

At first, I thought I would use table based layout and use CSS for all other styling needs. I figured using CSS to organize my content into columns would be too hard. I wanted to take the easy - and wrong - way out by sticking to something I knew very well - table based layout.

But I had to prove myself wrong on two accounts.

  1. How could I be an advocate for using web design standards if I continued to use tables for layout? What kind of see-through hypocrite was I about to become?
  2. How would I be able to teach the strengths of CSS if I myself did not understand how to use CSS page layout?

So I forced myself to learn how to use float, clear, and margin properties to create reasonably good layout. I learned it well enough so that I now teach it to others.

There were plenty of other hurdles I had to jump over. Some took a long time to work through. I read books. looked a web sites and code (not always a good idea) and walked my daughter's dog thinking about how I would resolve a tricky design issue.

Because I really pushed myself, I got to that next level. I'm so glad I did!!

Part 1 of 2