The Definitive Best Practices for Web Content and Design
6 Killer Principles to Master
We’ve talked before on the OBI Creative blog about how to make your website not suck. Here, we dive deeper into how to write and design well for digital. Here are six principles to guide your understanding of the new rules for designing your website and filling it with content.
1. Keep it simple.
Do a Google search for web design best practices…wait, that’s probably how you found this post. 😀 Seriously though, the pain is real. Website best practice results are endless and can feel overwhelming. The best thing to shoot for when it comes to writing and designing for your website is simplicity.
The way your website looks is important. You should strive for a site that looks good, but if your design is slowing down your page load time and visitors can’t find what they’re looking for fast, you’ll lose them. In fact, many people decide whether or not they are going to stay on a site in less than a second. Consider these startling statistics about website design:
- A single bad experience on a website makes users 88 percent less likely to visit that site again.
- Slow load times for images make 39 percent of users to stop engaging with a site. If they encounter delays, 75 percent of users will click off the page and head to competitors’ websites.
- Nearly half of users (47 percent) believe that a website should not take more than two seconds to load.
- Your conversion rate can tank by 7 percent with a one second delay. Improving your page load speed by two to eight seconds can send it soaring.
While the look and feel of your site matters, most visitors aren’t evaluating just how slick it is. Rather, they’re visiting your website because they want to do or find something specific. Help them by ditching design elements that have no functional purpose; using a few strategic colors; choosing up to three readable typefaces and fonts for your content, and keeping your overall UX and website design focused on motivating your visitors to take specific actions.
2. Motivate visitors to act.
Website designers who know what they are doing can deftly arrange the visual hierarchy of content on your website to arrange elements so that your visitors move toward the most important features first.
Your goal with visual hierarchy, or how each page of your website is laid out visually, should be to lead visitors to make a desired action, but in a way that feels so natural to them that they don’t even realize it’s been designed to get them to do what you want them to do. The position, size and color for various elements can work together to draw a visitor’s eye to what you want in a particular order.
Take the example of Spotify’s homepage below:
What’s the first thing your eye goes to?
It’s probably the green “Get Spotify Free” button because that’s exactly what Spotify wants you to do. They use copy well to tell you very quickly and simply what Spotify is and why you need it in your life.
To further drive home the point that simple design and thoughtful visual hierarchy matters, see just how good Spotify’s home page looks compared to the Yale University School of Art homepage:
The repeating photo on the website’s background, while potentially interesting, takes attention away from the content, which is buried on the left side of the screen. It also breaks the general web design rule that repeating images, if used, should be subtle and not distracting.
Which one would you rather look at?
Is it clear what you’re supposed to do?
Again, these two examples show the importance of designing your website with your users in mind and what actions you want them to take when they visit your site.
If you aren’t sure what actions you want them to take, go back to your customer personas, research your customer base and reacquaint yourself with what they need and want and how you can help meet those needs and wants in the most pleasant, satisfying and efficient way possible.
3. Make your website easy to navigate.
The photos we just looked at are great examples of good (Spotify) and bad (Yale Art School) navigation. Your website navigation should be intuitive, meaning it should make it easy for your visitors to find what they’re looking for — fast.
At OBI Creative, these are some of the practices we use to make sure we create websites with intuitive navigation:
- Wireframing — Before we design even one page’s layout of a client’s site, we create wireframes that hammer out the navigation that we’ll use consistently across the site. We talk these through with our clients to make sure they make it easy for visitors to know where to click next.
- Mobile Menus — This is just a way of using alliteration to say that we design website navigation with mobile devices in mind. Since most web traffic is done on smartphones, the navigation structure has to work as well for mobile as it does for desktops.
- Usability Testing — After the design is complete but before website launch, we perform thorough usability testing on the sites we create for clients to make sure everything works properly, but also to ensure that the menus and navigation is smooth, easy to understand and pain-free for users.
A few other basics when it comes to good navigation include:
- Keep your primary navigation structure simple
- Include primary navigation in your footer
- Use breadcrumbs on every page so users can see how they got to any page on your site
- Make sure you include a search box near the top of your website, on every page
While more could be said about the topic of navigation, put into practice what you’ve already read and you’ll be well on your way to a killer website that satisfies visitors and creates conversions for your company.
4. Be consistent.
This point can be made pretty simply: give your visitors a consistent experience on your website. No matter what page they’re on, visitors should never feel like they’ve left your site. Keep the background, colors, fonts and tone of your writing consistent.
Think of your website like a McDonald’s. When I walk into a McDonald’s and order a Big Mac off a menu, my experience is consistent whether I’m in San Diego or Chicago.
Every page of your site doesn’t have to employ an identical design. There can, and in some cases should be varied page layouts depending on the purpose and function of a particular page.
A page displaying a rolling list of your blog posts should look a lot different from your homepage. A page expounding on your products and services should be laid out differently than a landing page for a specific product campaign your launching.
Create a few consistent page layouts that are consistent with the overall design of your website and stick to them.
5. Build in responsive design.
A responsive website is one that delivers the same user experience across devices. So, whether a visitor comes to your site on a desktop computer, tablet or smartphone, the content they see will be sized to fit their screen.
This is incredibly important because your business and brand can suffer if your site is not responsive. Plus, responsive design helps with SEO rankings and load time.
6. Be conventional.
At OBI Creative, our mantra is to be brave, so it might sound off-brand for us to promote conventionality in website design, but being conventional when it comes to how your website looks and feels is better for your brand than boldly pioneering design that your users aren’t ready for.
There are particular design conventions that have become so familiar that users expect them when they come to your site. If you abandon these conventions, you risk turning away visitors and potential customers. Some of these conventions include:
- Putting your company logo at the top left or center of a page
- Placing the main navigation at the top (or left) of a page
- Having a clickable logo that always takes visitors back to your homepage
- Making links change color when clicked or hovered over
- Using whitespace and images to break up content on your pages
Following these conventions isn’t boring; it’s being clear and credible.
There are plenty of design trends that you can bravely employ, especially when they support your understanding of how your users want to engage with you online. Trends arise as people change the way they interact with technology.
For example, when it comes to copy, you’ve probably noticed that a new rule is to break up chunks of content into small, bite-sized pieces. This trend flies in the face of academic paper writing, business formats and certainly what we’re used to with printed books and papers.
The reason for it though is straightforward and logical. People are using tiny little smartphone screens to access the Internet, which means they’re engaging with your site and reading your content on a very small surface. A normal-sized paragraph in this format could feel like a novel to a visitor and could quickly turn them off.
Designing your website to accord with standard conventions doesn’t have to squelch your individuality, creativity or identity. Rather, it helps deliver the most satisfying experience for your users, which is what matters most.
Feeling overwhelmed about where to start with your website? Don’t panic! We’re here to help — our talented team of designers and strategists are ready to help you deliver a consistent digital experience that delights your users and benefits your bottom line. Give us a call today!
Is Your Website Ready for a Refresh? The 7-Step Checklist
Does your website need a refresh? How your website functions and looks affects how your company is perceived. Download our free checklist to determine whether or not your site is in dire need of a reboot!