HTML layered Approach

HTML layered Approach

I believe you never heard HTML layered approach. Its not new, maybe a few designers are already implementing this in their HTML. This approach is not common in every Design 2 HTML/CSS project as mostly you need very simple kind of html like header, content and footer.
The reason how this article “HTML layered approach” came to my mind is one of my project that is just completed by me http://www.treadfitness.com/ When my client gave me the PSD for this design first thing came into my mind was slice it such that it appears in parts, normally designers and PSD2HTML/CSS conversion experts will slice a layout in smaller images and will then stitch them together making the images lighter as small images appear faster on slow connections. What i believe is that now it doesnt matter if your site images are of higher quality and therefore requires higher bandwidth as using Web 2.0 basic approach never use images in designing your layout remember you can use as many images for content as you want. Wow so if you dont use images how your design is going to be converted in the way it is in PSD. Dont worry friends as now we can call images as background through CSS, and with that strategy your content will first load and then your background images, so your visitors will be able to see the content while your design loads. Now it doesnt mean that you put your whole design into a single image and make it appear in background, try it in a more graceful way. I mean make them appear in layers.
In Web2.0 based design approach if we strictly follow the rule to not use any image for the design purpose than we must be using layers. If you are a designer and wants to convert your extensive graphical PSD layout into HTML/CSS like lets say one of my HTML/CSS master piece http://www.stuckincustoms.com a photographer blog. If you look at it while it is loading the content, you will see each layer is loaded one by one while the whole text is loaded first, even the images those are used in the content loads faster than the background (Note: you need a DSL connection to view this design as it has more than 100 images in one page and its designed and implemented for atleast 1200 wide screen). As these days fluid layouts are not advised because of poor handling by DIV’s so you need to specify width of the website container. Dont let your self over taken by Google as they always use liquid sites, off-course they have a few issues after your site is loaded and you decrease its width, i dont want to go off the track so lets concentrate on my basic point here, so now you don’t need to slice your design into so small images and then load them, i believe the earlier approach has its own advantages but the main advantage is it force me to write more code than a simple header footer and bg approach in which i can get things done in simple 3 classes.
I wish i had enough time to explain all these tricks how you can make your site display in layers, but if you have FireFox installed and my favorite plug-in of FF “firebug” then please check my portfolio site WebComers and check my portfolio projects. Remember do keep visiting my site as i will be posting more of my portfolio projects in a few days after i complete one of my upcoming design plus HTML/CSS project..