Website Design Matters: The Importance of Layout

In 1991 the first website was born. Purely black and white text with the iconic blue clickable links. Over the past 30 years it’s evolved and morphed into worlds apart from where it started. The oldest websites known to be still running is acme.com which pretty much embodies what a lot of websites looked like through the 90’s and even early 00’s. There was never a need to have your websites mobile optimised as the Nokia 3300 didn’t even run websites. In 1999 there was 3 million websites worldwide. Fast forwarding to 2018 there is now 1.6 billion websites live.

Two Key Factors for Users on your website

1. What Services do you offer?
2. Is the site easy to use and engaging?

Today we’re going to concentrate on the latter.

What Makes a good website layout?

Simplicity, Clarity and Harmony. When you’re designing layouts keep these in mind to make sure your site is well structured and easy to navigate for visitors. Ultimately opinions vary between who you ask and the type of website that is being developed. We are not going to discuss key elements like website speed, SEO or content – Instead we’re going to focus on the core website layout to help you attract and engage with more visitors.

Branding & Design

Every brand has a few design elements that should remain consistent throughout the layout. The logo is arguably the most important as it’s used to let visitors know who they are engaging with and conveys some sense of authority or credibility. It also serves as an anchor point for your site so you can easily identify where different sections begin and end – Establishing hierarchy in this way will make navigating much easier on future visits. 

Colour Scheme

Your brand is an important commodity and choosing the right colour scheme to match it will go a long way. When creating your layout, create one or two colours for the background and use them consistently throughout all branding elements including text to save time in any future edits. You can use sites like  https://coolors.co  which offers the ability to generate colours that work well together.

Layout

A layout section in a blog all about layouts? By layouts what I am referring to is the structure and build of your website. A user’s eye can’t be everywhere on a site so  layout is how the user navigates and interacts with your site. The layout you choose should be simple, intuitive, and easy to use – whether it follows a horizontal or vertical design.

When adding call to action buttons to your site like “buy now”, “contact us” putting them in the right place to engage your viewers is vital if you want to convert. The best place on your website can vary from country to country. Think about reading a book (or this perfectly crafted blog), you are trained to read from left to right  in a top-down manner, it’s natural and comfortable. Likewise when browsing the web we are trained to read from left to right in an upwards fashion like you would on paper.

This is why placing your call to action buttons at the end of blog posts or pages (closer to where the reader can simply scroll down) makes sense for western audiences but might not be as effective elsewhere – such as China or Korea who prefer reading downwards starting with the first paragraph which will often contain important information about products or services before moving onto other sections below 

The layout should also take into account what devices users access your site through; this means that if someone is using their phone they have less horizontal real estate than say a computer user so having a responsive design (we’ll come to this later) is vital.

The majority of websites you will visit will have a range of elements in common: 

1. A header, navigation bar or menu at the top
2. A footer – Containing copyright, some quick links and contact/help information
3. Space – I don’t think I can stress enough that utilising space is so important with a design to ensure the site isn’t clogged and hard for a user to focus on a specific area.

The most important element is that your layout should follow what’s intuitive for users; when reading from left to right people will naturally look towards where they anticipate new information so ensure you have plenty of whitespace at the start of each paragraph before starting another sentence 

You may also want to consider how much white space you leave between elements – too little and it becomes hard to focus but too much can make things feel cluttered.

Mobile Responsiveness

The general rule of thumb is “mobile first” when creating a website. Now with over 50% of activity on websites being generated via mobile devices it’s more important than ever that your website is optimised for a range of devices. You may hear different terms thrown around being Mobile Friendly, Mobile Optimised and Mobile Responsive. We are going to discuss the key differences between the three.

Mobile Friendly  – This is a website that some aspects of it are responsive, but not all. It may have a layout that changes which menu items show up depending on the screen size in order to make things more user-friendly for mobile users however this layout may change when you go back to your laptop or desktop and there’s no consistency across different devices. Mobile friendly purely means that the website is capable to function on smaller devices.

Mobile Optimised  –  This is a website that has been built to function well on a mobile device. It may not have the same layout across different devices and you won’t need to zoom in or out for text to become more readable, images etc. Facebook is a perfect example of a website that is mobile optimised. Whether you’re on a PC or a mobile the site functions and doesn’t look the exact same. Actually the mobile version is a different website, a keen observer will notice that it will redirect to m.facebook.com which is their mobile site.

Mobile Responsive  –  Here is where it gets interesting. Mobile responsiveness is still build for mobile in mind, however the PC website and the mobile site are one in the same. What mobile responsive does is it checks the width/height of your device and tracks when it changes. With this information it will adjust elements on your page automatically (after being coded of course). This ensures that if you tilt your phone from vertically to horizontally or resize your browser window on your PC the website adjusts to put the site in the most appealing view for your audience.

Conclusion

Websites are often judged on their layout and design. A good layout will help visitors find the content they want, look professional, and be easy to read. 

A poorly designed site may seem cluttered or hard-to-navigate because it’s not organized well. Sadly there is no silver bullet to build the perfectly designed website. I would highly recommend talking to a professional designer as they can help you decide the layout, colours and fonts that will work best for your site.

Here at E2E, we are experts in small businesses and how they operate and here to take the strain from your shoulders when it comes to getting an online presence that works for you. We are a team of dedicated small business specialists who know precisely what it takes and have the tools, the skills and the passion for helping your business succeed online.