A little while back, we wrote an article titled 5 annoying things to avoid when building a website
In that post we learned what not to do.
However, we wanted to look at some must-have things that any website needs, especially in 2021 and beyond.
We will be learning a few of the important things that your website needs, but we don’t mean the basic things like a header, footer, sidebar, etc… Those are too obvious, but I’d include them if I was writing this article in 1999.
But, it’s more than 20 years later, technology has changed, people’s needs, problems, and solutions have changed. Web design has changed.
These are the things that can make or break
your website, right now.
Let’s get into it.
Important thing 1: Quality Content
Content is important, but quality content is key.
That’s more traffic for your site!
There are a few important things to consider when creating content.
Your content should be relative to your blog and website. For example, we probably won’t ever write any posts about exercise because that’s not who we are.
And your content should be helpful and informative. If you are just regurgitating or copying content you see on other websites, it might not be very good. Instead, create content with a purpose.
Google wants blog posts to be a minimum of 300 words, but somewhere along the 1,000 word mark is more ideal. A study on HubSpot showed that the best posts averaged between 2,100 and 2,400 words.
Helpful, informative, and relevant content is what you should be aiming for.
Important thing 2: A good, modern, responsive design
A good design is important to any website.
Your website should also be updated to be modern as best practices for design change over time.
Here are some guidelines for modern web design:
Times have changed.
For example, in 2007, you probably could have gotten away with not having a mobile-friendly website. Back then, only a small percentage of people had smartphones, and an even smaller percentage of them used their phones to browse the internet.
If someone visits a site that isn’t responsive while using a mobile device, odds are they will just go back and try another website. In fact, since 2015, Google has actually started ranking websites that are mobile-friendly higher than those that are not.
It does get annoying having to zoom in and out on a phone just to read a post.
We want to keep visitors on our site, not lose them.
So, no matter what device our visitors use, we want our site to look good on it.
To accomplish a responsive design in CSS, you will have to learn about media queries.
A media query allows you to break up your CSS by the width of the screen being used.
For example, you might have two elements side-by-side on a desktop, but on a mobile device, those two elements will now be stacked on top of each other.
We plan to write an in-depth guide about media queries soon.
Flashing animations are definitely a thing of the past. Almost unfortunately, they seem to have been replaced by autoplay videos and popup ads.
But, animations can give your design a modern, personal touch that can bring your website to life.
Of course, don’t just toss in random animations. No, we don’t want our website to look like a dystopian, cyberpunk city. Not that modern.
Subtle, clean animations is what we want to focus on.
Hover over any button or link on our website and you will notice the slight animation.
Try that on other websites, as well. Notice that some don’t have animations?
Which one feels better to you?
Our hover animation happens over 300 milliseconds, so almost one-third of a second. It’s fast.
If you are using our website builder
, you can adjust animation speeds to be faster, slower, or even turn them completely off, depending on your preference.
Another huge part of web design that many, many designers forget is optimization. The ability to make sure the design does not affect the speed of the website.
There are websites out there that may look amazing design-wise, but are extremely slow because of their design.
Sometimes that has to do with a user’s internet speed, but sometimes it has to do with files, media, and fonts.
Those files can get really big and take longer to load if you don’t optimize them, or at least be aware of how big the files are getting.
Media is another element of optimization.
Image file size can range anywhere from a few kilobytes to a couple hundred megabytes. Videos are the same way, except they tend to be a lot larger.
Be aware of your media file size before displaying it to your users, and make adjustments if necessary.
Fonts look cool, I get it.
But, too many fonts can actually make your website look bad.
Not only does it make your design seem inconsistent, each font that your website uses has to be loaded by our user, unless they have the font on their device already.
Loading two or three fonts won’t hurt anyone’s bandwidth, but having to load five, six, seven, maybe more types of font on a single page is a bit overkill.
Stick with just a few to keep your site running smoothly.
Important thing 3: Accessibility
Web accessibility may be required by law depending on where you are.
The great thing about technology is we can use it to solve some problems that older media had.
Print, audio, and visuals can be problematic for people with disabilities, but with accessibility we can overcome these problems. Currently, many websites overlook accessibility and fail to include, meaning they cannot be used by those individuals.
We want our website to be able to be used by everyone
. People with disabilities use the internet, too.
And even though accessibility is mainly for people with disabilities, it can also benefit people without disabilities, like older people, those who have recently broken a bone, people who may be in a place where they can’t listen to audio or watch video, and even those in developing countries.
Here are a couple of easy ways to make your website more accessible:
There should be a good amount of contrast between your background color and your text color.
Using dark grey text on a light grey background can be hard to read.
Instead, you might choose a background that uses a slight, off-white color, and a text color that’s nearly black, but not quite black.
Your text will be a lot easier for everyone to read.
Alternate attribute on images
allows you to use an attribute called alt
, which allows us to use alternate text for an image.
You can use it like this:
<img src="imagesource.jpg" alt="My Image Text">
If your visitor is using a screen reader, they will be read the alternate text.
Alternate text is also useful if the image doesn’t load due to a bad connection, as the text will be displayed instead of the image.
Each user should know what that image is supposed to be.
From things like clickable elements to forms, everything should have clear instruction on what it does.
Every form field on your website should be descriptively labeled. Your users should know exactly what each field is for.
Buttons should be labeled clearly, too. If your user is on the ‘sign up’ page, you probably have a form with a button to ‘sign up’, which is exactly how that button should be labeled.
There is a lot more to accessibility than just what we covered here, so we are going to write an in-depth article on making your website accessible very soon.
Important thing 4: A way for visitors to contact you
People will never stop having questions. It’s part of what makes us human!
So, we need to make sure that our visitors, who are people, have a way to ask us questions.
We can use a contact form!
Not only can your visitors use a contact form to ask you questions about your blog, service, or product, they can also use it to give you feedback.
A contact form can also help with bug reporting, preventing spam, and possibly get leads for your email list.
We have an entire post dedicated to why you need a contact form on your website
with a lot more information about contact forms.
A contact form isn’t, and shouldn’t, be the only way for your users to contact you.
We also want to use social media
Somewhere on your site, possibly right on the contact page, or in the footer, you should include some social media icons with links to your pages.
Oh, and don’t forget to let people share your content with social media icons, too! Sharing helps increase brand awareness and can lead to more people contacting you on social media.
Some people would rather use social media to contact you and some people would rather use a form. We don’t want to alienate our users, so we want to include a combination of these two main options.
Other ways to be contacted
You can include even more ways for people to get in contact with you.
You do have to watch out for spam if you use this method, as web scrapers may add your email to their sales list.
If you do part of your business over the phone, leaving your phone number for people to contact you is a must.
If you run a business that is also brick-and-mortar, you should be including your address along with everything else. That way people can visit you in-person and ask questions. You may want to include your hours of operation as well.
Important thing 5: Custom domain
There is a lot of competition for attention on the internet in the modern day.
Because of all the competition on the internet, you need to be easy to remember and easy to recognize.
For example, which looks better to remember and recognize:
Not only is the first one a lot easier to remember because it’s way shorter, it also looks more professional.
A custom domain makes your brand appear as an authority.
Which would you trust more:
Not only does this look better to potential visitors, but also to the search engines. Do we really see websites with .squarespace.com, or .wix.com, or .herokuapp.com in the URL ranking that high in Google? Not really.
When picking out a custom domain name, you essentially want to start with your brand’s name. If that’s taken, if you can, choose a different brand name.
This domain name should also match your social media handles as closely as possible. It’s difficult to find a brand on Twitter, Instagram, or Facebook if their domain name differs too much from their social media handle.
Try to keep consistency.
Getting a custom domain name to match your social media handles has been getting increasingly hard over the past few years. However, with the new top level domains ‘.com’ isn’t our only choice anymore. There are over 1,500 top level domains, and they cover just about any niche. We are using one right now!
You can always use a new top level domain in combination with a ‘.com’ domain by forwarding it.
Both of these domains go to the same website:
Today, you learned exactly what your website should have in 2021.
We talked about quality content, having a modern design, accessibility, contact forms, and using a custom domain.
Make sure you have all of these elements because they will make both your experience and your users’ experience a lot better. If you are missing any of them, now is the time to get them added.