• home
• Services
• workshops
• consulting
• presentations
• Resources
• newsletter
• bookstore
• how to
• JOC
• inside
• site map
• login

At long last, my new Joy Of Code site is online!

The re-making of my web site took over 14 months. It was a titanic battle waged mostly between me, myself, and I. It was a tremendous learning experience. I'm here to share - in this issue and the next - what I learned.

A little background first. My old site was created 4 - 5 years ago. It represented what my business was and my design skills were at the time. I used table based layout but also used Cascading Style Sheets, in a sloppy and ineffective way to provide the styling elements for the site.

When I began the re-design, I knew I wanted the site to promote my two services - web design training and consulting. I needed it to be modular so that it would be sustainable. That is, I built it in a way that would make it easy to modify as my business continued to grow and my design skills improved. I wanted to be able to advance the style (CSS) without having to change the content formatting (XHTML).

I wanted it built in a way so that I would never again have to go through the re-design process I just went through. I wanted the site to be sustainable and forwardly compatible. I achieved all these goals - and more.

The site would also be home to all my Joy Gems Newsletters and have a search tool for the archived content. Also, I had always wanted to do a "How To" web design tutorial section to attract search engine business from those who wanted to learn how to make web sites.

Making a web site that looked good and was easy to navigate and understand was not going to be enough. It had to be more than a promotional tool. It also had to be a platform by which I could demonstrate the best that adherence to web design standards offers to present and future students and clients.

The source code would also have to be good-looking. What else would you expect from me? (Yes, there is a direct connection between how the page looks and works and its code).

All of this was accomplished too.

But what did I learn in the process of developing this sustainable, standards-adherent, good-looking site? This is what I learned (or learned anew).

1. Set Your Design Priorities At The Start

Beyond the obvious, I had to come up with design benchmarks. I could not be all things to all browsers. That is, I would not sweat it if my design did not work in older browsers, nor would I loose any sleep if my design did not look exactly the same from one browser to another. However, the design had to have integrity. It had to present a consistently uniform visual experience in any one browser. The fact that my site would look a little different in old IE6 than in current browsers would not drive me nuts. (It is, after all, a legacy browser.)

From the get-go, I was determined to lean heavily on web design standards. Pages would validate and code would be used efficiently and correctly. There would be no need for table based layout because browsers had evolved to support CSS in ways that made it practical (and a Joy) to work with.

What I came up with is The Electronic Canvas - Test Suite. Using it, I tested my design under various circumstances. Here they are, in priority order.

Pages would be tested...

1. with the viewport maximized and re-sized to different dimensions;
2. using a wide range of display drivers beginning with the 800 X 600 pixel resolution;
3. using a wide range of browsers, platforms, and devices in their most updated versions;
4. using legacy browsers as deemed necessary (but definitely IE 6);
5. using various other criteria such as Full Screen, Page Zoom, and Font Re-sizing as needed.

It was no accident that viewport maximization was listed as numero uno above. It was paramount that the design had to hold up with the browser window stretched across the entire screen or at some smaller size. Many users do not have their browser's viewing area open to the widest possible dimension when surfing around. I had to make sure any given page would look good even if the browser only occupied 20% of the screen.

What I learned is that current browsers do a real good job handling the issue of browser re-sizing. Older browsers? Forget about it.

2. Build A Perfect Page Template

I thought I knew this one going in, but I didn't know how profound my rule about making a perfect template was. I should have taken my own advice.

True enough, I spent about two months (not continuously, mind you) working to perfect 5 Great Reasons To Learn XHTML And CSS. But, because I didn't do enough testing, I ran into big time problems in the months following. The problems were so severe that, in late April, after many pages had already been built and filled with design errors, I had to dial it back and re-build much of the site.

Had I completely resolved all the design issues before building all of the pages, my site might have been launched months ago. I'm embarrassed to admit that - I'm supposed to know better - but it's true. A gem that I must pass on to you is to build a perfect template first. By that I largely mean to settle ALL design issues BEFORE you begin to make (or re-make) your pages.

Bottom line: Don't produce your site (build your pages) until the design has been put to bed. Period. No exceptions. Some things have to be done before other things can be made. You wouldn't erect a building without first making sure your blueprint was complete, would you?

What do I mean by "settle ALL design issues"? I mean creating a Style Guide for your site by answering such questions as...

• What will the base typography be for my copy?
• What are my headings going to look like?
• What is a typical list going to look like?
• What color scheme will I use for my navigation interface and page links?

And of course, the template had to pass The Electronic Canvas - Test Suite.

At the end of the day, I wound up with the CSS file that holds most of my web site's style information. This is one of CSS's great strengths. In one file, I have all of the information pertaining to how all my pages for my site will look. I can easily change any aspect pertaining to style just by editing this one file.

How cool is that? Very!!

---

That's it for now. In the next issue I'll have a lot to say about which browser to design for and why. Plus, a few other thoughts about how to bring out the best in you so you can design what's in your head for all the world to see.

Part 2 of 2

Subscribe To JG If You Like What You're Reading

First Name

Email Address

---

Joy Gems is a twice monthly newsletter for people new to web design and for those moving beyond that stage.

Search
Joy Gems Archive

---

---

Bud Kraus: friendly@joyofcode.com 973 235 1452

© 2000 - 2008 TryNet, Inc.