Content vs Layout: How to Design a Website Where Content is King
One of the most important parts of your content isn’t the text at all – but the web layout where the text is presented. A website can make or break your content just by how it looks, and a good web presentation can make strong content even more successful. So let’s dig into how your web layout should be supporting your content in 2019, and what digital marketing practices can help with that.
Use More White Space
This can sometimes seem counterintuitive to businesses, but trust us: White space is a powerful tool in today’s web world. Homepages without white space and too much text is a top indicator that your web content needs a rework. Visitors will automatically ignore white space and focus instead on your content – right where you want them to be. This is why minimalistic websites can often prove so effective (especially on smaller mobile screens). It’s okay to have large sections of a web page where there’s…well, nothing. Don’t feel compelled to put text, ads or graphics there. Let the white space help you out instead.
Note that white space doesn’t always have to be white. If your web background is brown or blue or pink, that still works. It’s all about directing attention with negative space.
Make Your Navigation Obvious and Immediate
One of the great rules of web layout is that people are always in a hurry. This can create difficulties when it comes to website navigation, especially when it’s poorly designed. Navigation should be obvious and very quick to respond. This isn’t the place for fancy graphics or time-consuming dropdowns. Make your menu buttons large, simple, and one of the first things people see when they visit your site. If someone can’t find the page they want within a second or two, they are likely to simply leave. If you’re having trouble making your menu less complex, this is a sign your website could use some consolidation so it can be quickly described with several clear sections.
Once a visitor has reached their desired destination, try to have an indicator that shows them where they are, what section of the website they are in, and allow them to return to a broader page selection if possible. Your web pages should always have these useful signposts that help people know where they are and give them the ability to quickly go back.
Where Possible, Reduce “Choices”
Following the menu issue, remember that analysis paralysis is a very real threat, especially on more complicated websites. If people have too many options for what to choose or where to go, there’s a good chance they will stall out and leave, feeling overwhelmed. Keep your content simple, and find ways
to reduce choices. For example, instead of listing every product you have, you may want to start by listing a few major product categories with large icons and buttons, so people just have a simple choice to make.
Place Your CTAs (Calls to Action) the Smart Way
CTAs are one of the most important parts of your website – and they can also be one of the most challenging to design. CTAs must be obvious without being intrusive, familiar without being boring, and friendly without overwhelming visitors with information. That’s a lot to think about! While you should create calls to action that are unique to your brand, we can offer a few pointers on placing them:
- Make Your CTAs large and easy to understand. Use bold fonts, box the CTA off in its own section, and make it obvious what the CTA is, and what visitors get in return for answering it.
- Try to put CTAs after important content, not before. People are generally there for the content, not the CTA. Don’t make them scroll past it – they won’t scroll back up again.
- Use familiar language. The CTA is no place to get fancy, you want people to understand it immediately. “Buy now” and “Sign up here” are still standbys for a reason, and this plain language may also help search engine optimization.
- Make forms clear, easy to click on, and fast to fill out. Don’t ask for too much all at once if you are collecting information.
- Dedicate a page to your CTA. Want your CTA to stand out more? Give it front-and-center billing in your contact page or similar location, so you have a place you can direct people for a fast response.
Use Complementary Colors and Geometric Shapes
Color schemes can vary greatly based on industries, logos, and other factors. However, you should also pick themes with complementary colors. Avoid using very bright colors or colors that clash. Your color scheme, whatever the inspiration, should help enhance your content, not distract from it, so make sure your text easily stands out from the background and can be read without any eye strain. When in doubt, black text on white is absolutely a good choice!
Likewise, focus on simple geometric shapes for your web design and icons. Circles, squares, dots, etc. are all acceptable. Don’t be afraid of picking a layout that initially looks “boring” – that’s often a good sign that newcomers will be able to find what they want! Lots of different shapes, pop-ups, and animations all distract from that purpose…and they can slow down your site performance.
Make Your Images Supportive and Responsive
Every image on your site should have a purpose, and that purpose should be to support your content! Try to keep more generic images above your content, as an introduction and way to lead into the text. Use explanatory images (graphs, infographics, diagrams, etc.) sparingly throughout the content to explain finer points, and make sure they are clearly labeled for readers and for SEO. Avoid using tiny or unnecessary images in menus, backgrounds, or off to the side of the primary content.
It’s also particularly important that your images are responsive – that they adjust according to the device the user is on. Your entire layout should be responsive, but image problems are one of the most
egregious mobile sins: Non-responsive, ballooning images make websites unusable on mobile devices, and people will just leave rather than trying to figure out where your text and menus are.
Pick Fonts for Clarity, Especially on Mobile
Blue Atlas is happy to help you pick the right fonts for your logo and website through our website development services, but for the moment we’re going to stick with some basic advice: Pick the font that’s easiest to read. There! That’s all you need to do. Font clarity is more important than ever before, especially considering how many people will be looking at your sites from mobile screens. This is one reason we’re seeing everyone move from “cutesy” or cartoony fonts to more serious, unaffected font styles that focus on readability above all – even when it comes to logos.
Make Sure Your Headers and Content are Clear and Consistent
A good web page will have a nice, large header, followed by clear, well-spaced text. Try not to divert from this basic formula: Big headers, then clear text. Every webpage should follow this example for consistency, even for more complex content. Visitors are assured when each page has the same basic layout: It makes it much easier for them to hunt down the information they are looking for.
Lacking Experience? Try CSS Grid
If you have little experience in web design and are worried about making the wrong choices, research can always help narrow down your options. But we also suggest you try a CSS Grid layout module: This particular makes it really, really easy to design a healthy web layout without making mistakes. It’s an effective starting place when renovating an old site or building your first site.
