If you don’t want your company's site to fail on the web, you’d do well to observe these best web design practices and make sure you implement them when applicable.
In April 2015, Google rolled out a “mobile-friendly” update
that put an emphasis on responsive design in search engine results pages. Now, Google has been changing things for years, but this update was one of the first times web administrators were forced to make a shift.
The choice was either adapt or fall behind.
Responsive design had been around for some time before this, but the update really pushed it into the spotlight. Google was right to make this change, too, because a lot of people now browse via mobile devices. Nearly all 18 to 34-year-olds
— or 97% — are mobile users, with 20% of that demographic avoiding desktop use completely. Clearly mobile use is on the rise, and that’s why Google made this change.
But what does any of this have to do with best web design practices? Everything, actually.
At the time, the update changed the landscape so responsive and mobile-friendly design was an important part of the playing field. It is effectively now a “best” practice. And that’s true of any big business that wants to participate.
For those that don’t keep up with the changes, there are consequences. Namely, search engine optimization will take a hit, and most likely traffic and revenue along with that.
If you don’t want this to happen to you or your business, you’d do well to observe these best web design practices and make sure you implement them when applicable.
Keep Up With Design Standards
Things are always changing and evolving in web design. So it’s understandable if you were to let your knowledge of design standards and best practices lapse. It can happen even to the best of us. Regardless, this is something you want to avoid at all costs.
You must keep up to date with standard web conventions to ensure you are on par with everyone else. Think of it like a competition. If you do not train regularly like your rivals, then you will quickly fall behind when it’s time to leave the starting line. The same is true of your business and your website.
Standards are sort of like rules or guidelines. No, you don’t always have to follow them, but not doing so can have a negative impact on your business.
For example, on every page, you should offer a “home” button somewhere, preferably near the top:
- This is so visitors always have the opportunity to refresh their visit, effectively starting from scratch.
- If you do not offer this, things get extremely confusing and frustrating. This is primarily because people are used to this strategy. It’s something that is accepted as a standard.
If you have a good reason for not deploying a standard, then, by all means, go for it. Just make sure you’re ready for the consequences.
Case Study: Runners Point
Runners Point did a great job of following this rule by updating its Nike Shield Pack page
to match current design standards. It may be a sub-page, but it’s still important because it’s for a specific product or focus. The designers were right to treat it as its own thing.
Stop the Proliferation of Sameness
Many sites employ WordPress, the popular CMS. This is not a bad thing, but it can lead to a lot of redundancy. Even when sites customize a theme specifically for their brand, the overall design can end up looking a lot like ones used on other sites, from the UI and navigation elements to the content on the page.
The problem is even worse when you factor in design standards. Because you have no choice but to conform to a lot of these guidelines, your final design can come out looking a lot like other sites. The trick is to reinvent the wheel in subtle yet responsive ways.
Case Study: Nippon Bearing
A good example is Nippon Bearing's site. At a glance, it appears like any other with minimal elements and several industry best practices deployed. But take a closer look at that splash. It’s not just a series of images randomly spaced to steal the show. It’s actually a looping video used to explain to the audience what the company has to offer
them. It takes the focus away from the rest of the design. The looping video stands out and makes the site something unique. It’s subtle, yet attractive.
Dial Back the Flashy Elements
This is particularly true of mobile-friendly and responsive design, but it applies to standard websites, too. It’s easy to get carried away with flashy animation and moving elements. But if you use this stuff too much, it ruins the optimization of your site and design. Honestly, there’s no point in even trying to optimize your site if you go overboard with the flashy stuff. In many cases, it can actually cause websites to load slower.
That’s bad news, because 40% of people will abandon a website
if it takes more than 3 seconds to load. Obviously, you don’t want that to happen. That’s why you should refrain from using flashy elements often. Only employ them when it adds to the user experience. This can include things like:
- Hover animations
- Galleries and slideshows
- Motion and scrolling
- Background animations and content
Case Study: Squarespace
Notice how Squarespace
uses little — if any — animation to liven up scrolling on its front page? The page is flat, simple and responds well to interactions. That’s a sign of good design.
Embrace Material Design
If you do want to improve the look and feel of your site — albeit in a less gaudy way — then embrace material design techniques.
This is a new “visual language” created by Google that relies on shadow effects
and movement concepts to give the illusion of depth on a page. It makes websites more realistic in terms of appearance and movement.
Case Study: Angular
You can see this in action on Angular’s site
. Notice the shadowing and clean design elements spread across the page? Hover over some of the context buttons and menus. Watch how they react. This is all part of material design, and it’s both responsive and reliable.
Avoid Being Overly Trendy
One of the biggest mistakes you can make — especially during a redesign — is deploying a particular concept or strategy just because it’s trendy. Yes, it’s always good to be “hip,” but it’s more important to deliver a good experience and also a reliable one.
Don’t implement something just because everyone else is doing it or talking about it. Make sure it matches the personality of your business and site first. Trends represent popularity, but that doesn’t necessarily mean they follow “best practices” especially in an industry like web design.
For instance, single-page infinite scrolling sites are all the rage right now. However, it would be a horrible idea for an e-commerce company to adopt this design technique for its site. For obvious reasons, it would create a lot of performance issues, especially if it’s a company that handles a wide variety of products or services.
You don’t have to be a trendsetter. This is one of the few industries where being a follower is acceptable, within reason.
Case Study: The Guardian
Take a look at The Guardian’s modern design
. You can see a hint of some of the most popular trends there, but they’ve been implemented well and they’re not overbearing. The feature articles use a Tumblog-style layout. The page itself is fairly flat and minimal. And the design resembles something you’d see in a print edition of a magazine or newspaper. In other words, it’s fresh yet still familiar.
When you follow best practices in design, your business will always win. You will have stronger search engine optimization and present a better experience for users, which will lead to stronger business.