Last night Google announced the introduction of a latest update to its core search engine algorithm. The article written by no other than Matt Cutts himself titled Page Layout algorithm improvement sheds light on how Google takes UX into context and applies that to the way it ranks pages in its search results. Google states that they have “heard complaints from users that if they click on a result and it’s difficult to find the actual content, they aren’t happy with the experience. Rather than scrolling down the page past a slew of ads, users want to see content right away. So sites that don’t have much content “above-the-fold” can be affected by this change. If you click on a website and the part of the website you see first either doesn’t have a lot of visible content above-the-fold or dedicates a large fraction of the site’s initial screen real estate to ads, that’s not a very good user experience. Such sites may not rank as highly going forward.”

This new update will hopefully get a lot of MFA (Made For Ad Sense) sites out of the way and will encourage web designers to focus on user-centred design. Yes, all designers should focus on usability and user experience but unfortunately not many do. Although Google makes specific comments about ads being above the fold, the truth is that if your main content is not above the fold then you will not rank very well even if there are no ads on your website. Furthermore, if your main content is not above fold and you have a clattered design then it is very likely that you will have a high bounce rate. 

Applying Golden Ratio to Web Design

So what is Golden ratio? According to Wikipedia, In mathematics and the arts, two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one. The golden number is 1.618 and this is the number that all artists, architects and designers apply and should apply to their designs.

Let’s say you have a 960 pixel width layout, therefore you need to divide 960 by 1.618. You’ll get about 594, which is the width of your main content column. To get the width of your side bar, subtract 594 from 960 and you get 366. Put it all together and you have a two column layout with widths of the golden ratio.

You can apply the same ratio to your design vertically. Assuming that your page has a fixed height of 760 pixels, you should divide that by 1.618 which will give you 470 for the top part and 290 pixels for the bottom part of your website. Your main content should reside in the top 470 pixels which will be above the fold and the “supplementary” content at the bottom, see below.

You can do the calculation yourself or use online golden ratio calculators such as this one. By applying the golden ratio to your layout you will make your design aesthetically pleasant and will increase engagement if you ensure the right content is above the fold.

What should you have above the fold?

  • Main content with your target keyword in the first paragraph and headings.
  • Link(s) to other important pages that are relevant to the current landing page.
  • Call to Action(s)

It is important not to cram too many things above the fold as that leads to bad user experience and also degrades the quality of your main content. Your content should not be lengthy, remember that an ideal line length “for text layout is based on the physiology of the human eye… At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line. Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width, because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on the page, the reader is easily lost and must hunt for the beginning of the next line. Quantitative studies show that moderate line lengths significantly increase the legibility of text.” according to Web Style Guide – Basic Design Principles for Creating Website, Patrick J. Lynch and Sarah Horton, 2nd edition, page 97.

How do I see SEO?

I will let the following illustration do the talking.