Table of Contents
Did you know that your website layout can affect your search rankings?
On January 19th, 2012, Google announced it’s Page Layout Algorithm Improvement. This new change will affect search rankings in the future for sites that have little content “above the fold.” On its Webmaster Central Blog, Google states that such sites may not rank as highly going forward.
In this article, I identify some key things to consider in your web page layout for both usability and organic SEO rankings. I also show you how to test your website layout with a handy tool so that you can see what website visitors see when they get to your website.
What is website content above the fold?
The content above the fold is clearly visible immediately when people get to your website. They do not have to scroll to see it.
One question to ask yourself is: Can people tell what you sell, where you’re located, and how to contact you immediately when they get to your website?
For example, if the browser window is full of pictures, a flash movie, advertisements, or all of the above when people first get to your website, then you probably don’t have much content above the fold.
This doesn’t mean that you have to have a text-based website for people to see your content, but rather place a few text elements near the upper left corner that answer the who, what, where, how for your products or services.
What content do visitors see when they get to your website?
The answer actually depends on several factors:
- Screen resolution – device dependent
- Browser window dimensions – user sizable
- Device capabilities – graphics or flash may be disabled
To find out how your website looks in various browser window sizes, you can try Google Labs Browser Size tool.
From the tool, you can see that 80-90% of people can see the full width of the website and 90% can see far enough down the screen to read the excerpt from the first post. The logo and description in the header are also visible to most visitors. The email subscription form in the sidebar is visible 80% of the time as well.
In addition, only one advertisement is visible to 99% of users. The other ads in the right sidebar are visible at most 40% of the time or more with scrolling.
Finally, you can use the numbers shown by the tool to adjust your website layout to accommodate different screen resolutions and browser sizes. The width numbers and height numbers in pixels are shown in increments of 50.
Try this tool on your own website. Can most visitors see the who, what, why, and where about your company, its products, and its services?
What are the screen resolutions of popular computers and devices?
The screen resolution of a computer monitor or device is measured in pixels (width x height). The following list identifies the resolution of some of today’s popular devices:
- Computer Monitor LCD Resolution – most popular today are 1024 x 768, 1366 x 768, 1280 x 800.
- iPad2 – 1024 x 768
- Kindle Fire – 1024 x 600
- Android device – can vary, but generally 4 standard screen sizes of 426 x 320, 470 x 320, 640 x 480, 960 x 720
Keep in mind that on a PC or Mac, the user can resize the browser window and make it smaller than the full-screen resolution. On a device, the user may use portrait or landscape viewing which changes how much they see.
Your website also needs to allow for some top, bottom, left, and right margin space for the browser toolbars, scroll bars, and window borders.
How to improve web page layout on your website
Move important items to the upper left corner. At first glance, visitors should know:
- The name of your company (logo)
- What you do or what you sell
- Where you’re located
- How to contact you
The above items, except for your logo, should be in text not graphics so that search engines can read them. You can also have a link to your product or services pages near the upper left corner.
From the example, you can see that 99% of people see where the business is located and what they do, but only 90% of people see the phone number of this business. However, most devices and screen resolutions will show the phone number without scrolling.
Try this tool with your own website and if you find something interesting, please share it or ask a question in the comment field below.