Search MailerLite
Start typing to search

No results

Megan · 15 min read · Tips and resources · September 16, 2020

9 website design best practices to use in 2020

Do you know how long it takes for people to decide whether they’re staying on your website?

Probably less time than it took you to read the headline and this sentence.

Are you still here?

Over the years, various studies have shown that it takes anywhere from 15 to 5 seconds for people to make that decision. Having strong copy on the area above the fold is important, but your website design matters just as much. What your website looks like upon first glance can have a big impact on whether visitors decide to explore or keep it moving.

Though websites are always evolving, these web design best practices lay a great foundation. Keep these 9 best practices in mind when designing your pages and then optimize until you’ve found your personal web design success strategy. You’ve got this!

Create your own website with MailerLite

Did you know MailerLite has its own website builder? Getting started is easy with our ready-made templates and drag & drop builder. In fact, it’s so straight-forward that you could launch your website the same day. Read how here.

Think about this for a minute: What words come to mind when you think about your brand? 

For MailerLite, our brand story is about putting our customers first with software that is intuitive so people from all skill levels can use it and with our team of real people supporting our customers 24/7. That’s why our website is clean, easy to navigate and we use pictures of our team for everything. Our clear typography and signature green-blue-grey color scheme can also be seen in our emails and on social media accounts.

Good website design practices align with your brand imagery and stay consistent—people will see the same typography and color schemes on all your platforms. This strengthens brand recognition.

MailerLite website example

You’re creating your website for a target audience. If your design doesn't resonate with them, they’ll leave. This means: Get straight to the point as soon as a visitor lands on your page. For every page!

For our second website design practice, take a look at the Inner Light Aura homepage. The headline in large typography tells you what the service is about, and the pictures on each side show examples. The contrasting call-to-action (CTA) button clearly states what action to take. Further down the homepage, you’ll learn about the photography technique, the session itself, color definitions and the photographer, Sara. Once you’ve scrolled through the long homepage, you’ll know exactly what the service is about and how to proceed.

Inner Light Aura web design example

Not everyone that comes to your website makes their entrance via the homepage. Especially when you’re ranking for keywords or advertising landing pages. Any page could be the first thing a website visitor sees. This is why a good navigation bar is essential on your website design best practices checklist.

Even without the homepage, people should understand the logic behind your website structure and have a clear understanding of where to find what information.

Here are some navigation bar tips to follow:

  • Add your logo and link it to your homepage

  • Put the most important things first, so far-left in the navigation

  • The far-right side is mostly for login/signup, contact or another CTA

  • Keep wording short and straightforward (so it displays nicely on mobile)

  • Add color and/or contrast to make the navigation stand out

  • Make the font large enough so the menu items are easily clickable

  • Test navigation bars to find out what order or wording works best

The website of teamLab Borderless digital art museum has a sticky menu, and a locked navigation bar that moves and stays visible as you scroll down. It includes the CTA Tickets (right) and a Top link (left) that brings you back to the top of the page. This is useful for long homepages.

TeamLab Borderless digital art museum website design example

Imagine you’re standing in the middle of Times Square. Lights are flashing everywhere, over 350,000 people are around you, rushing to get to places and bumping into you. How do you feel? 

Many will answer overwhelmed.

That’s not what you want for your website design. The internet is a busy, information-dense place and visitors will be quick to leave if your website adds to this chaos. Give your design room to breathe by adding white space (also called negative space). This will make your website design instantly more attractive.

One of our favorite website design best practices to create more white space is to add padding and minimize the amount of text. Scroll through Vicky Grout’s website to see what a good amount of white space looks like.

Vicky Grout website design example

MailerLite customers can pick any of the premade website templates, where our designers have already added sufficient white space.

Try to get your message across in as few words as possible and use paragraphs to break up long text. Bullet point lists make it easy for readers to scan information.

We love this website from Atelier The Ché, the color palette is soul-soothing and the minimal amount of text makes the website feel calm and grounding, which is exactly what Sarah’s services stand for.

Atelier the Che web design example

Since creating and launching a website has become so easy, it’s totally normal that you’ll compete with other people who are doing the same. So how can you distinguish yourself?

Think about what makes you different from your best friend. A lot, right? 

We’re all unique in our own way, and your website should be too. Sprinkle your character on the text you write, the images you use and the colors you pick. People love seeing a website that’s made by real people, versus browsing on a generic page with not a soul in sight.

It’s for this reason that you’ll see real MailerLite team members in all of our pictures. It’s why we introduce new employees on social media. And it’s why in this article, I picked great web design examples from entrepreneurs and smaller companies I personally support, instead of talking about the obvious big brands. 

Make a deeper impression with your visitors by showing them who you and your business are. 

Just like the independent bookstore Books Are Magic. Their web design could use some tweaking (more below), but their human side is on point. 

On their website, staff members write reviews and compile lists with their favorite reads. On Instagram, you can listen to storytime tales told by local authors or the shop’s staff. This makes their brand feel warm and welcoming, and much more personal than ordering your books straight from Amazon.

Books Are Magic web design example
Some quick website makeover tips

We’d personally wave our fairy wands to make the bookstore’s website a little less hot-mess, and a lot more organized and sleek. When you have so much valuable information to communicate, it’s challenging to keep your website structured.

Small tweaks can have major effects:

  • Opt for one font, color and style and use this throughout your website

  • Re-read texts, break long copy up in paragraphs and cut out unnecessary words

  • Check if instead of text, there are other ways to convey the same message (GIF, video?)

  • Use dividers and extra padding to create page sections

  • Add a second fold-out menu if your navigation bar gets too crowded

  • Use larger typography to make headlines stand out

Every website has a purpose, whether it’s sharing a story or offering a product or service. Each individual landing page can be used for lead generation: the process of turning new visitors into customers or long-time fans.

With each page you create, think about what you want the reader to do. What call to action is relevant?

It could be to:

  • Sign up for the newsletter

  • Put an item in their basket

  • Schedule a meeting

  • Contact you for more information

  • Read more blogs

Or in our case: Join MailerLite

Sign up for free so you can start building your own website today!

I'm game, sign me up

Having a CTA for each page helps you evaluate the conversion rate. Is the goal to schedule a meeting but only a few visitors are doing so? This tells you that your page might need more convincing copy, an easier scheduling system or a better CTA.

This service landing page from Nomads at home clearly shows all available services and what each entails. Once you click on 1 of the CTA boxes, you’ll get redirected to a separate page that interactively shows the cost and details of that service.

Nomads at home website design example

Websites are originally made for desktop, but in 2020 there’s no way around it: the majority browses on mobile (52.03% to be precise). Responsive web design isn’t nice-to-have, it’s a must.

With MailerLite’s website builder, you don’t need to worry about this. We automatically make sure everything you design on desktop also looks good on mobile and tablet. Just look at Stay Home Festival’s website, where the different elements resize and reorder as the screen size changes.

Stay Home Festival web design example

SEO is short for Search Engine Optimization. If that doesn’t ring a bell, we’ll explain the practice in this article about SEO for landing pages. To rank your website in search engines and shine on Google’s first result page, you need to think about a couple of things.

Are you?

  • Mentioning the most important keywords on your pages?

  • Linking to other internal website pages, to guide people from one page to another?

  • Using compressed images to load your page faster?

  • Checking your page speed to see what can be optimized? Test your speed here.

When talking about SEO and web design, pay extra attention to your images. Instead of using pictures in their original size, resize and compress them before adding them to your website. The more compact your images are, the faster they’ll load. Click here to read more about image web optimization.

People building their sites with MailerLite can also make their website an SEO success by adding a page title, keywords and description in the website settings.

For our example, let’s look at the about page from Women Who Draw. Though the website is heavily focused on visuals, the about copy includes relevant keywords that people would type into Google to find a directory like this one. Keywords like “female (professional) illustrators” and “women artists” are naturally woven into the about-page text.

Women Who Draw web design example

The most important lesson on this list? Always A/B test to see what web design works best for you. We can share our favorite 2020 website design best practices, but there’s no guarantee that your audience reacts the same. Use the above tips to design your best website and start testing from there. 

How to A/B test website design:

  1. Pick a page to optimize and choose which conversion indicator to improve

  2. Change one thing, like a different button color or position

  3. Run both versions simultaneously for an adequate amount of time (here’s how to calculate that time)

  4. Analyze the results to see which page version performs best

  5. Repeat until satisfied. Each A/B test brings you closer to a conversion success story that’s tailored to your business

A/B testing is available for landing pages and emails in MailerLite, as we're working on making it available for websites. Use landing pages to test web design variations with your target group.

Great website design plays a big role in whether visitors stick around to explore your content or navigate to the exit button. These 9 best practices will help you to design a website that’s pleasing to the eye, but don’t forget to keep optimizing along the way. Continuously testing new design elements is the only way to discover what your target audience is really attracted to.

9-step web design checklist
  1. Make your branding (fonts, color scheme, etc) consistent on all platforms you’re present on

  2. Show what each page is about as soon as people arrive

  3. Easily guide people through your website with a clear navigation bar

  4. Let your web design breathe with plenty of white space

  5. Be unique by showing your human side

  6. Make your call to action buttons pop, so readers know exactly what to do

  7. Use responsive design to correctly show your website on any device

  8. Let your design be seen by using SEO practices to rank

  9. Keep A/B testing to get closer to website design that best works for you

Need help with your design? Post your website URL below and we’ll give personalized tips on what can be improved.

Editor's note: This post was originally published in April 2020, but has been updated with new insights from our team. 

Megan de Graaf

I’m Megan, Senior Content Writer at The Remote Company. Ever since I started working remotely, I pick my homes depending on the seasons: Europe during spring and summer, NYC for autumn, and winter escapes in Mexico.