There 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 force me into solve interesting problems I knew someone else has already solved before me.
Why reinvent something when you can just “view source”?
By no means am I implying you should copy others like a scanning robot, 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 used permits it, you should have quick access to the surfer’s browser information 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 <body> tag’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 a unique identifier to the current page in the class 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, column-based design is often used on webpages nowadays. You can define a reusable column set using these 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 using custom CSS identifiers.
It’s common sense and good use of CSS to try and sort out all the global widgets or recurring design types that way. On big projects using exhaustive imbrication of templates, using predefined global styles as building tools will really save you some time.
Comments
You can leave a response, or trackback from your own site. No Responses to “Learning through mimicry”.
Leave a Reply