I’ve spent some time recently looking at the some of the best 50 CSS-based web sites of 2006, as reported on Smashing Magazine. It is interesting to see the quality of work that other designers are pumping out, and in many ways serves as a challenge to me to improve my own web design skills to meet the level of excellence they offer. So this afternoon I set about spending some time on professional development, pushing my graphic design skills to a higher level. I may not get paid for this, but hopefully it will ensure that future web sites I design will be of a higher quality, and as such I may be in a better position to advertise my sevices to a wider audience still.
So, since my blog has long been a test-bed for my web design ideas, I set about taking my current design and improving it. The image above is the result of a couple of hours of work, and I am confident that I could recreate that with HTML and CSS. In terms of layout it’s not particularly complex, the only part that is a little unusual is the date formatting, but that is still easily achievable. The rest is just a case of plugging in the right values for spacing, padding, width, font size, and using the images from that design. It would be a fluid layout, i.e. its width would scale smoothly depending on the size of the browser window. There is a possibility that IE6 might not like this, especially the bottom four columns which, incidentally, will NOT be done using a table but rather four div blocks floated left. The potential hazzard here is that Internet Explorer can’t count: 25% + 25% + 25% + 25% = more than 100%, so the rightmost column would wrap round underneath the other three columns instead of sitting next to them. Not a huge problem though, and can be solved with a fairly simple bit of IE-specific coding.
I have yet to properly address the comments sections, I’m hoping to do something creative there too, rather than the plain boxes being used at present. In the meantime, feel free to let me know what you think of the design shown above.