Part 14: Understanding Website Structure
When using WordPress you can pick from a whole range of website designs. The main look and feel of your website is achieved by picking a Theme that you like. When you pick and install a theme, you are adding a basic design and also a basic structure to your website.In this article I want to show you some of the main elements of a website. That will help you to plan out how you want your website to look.
Not all websites look the same but generally speaking they will all contain some basic elements. To do this I am going to look at a typical website layout.
A website normally has a standard size of 1024 pixels wide by 768 pixels. That certainly used to be the case, but as so many different sizes of device are available to look at websites, it really no longer applies.
Your theme will tell you what size it is and typically you may get a content area width of 760 pixels and a side bar width of 300 pixels. Have a look at a basic web structure below.
As a general rule most websites have a header area, a footer area, one or two sidebars, menus and a content area. Now of course not every website will look like this but the main elements will be similar. Let’s have a look at those so as you can get a better understanding of what each part is used for.
The Header Area
This is the very top part of your website. Typically you will find a logo there that should represent your brand. Many website owners then like to have a graphic that shows people what their website is about. They then add writing to this graphic to explain the main purpose of the website.
Some website owners prefer not to have a graphic and just have some text there. Others like to have sliding images that change to show what is available on their website. It is a question of personal taste.
If you decide on a graphic then you will be able to find out what size the header graphic should be by clicking on Appearance>Customize and then Header. Just be aware that some themes do not support a header at all.
The purpose of a header is to make it look visually pleasing and tell visitors what your website is all about.
This is an area where you can show things like Copyright notices, add widgets, and tailor to your needs. What you can do there is very much dictated by your theme. Some themes will allow you to have a Footer Menu, and if it does, then this is a good menu to put your legal pages into.
Some websites use sidebars and some do not. Again it is down to personal preference. The most common use is to have some pages with no sidebar, and some with a sidebar. You can set that when creating your post or page on an individual basis.
Some websites will have a sidebar on the left or on the right. Some others will have two sidebars one on the left and one on the right. Once again the theme that you pick will determine what options you have available.
The most popular choice is to have a Home page with no sidebars and then other pages and posts with a sidebar. This is all about how you like to present your information.
This is the most important area as it is where your content goes.
The theme you pick will determine the number of menus that you can create. All of them will have at least one main or primary menu which sits along the top usually just below the header. That is where you put links to your main pages in a menu style.
Some themes allow a footer menu and you can add other pages there such as your legal pages, copyrights etc.
Planning Your Own Website
Something that I have always found invaluable is to simply get a pen and paper and sketch out what way you want your website to look. Look at your competitor’s websites and see what they do.
Look at other websites and figure out the elements that you like. This may take a few attempts but it is worth the short amount of time it takes you to do this task.
For an Amazon Affiliate website, there is no right or wrong way of designing it. The one thing that you need to be certain of is that when you have got your own design sketched out, that the theme you pick can allow you to have that design.
For example if you want a sidebar on the right does the theme allow you to have that? If you want a header graphic does the theme support that? If you would like both a header and a footer menu does the theme allow you to do both?
My Own Personal Preferences
I have built quite a few Amazon Affiliate websites and tested and tweaked different designs. The one thing that I have learned is that my content is the most important thing. Anything that distracts from that is a bad thing and will lose me potential earnings.
It is all too easy to get carried away with adding fancy graphics, lots of widgets like calendars, images, flashing adverts etc. I have done this and it is a very big mistake. If a visitor types in “What is the best grinder for a french press,” that is what they want to find.
They do not want to be met with sliding headers, flashing images on the sidebars and a website filled with adverts. They simply want to know what grinder is the best to use with their French Press. Even though all of the graphics etc may look really nice, more often or not, they are just a distraction.
Keep the design as simple as you can and as professional as you can. The link below is to an article on my website, and as you can see it looks nice and clean with very little distraction for the visitor.
You will notice that when you look at the article above, that the content is the most important thing on the website. The article has clear headings, a white background, images and a video all designed to answer the visitor’s questions.
You will also notice at the bottom of the article are other related articles.
Web Design Principles
When considering your design do what the experts do as they know what works. They know how to use space, layout, colours and fonts. Your font should be the same throughout your website.
Use colours to highlight but never go crazy with a lot of different colour schemes and whatever colours you pick, keep them consistent throughout your website.
Use images but think about where they should be placed and what size they should be.
Easy navigation for your visitor is essential and it is said that a visitor should be able to find any article on your website with no more than 2-3 clicks.
Avoid writing long paragraphs as they are dull and very hard to read on a screen. I have looked at the websites of many beginners and I see this mistake repeated time after time. Paragraphs should be no more than 3-4 sentences.
Avoid clutter at all costs and allow your visitor to be drawn to the information they have searched for.
Page & Post Design
Later in the case study I will be adding pages and posts to my website. I also like to quickly sketch those out and normally use a whiteboard to get a sense of how I want them to look.
When you get into the meat of writing your articles it is all too easy to forget the basic design principles. Sketching out the layout and general feel of each article really helps a lot and takes less than a minute to do. When you get used to adding articles then this simply becomes a habit and you will not need to sketch them out.
The key learning is that sometimes it is a good idea to go away from your computer and grab a pencil and paper. Draw out what you would like your website to look like. You can tweak it of course but just get a sense of what you would like the feel to be.
Think of what colours are best suited for your topic. For my case study on my coffee website, the colours brown and cappuccino are ideal, but I would not want more than 2- 3 colours. If you had a gardening website then a couple of shades of green are ideal but not 40 shades of green.
Keep your content black writing on a white background. There is a reason why newspapers and books have that.
Plan out the general look of your website and decide if you are going for a graphic in your header or not? Are you going to use sidebars? What will be in your menus?
All you need is a basic general look and feel to your website as that will help a lot when you start adding your content. The theme that you pick will then need to be able to allow you to have the website looking that way you would like it.