Common Components of Websites
The structure, layout, appearance, and composition of websites have changed considerably in the almost two decades SuproNet has been involved with the development of websites. The change is the result of various factors such as fashion, usage patterns, and technology. These factors will continue to have an impact on what could be considered to be a “modern” website. However, let us explore the components of a typical contemporary website.
The typical modern website is built on a platform such as WordPress, Drupal, Joomla, or other CMS (content management system) and designed to display well and function on different devices such as smartphones, tablets, and computers.
Both CMS and the increasing use of smartphones to access websites have had a huge impact on the appearance and the typical components of current websites. Some page layouts are just easier to create in a CMS system and are easier to set up to display well on large, wide screens and small, narrow displays. Horizontal navigation menus at the top of the page, changing to a “hamburger” menu (tree short horizontal lines) on small screens, and single column content are very common and the result of standard CMS layouts and ease of adjusting the display of the content to the screen size.
Change in technology has also had an impact. One example: In the early days of the Internet, one of the main goals of a web developer was to make the size of a page (the core html and all the components, such as images, to be loaded) as small as possible so that it would load reasonably quickly using the slow dial-up modems of the time. This meant that graphics tended to be small and of low quality (highly compressed). With more general availability of always on, high speed Internet access, these limitations have been lifted. It is now possible, and to some extent expected by consumers of websites, to provide high quality images. This, together with factors such as fashion, has led to the proliferation of the sliding banner with high graphic content at the top of many web pages. Even video is often used in the banner. Despite research that show that the vast majority of people ignore these banners and do not sit around to see all the slides, website owners generally want them on their websites and it makes a website visually appealing.
Another interesting change: The first company websites were generally “brochureware”: They presented information about the business very much in the form of a brochure or profile of the company. Nowadays the emphasis is on getting business results through the website. It is all about what you want the visitor to do when they get to your website. Hence the emphasis on “call to action” (CTA) buttons. These are generally placed near the top of the page – as part of the sliding banner or just below – and sprinkled through the website.
These, as many other factors, have led to a common layout and design “language” for websites. Having your website built according to these common practices has advantages and disadvantages. Two of the advantages are:
- Your website visitors will feel comfortable with the website since it will follow a well-known structure. They should be able to easily navigate it and find what they are looking for.
- You incorporate “common wisdom” and “best practice” without even thinking about it or having to spend a lot of time researching it.
However, there are also disadvantages to following this common language. Two of the disadvantages are:
- Your website will look like millions of other websites. Though it will (hopefully) have its own identity through the implementation/integration of your corporate identity and the unique content, it will look like others I terms of layout and general look and feel.
- You probably will not be thinking very hard and doing a lot of research about what works and what does not work and what is best for your specific business and circumstances. “Common wisdom” isn’t always wise, nor is it always the best for your uncommon requirements.
So, having said all that as introduction, let’s look at the common components and terminology used to assemble and describe a typical contemporary website as illustrated in the graphics below. When considering these, remember the following:
- The main purpose of the description is to familiarize our clients, potential clients and others with the terminology and components used in order to improve communication. It is not a prescription or “standard”.
- You do not have to follow this “template” for your website. However, you should consider the various elements and think about what you need and want on your website.
- Website design is not static. The technology, fashion, “common components”, and other aspects are continuously changing.
Top of Page
Please refer to the graphic below.
Top of Page
The top of the page typically consist of the following:
- The domain address or url: The domain name/address or url isn’t really part of the website display but a function of the browser. It is shown in the browser address bar. There should be a favicon (small icon representing your website) displayed to the left of the address bar.
- Top bar: Quick contact information and/or social media links are often shown at the top of the page. This information often swop places with the navigation bar (see next).
-
Navigation bar (menu, “tabs”):
- The navigation buttons usually appear close to the top of the page. With large websites, careful consideration should be given to the structure of the website and the navigation. Roll-over buttons are commonly used for multi-level website structures.
- If the website is very large, a simple horizontal menu may be insufficient to contain all the top level buttons (due to width restrictions) and a vertical menu or other navigation devices need to be considered.
- When displayed on small (narrow) screens, the menu often changes from text/buttons to the “hamburger” menu that rolls open when clicked/touched.
- It is good practice to keep the menu visible when a visitor scrolls down, keeping access to other pages available at all times.
- The navigation bar often swop places with the “top bar” in common layouts.
-
Logo:
The company name and/or logo are usually prominently displayed near the top of the page.
- The logo can stand on its own or combined with the top bar, share space with the navigation bar or be integrated with the banner.
- Sometimes the logo is initially displayed at larger size and then reduced in size and kept at the top of the page (e.g. with the navigation bar) when the visitor scrolls down. This gives it prominence when the page is first opened but it does not take up space when the visitor moves on to the information she is looking for.
- Banner: Although the banner could be omitted or be as simple as the name of the business, it often consist of a single graphic or multiple pieces of graphic in a slide show, sometimes called a “slider”. The graphic(s) could be simple (e.g. a photograph illustrating an aspect of the business) or combine several elements such as the logo, company name, tag line/slogan, and/or call to action. Video can also be used. When using a slider, it is important to understand that visitors will often not wait to view the whole slide show. The most important message should therefore be on the first slide. The visitor should also be able to control the display, i.e. be able to go forwards and backwards and even pause the display. Visitors should not have to wait for a slide show to repeat to be able to see something that attracted their attention.
- Call to Action: The call to action shows the most important tasks/actions you would like your visitor to perform. It usually appears in the form of a button that takes the visitor to a specific place in the website. It can stand on its own or be integrated with the graphics of the banner.
-
Introduction:
Just below the banner, appears important information you want the visitor to take note of. If they see anything on your page, it will probably be the parts already mentioned and this portion of content. It is therefore important to think about it carefully. It is often used to:
- Briefly introduce the business. What you are about.
- Guide the visitor to the important parts of the website, i.e. emphasize portions of the site, in addition to the navigation facilities (menu) that enable the visitor to find any and all information on the website.
Middle of Page
The middle of the page typically contains the information and functionality that the website aims to present.
In a single page website, this will be all the content of the website, typically containing at least sections such as:
- About Us
- Products/Services
- Contact us
Other typical content, that might also form part of one of the sections mentioned above, includes:
- Testimonials and Reviews
- FAQ
- Online Shop
The more information and/or functionality the website has, the more likely it is that the content will be spread out across several pages, each with its own top, middle, and bottom sections.
For a one page website, the layout/composition/structure of the middle of the page will typically be as illustrated in the graphic below.
Middle of Page – Single page layout
For the above, please note the following:
- Each section should be clearly marked (e.g. with a heading).
-
Even though all the information is on one page, there should still be a navigation menu containing links to the main sections. This helps to:
- Make it clear what information is available.
- Make it easy for the visitor to go directly to the information she wants rather than having to scroll through all the content.
-
Graphical features can be used to clearly distinguish between different sections of content. These graphical elements could be:
- Alternating panels of different colours.
- Lines
- Icons
- Horizontal slices of photographs.
- “Parallax” slices of graphic (graphic that scrolls when scrolling down the page).
- The order in which the sections are presented is not fixed. It depends how you want to communicate the message with your audience.
In a multipage website, each page will typically have content focusing on one topic. A generic page will typically have a layout/composition/structure similar to the graphic below.
Middle of Page – Multiple page layout
The page heading could be integrated with the “Top of Page”, e.g.
- Above or as part of the top bar
- Integrated with the banner
Typical/possible layouts for common pages (About Us, Products/Services and Contact Us) are shown in the three graphics below.
Middle of Page – About Us
For the above, please note the following:
-
This section could contain the following information about the business:
- Overview/background
- History
- Values
- Vision and mission
- Group structure
- Personnel
- Testimonials
- Your website need not contain all of these content elements.
- Some of the content elements could be presented on separate pages.
- You could have similar layout and content elements of this “About Us” information as part of a single site home page.
- The order in which the content elements are presented depends on how you want to convey the message.
Middle of Page – Products/Services
For the above, please note the following:
- Your website need not contain all of these content elements.
- Some of the content elements could be presented on separate pages. Typically you could have introductions or short descriptions of products or product groups on this page with links (“Read More”) to separate pages with more information on the product or product group.
- You could have similar layout and content elements of this “Product/Services” information as part of a single page website home page.
- The order in which the content elements are presented depends on how you want to convey the message.
Middle of Page – Contact Us
For the above, please note the following:
-
Your website need not contain all of these content elements. However, it should contain the following:
- Postal and/or physical address
- Telephone number(s)
- E-mail address(es)
- Contact form
- Leaving out any of the above, may remove a visitor’s preferred means of communication, making it less likely that they will contact you. It may also give the impression that you have something to hide – making it difficult for customers to contact you.
- There may be legal requirements with regards to the contact detail you have to provide.
- The presence of a map depends on the type of business. If customers never will or need to visit you, it can be left out. Otherwise it should be included.
- Some of the content elements could be presented on separate pages. However, this is usually only done with large organisations (groups) with many regions/branches/offices.
- You could have similar layout and content elements of this “Contact Us” information as part of a single site home page.
- The order in which the content elements are presented depends on how you want to convey the message.
Bottom of Page
Please refer to the graphic below.
Bottom of Page
For the above, please note the following:
-
-
Copyright: The bottom of the page almost always contains a copyright notice. Other similar elements that could occur include:
- Privacy Policy.
- Terms and Condition with regards to using the website.
- Other legally required or prudent documents (e.g. in SA, Right to Access to Information prescribed for certain businesses).
- Alternate Navigation: This navigation device might be the same as the one used at the top but typically it will be of a different form, e.g. in text rather than in graphics (buttons), expanded (showing more levels in the structure) or reduced (showing just top level or certain pages)
-
Other possible elements:
- Contact information. This could duplicate the information at the top of the page (if present there).
- Business hours.
- Social media links: This could duplicate the links at the top of the page (if present there).
- Links to subscribe to a newsletter.
- Facility to use online chat. More commonly this appears as a small pop-up window when somebody is available to assist the visitor.
- Name of the platform (software or service) used to build the website. This is unnecessary from the perspective of the website owner and the typical visitor. It occurs most often when the website had been built using an online self-building service or when the website builder does not remove standard components of the tool they used to build the website.
- Name of and link to the developer of the website. This is unnecessary from the perspective of the website owner and the typical visitor but often included as an unobtrusive marketing mechanism for the website developer.
-
Copyright: The bottom of the page almost always contains a copyright notice. Other similar elements that could occur include:
In conclusion we want to repeat that your website may have a layout, structure and content that differ significantly from the above. The information above is provided as point of departure for discussing requirements with clients and to educate them with regards to the typical elements of a website.
The idea for this blog post came from an infographic “ 25 Features Every Online Business MUST HAVE in 2017 ” by Rose Leadem that appeared in Entrepreneur.