9 quick and easy tips to keep your website modern

24/07/2019
Design Technology

Our world is changing constantly but for some people, a website is something that’s done once, and it should remain untouched until the next big update. Wrong! Yes, website maintenance takes time and effort. But keep in mind how important it is for your business, and how many customers have found you because of your Internet presence. Why not invest a little bit of your time between meetings for updating it now and then?

Okay, we agreed that we need to take care of the website constantly, so where to start? First of all, do not change something just because you personally don’t like that blue color. Your best friend here is an analytics tool like Google Analytics or Hotjar. Check where people spend most of their time and where do they drop off. Can they find any CTA buttons? How and where do they use your website? Is it a mobile device or desktop? Who are the users (I’m sure you know your target audience but it still might nice to check)? When do they come to your website? How much time do they spend on it? And my favorite question: WHY? Why do they do what they do?

This knowledge helps to understand users needs and make changes that really help them to interact with your website more easily. So what we can do now?

 

Accessibility

Are your users 45 year old or older but website content has 11px font size and light gray color? That is never a good idea. Check that font size is big enough (16px is a common practice) and that it has enough contrast. This simple contrast checker will help you. How does a link to any other page look like? Is it easy to recognize that it’s an interactive element? Does it change anyhow when a user moves their mouse over it? And what about buttons? Can you see that you can interact with it?

Mouse hover effect on a button by KetanRajput

 

Any interactive element needs to have at least a hover state (mouse over) and active one (button is pressed, a checkbox is checked). Do images have alternative text? This text is needed in case an image is not visible on the website. Also, screen readers use it to describe what a user could see on an image. If you want to read more about accessibility, check Antero’s post (in Finnish only).

 

Simplify navigation

Is your blog page under a ‘Services’ item in menu navigation? Do you wonder why people don’t call you but all the contact information is hidden behind 15 links? Sometimes logic is clear for a website owner but not for the user. So what should we do here?

First of all, check Google Analytics or any other analytics program to see if there is a white spot and analyze why. Secondary, map all the pages on your website (if you have a blog there is no need to map all the blog post or news pages, simply mark that there are several of them). In my practice, I prefer using Gloo maps or Octopus and recommend those tools to everyone. Why? Those tools help you easily make a map and share it with everyone. Also, all the elements are nicely structured so there is no misunderstanding where any page belongs to. Oh, and they are free 😉 Anyway, please, do not use Google Docs or MS Word for that, the document will become outdated too soon and you will have to spend time updating it.

Another good practice is called card sorting. You would need some paper, a pen and a couple of friends or colleagues who are not involved in a website update or know too much about it. Write all page titles that you have on a website (and subpages too!). For a new site, collect all the topics you would like to have on it. Prepare cards. Write each topic/page name on a single piece of paper. Put all the cards in one column.

From that point interact or guide a participant as little as possible. You need to get their logic. Ask a friend or a colleague to sort and group cards together. Any 2 cards are considered as a group. It’s okay if some cards will not belong to any group. Ask a participant to name each group. Voila! You have a sitemap.

Repeat it 2 or 3 times (3 is usually enough) and update your sitemap.

Card sorting as a part of our recent workshop

 

Content

Remember that people do not read. Especially the younger generation. If your target group is millennials consider to reduce text content. Separate text blocks by headers and subheaders, highlight important information but remember what Aarron Walter said in his book:

If everything yells for your viewer’s attention, nothing is heard.

 

Check existing images. Do they exist only as image placeholders? Remove all unnecessary images. If your business is quite abstract it’s okay not to have a sunset in the forest as a header image. Remember that users do not come to your website to see those nice stock images, they have a goal.

 

Know what is outdated

There is a big difference between being up to date and being trendy. I do not encourage to follow all latest trend like using gradient or 3d graphic, especially if your brand guidelines do not include that. However, I see many corporate websites that could be modern if an element would not scream “I was made 10 years ago” So what are they?

 

Too narrow font or font that does not work on the web

It was a huge trend a few years ago and it came from Apple. Those thin elegant lines, they were everywhere. Yes, a thin font can look good and modern but unfortunately, many companies went too far. Nowadays designers choose more bold styles which also have a good readability.

 

 

Flat icons

Everyone knows what they are, right? A huge trend, everyone in love with this minimalistic style. Yes, back then it was new and fresh but wold seems to has got used to it.

Flat icons Source 

What to use instead? A simple line or filled icons is an absolute classic. Another option is to replace some of the icons with drawings as MailChimp did:

Icons on MailChimp‘s front page

Whatever style you choose, remember to stick with it.

 

Semitransparent background on top of a picture

And a parallax effect as a cherry on the top. We are moving towards bold and solid colors and semi-transparency is in the past right now. Moreover, text with a semi-transparent background has some readability issues.

Source

 

Full-width images

Full-width image gallery Source

It started with the era of mobile-first design principle. Everyone started the design for smaller screens and than checked how it looks on a bigger one. But if a user has a screen bigger than 15″ she might have some problems.

 

I know that not all of those elements are easy to update without the help of programmers. However, changing one element is usually easier and faster than changing the whole website.

 

 

Motion

Yes, this is already not so easy to do by yourself. However, I’d like to talk about motion a little bit. We can think about it as about a trend, but it’s becoming a standard nowadays, like responsiveness was 5 years ago. Motion helps to guide users attention, focus on important things and show the character of a brand. If you have this piece of delight on your website, it will certainly an advantage among your competitors

Animation by Zhenya Rynzhuk

 

In case animation is not an option, perhaps consider simpler micro-interactions. Do you have a like-button? How about adding nice interaction there?

Call to action? Why not make clicking even more interesting? A small thing can remain in the shadow but they do work, and they do increase users satisfaction. So why not to make it work for your business?

 

A micro-interaction by Javier Oliver 

To conclude

Having small updates from time to time don’t usually require too much budget and time, but your business will definitely benefit from it. Those changes can seem small but as Charles Eames says

The details are not the details. These make the design.