Andreas presents: 07!
Hello and thank you for your interest in this template! Before you jump to any conclusions about it, please me explain the idea behind it.
First of all, this design was made by request from a friend who holding html/css classes for beginners. He asked me to create a design that was "so simple that even [his] grandmother would be able to use it", that he could use as an example in his classes. I couldn't resist a challenge like that!There were some specific requests for the design, to make sure that it would work with the way my friend teaches. The content had to be separated from the presentation, and every part of the design had to be made in way that would be easy to understand - and learn from. No advanced tricks, and minimal use of IDs or .classes in the stylesheet. A fixed position site menu and some neutral images was also asked for.
so, how did I do it?
The easiest way to see my approach on the challenge is to view the code. Download the template and play with it for a while, and you will hopefully see that this every part of the template is created in an easy and effective way. For those of you who want some more information, I will try to explain how this design was built. Here are some short facts:
- The content is fully separated from the presentation. No inline styling has been used.
- Valid XHTML 1.1 and CSS2. Section 508 OK and AA-rated with the WCAG 1.0.
- Number of .classes: 0. Number of #id's: 3 (#sidebar, #menu and #content).
- Number of styled tags: 10 (html, body, ul, li, a, img, h1, h2, h3 and p).
- Two small images (total size: 142 bytes) have been used to improve the design, but the template works just as good without them.
- Two content image examples (total size: 9.2 kb) have also been included.
- The sidebar has fixed positioning to keep it in place when the rest of page scrolls.
and a few notes:
The example images are all made by myself using one of my own photos, and you have my full permission to use those images in any way you want to. However, I recommend that you replace them with something of your own. The photo shows a violet flower, by the way...
To make the fixed positioning of the sidebar work with Internet Explorer, a conditional comment and an extra CSS file has been used. I would normally not do that, but the fixed sidebar was requested and I don't know about any better way to make it work without adding scripts (which is not an option). If you know any better way, please let me know!
open source web design
This template is released as an open source web design, which means that you are free to use it in any way you want to - and edit it in any way you want to. I kindly ask that you leave the "Designed by Andreas Viklund" text in the footer, because that would be a nice gesture to me - and I would appreciate it very much. But there are no obligations so if you really want to remove it - just do it.
However, if you remove the credits and use this design for commercial purposes, please consider making a symbolic donation through the PayPal link on my website. And feel free to send me an e-mail with a link to the site where you have used the design, it is both fun and inspiring to see how my work is used and what changes have been made...
Good luck with your new website!
(0)
