Paul O'B serves as a team leader on the SitePoint Forums, the largest web community devoted to building websites, and hosted under the SitePoint publisher umbrella. Paul joined the SitePoint community early in 2003 and has since posted about 10 posts every day. Through this admirable activity, he has helped designers, even experienced ones, to raise their knowledge of CSS. He is the co-author of the online CSS reference, published by SitePoint, and has written a book: The Ultimate CSS Reference, with Tommy Olsson.
You can follow his posts on SPF.
These are exciting times at the moment as far as developing for the web goes, but do you get the feeling that sometimes things move at too fast a pace to catch up and you are getting left behind? I certainly do.
There’s a lot to keep an eye on with CSS3, HTML5, jQuery, media queries and mobile devices all surging forward almost every day. It’s easy to take your eye off the ball and lose sight of what’s going on in the world of web design. I often get buried in a project and the next time I look up something else new has come along. We can’t all be experts in every discipline but we do need to keep track of what’s going on and then reflect best practices in our coding/design. There’s no point in trying to learn or remember everything but you should at least know where to look. As Einstein was reported to have said “I never remember anything that I can easily look up” — or words to that effect.
It wasn’t that long ago that properties like border-radius were seldom used but now most everyone uses them and even clients aren’t worried that older browsers such as IE8 get square corners. It seems that even some clients can be educated. Who would have thought?
So don’t be frightened of change.
It’s a fact of life that things change, so don’t forget to look up from time to time and keep abreast of what else is going on around you and how you could improve what you are doing. It’ll soon be time for a new year’s resolution so why not set aside some time each week to brush up on your skills, maybe learn some new CSS3 properties, experiment with a few new features, or just see what’s hot and what’s not. Just stay informed — it’ll pay dividends in the end I’m sure.
When you’re designing your latest greatest website please don’t account for every pixel in the page as though your life depended on it. Too often I see elements that stretch the full with of a page and have no breathing space should the content be one character wider than the author imagined.
Browsers render text at various widths anyway and ultimately you have no control over what size the user may have set so bear this in mind when creating menus and similar elements that you want to exactly fill the horizontal space.
Use techniques that allow breathing space or indeed will allow text to wrap nicely should the text be resized by the user (or should a certain browser decide that words will be wider than other browsers might make them). The easiest solution is simply to allow extra room by default and not fill every pixel on the page. A more robust solution is to build the element so that it can grow and wrap if necessary without breaking the structure. Too often I see the last menu item on a menu missing because the browser couldn’t fit it all on the same line and the last item has wrapped and been hidden because the overflow was hidden.
Some techniques you may want to try are using display:table and table-cell properties (IE8+) instead of floats and allowing the menus to automatically spread without the need for horizontal padding. If you want to use floats then often you can “not float” the last menu item and let it just fill the remaining available space automatically.
Always plan ahead and expect that what you are seeing on your desktop may not be the same as what someone else may see.
Are we there yet?
I’ve just realised it’s been a while since someone argued that “tables (for layout)” were better than CSS so are we finally turning the corner?
“Tables v CSS” was the stable fodder for many heated forum discussions but I don’t remember seeing a similar discussion recently. Did CSS win or did the opponents become extinct?
Or did they move onto html4 v html5 battles instead?
I’m feeling reflective this morning and no it’s not the silver jump suit I just happen to be wearing.
I’ve been wondering how I’ve arrived at where I am at this point in my life. In part, I have to attribute some of my success to the people that went before as there are some very clever people around involved in this “web design business”. Where would we be without them?
A number of them give their time, energy and commitment for free or often for little reward.
They’ve spent hours squashing bugs, fixing layouts, documenting problems, raising standards or just helping out lesser mortals when they can. It’s this selfless but driven approach that makes this “web community” an interesting community to be a part of and helps us all to raise the barriers that we set for ourselves.
We can all be taller if we stand on the shoulders of giants, and I just wanted to say thanks to all of you that have taught me so much.
When someone says “it can’t be done with CSS alone” my first instinct is to try and prove them wrong. I don’t know why I feel like that or indeed why I have to prove myself but that approach has often taught me more about how things really work and even 10 years into CSS I still find new ways of doing things. Many times over the years impossible seeming tasks have been beaten into submission with a little bit of lateral thinking.
I remember when I started in CSS and would read all the tips, tricks and hacks that I could find and then take that advice as gospel. For a couple of years I didn’t question the things I had learned but as I became more proficient I started to realise that some of the things I had learned weren’t quite true and that with a little extra effort and a bit of head scratching many things could be achieved that were previously thought impossible.
Now, when I am confronted with a tricky question or problem I make a point of saying “I can’t do that” but that doesn’t mean it can’t be done.
Not everything is possible of course but don’t accept that something isn’t possible until you have tried it for yourself.
Let’s design a car that has square wheels and no windows because it will look really cool. Then let’s put the steering wheel on one side of the car and the foot pedals on the other side of the car. While we’re at it let’s forget to put a door on it so that you can’t actually get in to drive.
Now let’s give the design to the mechanic and tell him to build it.
It’s a sure bet he will tell you where to put your designs in no uncertain terms. Why is it then that designers/clients feel they can take the same approach to building a website? Mysterious unfathomable menus, text too small for the human eye to read and graphics the size of a bus.
I should stick to my guns and tell them to change the design, and although I complain about it at the start, I usually end up coding it much like the client wanted from the start. So the next time you visit a site and can’t work out how to navigate and where the text is too small to read then that will be my fault!
I’m mourning the passing of IE6.
It’s not that I like IE6 or like coding for it but I’ve spent my whole life learning all those hacks, tricks, tips and other nonsense fixes to beat it into submission. I used to wear my hacks as a badge and took pride in getting IE6 to behave in situations where others couldn’t. Now that time has passed and I feel like I’m in mourning. I have all that knowledge sitting in my brain waiting to burst out but with nowhere to go.
When I code now, I write rules that I know will work and be interpreted correctly by the more modern browsers but where’s the fun in that?
You know what I say?
To * html with it all...