Tech Talk for Web Designers

Design Methods for the Internet

I've been building HTML web sites since about 1998, when I started experimenting with Adobe PageMill. It began with a single page, about 60k of content, and a local web site with no real domain name. In 2000, I created and purchased the domain name "NextCraft™". During that time, I worked as a commercial graphic designer for a couple of years, which helped get me up to speed. Years later, NextCraft™ contains over 150 pages, (some quite long) and well over 300 megabytes of online content. A few years ago, I began using Adobe GoLive 6, and later, GoLive CS2. Typically, this "drag and drop" web site-building software, which we all like, because it's "fast and easy", creates rather bloated code. It was only when I really started to understand the code itself that I could recognize that. Today, I'm doing all the coding for my sites by hand, in "TextEdit", on a Mac. (a simple text editor) The difference is remarkable. Doing the coding by hand has reduced typical page sizes by at least 10% to 15%.

"Features" and "Hacks"

I've tried a variety of methods to produce all the usual "flashy" features including image rollovers, tables for layout, various Javascript functions, etc., and even (CSS-controlled) style sheet switching. But I've rarely used what you could call a "hack", because I think that hacks are design traps. That is, you use a hack to get around a browser problem, and then the browsers are "fixed", possibly invalidating the hack and screwing up your site. Sometimes it literally takes years before browsers are compliant with current standards. So, like it or not, we have to consider how our web sites will look in an old or incompatible browser, or on different-size monitors, with varying color depth, etc.. Too bad, because your enthusiasm for a spontaneous new design idea can fade, if it's hugely difficult to achieve.

From HTML/Javascript to CSS/XHTML (and XML)

With the adoption of the CSS1 standard a few years ago, I started using a simple style sheet, but avoided the "fancy" features, fearing that web browser shortcomings would ruin my site's presentation. I typically used various Javascript functions to produce the "fancy" effects, because it seemed more universal at the time. But... some people browse the web with Javascript disabled in their browser, to avoid popups, etc.. Since I also do web sites for others, consistency and reliability are especially important, so my approach today is to use only CSS and XHTML. CSS2 provides built-in ways to do "designer-esque" things without spending hours tweaking images and tables.

My NextCraft™ site is heavy on the "content" side... Lots of tutorial-style articles, technical drawings, etc.. Updating the presentation of all that material was really tedious... one page at a time, for every update. Well..That is specifically the promise of CSS... to separate the content from the presentation. Recently, i've made the transition to CSS/XHTML, and am really enjoying the experience. The logical, or "correct semantic markup" appeals to the ex-programmer in me, and what style sheets are doing for us is very powerful. Future versions (CSS3, etc.) will be even better. I'm also busy studying XML, which seems to hold a lot of promise.

I'm using the "transitional" DTD for XHTML, and this site is XHTML/CSS compliant. Performance is improved in all browsers i've tested, except of course Microsoft Explorer.... "bugimus maximus". (See the sidebar to the right.)

Sources, Advantages, and Disadvantages

My inspiration for the change came from the many great sources on the University of Minnesota Deluth's Information Technology Systems and Services site, here. There are a huge number of great articles for web designers, and some marvelous demonstrations of what CSS can do. Another great source of information and technical articles can be found at A List Apart. And finally, for some truly creative uses of CSS, check out CSS Zen Garden, and CSS Beauty, for example. Outstanding!

The proper use of CSS, XHTML, and XML brings leaner code, resulting in faster load times, and many design and layout advantages. When NextCraft™ went through the transition, the original total site size was 350 megabytes. Even after adding several new pages, the overall site size has dropped to about 300 megabytes. That's the 15% reduction mentioned above, while adding new content and new features. (!) If you're a web designer and not already on the bandwagon, I urge you to take the plunge. It's simply a more modern, better way to design.

As with HTML, the "issues" are with web browsers, not CSS/XHTML/XML itself.

Not all web browsers properly support the CSS2 standard, (or even older HTML standards!) so even a "perfectly-written" CSS/XHTML/XML page may not display as expected. Microsoft Explorer is the primary culprit, and many CSS/XHTM/XML writers are using hacks to accommodate it. I rarely use hacks of any kind, but I do try and make my sites display well in all the browsers I can test. That brings up an interesting point about site design. If you insist on a "pixel-perfect" design, that displays exactly the same way in every browser, then it will be tedious, and you will be using some hacks. If, on the other hand, you can tolerate a fluid design, (like this site) then CSS/XHTML gives plenty of flexibility, while preserving the readability of your content. I've shifted my thinking in the direction of flexibility.

So, stay tuned for constant improvements here, as I continue learning.

Thank you for visiting!
- Mike James