Don't miss these Blodger posts!

Friday, 30 November 2012

Key to optimum landing area

The focus of this post is on the landing area (see previous post) and what will be visible to the largest majority of people on first hitting your site. 

  • Use dynamic templates and web design using relative pixel width and heights - If you can't it's not an issue but fix your resolution at 1024*768 or less.
  • More importantly design your landing area to be 960 pixels wide by 700 high maximum.
  • Place all key information and leads in this area and in order of importance from left to right.
  • Be wary of Googles Ad limits, Ad stuffing policy above the fold, and place accordingly. Max 3 Ads in Googles recommended places but ensure that content is king
  • Assume 16:9 aspect ratio. 
  • Test this in the tools that are displayed on the next post
  • Use Blogger and its mobile facility to avoid worrying about smart phone growth creep and need to design device reactive sites.

Previous Post:

Tuesday, 13 November 2012

Best screen layout and size for Blogs

You have attracted people to your site so you don't want to turn them off do you ?

How you design your site layout, its flow, and the size and type of screen view are complex issues and will be one of the main factors in attracting people to visit your your site, and more to the point staying on it (and if advertising, how much revenue you make). The most important aspect by far of course to the visitor is relevant content. It is the information they have come to see and read, not how you display it. But if it is unreadable  and you have no idea on where to go next on your site, if key information is hidden in obscure places, then the reader will go elsewhere.

What we are trying to achieve in this post is to determine what is the optimal size and layout that you should be designing your site to, to ensure that the most important features of your site are seen when the viewer first hits your site. 

When the viewer first hits your site they hit what is often referred to as the landing page. This doesn't necessarily have to be the main site page and is often a separate page used primarily to entice people and is search engine optimised.

As a landing page could actually include everything on a large web page that isn't immediately visible, then in the context of this post we need to be more specific and target what I will refer to has landing area
This is what you see when you first hit a site. It does not include any sections of your landing page that you need for example to scroll down or scroll right. Of course your monitor, resolution, or page design may mean that everything is visible straight away but usually there are at least some areas where typically you will have to scroll down.

The landing area is the part of your site which will entice the viewer and make them fully engage. Content or ads below or to the right of this landing area will not be immediately visible to the viewer and if the most important selling feature of your site such as "Get free cash" isn't there, then people may just jump onto the next site.  An "Add to cart" placed to the far right may similarly be missed completely because of screen design issues. 

Another common term for this is "above the fold" and Google for example states "What is actually “above the fold” on a web page is a significant factor  to conversion rates. If visitors have to scroll to see an “add to cart” button, or some other critical element, they may never get around to it. "

Above the fold comes from newspapers who similarly focused on the upper half of the front page of a newspaper as the headline grabber to attract buyers and readers. But given the dynamic nature of the web , the ability to scroll up or down. left or right , then this term maybe past its sell by date.

Key fact: 80% of users remain "above the fold" and rarely go below it

As above this is large area so this subject will be broken into a series of articles and sections as below.
Optimal screen resolution and size

You view web sites normally via a web browser on a screen of varying size set at differing resolutions.

PC/MAC users will generally view web sites via Internet Explorer, Chrome , Firefox or Safari on multiple sized computer monitors of which the average is now between 19" and 21" (this is the physical size of the screen on a diagonal from top to bottom corner). Laptop/Note book users will do the same but with smaller monitor size . Tablet and Mobile users use many other browsers types but on much smaller screens from 2" to 10".

Obviously with larger display devices then there will be an opportunity to make more apps and browsers windows viewable at the same time in the main screen window. With smart phone and tablets you acknowledge this price you have to pay in terms of screen content because you can carry your device almost anywhere.

From an overall design and screen size perspective the type of browser is largely irrelevant.  What is more important is the amount of space used on the screen by the browser clutter and what is left that is available to your website.  This eats away at your valuable landing area space and there is little you can do about this except acknowledge that all readers will have this clutter, and that you need to take it into account.

If you take into account the browser header, the menu, tab, address/navigation and the bookmarks or favourites bar, then you may be taking away upto 10% of your visible screen resolution height. If the viewer has bookmarks or history sidebar open on the left this will similarly encroach into the visible space on average about 10-15% of screen. Most people do not optimise height.

Smart phones and tablets fortunately tend to rely on the hardware of for some key navigation features rather than use up the critical screen space which they have so little of but still the clutter takes up space.There is a distinction that smart phones and tablets will also use "Apps" rather than web sites, and these Apps will be optimised for the device. It is also possible to design web sites which will determine the device, and organise layout to match. Blogger authors will obviously have noted the Mobile feature which rearranges the blog to be viewed in a device optimised manner. In Blogger it primarily displays just the header and posts. 

The last key feature to consider and perhaps the most important is the effect screen resolution can have an affect and what are the best ones to use

The display resolution of a  display device is the number of distinct pixels in each dimension that is displayed. 

For example 800 * 600 resolution means 800 pixels wide and 600 pixels high. 

Pixels are what the visual image on screen is made up of and what your blog will be displayed to. If you design your web site to be 800 * 600 and display it on a screen with resolution of 800 * 600 then it fill fill this screen. If you use the same design on a larger resolution of 1200 * 800 then there will be blank elements surrounding your site. 

If you use the Blogger Next blog feature on the top Blogger bar, then you may find it interesting to see how many sites do have space down both left and right sides. Then reason for this is that the majority of people have large screen resolutions but many of the default Blogger templates are smaller.

If you designed your site to be 1078 * 960 and the viewer was looking at the site via a screen with a resolution of 800*600 then they would not see the full opening content in this screen and would have to use the side and up down scroll bars to see the rest of  the main landing content.

The average resolution has increased in size over the years from 800 * 600 prior to 2003, and until very recently 1024 * 768, but it is now 1366 * 768 for majority mainstream monitors. It is safe to say that over 95 % of PC/MAC monitor users have resolutions set at 1024 * 768 and above.

But in saying this the use in the number of mobile devices is increasing rapidly. Current estimates in late 2012 suggest that the mobile market is providing 20% of web use access. It is expected to continue to growSome people have never used PC monitors.

To make it more confusing your monitor can generally be set at different resolutions to suit your preferences (and eyesight). Although most tablets are hard set the resolutions can be high (HP Touchpad defaults to 1024 * 768,  iPAD 3 can be 2048 * 1536). 

And also for both browsers and smaller devices there are other controls which increase resolution in windows. Smart phones allow you to increase resolution by "expanding your fingers" on the screen. Browsers can use commands to such as control + to makes changes to resolution internal to browser.

And then even more there are aspect ratios (the proportional relationship between its width and its height) such as 16 wide to 9 high to consider, and then that with tablets and smart phones the orientation of the screen can automatically change from portrait to landscape by moving the device in a certain way.  Its is interesting to also note the change over the years  from  square screens 4:3 aspect ratio to widescreen displays, which generally have the 16:9 aspect ratio. 

And finally if you are clever enough and/or use the right technology and templates you can have sites which dynamically expand and contract depending on change in size of browser window. Note that Blogger has several dynamic templates which you can use. Basic HTML allows use of relative size rather than fixed widths and heights .

So all very confusing but do not despair! The next two posts recommend the best resolution to use and then also some tools which help you optimise your site.


Blodger Copyright © 2010 LKart Theme is Designed by Lasantha

Downloaded from Free Templates

Modified to LK Magazine v2 Pimp No6 and Copyright © 2013 by Blodger