By Steve LawApril 28, 2021

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:

Branding

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.

Content Widths

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.

Navigation

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

Megamenus

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.

Secondary Navigation

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.

Typography

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.

Footer

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.

Conclusion

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Need Help?

At Mission Bell Communications we help add value to small to medium sized businesses by providing digital services at a price point you can afford.  If you are interested in any of the subject matter in this blog, please fee free to get in touch with us for a no-obligation quote.
Get A Quote
Get A Quote
Mission Bell Communications
5.0
Based on 23 reviews
powered by Google
RAISED2WALK, INC
RAISED2WALK, INC
17:57 23 Feb 21
I highly recommend Mission Bell Communications to anyone who is the market for web development, hosting, and all around... professionalism. These guys go the extra mile to understand our company's needs, and the results are amazing!read more
Hatfield House On Hibernia
Hatfield House On Hibernia
00:51 17 Dec 20
Can’t say enough about our satisfaction with Mission Bell Communications. We would highly recommend them to anyone... who’s looking for someone who takes the time to understand the client’s needs, offer suggestions, develop and communicate a strategy and implement a solution with tremendous attention to detail. Ours is a Bed and Breakfast business and we’ve definitely found the right web support. Thanks to Steve and his team.read more
Sid Feagin
Sid Feagin
12:41 25 Aug 20
Steve Law and Mission Bell Communications are one of the best web services companies I've ever used. They are... responsive, professional, and provide excellent quality across all of the service lines we have used. It's rare to find a company that provides the value they deliver which is why I consider them an integral part of my company.read more
Darrell Bankes
Darrell Bankes
12:41 24 Aug 20
Mission Bell continues to impress me with the quality and attention to detail. Appreciate their attentiveness and... ability to get work done efficiently, and help quick when really needed.read more
Ryan McDougall
Ryan McDougall
18:45 04 May 20
Steve helped our business at a very critical time while pivoting to e-commerce in the midst of the COVID 19 crisis and... it was seamless and we are now able to continue to do business. Very impressed.read more
Fons Van Geleen
Fons Van Geleen
16:17 12 Dec 19
Steve has helped me setting up a great website for my organization. Being a newbie in Canada i 'm busy with a lot of... stuff and the website had never been live without the help of Mission Bell Communications. Thankyou very much Steve!read more
Debra Signorello
Debra Signorello
14:28 23 Oct 19
Great job on my website. I enjoyed working with youTurned out excellent. Thank you. Rich
Bob Rohfritsch
Bob Rohfritsch
13:16 18 Sep 19
Steve has done an awesome job on my website.I needed his experience to do what I am not into and he took the... information I gave him and ran with it.Great job!Very professional website!Thanks Steve.Bobread more
Michael O'Callaghan
Michael O'Callaghan
23:54 25 Mar 19
"Steve has extraordinary vision, experience, and most of all... he is delightful to work with. Mission Bell exceeded... expectations- met every deadline, and were extremely flexible. His professionalism, integrity and the ability to translate & implement our ideas to help re-brand & deliver our product to marketplace was an awesome experience. Steve & the resources Mission Bell Communications bring to the table are truly WORLD CLASS." - Highly Recommended on all fronts! - Mike O.read more
Tristin Burns
Tristin Burns
05:06 04 Dec 18
Fantastic work! Professional, experienced, fast and reliable. Mission Bell did a fabulous job on my site. Incredibly... personable and patient. Everything you want when going through the process of re-branding and creating a new site.read more
Next Reviews

Mission Bell Communications Inc.
A-44 Frederick St.
Stratford, ON N5A 3V4
Canada
+1 (226) 921-5070

Copyright © 2021 Mission Bell Communications Inc. All Rights Reserved
Top folder-openphonefacebookbarsenvelopeinstagramchevron-downcross-circle