The Journey is Better with Friends.

Share The Insights of Moosylvania on your Facebook Timeline.

Add to Timeline

At some point in the lifecycle of working with a client on their new website, we get asked a number of web design related questions, such as “How wide should my website be” or “should I have search on my site”. Working with websites every day – these questions are easy for us to answer based on our subjective experience – but it’s always helpful to have some solid numbers to back those decisions with.

To help us (and you) answer some of these web design questions, we’ve devised an unscientific study to evaluate some of the common website design trends among a common groups of sites.

In this first installment, we will be analyzing specific website design features of the homepages of the Top 30 Companies of the Fortune 500 (according to CNN’s annual ranking for 2010, see here). We found that this group provided a diverse collection of business industries as well as some great and not so great website design examples to evaluate.

We evaluated the homepage in the following areas:

  • functional website design elements
  • aesthetic website design choices
  • technical website design factors

Our analysis below breaks down the design choices made by each of these companies.

Functional Website Design Elements

Placement of Logo is Top Left?The location of the logo within the design. Nearly every site we reviewed had it in the top left corner.


Logo Includes a Tagline or SloganDoes the logo feature a tagline next to it?
A majority of sites stuck with their logo only. One thing to keep in mind here, is that these are the top 30 companies in the Fortune 500, so a majority of audiences can recognize the logo and know what the company does. If your logo or business is not as well known, you should consider including a tagline with your business purpose.


Main Site Content is Above the FoldIs the main content (not including the footer) above the fold on a 1280×800 browser window? Most corporate sites were above the fold, while most eCommerce sites went beyond that point. GE is a good example of a site that appears above the fold.Recent user testing studies have shown that users don’t mind scrolling below the page fold.

Note: Above the fold is defined as the area visible before having to scroll within the browser vertically.


Site has a Search FieldAlmost all of the sites we reviewed had a search field, which was not surprising, since most of these sites have been around for along time and have a lot of content.


The Primary Banner Features Scrolling ContentScrolling primary banners is a web design trend that has been growing in popularity because of its effectiveness and ability to give the site some life. Half of the sites we reviewed featured a scrolling content window of some sort. Citigroup uses a slider to present different content on the homepage.


Strong Call to Action Button/LinkIf the site featured a primary button or link on the homepage that lead to a primary service or feature, it met this criteria. We were surprised how few sites featured a clear direction for the user to take. Every site should have a clear call to action visible on their homepage that should take users 3 seconds or less to find.


Social Media Links Available on the HomepageIf the site features any links to Twitter, Facebook, etc. We were not surprised at the low number considering two things: 1) a lot of large companies have yet to embrace the social media space and 2) if they have, they neglect to cross-promote their social media channels on the homepage. Both of these are missed opportunities. But, were happy to see corporations like Boeing embracing social media.


Social Media Links Above the FoldFor sites that featured social media links, did they appear above the fold?


Social Media Links Below the FoldOr below the fold?


Company News/Blog AreaDoes the homepage feature a list of recent news or blog posts somewhere on the page?


Contact Link Above the FoldYou would think a contact page is an obvious area to link to – however for some of these larger corporations it appears that this was intentionally left off. Not finding a Contact Us page easily is a frustrating experience for a user trying to connect with a company.


Newsletter Signup FieldWe feel like there is little excuse for any of these companies to lack a newsletter signup opportunity, since email marketing would be an easy way to reach their target audience with company news and special offers -however a majority of them lack this feature.


Uses a Splash/Intro PageWe were happy to see that very few sites use an intro page that appears before reaching the main homepage. This common trend of the early 2000′s is quickly fading away – much to users’ delight.


Navigation Features Dropdown/Flyout MenusMost of the sites on our list could have benefited from a dropdown menu to help the user quickly access content, but surprisingly many are not using them.


Site Uses a Browser Favorites IconThe “favicon” helps uses quickly identify a site when they are using browser tabs or bookmark a website and is a good branding opportunity – most sites on our list use them.


 

Aesthetics Website Design Choices

Primary Color is Light?A great majority of the site we reviewed had a primarily light background and color scheme. The sites that were trying to convey a sense of luxury were the most common among the dark color scheme sites. Ford is a good example of a darker website, whereas ExxonMobil uses the more traditional light color scheme.


Site Alignment within the Browser is CenteredOnly a few sites on a our list featured a left aligned navigation and most of those clearly have not undergone a major design update in some years. AT&T uses a centered approach; Bank of America is left aligned.


Site Expands the Full Width of the BrowserAnother trend of the early 2000′s and prior – with standard monitor sizes and screen resolutions increasing over time – the problem with full width websites is that it can stretch out content to an almost unreadable point. The more popular choice – fixed width.


Overall Feeling is Clean?This was a more subjective call on our part – if there was too much going on and not enough use of white space, the site was classified as clutter. If the site had clear direction for the user to interact with the content and ample white space, it was classified as clean.


Consistent use of PhotographyDoes the site used high quality photography to create a connection with the user?


Consistent use of GradientsDoes the site use a noticeable amount of Gradients? J.P. Morgan is an example of a site that uses a number of gradients.


Consistent use of Rounded CornersDoes the site use a noticeable amount of rounded corners? Citigroup uses rounded corners.


Consistent Use of Drop ShadowsDoes the site use a noticeable amount of drop shadows? Cardinal Health uses drop shadows to create depth.


 

Technical Website Design Factors

Site Primarily Uses Adobe FlashThe final “2000s” trend on our list that has clearly faded away. A number of sites used Flash in a few places, but only a few used it to display content throughout the entire homepage. Drawbacks of using Flash can be debated for years, but the primary issues are that it is often over-engineered and is not particularly search engine friendly.


The Width of the Site within the BrowserTo help address the question of “how wide should my website be?” we’ve compiled the exact width of every site we reviewed and provided the average, as well as the most common width. Our recommendation is maximum 980 pixels, which provides room for the browser scrollbar on a 1024×768 browser. For the latest trends in browser sizes visit here.


Site Load Time (in seconds)How fast do the sites on our list load? The amount of time someone is willing to wait is debatable, but in general, most of the sites loaded in a timeframe we were comfortable with. Site load time is primarily a combination of the size of the page and the speed of the server the site resides on. Page speed is also a factor in SEO, so having a faster site load time is a better choice all around.To test the load time of our site visit here.


Site Total Size (in kb)An average of the size of the sites we reviewed, a combination of the images and code.To test size of your site visit here.


 

Keep in mind, many decisions you make about how your website looks and functions should be based on your specific website and target audience needs. For example, if you only have a 10 page website, you don’t really need a search feature as it would provide little value to your user. Of course, some decisions will also be affected by business factors specific to your goals. With that said, this study should help you make decisions once you have narrowed down your list of website needs.

If you like what you see here, please share it, and be sure to sign up for our RSS feed to be notified of future installments to this series.

Related Posts:

7 Web Development Sites You Must Bookmark

6 Types of Website Design Inspiration Resources

 


 

Comments »

6 comments on Web Design by the Numbers: Homepages of the Fortune 500

ae says:

Nice read! Let me know when you tackle the other 470 sites ;)

October 13, 2010 @ 1:39 pm


Robin Rath says:

I had originally planned on 50 – that quickly changed to 30 after I started to dig into it.

October 13, 2010 @ 1:40 pm


DGC says:

Nice analysis, but let’s be clear – they use fixed-width because it’s easier and because visual designers & creatives prefer it. There are plenty of ways to do variable width-well (see Amazon), but it takes some extra effort that most companies (or their agencies) are just not willing to put forth.

October 13, 2010 @ 10:51 pm


Robin Rath says:

You are quite right…visual designers & creatives do prefer it. However, I would have to say (as a creative) I prefer amazon on my 1280 screen over my 1920 screen. I also think that the client prefers the consistency too…when you hand them Photoshop comps and then eventually build them out – they want them to appear the way you said it would – not one of 10 different ways.

October 13, 2010 @ 10:58 pm


Zak Morris says:

This is an awesome and informative effort you’re undertaking. The only thing I would like to see added is font usage and how many sites are employing the web-kit font scripts to allow for non standard browser fonts vs. using images. Bonus if you can get any data on HTML5 and CSS3 usage. Blood types of first born…optional.

I’ve noticed a decline in gradient use, or at least they are more subtle. Yay for death of the ‘ glassed/glossy’ effect (aside from forum skins and such ).

October 15, 2010 @ 1:07 am


chris says:

Great post thx.

May 17, 2012 @ 1:07 pm


RSS feed for comments on this post. TrackBack URL

Post a Comment

Notify me of follow-up comments via email.