<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

The Best Web Design Practices for Large Businesses

Published on
3,619 Points
619 Views
Last Modified:
Lexie Lu
A UX/UI designer with expertise in marketing, web design, and graphic design.
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
  • Parallax
  • 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.
0
Comment
Author:Lexie Lu
0 Comments

Featured Post

Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Join & Write a Comment

This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month