Your Pathway To Success › site one
Informations
about this design
This design was produced in less than 5 hours on a rainy afternoon. Its thought as a community layout but feel free to modify it for an other type of website. You shouldn't have any problems with diffrent machines and browsers because it's valid XHTML 1.0 transitional and CSS 2. Verdana and Georgia are used as the main-fonttypes, except them only Arial is used. The text is displayed in 12px, Verdana, left-aligned and with an line-hieght of 20px (1,7em).
the stylesheet
The Cascading StyleSheet is structured in a special way. At the top you'll find the definitions for all the main boxes which keep the layout in form. Under that you can find the definition for dark-gray 'latest'-box. In all these catergories the items again ordered alphabetically. The 3rd category is for the elementsin the #content-container. At last there you can find the definitions for the sidepanel.
using it
This template is published at OpenSourceWebDesigns, so you're allowed to modify and use every part of this design.
Expert Tip
Debug backgrounds
The background colours in this tutorial won't win any design awards, but they are useful for figuring out how different parts of the layout relate to each others. Such backgrounds and the construction of websites - in fact, you could set the final section of your CSS file to be an area that defines bright colours for your main structural divs. This should be commented out, and you can temporarily remove the comments when debugging and editing your layout.
Low option count
When designing a web application featuring a user customisable design, it's best to approach the task with clear constraints. Take a look at your design and decide which elements you think should be editable. Twitter allows just seven different aspects of the site to be changed : background colour, background image, text colour, name colour, link colour, sidebar fill colour, and sidebar border colour. We've learned that constraints can lead to amazing creativity, and that providing too many options can lead to confusion and can be, at times, very intimidating.
Keep up to date
Browsers come and go, and web standards and guidelines are regularly updated. Also, new techniques for achieving good typography, layout and design arrive with alarming regularity. With this in mind, always ensure that your boilerplates are up to date. Seeing as they're intended as the foundation for each new project, you don't want to have old-fashioned techniques peppered around. It's also a good idea to keep your boilerplates " clean"- avoid using any hacks or deprecated elements and attributes. You can use the W3 validation services to sanity check your creations.
