January 31, 2021

10 Best Website Design Practices for 2021

Whippy brings you our top web design practices that we use to in order to improve website performance and increase conversion rates.

Samantha Hansen

Great web design is about more than just having a good looking website, it's also about converting potential clients into high paying customers.

Now let’s do a little math. In today’s class topic we're going to talk about “Web Conversion Rate 101." Let’s say your website currently converts at a rate of 3% (meaning 3 out of 100 visitors turn into leads). What does it really mean for your business if you boost this rate by just 1% making it 4%? It doesn't sound like much to get just a 1% bump in conversion now does it? Well the reality is, it’s kind of a game changer. Here is why…

When you go from 3% to 4% conversion rate, it means for every 3 leads you were getting, you now have 4 leads. This is a 33% boost in leads and very likely can lead to a subsequent 33% boost in clients from online.

Now let's say you make some real changes to your website experience and go from a 3% to a 6% conversion rate. You are getting 6 leads, for every 3 leads your old website was yielding, or DOUBLE the amount of leads, just with some simple fixes. Are you excited yet?

To illustrate the drastic differences web design can make even further and best practices for web design, let’s use the example of a local dentist, Blooming Smiles of Woodland Hills, Ca. (www.bloomingsmiles.com), experts in both Pediatric Dentistry and Orthodontics.

1.  Fix the“Above the Fold”

What is “Above the Fold”? It’s the portion of your homepage that is visible on a screen without the user scrolling. Consider it your website’s “curb appeal” (often accredited by real-estate experts to be the most important factor). How does the saying go? First impressions never have a second chance.

It’s the first thing the potential client sees and then decides if they are gonna find out more. The above the fold portion of your homepage is critical to converting a user since every web visitor sees it. Here are some best practices:

  • Don’t clutter the Navigation Bar
  • Differentiate yourself. Why are you different or better than someone else?
  • Make the “Call to Actions” very clear for the user

Let’s take a look at Blooming Smiles above the fold before working with Whippy vs. after and compare the two:

This was the Blooming Smiles site from 2016-2020. We immediately spotted some major changes to be made in order to optimize their web design.

Here is the list of things we saw:

  • The banner photography was stock & similar, if not the same, as several other dentists
  • There was no clear call to action
  • The navigation bar was in the wrong place, too cluttered and broken from the page as the visitor scrolled
  • The “above the fold” issues were even more pronounced on mobile.

Here is the Blooming Smiles site after its makeover with Whippy, 2021:

These are some of the actions we took:

  • The photography is now from a professional photo shoot and it’s clear that the site is not a template. Who they are & their strengths are clearly displayed above the fold.
  • It’s very clear what actions they want the user to take- book either a dental appointment or orthodontic consultation.
  • Lastly the homepage is not cluttered & the navigation bar has been reduced and spaced correctly. It also travels with the user as they scroll down to continue to serve as a guide for their experience.

These key changes resulted in their bounce rate (visitors who leave the page quickly after arriving) decreasing by 11% while the number of visitors who made it to the correct submission page increased by 126%.

2. Make your Call To Actions Consistent & Clear

If you don’t already know, a call to action (CTA) is your way of getting visitors to perform your desired task. Example: booking an appointment.

For Blooming Smiles, we placed clear CTAs throughout the website and made sure to maintain a consistent color tone for each one. As the visitor browses through the site they subconsciously make the connection that that color is a potential place to get more information or get resolution.

Here is an example of some CTAs for Blooming Smiles. As the visitor scrolls down, users are able to see the actual dentists and learn more about them.

3. Consistent & Legible Font

This one sounds obvious, but you would be surprised how many practice websites violate this basic principle. Fonts change, sometimes paragraph to paragraph. Some become tiny or next to impossible to read on mobile.

As you can assume, inconsistency or illegibility of fonts on your site would give an immediate impression of a lack of professionalism. We know your practice isn’t a jumbled mess, so make sure you don’t come off that way!

Even worse, using too many fonts can lead to slow site speed, which can have the ugly result of less page visits and higher bounce rates.

At Whippy, Inter font is one of our favorites as its readability ranks extremely well compared to other fonts available. Setting the system UI as a backup font can also help alleviate any site speed issues caused by font.

website design practices

4. High Quality Photography

You can check our prior blog on how important photography is, but the gist of it comes down to photography creating higher conversion rates.

Wouldn’t you feel more comfortable committing your loyalty to a practice if you could see the doctor who will soon have their hands in your mouth beforehand?

Choosing your dentist, doctor, or any other healthcare provider is a nerve-wracking decision for potential clients so it is crucial to brand your practice and staff as qualified, friendly, and trustworthy.

Providing visitors with fantastic photography highlighting your practice’s doctors, office, team, and environment allows them to develop a sort of comfort with your practice without even having to visit in person.

Even more intriguing is experts on website conversion like Neil Patel even recommend professional photography as it can elicit emotions that drive engagement and trust with your website that will convert to more leads. When you learn that a shocking 95% of cognition occurs within our subconscious, emotional brain, this begins to make a lot of sense.

Aside from photography building a level of trust with potential clients, it also optimizes your site’s quality and appearance. We are less likely to buy something when the image is grainy and low resolution and the same holds true for practices.

This holds even more important in 2021 given that Covid-19 has created higher expectations for online experience.

5. Site Speed

Human’s natural inclination towards instant gratification is a huge part of why we love the internet so much. So, if your website speed is too slow, you could be losing major points for user experience here.

We at Whippy feel so strongly about site speed that we wrote a whole blog about it, but we will boil it down for you here. Here are some stats that lead us to believe improving site speed is just about the most important thing you can do for your website:

So — as we hope you have gathered — site speed is pretty damn important. Optimizing your website’s speed should be your top priority after finishing this article. Our guide offers a few tips to get you on your way to an optimal speed, but we also offer a free video audit from our team of engineers if you enter your site’s URL.

does site speed affect website performance

6. Animation & Movement

Given how fast the internet has been growing and advancing, especially during COVID-19, it’s no secret that we are far beyond the era of stagnant, boring websites. There are over 1.7 billion websites on the internet today, so what makes your website worth visiting?

Just like many of our other tips for web design, it comes down to differentiating yourself from the competition and engaging visitors. Animation isn’t necessary, but it definitely adds a level of professionalism and interest that will increase your conversion rates. In fact, a study done by Deadline revealed that using animated videos compared to static text resulted in a 70% boost in conversion rate!

The aim with animation is to catch their attention and “stop them”. You want your website to do this in a fun way that makes the experience interactive. The key is to hit the “sweet spot” between catching attention and overwhelming the user. Adding animation can be something as simple as having “call to action” buttons create movement as the user moves their mouse over it.

But, with animation and movement, you must remain cautious. As we mentioned earlier, your site speed should be your top priority. So if adding movement to your website causes issues with site speed— even if it’s just a second of a difference — we would argue that it isn’t worth it.

should your website have animation

7. Differentiate Your Practice

We always ask practices, who is the best in your town, and can you guess what the most popular answer we get back is? They almost always answer “me”. So then why do you look like most other practices online?

It makes no sense... it’s cheaper to redo your website than your physical office and it’s arguably more important for new client acquisition. Yet, most practices don’t do it the right way.

Your goal, while you have them for the tiny amount of time a human takes to make a decision, is to show them you are head and shoulders better than the rest of the pack. Very often visitors open multiple tabs and it's in that moment that they compare and decide.

Make your value propositions clear and let your photography, reviews, practice pages, location pages, FAQs, and everything in between let the user know you are the right choice. This is your moment to shine! Don’t waste it and highlight all the hard work that you have put into your career.

TIP: answer these questions:

  • How good are your reviews (mainly Yelp & Google)
  • Do you have any recognitions or awards that make you stand out from the pack?
  • What is the top reason your clients pick your practice?
  • Are there things you offer that others don’t?

Once you have gone through this exercise make sure to prioritize your homepage in importance of what information is most likely to make a potential client stay longer on your page.

For Blooming Smiles, their 309, 5.0 Average Reviews on Yelp stood out as a huge differentiator and we made that the first thing someone saw as they scrolled below the fold, followed by a specific call to actions for each location and practice type.

8. Be Mobile First

Think as if your users almost exclusively use a mobile device when finding you, because that is likely where things are headed in the next 12-24 months and you want to capture those leads where your competitors fail.

As for the tips we have given so far, ALL apply to the mobile experience. You must be more clear, more differentiated, more legible and mobile site speed must be at the industry’s best.

Our mobile device experience has even more going on- a phone call, email notifications, instagram notifications, and more all within the grasp of that same thumb that is scrolling. This makes it even more crucial to perfect user experience over mobile to keep visitors engaged.

What’s more, being mobile first is also what Google wants. Mobile internet use surpassed PC use almost 10 years ago, so it’s no surprise that Google prioritizes mobile experience.

Google actually penalizes websites that have poor mobile experience and ranks the best mobile experience sites higher. So, if you want potential clients to find you, make sure your site’s mobile experience is top-notch.

how do I make my website better

9. Test, Test & Test More

Again, the internet is always growing and advancing at crazy speeds. To stay on top, you need to constantly test what is working and never stay comfortable.

Take Blooming Smiles for example. Their old website was the same for 5 years…Oh boy how much changed during that time and as the internet standards change you need to adapt.

You may have heard of A/B testing, but the concept is simple: pick a variable and test the two different scenarios over two different groups or time periods to see what works best. A/B testing can be a fantastic way to determine which website aspects work best for your business and what changes need to be made over time.

For Blooming Smiles, we utilized Google Optimize to perform testing. Google Optimize is a tool that allows you to create different versions of your website and compare their performance. For example, we made two versions of the call to action buttons and tracked which version got more clicks before choosing the final version.

should you test your website

10. Track Your Performance

So after you’ve put the hard work and sweat into making your dream website through following steps 1-9, how do you know if it's working? The answer is you simply must track everything — yes everything — calls, texts, form submissions, etc.

When somebody calls, submits a form, or expresses interest in your business in any form, it is important to determine how these potential clients came to find your business. Call tracking software allows you to know if someone found you on the internet, and where, even if they call you over the phone.

Knowing what brings people to your business and creates leads can be a great way to learn what’s working and help you stay on the right track. Modern softwares utilize cookies and other data in order to track online activity and provide you with sources (ex. Google, Yelp, or Facebook Ads).

Beyond lead tracking, Facebook Pixel is a fantastic software for tracking clicks within your website traffic. You can set up your account to see how users are navigating your site and even measure what buttons are receiving clicks. This is huge because it not only allows you to see what is converting but also gives you a fantastic starting point towards optimizing your site & creating custom landing pages for your popular keywords and traffic sources.

We at Whippy also utilize the fantastic yet simple testing tool called Lighthouse you can install right into your Google Chrome browser. Or, you can simply enter your URL on the Web.Dev Website to see the results.

When using Lighthouse, you will see a score broken into 4 high-level categories: performance, accessibility, best practices, and SEO. Lighthouse offers great insights on how your website performs holistically.

To make the results easier to interpret, we suggest you place your main focus on your performance score. If your performance is low, then the other results don’t really matter.

In general, you want to aim for a score above 90 and you’ll be golden!  However, be cautious if your score seems to be artificially high.

If you have a website with very little text or only a few images then your performance score will be a poor reflection of actual performance. This is no good since website search engines will not show your website to potential customers if there is not enough content.

tracking website performance

Ultimately, this blog sums up the basics of how to take your web design to the next level. We most recommend focusing on the website speed, the photography, and tracking your progress to get started. At the end of the day, this guide will get you in a great place as far as web design goes, but the process of optimizing your website should be a constant journey.

If you’ve made it this far, congratulations! You’re 10 steps further along the way to becoming a web design expert Maybe that’s not realistic, but at least you now know where to begin and how to start making your website one of the best out there!

More Recent Blogs