<?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>Open Source Web Thoughts &#187; user experience</title>
	<atom:link href="http://blog.dewaldbotha.co.za/tag/user-experience/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.dewaldbotha.co.za</link>
	<description></description>
	<lastBuildDate>Fri, 25 Nov 2011 09:17:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>centering mobile web</title>
		<link>http://blog.dewaldbotha.co.za/2009/01/26/centering-mobile-web/</link>
		<comments>http://blog.dewaldbotha.co.za/2009/01/26/centering-mobile-web/#comments</comments>
		<pubDate>Mon, 26 Jan 2009 14:17:58 +0000</pubDate>
		<dc:creator>dewaldbotha</dc:creator>
				<category><![CDATA[mobile]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[mobile standards]]></category>
		<category><![CDATA[prototyping]]></category>
		<category><![CDATA[wurfl]]></category>
		<category><![CDATA[xhtml-mp]]></category>

		<guid isPermaLink="false">http://blog.dewaldbotha.co.za/2009-01-26/centering-mobile-web/</guid>
		<description><![CDATA[with all the focus being on the mobile web these days, one must have a basic understanding of how the pieces fit together before even writing a line of code. there is a great online community which supports mobile development called mobiforge which could be utilised to answer all of your mobile related questions. but <a href="http://blog.dewaldbotha.co.za/2009/01/26/centering-mobile-web/" class="more-link">More &#62;</a>]]></description>
			<content:encoded><![CDATA[<p>with all the focus being on the mobile web these days, one must have a basic understanding of how the pieces fit together before even writing a line of code.</p>
<p>there is a great online community which supports mobile development called <a href="http://mobiforge.com/" title="Mobiforge" target="_blank">mobiforge</a> which could be utilised to answer all of your mobile related questions.</p>
<p>but as a start i will point out some important steps/considerations to take/make:</p>
<p><span id="more-12"></span></p>
<h4>user-centered design</h4>
<p>before you start on any work, you have to realise that by doing a mobile site, the most important part of your equation is the user and his phone.  it is easy to develop/design a site which looks absolutely amazing in a pc browser, but fails to even load within a phone browser.</p>
<p>you have to make sacrifices in design/layout to suite the user of the site and understand the limitations your user might face with his specific mobile device.  people accessing a site with a lower end phone usually wants quick textual feedback about a certain subject, rather than big glossy images that fill your screen.  once you understand what the user need &#8211; and design according to those needs, then you will be ready to continue.</p>
<h4>keep your site simple</h4>
<p>it is easy in a web browser to go back in your history and traverse navigation, but on a mobile it is a bit different.  so why confuse the mobile user with 50 levels of navigation, where a simple three leveled hierarchy navigational solution would be more than sufficient</p>
<p>and remember that there is no need to overcomplicate things by adding features that is nice to have, rather than have to have.  it is a bad practice on mobile or pc.</p>
<h4>prototype it</h4>
<p>a while back i read a blog post written by <a href="http://fronttoback.org/" title="User experience" target="_blank">phil barret</a>, an user-experience guru , who used <a href="http://fronttoback.org/2008/08/11/to-scale-paper-prototyping-for-the-home/" title="Phil's prototyping method" target="_blank">prototyping to do the layout of his new home using newspapers</a>.  this is probably the best analogy you can use to describe the importance of prototyping your designs to control the flow of your site.</p>
<h4>design for the right device</h4>
<p>group mobile devices into specific groups, for e.g. low, middle and high.  where your low end would be your <a href="http://www.gsmarena.com/nokia_2610-1525.php" title="Nokia 2610" target="_blank">nokia 2610</a>, middle would be <a href="http://www.gsmarena.com/sony_ericsson_w890-2172.php" title="Sony erricsson" target="_blank">sony ericsson w890</a> and the rest, high end devices, such as the <a href="http://www.gsmarena.com/apple_iphone_3g-2424.php" title="iPhone" target="_blank">iphone</a>, <a href="http://www.gsmarena.com/palm_treo_650-907.php" title="Palm" target="_blank">palm</a> and other feature rich pda devices.</p>
<p>it would make sense to deliver more text-based content to lower end phones and more graphic rich sites to high end phones.  and make sure your features apply to the phone&#8217;s capabilities.  you shouldn&#8217;t give someone the option of uploading images if his phone doesn&#8217;t support it.  this could be achieved by using something like <a href="http://www.tera-wurfl.com/" title="tera-wurfl" target="_blank">tera-wurfl</a>.</p>
<h4>standardise</h4>
<p>make sure you comply with the industry standards.  for e.g. using <a href="http://en.wikipedia.org/wiki/XHTML_Mobile_Profile" title="XHTML Mobile Profile" target="_blank">XHTML-MP</a> as your markup language and something like <a href="http://www.developershome.com/wap/wcss/" title="WCSS" target="_blank">WCSS</a> as your presentation markup.  specify your doctype, character encoding and use well formed html code.  you can visit the <a href="http://www.openmobilealliance.org/" title="Open Mobile Alliance" target="_blank">oma</a> for more information.</p>
<p>this gives you more flexibility and would cut down on rendering issues in your mobile browser.</p>
<p>this is only very basic advice, and by no means do i advocate this as being the most correct approach, but it should give you some direction and hopefully a bit of a mind shift when it comes to mobile development.</p>
<h4>some usefull links:</h4>
<ul>
<li>wap 2 specifications &#8211; <a href="http://www.openmobilealliance.org/tech/affiliates/wap/wap-277-xhtmlmp-20011029-a.pdf" title="wap 2 specs" target="_blank">http://www.wapforum.org/what/technical.htm</a></li>
<li>XHTML-MP &#8211; <a href="http://www.openmobilealliance.org/tech/affiliates/wap/wap-277-xhtmlmp-20011029-a.pdf" title="XHTML-MP specs" target="_blank">http://www.openmobilealliance.org/tech/affiliates/wap/wap-277-xhtmlmp-20011029-a.pdf</a></li>
<li>comparison between XHTML-MP and XHTML basic &#8211; <a href="http://pc.dev.mobi/?q=node/119" title="Compare XHTML-MP and basic" target="_blank">http://pc.dev.mobi/?q=node/119</a></li>
<li>mobile web best practices &#8211; <a href="http://www.w3.org/TR/mobile-bp/" title="Best practices in mobile web" target="_blank">http://www.w3.org/TR/mobile-bp/</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://blog.dewaldbotha.co.za/2009/01/26/centering-mobile-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

