A strong industrial website is important for setting the tone with your customers, regardless of your industry vertical. Long gone are the days when you could get by with a sub-par industrial website. Everything from the look of the site to the messaging to — most importantly — the site’s ability to convert your visitors into prospects are crucial in a web-centric society. Your visitors expect to be engaged and captivated quickly — otherwise they’ll lose interest and move on.
For this particular list of “The 10 Best Industrial Websites,” I looked at the industrial companies in the Fortune 1000 list to see which companies have captivating websites. I reasoned that Fortune 1000 companies would have the best industrial websites since they are so successful. Well, I was wrong. I was surprised to see hundreds that missed the mark — many by a long shot.
The requirements to make this list of best industrial websites were pretty simple. To rank, a site needed to:
- Quickly capture the visitor’s attention
- Clearly inform the visitor what product, service, or solution the company in question provides
- Be visually engaging
The first thing you’ll notice with the ten best industrial websites chosen for this list is that they have strong imagery. I can’t emphasize how important this is for making your site “pop” (as designers love to say).
The companies and teams behind these industrial websites were also very purposeful in their use of messaging and calls-to-action (CTAs).
As soon as you hit the Caterpillar site, you are immediately introduced to the massive scale of the company, which is global. The home page asks you to select your region and the language you’d like to browse the site in. There are over eighteen different available translations of the website. With each region they’ve defined, such as North America, Latin America, Eurasia, etc., they serve up a header image specific to each region.
The Caterpillar site can be used as a case study for how and why high-quality photography helps make a site one of the best industrial websites. Browsing their product lines, you can see there is a standard that ties all the imagery together — cutouts surrounded by generous amounts of white space. This allows users to focus on the products themselves, rather than being distracted by the quality (or lack thereof) of the images or the surroundings.
Grainger is one of the largest industrial supply centers in the world. Having an online catalog of 1.5 million products presents an inherent user experience challenge, which they addressed handily.
The temptation would be to throw a lot of information on the home page and overwhelm the user. Grainger does a nice job of keeping its home page clean. The use of a small area for the rotating marketing messages is a nice, simple touch. Just under that they’ve left some space for either “Top Sellers” (if you are a first time visitor) or your “Recently Viewed” products (if you are returning).
Grainger knows their customer base very well. Many of their users are repeat buyers and often purchase the same items. The Bulk Order Pad located in the top-level navigation allows those users to order by item number and to copy and paste multiple numbers at a time from a tab- or comma-delimited file.
For their mobile experience, Grainger chose an adaptive website, as opposed to a responsive one. (Not sure what the difference is? Find out here.) Grainger nails it with their adaptive experience, which was the right call. With so many products and unique layouts, using a responsive website would have created a terrible user experience.
At some point during the day, you’ve used a product that Dow helped create. When you are a solutions-based company such as Dow, it’s difficult to portray your message when there is such a wide range of products you touch. Dow handles this problem by clearly defining 10 target markets and solutions in its main navigation, along with case studies within each category.
The Dow site is well organized and easy to navigate. They even play off their logo and use a red pyramid style indicator to let you know what section of the site you are in while browsing — one of those little things that makes a site stand out.
I also like the use of subtle movement in the images that rotate on the home page. By combining still images in the foreground with looped video in the background — such as rippling water or rapidly moving clouds — the site delivers a unique feel.
DuPont took a unique approach to its site’s homepage hero section. Instead of a large background image, slider, or hero image, they have a segmented hero with some nice hover animations for each of the CTAs. On tablet and mobile, they used a technique that shows the user a little sliver of the CTAs so they know there is content off screen — encouraging a swipe.
The site’s mega nav is another feature that is very well done. Everything from the scroll animation to the layout and use of imagery gives the user very clear paths to whatever content they may be looking for.
As soon as you hit Greenbrier’s home page, you know what they do thanks to the straightforward tagline, ”Leaders in manufacturing and freight transportation services.” Scrolling down, you get a list of services clearly delineated with different brand colors.
They also included a section for recruiting on the home page. The CTA is well placed and doesn’t take the user’s attention away from the content. However, if you are looking for a job with Greenbrier, it’s something you’ll be able to find quickly.
The internal pages have some beautiful photography and have a nice flow to them. Also, if you want to learn about the company history, they have a useful timeline slider on the About page that displays company milestones.
The homepage on the AGCO website has nice segmentation and I like the “card” style news items with images for each corporate press release.
The internal pages use a static left sidebar navigation for all the sub-pages — something that is hard to pull off, but the AGCO site does it very effectively with strong typography.
When navigating through the AGCO site, there is no doubt that they are an agricultural machinery company since they feature a strong agricultural image on nearly every single page.
7. Martin Marietta
Martin Marietta decided to go against tradition and place their main navigation in a left-hand column, rather than at the top of their site. This layout allows it to incorporate icons for each section, which helps users quickly identify where they want to go.
The site’s main call-to-action is to use the product calculator, which leads to requesting a quote. This may be one of the best online calculators I’ve seen. It looks great, has a nice flow, and is simple to use.
If you want to see how a locator should be done, check out theMartin Marietta facility locator. Much like the product calculator, the user experience for the locator is well thought out.
8. Johnson Controls
When you hit the Johnson Controls home page, a sped-up video of a city at night will play. It’s an image that definitely fits a company that deals with technologies that help the “world run smoothly, smartly, simply and safely.”
Once the quick clip has finished, you’ll be invited to start another video by clicking on the big orange play button. The short documentary tells you about their processes and how they collaborate internally, with the added benefit of making their company seem more personal.
When navigating the internal pages, it’s easy to use the secondary navigation right below the main image on each page. The title of the current sub-page is underlined in this menu, letting users know which page they are on.
Penske does transportation and it’s the first thing they tell you when you land on their home page, which prominently features the slogan “Transportation Excellence.” Because Penske has 12 different subsidiaries, they immediately invite you to choose one. There’s also filtering on the Companies page for automotive, truck, etc., so you can drill down to the right company quickly.
The hover navigation directly below the hero image on the home page is a great touch. The icons are appropriate for the industries the different subsidiaries serve and really stand out.
The Lear site is a large website on which all the pages and sections flow together well. Whether you are an investor, supplier, job seeker, or customer, it’s clear where you should go.
Although the whole site is visually stunning, the main product page really stands out. It shows you all the Lear products that are used in a car and where they can be found by arranging those products in the shape of a vehicle. Here’s the image:
Clicking on the “+” icons cues pop-ups with more information and links to sub-pages with more information about the products in question.
Learning from the Best Industrial Websites
If you’re thinking about rebuilding your industrial website soon, or if need to restructure your current site, I would highly recommend reviewing the list of the 10 best industrial websites above in more detail.
Take functionality or sections from the sites you like and ask yourself if they would be applicable for your users. And don’t be afraid to expand your research to include sites beyond the ones listed here — even ones outside your market. Reviewing other websites is an important part of the web development process — especially if you want to have one of the best industrial websites out there.
Working diligently to develop a strong idea of your site before you go into production will pay dividends. It will create a better user experience, which will lead to more conversions — which is ultimately the entire purpose of your website, right?