How Do I Modernize My Website? Part 4 of 5: Modern Look and Feel

Check out our three previous blogposts about website modernization.

We evaluate thousands of websites every year, and from a style perspective, there’s a list of things we suggest changing. A list of things we constantly see:

A static site with nothing that moves, shifts or does anything remotely interesting visually
A boxed design where all content is stuck between the borders of a narrow column on each page
A template where all pages look and feel almost exactly the same with little to no difference between them

Basically, the majority of older websites are boring. They’re dull. They struggle to keep visitors clicking through.

So, what’s in store for those looking to take the leap to something new?

Animations

Animations are a great way to keep visitors intrigued and wanting to click through to the next page. Whether page elements slide in from the side, fade in from the bottom or flip around when you hover, animations can change the entire look and feel of a website. Something that’s static and stale can quickly become fun, slick or elegant with a little movement.

As you consider whether or not to include movement throughout your site, it’s important to understand your audience. You might personally love how things shift around, but some users (especially the older generation) find it nauseating. Case in point is a client of ours, Darlene Avery with All Life Long Counseling and Consulting, that helps people with end of life care. Many of her clients suffer from debilitating disorders that are easily exacerbated by too much visual stimulation. Her site includes very little movement whatsoever.

It’s also important to understand how animations effect load times. If it takes too long for a page element to animate, visitors may find the site archaic and prefer to move on. Striking a balance of animation delay is important.

Parallax

Like animations, parallax is a bit of a love/hate effect. Parallax makes background images scroll at a rate different than the rest of the page. It’s difficult to describe, so check out the parallax on Chief Petroleum’s website https://www.chiefpetroleum.com/

You very quickly either loved or hated what you just saw. Take it or leave it, parallax has become very popular and it’s here to stay.

One drawback to parallax is that some browser/hardware combinations don’t handle it well. Instead of a smooth scrolling effect, you get something choppy and strange. Keep this in mind as you make your final decision about a design.

Video

Video is dominating the way people consume content. If you’re doing nothing with video, you need to start somewhere and your website is a great place to do it. These stats from Insivia’s January 2017 article are mind blowing:

By 2017, online video will account for 74% of all online traffic (KPCB).
55% of people watch videos online every day (MWP).
Including video in a landing page can increase conversion by 80% (EyeView).
Nearly two-thirds of consumers prefer video under 60 seconds (Animoto).
People spend on average 2.6x more time on pages with video than without (Wistia).

***There are 21 more stats from this article that are well worth checking out***

People tend to get caught up in the production details of a solid video. It’s true that a high-end, polished video can be an amazing asset, but it’s not required. If you have a decent smartphone and no budget, just create something. Purchase a tripod for your phone, record something interesting, use some free video editing software to trim things up and upload the video to a YouTube account. From YouTube, your video can be shared all over the internet, including embedding it in your website.

Some pointers:

Make sure whatever you’re filming is well lit
Eliminate background noise
Check to make sure it’s loud enough (If it’s not, you can sometimes fix the loudness in your video editing software)
The most intuitive and free editing software on PC is Windows Movie Maker. iMovie is the best free option for Mac.

Not sure how to get started editing? YouTube is a fantastic resource with hours and hours of tutorials.

Music

If you’ve ever visited a website that scares you with blaring sound, you’ll understand why we choose to keep our own silent. Music and other sounds can be fun, but human behavior is to immediately mute something we aren’t expecting.

If you’d like to include sound somewhere in your site, make the audible experience optional. If someone wants to listen, offer options to play, pause and stop the sound at will. It’s important to include these options for videos as well.

Different Shapes

Have you ever considered, in its simplest form, the design of a website? What shape is repeated over and over again? What shape is the device you’re reading this blog post from?

Rectangles everywhere!

As someone who’s only a little creative, this can get frustrating. Rectangles on rectangles on rectangles are lame. Use other shapes throughout your site to break up the monotony. Circles, ovals, and diamonds are the most common alternative shapes to use.

There’s also science behind the idea of rounded corners. The human brain takes extra time to decipher the points of shapes with sharp corners. When sharp corners are replaced with a rounded look, the mind doesn’t require as much computing power to process the overall shape.

Different Layouts

For a long time, websites were very predictable. Most maintained the same boring layout. They were boxed so they didn’t span the entire page and left large gaps to the left and right of content on each page. They all had rectangular buttons for menus across the top. Most pages looked exactly the same no matter the subject matter.

If you’re looking for something radical and new, the CSS Winner website is a great place to start. CSS Winner evaluates and awards designs for being the best of the best. Be aware that many of these sites are resource intensive. If your internet speeds or computer do not meet the minimum specifications for displaying things properly, you will have a frustrating experience.

The Price of Something Too Complex

Many of our clients do not understand the true cost of more advanced features. Not just complex coding, but filming, editing, graphic design, etc. Most of these sites are built by college students honing their skills and using ultra powerful tools to develop animated environments.

The cost for these types of features adds up very quickly. Many of which could rack up a $20,000 charge or more. How many small business owners do you know who possess a $20,000 website?

The opportunity cost of an intense website is also something important to consider. If you visited some of the more complicated CSS Winner sites at the link above, you found they were pushing your computer to its limit. Your computer got hot and your fan shifted into high gear. This could be a real problem if the potential buyers visiting your website aren’t using the right hardware or their internet connection is slow. Page elements take too long to load and certain functions just aren’t performed properly. Users will leave your site as soon as things don’t function as expected. What’s it worth to lose potential customers visiting a website that’s too complex?

There is a happy middle ground. You can have a great looking website with tons of bells and whistles… without the high price tag.