<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>The Web Usability Blog&#187; liquid layout</title>
	<atom:link href="http://webusability-blog.com/tags/liquid-layout/feed/" rel="self" type="application/rss+xml" />
	<link>http://webusability-blog.com</link>
	<description>Tips, insights and meandering thoughts about usability and information architecture</description>
	<lastBuildDate>Sun, 20 Feb 2011 16:47:59 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Screen resolution statistics and tips</title>
		<link>http://webusability-blog.com/screen-resolution-statistics-and-tips/</link>
		<comments>http://webusability-blog.com/screen-resolution-statistics-and-tips/#comments</comments>
		<pubDate>Wed, 23 Sep 2009 14:09:15 +0000</pubDate>
		<dc:creator>Els Aerts</dc:creator>
				<category><![CDATA[Accessibility]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[compatibility]]></category>
		<category><![CDATA[liquid layout]]></category>
		<category><![CDATA[screen resolution]]></category>

		<guid isPermaLink="false">http://webusability-blog.com/?p=430</guid>
		<description><![CDATA[Which screen resolutions do people in Belgium use to surf the web? And what does that mean for your website's layout? ]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s amazing how many web professionals don&#8217;t know the basic settings people use to surf the web.</p>
<p>After last week&#8217;s <a href="http://usability-blog.be/gebruik-van-browsers-statistieken/">browser statistics</a>, time now to have a look at screen resolutions in Belgium.</p>
<h1>Screen resolutions: figures from September 2009</h1>
<p><img class="alignnone size-full wp-image-431" title="Screen resolution figures for Belgium in September 2009" src="http://webusability-blog.com/wp-content/uploads/figures-resolution.jpg" alt="Screen resolution figures for Belgium in September 2009" width="504" height="397" /></p>
<p>The figures come from a very big Belgian website. They date from August 15th 2009 till September 15th 2009. The figures are pretty representative for Belgium.</p>
<p>Of course there will always be differences between individual sites but overall, the general tendencies will be the same.<span id="more-430"></span></p>
<h1>Most important conclusion</h1>
<p>What a mess.</p>
<h1>Screen resolution = width x height</h1>
<p>Screen resolution consists of width and height. Let&#8217;s have a look at these two separately.  </p>
<p>For the figures below, I added up the top 100 most popular resolutions. (To give you an idea: number 101 came down to a number of 75 users out of a total of 1.3 million users.)</p>
<h4>Width</h4>
<p><img class="alignnone size-full wp-image-433" title="Width" src="http://webusability-blog.com/wp-content/uploads/Width.gif" alt="Width" width="251" height="175" /></p>
<p>Even more concise:</p>
<ul>
<li>&lt; 1024: 2,03%</li>
<li>1024 &lt;= 1440: 79,26%</li>
<li>&gt; 1680: 5,08%</li>
</ul>
<h4>Height</h4>
<p><img class="alignnone size-full wp-image-434" title="Height" src="http://webusability-blog.com/wp-content/uploads/Height.gif" alt="Height" width="251" height="155" /></p>
<p>What stands out here is that only 4,08% of people surf in a resolution that&#8217;s lower than 768 pixels.</p>
<h1>What do we have to with these figures?</h1>
<p>Obviously you don&#8217;t have to do anything. But you can do lots of things to improve the way your site looks to people surfing in different resolutions:</p>
<h4>Width</h4>
<ul>
<li>If you go for a fixed width, make sure there are no horizontal scrollbars in a resolution of 1024 pixels wide. That way, you only neglect the 2,03% of surfers who use a lower resolution.</li>
<li>If you call yourself a designer, and if you know that a fluid or liquid lay-out is always best, you also know that you should always weigh up the pros and cons of a liquid layout for every website you make. Try to go for a liquid lay-out that is optimized for a width between 1024 and 1280 pixels. Or, if you really want to show off how clever you are, create a liquid layout that looks good between 1024 and 1440 pixels.</li>
<li>Interesting articles on Smashing Magazine on how to apply a liquid layout :<br />
- <a href="http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/">Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?</a><br />
- <a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">Flexible Layouts: Challenge For The Future</a></li>
</ul>
<h4>Height</h4>
<ul>
<li>Put the most important content and action buttons above the pagefold in 768. Take into account the height most users loose by the browser bar and at least 1 toolbar.  </li>
<li>Put less important content lower on the page. The following 132 pixels are still seen without scrolling by 68,23% of surfers. In the area between 900 and 1080 pixels only 30,51% of visitors sees what you&#8217;ve got to offer without having to scroll. Anything below that is only seen without scrolling by 3,85% of surfers.</li>
</ul>
<h4>What about mobile?</h4>
<ul>
<li>Unless your target audience explicitly warrants it or when you&#8217;re absolutely sure it&#8217;ll increase your profit dramatically, we&#8217;d avise you not to optimize your layout for smaller resolutions. Considering the dramatically low number of users in Belgium it&#8217;s pretty much money down the drain.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://webusability-blog.com/screen-resolution-statistics-and-tips/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
	</channel>
</rss>

