Yashh

Designing for iphone

Tagged: design , development , html , interface , iphone and web

Well after choking an iphone interface for my blog last week, I felt that I should share a few points which should be considered while designing for iphone. Most of the points may not be new to you but still I would like to remind you one more time.

iPhone Web Development
Uses Web Standards
HTML 4.01
XHTML 1.0
CSS 2.1 and partial CSS 3.xx
JavaScript 1.4, including DOM support
AJAX technologies, including
XMLHTTPRequest
PDF
Quicktime

Things to Avoid
Flash
SVG
Java applets
Plug-in installation
Embedded Video
Custom x.509 certificates

Almost all of the best web practices work well with iPhone.
Use separate CSS & javascript.
Use well-structured and valid HTML
Use columns and blocks & avoid framesets
Size graphic elements appropriately (don't reply on browser scaling)
Don't send un-necessary javascript.

Another important thing to remember is "finger is not mouse". Finger is blunt & bigger. So the links & buttons should be larger & accessible. Leave about 20px between links / buttons so that the user's need not zoom in to access them. There are no mouse hovers so avoid them.

.

Safari on iPhone doesn't have windows , only a fixed viewport. Present your text in relatively narrow columns of small, easily digestible blocks, this allows users to avoid panning back and forth to read long lines of text. For a webpage that is intended to behave as an iPhone application, however, you should avoid requiring users to zoom in at all.

• Do it simple & ease to use
  
• minimize number of controls from which user's have to choose
  
• label them clearly so that user's understand what to do
  
• Avoid clutter
  
• Minimize input (use lists & pop-up menus instead of text field)
  
• Use cookies to store input information to avoid asking again
  

A few words on iPhone viewport The iPhone viewport determines how your content is laid out on iPhone When Safari on iPhone loads a webpage, it sets the viewport’s initial scale property so that the full width of the webpage fits the width of the iPhone screen It also sets the viewport’s width property to 980 pixels, which is the width of most webpages. You might need to change the default values of these properties if the width of your webpage is much different from 980 pixels, especially if it is narrower. Use alert() confirm to let user know a specific action has occurred.

If you’re developing an iPhone application, you should use the default-width and default-height constants to set the viewport width and height properties to the size of the iPhone screen.

This ensures that Safari on iPhone renders the application with a scale of 1.0 and doesn’t change the layout of the user interface when users switch from portrait to landscape orientation.

Use Meta Tag defaults to width="480"
simple (twice portrait) width="640"
native portrait width="320"; initial-scale=”1.0”;
maximum-scale=”1.0”; minimumscale=”1.0”; user-scalable=”false”
Useful width="480"; maximum-scale=”0.6667”;

Well you can use the following snippet to disable the zoom set the initial scale to 1.0. Also you can set the apple touch icon which appears on iPhone / iPod touch home screen.

<meta name="viewport" content="maximum-scale=1.0,
     width=device-width,initial-scale=1.0">
    <link rel="apple-touch-icon"  
     href="/link/to/your/png/icon">

Working events
window.onload
formfield.onfocus
formfield.onclick
formfield.onblur
formfield.onchange
formfield.onmouseout
formfield.onmouseover
formfield.onmousedown *
formfield.onmouseup

Non-functional events
window.oncontextmenu
window.onresize * (partial, buggy)
window.onscroll
window.onerror
formfield.ondblclick
formfield.onselect
formfield.onkeydown

no... window.showModalDialog()
hover styles
tool tips
mousedown, instead happens right before mouseup

Limit sizes HTML, CSS, Javascript <10MB, don’t send unneeded Javascript, Javascript execution <5 sec, GIF, PNG, and TIFF up to 8 MB, i.e width * height * 4 < 8 MB, Animated GIF <2MB or only first frame shown JPG up to 128MB will be subsampled internally Non-streamed media <10MB

iPhone web development - iUI Framework for building iphone Apps Create Navigational Menus from JSON objects Build the nav headers and as much of the UI with the canvas tag (JS is slow on MobileSafari). Events for phone rotation Provide a more "iPhone-like" experience to Web apps (on or off the iPhone) 1.8 KB with gzip and Dojo ShrinkSafe http://code.google.com/p/iui/

Include small js and css file

<meta name="viewport" content="width=320; 
 initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> 
<style type="text/css" media="screen">
@import "iui/iui.css";
</style> 
<script type="application/x-javascript" src="iui/iui.js"></script>

The <ul> and <li> tags are used to create hierarchical side-scrolling navigation. Ordinary <a> links load with a sliding animation while keeping you on the original page instead of loading an entirely new one. A simple set of CSS classes can be used to designate things like modal dialogs, preference panels, and on/off switches.

 <ul id="home" title="Menu">
    <li><a href="/blog/">Blog</a></li>
    <li><a href="/tumblelog/">Tumblelog</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

Fonts available on iPhone: American Typewriter
Arial
Arial Rounded MT Bold
Courier
Courier New
Georgia
Helvetica
Helvetica Neue
Marker Felt
Times New Roman
Trebuchet MS
Verdana
Zapfino

One more important thing is to hide the URLbar once the page is loaded. It is as simple as writing a small javascript.

<script type="text/javascript">
// hide url bar after pageload.
    window.onload = function () {
    this.scrollTo(0, 1);
    };
</script>

With these tips in mind you can build a iPhone accessible site.

Currently Reading

My Todo's