Looking for the best in business-to-business (B2B) website design? Here are ten examples of B2B websites that have raised the bar to a new level for 2013. These sites are not your typical boring B2B websites. Each of these sites leverages the latest best practices in website design. They look great, have interesting content, and are easily viewable on a variety of devices ranging from a smartphone to a desktop computer.
The criteria we used to determine who made the cut for the 2013 DMZ Interactive Top 10 B2B Websites list:
Our evaluation starts with visual design. The design of the website should focus on simplicity and have a clear layout with flat colors, clean typography, and a flat style. Most importantly, all of these B2B sites are following the latest web design trends. What is the latest trend? Out with skeuomorphic interfaces and in with app-style minimalism.
Next is user experience. The site should be built from the user’s point of view and make it easy for visitors to find the content they are looking for. Menus and taxonomy should be intuitive and easy to traverse and navigate. In the header, the site should have a search form field and button to provide rapid and easy access to content deeper in the site.
Usability is our third criteria. A usable B2B website should support the user’s goals and intent. Visitors should be able to easily find the information they are looking for – fast. For ecommerce sites, buying a product should be a simple and painless process, not a gauntlet of pages and forms that interfere with the sale.
The best B2B sites also have a coherent and effective content strategy. The content is well written and is organized and structured to engage the visitor. The content is readable, understandable, findable, actionable, and shareable in all of its various formats. The writing style is concise and uses the journalistic inverted pyramid structure to place the most important information at the top of the content. Sites with a truly effective content strategy draw the visitor deep into the site and are transparent. Truly transparent sites display important information about the sales process instead of hiding it behind forms or burying it in PDF documents.
Responsive Web Design is not a luxury. If you have a B2B website in 2013, your website’s content should be easily viewable on a smartphone or tablet. The hottest trend in website development today is responsive web design. Responsive web design is a method of designing and building websites that automatically formats the content to look good on tablets, smart phones, and desktops: in essence, doing away with the need to build expensive custom applications to target each mobile device platform. Eventually, all of these platforms will evolve into a single unified web version, delivered by a content management system via the mobile web browser. We expect this evolution to take place over the next 18 months.
Thinking about a website redesign in the next year? Now's the time to closely examine what these cutting edge B2B sites are doing right. Whether you are a small business or a large multinational, in this list are important nuggets of information that will help you create a world class, responsive B2B website that is the envy of your competition.
Just in case you've never heard of General Electric (GE), they are a 147-billion-dollar multinational conglomerate based in Fairfield, Connecticut. Sometime in December 2012, GE relaunched their website with a responsive design. If you're curious, use the wayback machine to see how the site has evolved over the past year. It's been quite an evolution. We really like the current (7/29/2013) iteration of the site. It's in our #1 slot because it is visually stunning, has bold large graphics, great typography (they have their own custom typeface called "GE Inspira"), and finally puts to rest the idea that a B2B site has to be boring. The site is also built on Drupal, our favorite content management system. Under the hood, the site is using all the goodies that make a state-of-the-art B2B website hum: Varnish, HTML5 and jQuery.
Salesforce is a 3-billion-dollar global cloud computing software company located in San Francisco, CA; the leader in its field, it is #1 in Google search results for CRM software. Salesforce.com is a Top 10 B2B pick because the site manages to effectively communicate its 6 product verticals without confusing the visitor. Keep in mind, this is no easy feat, since the cloud means different things to different people. Strong visual hierarchy makes for a clean design with an excellent menu system that groups information in a logical way. The site uses responsive web design; under the hood it's built with jQuery and HTML5. Eloqua provides its marketing automation. This site covers all the B2B website best practices.
OK, this is a stretch. Progressive provides insurance for consumers but they do sell insurance to businesses too -- so they make the cut. We like the site because it makes use of a bright, bold, and simple color scheme to emphasize the important aspects of the site (the menu and the quotes tool). The use of the image of Flo, the Progressive mascot, lends the site a human feel that it would otherwise not have. The feel of the site remains consistent across all platforms, despite changes in layout. Under the hood the site uses HTML5, Modernizr, and jQuery.
Atmail is a Linux-based email, calendar, contacts, and unified communication server. It is used as a messaging platform for ISPs, enterprises, and small businesses. We really like this site. It looks fantastic on both a large 25-inch desktop and a smartphone. They also offer e-commerce on the site and allow you to buy online. The only thing missing from the site is site-wide search. Under the hood, the Atmail site uses the Twitter Bootstrap framework, jQuery and HTML5.
According to their website, Overdrive is a global distributor of e-books, audiobooks, and music for schools, libraries, and retail. This site follows the classic 960 grid layout but becomes fully responsive in screen resolutions below 960 pixels in width. The site does a great job of simplifying the layout for mobile, without losing functionality. On the wide screen format the site uses jQuery Mega Menus which degrades nicely at lower screen resolutions. The site also leverages the Google web font "Source Sans Pro," which is a nice replacement for Arial and Helvetica. Under the hood: WordPress, Bootstrap, jQuery, Modernizr and HTML5.
Gallup is a polling organization that offers data and strategic consulting services to businesses and organizations around the world. Their home page provides the latest examples of their polling, showing the specificity and breadth of their organization. The content on the Gallup site is deep and wide. Structurally the site has an information architecture (IA) similar to most news organizations where timely content takes precedence over older information on the site. Gallup does a good job making what could be a complex IA for visitors to understand fairly simple to navigate. Following a classic 960 grid layout, the site leverages RWD techniques to render the pages on smaller screens. In particular, we really like how search is prominently incorporated in the main navigation on mobile devices. Overall, the pages scale well on all screen resolutions. While not on the bleeding edge technically, the site makes good use of jQuery and HTML5.
Paychex specializes in payroll processing and tax services for business. The paychex site follows the classic 960 grid layout but becomes fully responsive at lower screen resolutions. We like their unique menu implementation. There is a significant amount of content on the site; the large format menu system makes traversing the IA and finding the right content a breeze. The drop-down headline at the top offers relevant information regarding the new Healthcare Reform Bill, and how Paychex can help businesses adjust to the new legislation as painlessly as possible. The site offers a useful quote tool as well as free content that increases opportunities for lead generation. Paychex also makes use of Marketo marketing automation. Under the hood you'll find jQuery and HTML5.
Compete specializes in digital marketing optimization. Compete is a Top 10 B2B Website because, simply put, the site is beautiful and maintains its design esthetic at a variety of screen resolutions. On a large desktop display, the graphics take full advantage of the extra real estate. On a small screen, large images are hidden from view. They also do a really nice job with the typography with the use of the realist san-serif DIN font library. It's nice to see sites getting beyond the standard Arial and Helvetica font faces. Under the hood, the site utilizes WordPress, Modernizr, jQuery, and HTML5 as the foundation. The site also makes use of Pardot marketing automation tools for lead capture and nurturing.
EMC Corporation is a 21-billion-dollar multinational corporation that sells data storage technology, information security, virtualization, and cloud computing products and services. EMC made the Top 10 B2B Website list because their site has a clean, modern, up-to-date design, uses responsive web design techniques, and has a unique navigation/menu structure that helps visitors easily traverse a fairly complex information architecture and sitemap. Under the hood the site uses HTML5, Cufon, Modernizr, and jQuery.
Thomson Reuters is a 29-billion-dollar financial services information company. They feature a slightly unconventional webpage design with a large, high-resolution image on the home page. One of the most impressive elements of this site is its navigation menu. Thomson Reuters is a very large company with numerous divisions and products and a fairly complex organizational structure. Their unique large-format menu system makes what would be unnavigable on most websites a breeze to traverse. It's also interesting to note that on small screen, the large format menu is replaced by an equally usable menu system designed specifically for mobile. Under the hood, they are using all the tools for a modern state-of-the-art B2B site: Modernizr, Bootstrap, jQuery,Typekit and HTML5. Eloqua provides its marketing automation.
As you can see, this list of the Top 10 B2B Websites contains some of the largest and most well know B2B brands in America. Right now, the larger B2B firms with significant marketing resources are leading the way when it comes to building state of the art websites that leverage responsive web design techniques. For smaller firms, the good news is that responsive web design is rapidly becoming less expensive to implement as more content management systems begin to publishthemes that are responsive.
If you'd like to learn more about responsive web design, take a look at our responsive design blog post:
5 Reasons You Need a Responsive Design.