Things High-Cost Websites Do Differently
Every business needs a web site these days. One of the really nice things about having a website is that if done well, even a very small business can appear very professional. It isn’t that a business owner wants to misrepresent the size of his or her firm, but he or she wants to project competence and professionalism to prospective clients or customers.
Large firms do have some advantages in that they can easily spend tens, or hundreds of thousands of dollars on website development, and can invest in teams of designers and developers who have all the latest tools and are well versed in the latest design trends and user experience research.
Small businesses and web design freelancers rely on website templates (at least as a starting point) to build sites. Because of this, there are certain design assumptions which are baked into such projects. It can be easy to end up with a set of design assumptions which may or may not be serving you well. It’s worth looking at what large companies are doing and seeing what aspects of that translate well for small business.
I remember hearing that a lot of fast-food chains would see where McDonalds was going to build a store, and then locate near that. They knew McDonalds was going to spend the money to research the optimal location for their store, and that they could piggyback on that research rather than reinventing the wheel.
In preparing to write this post, I looked at a dozen or so huge companies’ websites and asked how they differ from a typical small to medium sized business website. Here are some of my observations:
The temptation of any business is to overuse their own branding. I regularly receive objections from clients that their logo is too small. Almost without exception, major brands have small logos on their websites. While my clients are complaining about a 200px wide logo, major companies are using 60px to 100px as a standard size.
The counterpoint to that is that major brands’ logos are more recognizable. You can see a postage stamped Starbucks logo, and you will recognize it right away. A local business’ logo is less recognizable, but as I said in my post about what every homepage needs, your logo is important, but it is not making you money. Keep them modest size. If you think it’s too small, it probably isn’t.
Back in the day websites were always around 960px wide, but screen widths were pretty much fixed. Now a designer needs to design for users who are on a 4k display, or a phone with a viewport width of 375px or smaller. For users on desktop, that typical width of 960px has crept up to the point where a website template is going to have a content width typically in the range of 1080px-1200px. This of course means that if someone is on their HD monitor, almost half of the screen real estate is wasted. High cost designs are taking advantage of the extra screen widths by having content widths much closer to the 1920 pixels of an HD display. Most of them are in neighborhood of 1440px.
The counterpoint to this is that you don’t want to have text running nearly that wide. It is exhausting to read long lines of text. In fact, the ideal length of a line of text for reading comfort is about 80 characters. This means that the designer has to incorporate a lot of visuals to keep that content readable. Content is generally broken into columns, which is good for responsive design, since those elements will just stack on mobile.
Large companies have a lot of content to display, and having effective navigation is critical. If you have a 6-page website, you don’t have to put much thought into it, but if you have a 600-page website, you had better think it over. The trends in high end navigation break down into a few sub-items
Simplified Primary Navigation
Getting the Navigation right on your site is an art. You want to make it easy for someone to find what they are looking for in a way that seems familiar, even on the first pass. The top-level navigation on the sites I looked at were all pretty simple, with about 4 or 5 items in the top level. In most cases, those top-level items are not linked directly to pages, but instead lead to another level of navigation, which brings us to the next item on our list
A traditional way of presenting a large number of pages is to use flyout menus. You hover over a navigation item, and there is a dropdown that flies out, and each item in the dropdown could open another level of navigation, allowing you to display a lot of pages. While flyout menus work, they provide a terrible user experience. If the user isn’t sure exactly where they are going, they must retrace their steps or backtrack through the navigation. If your cursor accidentally goes off the menu, the whole thing closes, and you have to start at the top. Traditional flyout menus have been replaced by mega menus
Megamenus are large navigation panels, normally with items in columns. They can include images, tabs, media, or whatever elements you would normally find on a page. A megamenu can be worse from a user perspective than simply having a huge conventional menu, except that the menu links need to grouped in ways that make sense. Having items displayed in a hierarchical manner will really go a long way to making the experience intuitive.
One other change is that the mega menus almost universally open on click. Historically, they opened on hover, which meant fewer clicks to get where you wanted to go, but it would get frustrating as you moved your mouse, and giant menu panels open and covered content. It’s just better to activate them on a click. The other part of this is that they close when someone clicks off the menu, so if you accidentally move the cursor off the menu, it will stay open.
Primary Navigation items might be reserved for things like your most important products and services, but users still may need to find things like account logins, support, contact info, etc. Most of these large sites incorporate a separate secondary navigation to cover these items. There is visual distinction between the two, with the primary navigation items being more prominent. Secondary navigation is typically a smaller font size, and it located above the main nav, or to the right of it.
The next thing that you can notice on high-cost web designs is the typography. While having clear and legible fonts is sort of a no-brainer, you will notice that, for the most part, the headings are conservatively sized. There is a time and a place for a big bold headlines, but most of these sites had small to moderate sized headings.
While the headings are perhaps a little smaller than what you might expect to see, body text is actually larger than typical. If you open up a website template, you may start out with a default body copy size of 14-16px. These large corporate sites tend to use body copy in the 18-20px range. That is a substantial difference.
Another change in Typography that you will see, if you nerd out and look at the code, is that the fonts are using ‘rem’ units rather than pixels. 1 rem is equal to 16px by default, but the value can be easily changed. As web accessibility becomes more important, using rem is a valuable tool in the designer’s arsenal. If the default value of REM is changed on your browser, for accessibility purposes, all the fonts using rem for sizing will change accordingly. If you're using Google Chrome, and you go into the settings, under appearance, you will find the default font size. They allow you to select different options for the default font size, ranging from extra small to extra large. This is altering the value of 1rem from anywhere from 9px to 24px. If your font sizes are set in pixels, the content will not scale, which is an accessibility problem for those with visual impairments.
If you look at most template-based websites, the footer is almost always a dark grey. The idea is that it contrasts from the main content area, which has mostly white or slightly off-white backgrounds. Light colored footers are increasingly popular. The footer is at the bottom of the page because it is more about function than looks, but don’t think that your options for footer color are limited to black and dark grey.
While I don’t recommend trying knock off a national brand’s website for your next web design project, an examination of the overall trends can help reframe certain assumptions that we make in web design and help us from getting stuck in a visual rut, as it is easy to do if you’re pressed for time and resources. If we take it one step further, we can take what has been done, and try to innovate from that in order to create new and fresh design ideas that will really help us to stand apart from the competition.