Example Website Layouts
This is the Dandy Web Design layout examples page, any of the ideas and examples showcased here or generally demonstrated throughout this website could be made to work for you...
The layouts shown below serve a dual purpose: to showcase some simple layout 'templates' and also to demonstrate some of the ideas, utilities and methods which the DandyWebDesign website focuses on.
The example websites shown here are all generic examples of a typical small business website. All have similar 'dummy' content and there are a number of different layouts requiring slightly different page structuring.
As well as different layouts there are also several different styles.
One design principle is to separate content from style, the efficacy of
this principle is clearly shown by the page 'style-switcher'.
This is a JavaScript utility which uses DHTML to load different CSS
stylesheets giving a completely different appearance and style to the
same content.
Look for the style-switcher link in the extreme bottom right corner of
the pages, the style-switcher appears as a small form at the top of each page...
Each of these layout 'templates' is a simple set of files relying on server-side includes for shared content, although for a site of this scale this is not absolutely necessary. However not adding this feature in from the start, (or at least giving it serious thought) reduces your future scalability options and is not recommended!
From within each of the demonstrations clicking on the logo will return you to this page...
- Simple Layout
»View this layout example... This is structured as a typical website for a small business or organisation. It has the ubiquitous Home, About, Links and Contact pages as well as generic Products and FAQ pages. This is laid out in a fairly straight forward manner, a distinct header section contains a logo, below this is a navigation bar with links to all of the main pages. The header and navigation bar remain as constant features of all the pages. Beyond this content is fairly generic and easily modified to suit the needs of any simple user. - Two Column Layout
»View this layout example... This has the same content as the 'simple layout' above but in a slightly different arrangement. A distinct header section contains a logo, below this is the main page body. The right hand third of the page is given over to the navigation bar as well as secondary content specific to the page. The whole page layout is scalable, as the browser window width is decreased the two columns will proportionately re-arrange themselves. Generally this second column remains relatively static throughout the example website. This too is fairly generic and easily modified to suit the needs of any simple user. - Three Column Layout
»View this layout example... This is very similar to the 'Two column layout' except that the page is now divided into three scalable sections. The constant page navigation links have been moved into the lefthand column and secondary page content occupies the righthand column. As with the other layouts this is easily modified to suit the needs of any simple user.