Learning through mimicry
Monday, September 24th, 2007There are several web design projects I am actively working on at the moment. Some are for my real day job but many are personal endeavors I am likely not to finish. Nonetheless, these projects forced me to solve interesting problems I knew someone else had already solved before me.
Why reinvent something when you can just “view source”?
By no means am I implying you should copy the others, but you should at least take a few seconds to try and understand the concept behind their solution.
This is a quick, rough list of the things I’ve learned; especially by looking at Apple.com and Google Maps.
CSS Browser validation
If the programming language being used permits it, you should have quick access to the surfer’s browser as the page is loading. By cleaning this string, you can extract a rough approximation of the browser’s type and version.
Afterwards, if you attach this cleaner and shorter approximation as the <html>’s id, all of the children nodes can be modified and tweaked using basic CSS rules:
p.box {width:200px; padding:10px;}
#explorer6 p.box { width:180px; }
This should be remembered when you can’t use conditional comments to fix a rendering issue. You can push it by adding the current page id to the <body> tag and continue filtering the rules further:
form { background-color:#000;}
body.contact form { border:1px solid #333; }
body.register form { border:none;}
Customizing recurring styles
When you have a global theme but each single page has a very different style for its content area, you can still use general styles and customize what you need at the lowest level.
For instance, a colum-based design is often used on web pages nowadays. You can still define a column set using these kind of rules :
.col_1_2 { float:left; width:60%;}
.col_2_2 { float:left; width:40%;}
With this is mind, you can build a widget or any sub-designed area with two columns. If this rules needs to change in only one page, you can override the rule to reflect new sizes.
It’s common sense and good use of CSS to try and sort out all the global widgets or recurring design types that way. However, when you think on a page-to-page basis, one might feel it isn’t necessary to link the style of the lowest webpage to the global skin.
On big project using exhaustive imbrication of templates, using global styles as startups will really save you some time.
