A New Design Cometh - Web standards, accessibility and coding techniques by Steve Tucker

A New Design Cometh

I'm once again about to begin a redesign of my website. This is perhaps going to be the most technically challenging site to date, from a CSS and scripting perspective. This is party because I've decided rewrite the PHP engine again from scratch rather than simply recycling and modding the old one, and also because I intend to take the layout and navigation system in a completely different direction.

However I'm going to be delving into uncharted territory in a couple of areas, and whilst I may well have to do my homework to achieve the result I'm after I thought I'd first open it up here to see if any of you fine folk could help me or provide any input.

First-off, vertical sizing of elements to 100% of the browser window height. At one time I knew how to do it in theory from reading, but to be honest I've never done it in practice and as a result, have since forgotten. Is plain-ol' CSS all that's required or is JavaScript necessary too?

Secondly, JavaScript colour transition effects; anyone have any tips or links for writing a script that would, over a given time period, gradually change a colour from a to b? I'm aware I could simply use a JavaScript library, but I've never been a fan of libraries and rarely use them in my work. Home grown is always better in my opinion :)

On a side note I've finally finished my work for .net magazine, and another project, so I'll no doubt have more time on my hands than I've had this first few months since Christmas. Brilliant.

Cheers all

Update 06/04/2007

Thanks ever-so-much to everyone who's left me feedback both here and via email - it's really been great, cheers :)

Article Envelope

• Dated: 02 April 2007
• Comments: 8
• Spam Blocked: 28317

About the Author

Steve Tucker is a 23 year old web developer living in Huddersfield, England
Read more...

Comments

1. Comment Envelope

   • Dated: 03/04/2007
   • Author: Andrew
   • Website: click to visit

   I have always worked round full height objects, either by fixing the body background or by using absolute positioning.
   
   As for the colour fade the only suggestion I can give is to use RGB in the style instead of hex so it is easier to do the maths with.

   Permilink
2. • Dated: 03/04/2007
   • Author: Richard Kimber
   • Website: click to visit

   I agree, home grown is best, though libraries are a great reference source.
   
   In the past, I have used JavaScript to aid vertical resizing to 100%. I'm sure it's not the best way to tackle the problem, but it was the only reliable option I could come up with. The project was intranet based so I didn't have to worry about people with script turned off. I attached events to onload and window.resize that calculated the height of the area I wanted the element to fill. I would like to know of a CSS based alternative.
   
   In order to transition from one colour to another, I created a time delayed loop that adjusted the RGB values.
   
   As I say, I don’t expect either to be technically inspiring. However, I can provide code for both if you’re interested.

   Permilink
3. • Dated: 03/04/2007
   • Author: Steve Tucker
   • Website: click to visit

   @Andrew: I'd considered a fixed BODY height, but these practices can often lead to side effects, particularly in our good friend IE6. Regarding the colour system I had planned on using RGB, as opposed to hex - just need to figure out how!
   
   @Richard: Cheers, Richard. As it happens I should only require the 100% vertical height if JavaScript is active, so I really don't too much mind if JS is necessary. Anything you could send me would be gratefully appreciated, thanks!

   Permilink
4. • Dated: 04/04/2007
   • Author: P.J. Onori
   • Website: click to visit

   I honestly do not know how you do it. Seriously, where do you find the time?
   
   Good luck with the redesign - I can't wait to see it.

   Permilink
5. • Dated: 04/04/2007
   • Author: Andrew
   • Website: click to visit

   I used this fairly recently for body height, might help:
   
   if (window.attachEvent) {
   window.attachEvent("onresize",function(){ //IE
   var $hght=document.documentElement.clientHeight;
   document.getElementById("element").style.height=$hght+"px";
   });
   } else {
   window.addEventListener("resize", function() {
   var $hght=document.documentElement.clientHeight;
   document.getElementById("element").style.height=$hght+"px";
   }, false);
   }

   Permilink
6. • Dated: 04/04/2007
   • Author: Steve Tucker
   • Website: click to visit

   @PJ: Most of the time it's at the expense of something else... like eating and sleeping ;)
   
   @Andrew: Much appreciated - I'll give that a whirl!

   Permilink
7. • Dated: 04/04/2007
   • Author: greg
   • Website: click to visit

   I think it could be worth having a think about the purpose of your redesign. I've recently redesigned my own site with Cameron Moll's 'realign' idea in mind, and it turned out pretty well.
   
   As for the vertical issue can you keep us updated with any solutions that you may use?

   Permilink
8. • Dated: 04/04/2007
   • Author: Steve Tucker
   • Website: click to visit

   I like your site's new design greg, though unfortunately I hadn't seen the original. Little touches, like the 'home' button icon, rather than simple text are real nice.
   
   The purpose of redesigning this site is that I'm never quite happy with the existing one, plus I keep getting those damn idea bubbles popping up. This site's more of a testing ground where I try new things out and experiment - it's already in its 11th incarnation. The main two other versions are:
   
   version6.stevetucker.co.uk, and
   version10.stevetucker.co.uk
   
   And sure, I'll post my findings about 100% heights here :)

   Permilink