Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…
Cannot retrieve contributors at this time
365 lines (254 sloc) 9.71 KB

% Slide Show Headers

title: Create Mobile Web Apps with the iUI JavaScript Library
gradient: top_bottom blue navy

% Slides Start Here

Create Mobile Web Apps with the iUI JavaScript Library

Gerald Bauer @ MobileCampVancouver2, Vancouver, British Columbia, September 2008



What’s the Mobile Web?

The mobile web is just like the regular web but you access it on the go using mobile devices
such as mobile phones, mobile music/media players, mobile internet tablets etcetera.

Related Terms:

“One Web” – Before the Apple iPhone popularized the mobile web
the industry used different “standards”
for web access on mobile devices such as Wireless Markup Language (WML)
or Wireless Access Protocoll (WAP) or XHTML Basic.

One Web = Use “classic” HTML, CSS, JavaScript, etcetera on the mobile web.
No need for different “standards”.

Why does the mobile web matter?

  • Billions of mobile phones.
  • More and more “smart” phones have built-in industry-strength browsers.

How does the mobile web differ from the “classic” web?

Usually smaller screen

e.g. Apple’s iPhone screen size is 320×480 pixel or 480×320 pixel.

Note, iPhone’s browser lets you zoom in and zoom out. By default for non-mobile
web screen size optimized sites iPhone will zoom out
to make the screen appear to have a size of 980 pixels (instead of the actual 320).

Limited keyboard for text entry and limited clicking (no mouse)

Use accesskey for links allowing you to “click” links using your phone key numbers (
such as 1,2,3,4,5,etc.)

Limited connectivity/offline

Special links for phone numbers


What’s iUI?

iUI is an open-source framework (really just one iui.js – JavaScript file,
one iui.css – style sheet and many graphics)
created by Joe Hewitt (of Firebug fame) and now working at Facebook (and responsible for – surprise, surprise – the mobile web version of Facebook).

iUI Design

  • Single-Page Web Application (Clicking on link fires off an Ajax/JavaScript request → Page gets updated w/ animation effect!)
  • Ajax/JavaScript Machinery Hidden – Just use plain HTML list tags (ul, li), links (a) and it works; no JavaScript coding required.
  • Back button still works.

iUI – Getting Started in Three Minutes

Step 1: Download and Unzip iUI Package @

Step 2: Try the Music Example or the Theaters Search Example (Open Up Page in a WebKit Browser)

That’s it. No Developer $$$ Fee. No F!?#!ing Non-Disclosure Agreement (NDA).

iUI – Lists



(Source: Roomienator)

iUI – Groups and Lists



Add class='group' to mark list item for grouping. That’s it.

iUI – Panels


About RoomieNATOR

Sample Mobile Web App using the iUI JavaScript Library w/ Ruby on Rails


Add class='panel' to mark div block as a panel. That’s it.

iUI – Link Types

  • Intra-Page iUI Link (#artists)
  • iUI Link (/stats)
  • Plain Old Link (Reload New Page) (target='_self')



Intra-Page iUI Links

Browse Lists and Pages without Network Access



iUI – Forms


Welcome to RoomieNATOR




Mark div block with class='row' for form rows and submit button with class='whiteButton'.

All Together Now

  • Single-Page Web Application (Clicking on link fires off an Ajax/JavaScript request → Page gets updated w/ animation effect)



@import &#8220;/iui/iui.css&#8221;; <%%= yield %>


  • Include iUI Style Sheet
  • Include iUI JavaScript Library
  • Setup Toolbar with Back Button and Search Button

That’s it.

iUI – Lists and Ruby


    <%% for hood in @neighbourhoods do >
  • <%= link_to, hood >
    <%= hood.area %>

  • <%% end %>






and others

The Browser Players – WebKit, WebKit, WebKit

Good news. Microsoft’s Internet Explorer Web Browser is an also ran.

The defacto industry standard are browsers using the open source WebKit browser kernel/engine.

Mobile browsers built on WebKit include:

  • Apple’s iPhone/iPod Safari
  • Nokia Symbian 60 (S60) Series Web Browser
  • Google’s Android

Other mobile browser include:

  • Opera Mini/Mobile
  • Microsoft Internet Explorer Mobile
  • Mozilla Firefox Mobile (Fennec) (Open Source)

Browser Innovation in WebKit

  • Better & More Web Markup Functionality (HTML5)
    • more form functionality (datepickers, required, repeat, etc.)
    • standard audio, video tags
    • new tags such as header, footer, nav, aside, figure, dialog, m (mark), time, meter, progress
    • much more
  • Better & More Scripting Functionality (JavaScript)
    • 2D & 3D graphics using JavaScript (Canvas) built into browser (no Flash plugin required!)
    • standard HTTP request service (also known as Ajax)
    • offline storage
    • much more
  • Better & More Cascading Style Stylesheet Functionality
    • rounded borders, animation, etc.
    • much more

About Web Kit


Konqueror – Linux KDE Desktop Browser – Tagline: A Lean, Mean Web Browser

Building Blocks: KHTML, KJS

Instead of building the browser for the Apple OS X
from scratch Apple decides to build on/reuse the open source KHTML/KJS core.

Desktop Browsers Using WebKit

  • Apple Safari
  • Google Chrome/Chromium
  • Adobe Integrated Runtime (AIR)
  • Linux KDE Browser

More Mobile Web Links

That’s It. Thank You.

{{ google_analytics :code => ‘UA-397343-10’ }}

Jump to Line
Something went wrong with that request. Please try again.