Website Architecture
Delivery mechanisms and coding preferences aside, the developer will concentrate next on website architecture, the interactive visible structure presented to visitors. This will involve the generation of the HTML markup from the wireframe model (if the earlier skeletal framework mockup was purely graphical and not HTML) and, importantly, creation of the site navigation and page menus. These elements are situated within the body section of a web page; however, the body itself is contained within other sections which merit examination.
A typical professional web page will contain the following sections:
Website head
DOCTYPE header
Usually the first line in a web page, it instructs the browser how to interpret the code and what flavour of markup is used, HTML or XHTML and which version.
HTML Container
This further describes the HTML employed and the language base for the page
Head Container
Various tags may sit within the head container and assist with page classification and description. Other tags, like Link, declare and point to page resources such as CSS files or load chunks of external code, perhaps JavaScript. One particular tag, the Title, contains what is displayed in the browser page title bar. Still others assist search engine spiders and other document retrieval mechanisms gain more insight into site content.
Apart from site descriptors, the head tag also may contain references to support files such as CSS, JavaScript, image icon, or reference additional external files with specific purposes, such as those used by ICRA (Internet Content Rating Association) to clearly identify page content with a view to protecting minors from questionable content.
Many tags in the head are referred to as meta tags, some are required in a well defined header, other, as with ICRA, are proprietary tags which are optional but which nevertheless are recognised by the W3C. Another optional set of meta tags is the Dublin Core Metadata Initiative (DCMI), a method of developing and describing resources that help further identify document (web page and other) content to assist with generation of more intelligent information search and discovery systems. Dublin Core metadata is increasingly featured within government sites.
Website Body
Body Container
Within the body tag are all the elements normally displayed to the web visitor. Some elements may be dynamically generated, as with server-side script inserted at various points in the body, or called by JavaScript client-side code.
All well written websites will contain the above sections regardless of how limited the actual content but it is within the body container that the main development takes place. This is not to say that these sections are critical to operation or that a website will completely fail to function without them because modern web browsers exhibit remarkable resilience to sloppy coding and have excellent recovery and interpretation features. But a site’s chances of consistent operation, usability, accessibility and visibility in the search engines will be severely hampered.
Website Navigation
Navigation Structure
It cannot be overstated that clear, efficient site navigation is paramount to usability. Users will swiftly be disenchanted by the most attractive site if they become lost within its structure or are forced to fumble about looking for menus. Some webmasters adopt a breadcrumb strategy illustrating precisely where a user is within the site structure, at what level in the menu hierarchy. This is often the case with sprawling ecommerce sites or large portals – gateways to explore the Web. Other developers might employ menu blocks consistently positioned on each page with submenus clearly identifiable. Much depends on the depth and complexity of site content.
Once the navigation structure is in place the next step is to translate the page sections into discrete blocks. Page consistency extends beyond navigation to the areas of copy and other elements – graphics, lists, links, user input areas – that make up the shape of the page and, often, website as a whole.
Developers now use containers to divide pages into logical sections.
tags are employed to separate content into functional and presentational blocks such as the masthead (top of the page often comprising a visual or corporate identity area), menu, one or usually multiple columns of copy with perhaps feedback features, and a footer section.
The poor practice of segregating and structuring content using tables is now replaced by use of containers and CSS resulting in more compact, swiftly-rendered, platform independent and, importantly, more accessible websites.
