Low-res Web Pages

Although this isn't specifically a Fireworks tutorial, recently I have been looking at producing simpler less graphics based web templates and the impact on the initial design cycle.

The design for my original web template took 58 graphics files to complete and around 160Kb.  Although this isn't huge by any means, i got to thinking that there must be a better and simpler way to code up many pages without all these small graphics files.  In this business, simpler means quicker and cheaper to create, easier and cheaper to maintain and, of course, quicker for the web browser to render.

What I have ended up with is not 100% what I set out to do, but I am happy with the results and would be interested in feed back from you too. {readmorelink}more ...{/readmorelink}

Fireworks Slicing

I'm not intending to cover this in detail here, although it is in my mind to do a tutorial on this another day, as there seems little detailed info out there in one place.  But, as you become more experienced at the steps after the initial graphic design stage (cutting and slicing your image into graphics that can be used on your page, DIV borders, repeating panels etc...) you start to incorporate these factors into the initial design.  you then start creating sub-images to get rid of details, text, icons etc..  It was at this stage, one day, that I though "well, what if I start again with a blank page - what parts of this image would be impossible to code in HTML and CSS".


I used a fair amount of transparency in my original Fireworks design and it was this that originally created so many small graphics files.  But modern browsers beyond IE6 can easily handle transparency and this opens up many tricks in the layering of DIVs in your coding.  If you're reading this article, you should already have Firebug or similar plugged into you browser; open this and inspect the elements in this page.  Search for a DIV with the id = "contentBG". 

You will see that the background of this div is set as: url("../images/swd-contentBG.png") repeat scroll 0 0 transparent;  The PNG file is a 20x20 repeated X and Y background image.  But notice that it has transparency set to around 30% (this is why it is a PNG and not a JPG).  Because this is semi-transparent, you can see the background image behind it.  Therefore, I did not need to include that part of the background in this layer.  The same goes for the green menu at the top, which has only a small amount of transparency.

The next DIV is "swd-content", this is just a wrapper partly to make coding the CSS easier and partly to give the content a padding.

The next element is variable and in this case is probably "swd-maincolumn".  This has a background defined as url("../images/swd-content.png") repeat-x scroll left top #FFFFFF.  Again the swd-content.png is a small semi-transparent coloured image.

Rounded Corners

If you say "what rounded corners", you must be running IE.  I decided that although a huge proportion of the web run IE, you've got to start putting your foot down somewhere!  The page works perfectly well in IE but doesn't have the softness of the rounded corners - tough! One day, I will add a modal pop-up to say just that - install a decent browser and enjoy this (and many other sites) much more!Many of you won;t agree with this, saying that we should cater for the majority.  I say, until we designers stand-up and say enough, MS will never change!  It works but it ain't as pretty!


I played with many ways of getting the drop shadows to work and ended up using Javascript.  I did this because my goal was ease of coding and ease of maintenance.  I tried using nested DIVs with various images et... but discarded those in favour of the javascript option. If it takes another second to load then so be it. So a huge thank you, in the end, to Larry Stevens who wrote the jQuery plugin - it works a treat.


So, there's nothing revolutionary here but I have reduced the number of graphics files to around 6-7 taking less than 15Kb (I know that my background is big - this is my next project). It's more a question of methods than technology and for me, it's the way forwards... at least until something better comes along.


Did you know you can hire me?

I take on projects of all sizes. From Consulting to large Development Projects.

If you're starting a new Yii project and would like some help to get setup and running or you need some help with a particular module or you just need someone to develop the whole dang thing, then just ask ...

Leave a Comment

twitterfacebookgooglelinkedin https://me.yahoo.com