Site Design & HTML Markup: Web Page Elements
Originally Published: 2006-03-12
Updated: 2006
Web pages are created by sharing elements. All of these elements exist on all pages created for a Web site. This articles discusses those elements and how these will affect the site's design.
After determining the theme, or type of contents, and target audience for the site, then the next step is figuring out the Web design that will help pull everything together.
This goes beyond selecting of color scheme or pretty graphic files to use. Actually that part of Web design is often the easy part.
Getting Everything to Work Together
You want all the page's elements to work together. This means providing of clear navigation through the site while factoring in the Web page's elements used to present those pages' contents.
- HEAD
- Opening HEAD tag
- TITLE element
- META elements
- COMMENT (if any)
- Some people use this area to share copyright information within the raw file's contents
- Author(s):
- Creation date:
- Last modified date:
- Email address:
- File name:
- Some people use this area to share copyright information within the raw file's contents
- Style sheet link
- Closing HEAD tag
- BODY
- Opening BODY tag
- Contents
- Use structuring & content-based markup
- Introduction
- Supplying the
hook
to get people to read the rest of the page's contents
- Supplying the
- Purpose
- Information or contents
- Scope
- Type of information, how much information, how that information is shared, etc.
- Footer
- Signature
- Copyright information (if not already shared previously in page)
- Date Stamp (if not already provided in page)
- Privacy statement (if not already provided in page)
- Address
- Contact person
- Address
- Phone number
- Fax number
- Hours
- Email address
- Etc.
- Signature
- Introduction
- Use structuring & content-based markup
- Closing BODY tag
All That - on one page?
The above shares the breakdown of a page, with some ideas of what you could present in those areas in with anything else you decide to add into that page! This is why the design of the layout, or presentation, cannot always be a simple process of going to a template site, selecting one, and then inserting your contents into that template.
First off, templates are often created without a particular site's contents, or needs, in mind. Many templates, although aesthetically appealing, may not work for any ol' site's contents. A template may look all right until the page's contents are inserted or attempts to modify it occur. Sometimes the contents just won't work with the template author's ideas.
For example: some templates have the navigation links running across the top, which may not work or retain the aesthetic appeal if your contents need to add more to that area or changing the template's present wording for those links. Your image choices (colors, size, or number) for a page may not work with the template.
Although many sites on the Web may use the basic layout of contents (shared above). The site's design layout is created then tweaked, or adjusted, to have it work with the contents' presentation. Then, in terms of design, the focus can switch over to the aesthetic, or eye candy, touches.
Some site's contents can work well in a simple layout but won't work as well in a more complicated layout. Some contents cannot work in a simple layout. You cannot force contents to work with a design, the design should work with, and compliment, the contents while providing ease for your target audience's use of the site plus aesthetics. This is where the time involvement comes into the designing side for your Web site.
All the above helps explain why the designing should occur after planning the site's purpose and its target audience. Those two things have more impact on the site's design than color scheme or logo selected.