A Reluctant Web Designers Journey

seeit_source_imageA long overdue of SeeITs’ website. My colleague Simon Stewart in CIC made the very valid point that a web programmer should show something more on his website than a page of largely static text and a broken contact form. (In fairness the contact form brought me nothing but spam and Asian software companies trying to get me to outsource my coding jobs to them, so it was no great loss to me.)

One pleasant surprise was how modern browsers behave with standards compliant HTML and CSS (as long as you don’t get too funky with your layout).

I remember my last foray into HTML and CSS… it would have been several years ago now and I was delighted to leave it behind. I’m an engineer and I understand technical specifications. Specs are good – they specify how something should behave, you follow them and voila, job done! That’s grand until you consider the browser.

Now a web page is just some plain text, including some HTML codes telling you (really your browser) how to style and position the text, images and whatever else is on the web page. It is up to the browser to actually do the positioning and styling and to present you with the web page as the designer intended. And herein lies the problem… browser support for CSS is pretty poor and browsers have bugs in how they render your page, sometimes catastrophic.

There is no greater frustration than killing yourself to get your web page looking perfect in Mozilla Firefox, only to find out that you’ve found one of the many browser bugs that would cause your page to fall over in Internet Explorer. You fix it in Internet Explorer and Safari throws a wobbly… fix it there and… you get the idea!

Things have improved lately and browser support for CSS has improved beyond belief… however only really if you stick to CSS2.1 – a 6 year old standard! CSS3, which will allow designers do all sorts of cool stuff, is around 3 years now as a working draft, but you can forget about relying on it for a while yet! Lots left for the browser companies to do yet.

It was a pleasant surprise that this web site template was so easy to put together. I’m using no browser hacks, everything is in CSS (unless it is generated by code) and it all worked first time (even IE6). I’ll still be leaving the HTML to others in general, but it is great to see how things have changed for the better for people.

An added benefit is that you don’t have to worry about text readers, small screen devices like mobile telephones and even text based browsers – it all degrades the way it should. (If you don’t believe me, try using Ctrl+ and Ctrl- to resize this page, or try switching off your stylesheet View Menu -> Page Style -> No Style in Mozilla Firefox and see what this page looks like.)

Essential tools:

  • PSPad – A general purpose editor. Does a lovely job syntax highlighting your code – making sure you close all those tags and keep your HTML and CSS compliant.
  • TopStyle – I still use the lite version of this software (shame on me I know). If you only need simple CSS editing I highly recommend it. If you need something more heavyweight, do check out the demo of the full version.
  • Browsers – All of them! Check your layout in as many browsers as you can.

And some handy links:

  • W3C – the HTML and CSS standards people. Make sure your pages pass the CSS Validation Service and the Markup Validation Service or you’ll be chasing your tail forever trying to get your page to work.
  • A List Apart – A superb collection of articles, tutorials and resources for web designers. This is where you’ll get lots of help and information.
  • glish.com – ‘CSS Layout Techniques: for Fun and Profit’ or ‘Look Ma, No Tables’. This is a great starting place for those looking to understand CSS layouts.
  • Eric Meyer’s CSS pages – some excellent positioning and CSS effects demonstrations.

And finally, to be avoided:

  • Dreamweaver – the work of the devil… unless you happen to RTFM and actually learn how the package works. Unfortunately too many people just dive straight in without considering what all that WISYWIG functionality is doing to your HTML and CSS code. You’d be better off spending the time to look at the CSS resources above and actually understanding what is going on rather than point-and-click and hope-for-the-best.
Posted in Opinion

Leave a Reply

Your email address will not be published. Required fields are marked *