Planning your Website
Introduction
Here's a little information that some readers may find useful. Basically this article describes the steps I take in planning a website, and more importantly, how to progress from the planning stage to the actual finished site. So how do we even start? Let's take a look.
Planning is everything and is the most important step in any website. The goals of the site, organisation and the actual interface design are key steps to consider.
Goals and content
We all start with ideas of what the site should look like but we must consider what the site will contain and the projected audience. For example if we are designing a site directed towards children 6 years and younger, then the user interface should probably be attractive and interesting to a child's keen eye.
Organisation is also a key factor. How are you going to categorise pages? The best method for this is keeping similar pages and their assets together within the site structure. The site structure should be one folder on the local drive with subfolders and content within that one folder. Global assets (used constantly throughout the site), such as images and css files should be placed near or at the top level of the site structure. It is easier and keeps costs down (bandwidth wise) if assets are reused instead of duplicated.
Creating a composite Design
It will save a lot of time and money in the long run if you at least have a basic design idea. I find the best way to do this is draw a few basic layouts on paper. These layouts can then be transferred into PhotoShop or your preferred image software. Creating a composite drawing of the site with software is a great advantage. The software allows you to tweak and rearrange your layout without having to reorganise html elements.
Tip: If you're not rushed for time, you can come back to the design after it's created, you can usually notice things where you would not have before and improve the design
Consistency in layout and design elements will ensure that your users won't be feeling like they're lost in a whirlpool of information. Users should be able to find what they need on other pages just from looking at the homepage. Remember that if your users can browse your site without frustration and even noticing the FUNCTIONAL design elements, you have a solid design.
Designing the Navigation
Navigation should also be consistently placed throughout your website. A user should know where they are within the site and how to return to the top level if need be. Think about how a visitor would move from page to page to get a feel for your own site.
Interface Design
The good news is that if all the content is available it can be separated into its appropriate pages and sections and even added to the html.
With using CSS, the emphasis is creating an information architecture that a design can simply be laid over. So no matter what design you have in mind, it can be added to the html and therefore keeping the design separate from the information.
Tables or CSS?
With the look and feel established, you can almost progress to your html editor. Just one question... tables or Cascading Style Sheets?
Either you will be designing the site using tables or CSS. Both have their benefits but CSS is the future with web design (that and I prefer it!). With tables, the site will look uniform across browsers but the design must be integrated into the html and this can make modification a nightmare. With CSS, there will be some discrepancies across browsers as each renders it differently. Some older browsers don't even support it.
However, as mentioned earlier, the design can be separated from the content when using CSS and with this you can change the whole design simply by swapping the CSS file.
Prepare the HTML
Before the design can be implemented, the html must be prepared. Depending on the layout chosen, <div> tags must be placed around the main sections. For example if there is a header, alpha navigation, beta navigation, content and footer, a div tag with and id should be placed around each of them. For example: <div id="section">Content here</div>. You will have a linear series of information contained within blocks or boxes which then can be formatted in a CSS file.
Your html may look like the following:
<html><head>
<title>CSS Example</title>
<link href="cssExample1.css" rel="stylesheet" type="text/css">
</head><body>
<div id="header">This is the header</div>
<div id="navigation">This is the navigation</div>
<div id="content">This is the content div</div>
<div id="footer">This is the footer</div>
</body></html>
Adding the CSS
The CSS is then added to the related div ID. In the following example, the positioning is added for the layout. Background colours and borders are also added so we can see the boundaries of each div tag.
Your CSS may look like this:
body { margin: 0; } /* no margin in the body */
div { margin: 5px; } /* all div tags have 5px margin */
#header { position: relative; height: 100px; margin: 10px; border: 1px solid #999; background: #ccc; }
#navigation { float: left; width: 20%; border: 1px solid #999; background: #ccc; display: inline; }
#content { float: right; width: 77%; border: 1px solid #999; background: #ccc; display: inline; }
#footer { position: relative; height: 50px; clear: both; border: 1px solid #999; background: #ccc; }
As you can see from the above example, the CSS can be modified to arrange your sections (div tags). With only the few lines of code above, you can see the possibilities regarding customisation. From here the design gradually can be transformed from the image composite into a fully functioning website.
In Conclusion...
If you have taken time to plan out your website and create a composite image to work with, then transforming that design into code should be much easier, saving a lot of time in the long run. You are now free to manipulate your CSS and be advanced as you like.
