Website Design Trends for 2016

Website design trends change, just as fashions change in housing and clothing — remember bell bottoms and earth-tone shag carpets?

Advances in technology drive some of the changing design trends, so we’ll talk about those first.

Mobile Responsive

If your site isn’t easy to use on a mobile device, Google now penalizes you in search when someone is searching on a phone or tablet. That means it must be mobile friendly.

On a mobile-responsive site, images resize appropriately to fit the device, buttons are large enough to click on, forms are easy to fill out on a phone. And, in case you missed the announcement, mobile devices have now overtaken laptops and desktops for internet access.

While there are plugins you can install to render a mobile version of your WordPress site, it’s better to use a mobile-responsive theme that does the job for you. All of the themes recommended here are mobile responsive.

Above or Below “The Fold”

“The fold” refers to newspaper terminology. Back when everyone read the daily paper, the most important stuff was found on the top half of a folded newspaper page. If you were a reporter, having your story show up above the fold signified that it was very important indeed.

In the early days of the internet, “above the fold” was that part of a web page that showed up in the first screen of the browser. It made sense to put your most important information and call to action there, so readers would see it without having to scroll.

KISSmetrics now calls the above/below the fold issue “a red herring,” and states that “It has no bearing whatsoever on conversion rates as far as calls to action are concerned.”

Today, according to a number of experts, “the fold” is irrelevant.

For one thing, scrolling used to require some effort — you had to actually position your mouse inside a scroll bar before you could move the content up or down. Today, it’s easy. Especially on mobile and touch devices, which are more commonly used for internet access today than laptops and desktops.

The internet is so much faster today that scrolling no longer involves waiting, either.

Many studies have now shown that people are willing to scroll, and that whether a call to action is above or below the fold makes no difference.

And where is that fold, anyway?

It’s going to be different on different devices.

Hero Images

Lots of sites today feature a Hero Image at the top of the homepage. This image is full width, and often takes up all or most of that pesky above-the-fold area. On contemporary sites, it’s pretty much replaced the banner logo.

This is bad news for me, because this site uses a banner logo. It looks like this:

Compare it to a hero image, from CoSchedule, maker of my most recommended Editorial Calendar for WordPress:

See what they’ve done? They’ve taken a large image and used it as background. Superimposed on it are the company name, their tagline, a call to action button, and logos of companies that use their calendar.

Or how about the Priceless Design Studio, which offers design services for authors?

Along with the hero image, image sizes in general are increasing as internet and browser speeds increase. Forget standard, cheesy stock photos though. Instead, focus on beautiful and natural, according to this article. “Take advantage of real photos to connect with your audience in a genuine way,” they advise.

Scrolling Homepage

More and more homepages involve a lot of scrolling. (Remember what we were talking about above, with everyone being willing to scroll these days?)

Typically, the scrolling homepage is divided into segments that are very distinct from one another.

Some of them include parallax scrolling. In parallax scrolling, you can see the background image as the content scrolls. The background is also moving, but at a different rate of speed. Done right, it can be extremely effective at holding the reader’s attention.

You’ll find examples of parallax scrolling here and here.

Flat Design

A couple of years ago, flat design started popping up across the web. Instead of text and images with drop shadows attempting to look three dimensional, icons, buttons and text became unabashedly flat, or two dimensional. They were easier to read and to scale on mobile devices.

Flat design is characterized by bright colors and clean shapes. It also includes trends like “ghost” buttons, where a clickable area contains minimal text and a thin outline. Yet they still draw the eye. They work beautifully with a strongly colored background or photo.

Here’s an example of a ghost button, in the Atmosphere Pro theme from StudioPress.

And here’s what the buttom looks like when you hover your mouse over it.

Video Background

No, we’re not talking about a live-action film playing behind your site. It’s all about subtle movement. For example, take a look at the demo for Elegant Themes’ Divi theme. (Elegant Themes is one of my two go-to theme designers, and if you purchase from this link I earn a small commission. It helps keep this site going.)

Watch the hero image at the top for a minute. This is actually a slideshow, with a couple of the images as video rather than stills. It’s very subtle…

Clean and Simple

Clean, uncluttered pages with lots of white space are more popular. Along with a more minimalist appearance, expect to see more emphasis on typography that’s easy to read, and larger type sizes as well.

After all, now that everyone scrolls, there’s no need to cram as much as possible into a small space.

How to Achieve the New Look

It starts with your choice of theme.

StudioPress, maker of the Genesis Framework, is my other go-to theme designer (also an affiliate link). They offer several themes with a parallax scrolling option, along with other design elements outlined above. Parallax Pro and Agency Pro give you parallax scrolling, while themes like Centric Pro, Cafe Pro, Altitude Pro, Workstation and Atmosphere offer versatile scrolling homepages. Typography is top-notch with any StudioPress theme.

The image at the top of this page is from the demo for StudioPress’ theme Whitespace Pro, and it’s an excellent example of the design features discussed here.

Divi, mentioned above, has become Elegant Themes’ [aff] flagship product. It offers a huge number of options in page layout, colors, typography, and virtually every design element. If you have a good eye and are willing to go through a steep learning curve, give Divi a try.

If not, you still have plenty of options with Elegant Themes for mobile friendly themes that meet the other criteria for appealing and up-to-date design for 2016.

What do you think about the trends in website design? Are there any you plan to implement?