<?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>Vlad Alexa&#039;s Blog &#187; html</title>
	<atom:link href="http://blog.vladalexa.com/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.vladalexa.com</link>
	<description>software , networks , apple , open source</description>
	<lastBuildDate>Thu, 15 Jul 2010 22:38:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>adapting web interfaces to the iPad</title>
		<link>http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=adapting-web-interfaces-to-the-ipad</link>
		<comments>http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/#comments</comments>
		<pubDate>Thu, 01 Apr 2010 14:12:31 +0000</pubDate>
		<dc:creator>vlad</dc:creator>
				<category><![CDATA[ipad]]></category>
		<category><![CDATA[cursor]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[touch]]></category>

		<guid isPermaLink="false">http://blog.vladalexa.com/?p=313</guid>
		<description><![CDATA[I decided to write this on the heels on the impending iPad launch, but is is just as valid for the iPhone as well, maybe just a bit less obvious. The core difference from a user interface designer&#8217;s point of view between interaction with content on a desktop and a iPhone/iPad can be summed in [...]]]></description>
			<content:encoded><![CDATA[<p>I decided to write this on the heels on the impending iPad launch, but is is just as valid for the iPhone as well, maybe just a bit less obvious.</p>
<p>The core difference from a user interface designer&#8217;s point of view between interaction with content on a desktop and a iPhone/iPad can be summed in a few words : cursor input versus touch input, much of what i will go on to detail stems from this, some of it might seem obvious but it is the obvious that is often forgotten.</p>
<p>1 &#8211; <strong>Hover</strong></p>
<p>There is no hovering, your user interface can not depend on hovering to display tooltips, to visually highlight/select menu items, to show and hide dhtml dropdown menu&#8217;s, to underline links.</p>
<p>- hover tooltips are just gone, there is nothing you can do to replicate them.<br />
- hover selecting/highlighting menu items is also something gone entirely.<br />
- hiding and showing dropdown menu&#8217;s when hovering out/into has to be changed with a hide/show toggle on click events.<br />
- differentiating textual links from normal text by wether they change when hovering over is gone, you have to make sure you do not rely on this differentiate textual links from static text.</p>
<p>	<video controls autoplay loop><br />
	<source src="http://blog.vladalexa.com/wp-content/uploads/2010/04/hover.mp4" type="video/mp4"><br />
	</source><source src="http://blog.vladalexa.com/wp-content/uploads/2010/04/hover.ogg" type="video/ogg">	</p>
<p>Your browser does not support video, upgrade to a HTML5 compatible browser.</p>
<p>	</source></video>	</p>
<p>2 &#8211; <strong>Cursor</strong></p>
<p>Well there isn&#8217;t any, cursor that is, traditionally the cursor changes shape depending on the type of the interface element under it, this gives important feedback to the user.</p>
<p>- the cursor does not change to the hand over clickable interface elements so you have to make sure the element reflects the fact that it is a clickable element<img class="aligncenter size-full wp-image-320" title="one" src="http://blog.vladalexa.com/wp-content/uploads/2010/04/one.png" alt="" width="396" height="42" /></p>
<p>that it reflects what exactly is it&#8217;s clickable area, and that it&#8217;s clickable zone does not have blind spots<img class="aligncenter size-full wp-image-318" title="two" src="http://blog.vladalexa.com/wp-content/uploads/2010/04/two.png" alt="" width="394" height="79" /></p>
<p>- the cursor does not change to the vertical bar that is the visual hint of a element that accepts text input below the cursor, so you have to make sure text input fields are distinctive.<img class="aligncenter size-full wp-image-319" title="three" src="http://blog.vladalexa.com/wp-content/uploads/2010/04/three.png" alt="" width="419" height="43" /></p>
<p>There are a lot of other things to keep in mind besides these two major aspects, scrolling for example is different, page scrolling is performed by touching anywhere in the page, scrolling of distinct elements within the page has to be handled differently, there is also no pixel precision like on desktops and the element directly under the finger is obscured from view.</p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center">
<ul class="socials">
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/&amp;title=adapting+web+interfaces+to+the+iPad" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/&amp;t=adapting+web+interfaces+to+the+iPad" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-gmail">
			<a href="https://mail.google.com/mail/?ui=2&amp;view=cm&amp;fs=1&amp;tf=1&amp;su=adapting+web+interfaces+to+the+iPad&amp;body=Link: http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/ (sent via shareaholic)%0D%0A%0D%0A----%0D%0A I%20decided%20to%20write%20this%20on%20the%20heels%20on%20the%20impending%20iPad%20launch%2C%20but%20is%20is%20just%20as%20valid%20for%20the%20iPhone%20as%20well%2C%20maybe%20just%20a%20bit%20less%20obvious.%0D%0A%0D%0AThe%20core%20difference%20from%20a%20user%20interface%20designer%27s%20point%20of%20view%20between%20interaction%20with%20content%20on%20a%20desktop%20and%20a%20iPhone%2FiPad%20can%20be%20summed%20in%20a%20f" rel="nofollow" class="external" title="Email this via Gmail">Email this via Gmail</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-googlereader">
			<a href="http://www.google.com/reader/link?url=http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/&amp;title=adapting+web+interfaces+to+the+iPad&amp;srcUrl=http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/&amp;srcTitle=adapting+web+interfaces+to+the+iPad&amp;snippet=I%20decided%20to%20write%20this%20on%20the%20heels%20on%20the%20impending%20iPad%20launch%2C%20but%20is%20is%20just%20as%20valid%20for%20the%20iPhone%20as%20well%2C%20maybe%20just%20a%20bit%20less%20obvious.%0D%0A%0D%0AThe%20core%20difference%20from%20a%20user%20interface%20designer%27s%20point%20of%20view%20between%20interaction%20with%20content%20on%20a%20desktop%20and%20a%20iPhone%2FiPad%20can%20be%20summed%20in%20a%20f" rel="nofollow" class="external" title="Add this to Google Reader">Add this to Google Reader</a>
		</li>
		<li class="shr-hackernews">
			<a href="http://news.ycombinator.com/submitlink?u=http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/&amp;t=adapting+web+interfaces+to+the+iPad" rel="nofollow" class="external" title="Submit this to Hacker News">Submit this to Hacker News</a>
		</li>
		<li class="shr-linkedin">
			<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/&amp;title=adapting+web+interfaces+to+the+iPad&amp;summary=I%20decided%20to%20write%20this%20on%20the%20heels%20on%20the%20impending%20iPad%20launch%2C%20but%20is%20is%20just%20as%20valid%20for%20the%20iPhone%20as%20well%2C%20maybe%20just%20a%20bit%20less%20obvious.%0D%0A%0D%0AThe%20core%20difference%20from%20a%20user%20interface%20designer%27s%20point%20of%20view%20between%20interaction%20with%20content%20on%20a%20desktop%20and%20a%20iPhone%2FiPad%20can%20be%20summed%20in%20a%20f&amp;source=Vlad Alexa&#039;s Blog" rel="nofollow" class="external" title="Share this on LinkedIn">Share this on LinkedIn</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/&amp;title=adapting+web+interfaces+to+the+iPad" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=adapting+web+interfaces+to+the+iPad+-+http://tinyurl.com/397nkac&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-slashdot">
			<a href="http://slashdot.org/bookmark.pl?url=http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/&amp;title=adapting+web+interfaces+to+the+iPad" rel="nofollow" class="external" title="Submit this to SlashDot">Submit this to SlashDot</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

<div class="attachments"><dl class="attachments attachments-large"><dt class="icon"><a title="hover" href="?aid=322&pid=313&sa=0"><img src="http://blog.vladalexa.com/wp-content/plugins/eg-attachments/images/ogg.png" width="48" height="48" alt="" /></a></dt><dd class="caption"><strong>Title: </strong><a title="hover" href="?aid=322&pid=313&sa=0">hover</a><br /><strong>File: </strong>hover.ogg<br /><strong>Size: </strong>39 kB</dd></dl><dl class="attachments attachments-large"><dt class="icon"><a title="hover" href="?aid=323&pid=313&sa=0"><img src="http://blog.vladalexa.com/wp-content/plugins/eg-attachments/images/mp4.png" width="48" height="48" alt="" /></a></dt><dd class="caption"><strong>Title: </strong><a title="hover" href="?aid=323&pid=313&sa=0">hover</a><br /><strong>File: </strong>hover.mp4<br /><strong>Size: </strong>40 kB</dd></dl></div>]]></content:encoded>
			<wfw:commentRss>http://blog.vladalexa.com/2010/04/01/adapting-web-interfaces-to-the-ipad/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
