Intro

Evaluate the landscape of mobile web development, especially frameworks that can tailor the look n' feel of an application/website to a particular device.

Requirements

Proposed Features

• Keeping as much as possible in the Presentation Layer (CSS3 for animations/transitions/transformations/etc in Webkit)
• Easy environment detection (webkit detection - mobile vs desktop needs?)
• mobile icons/backgrounds/headers for fluid's existing themes
• Solid documentation

Development Questions

• do we want to look exactly like IPhone's interface or a little different (+ different contrast themes)
• which Fluid components will we be using in the interface that need to be styled for this
• including UIEnhancer
• examples of a map interface on mobile UI/map apps
• future plans to develop for desktop (browsers like Firefox, IE, Chrome, Opera) and other mobile devices

WebKit

Is working with Webkit a given? Anything in HTML5 we'd want to use?

Working within the Safari/WebKit CSS Reference - what level of CSS stability are we comfortable using (ex. Stable vs Experimental) - related to 'future plans'

• iPhone GUI Guidlelines
• http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP30001267
• http://webkit.org/specs/

Existing Mobile Frameworks

General Frameworks

jQTouch

(http://www.jqtouch.com/) (MIT License)

DEMO: http://www.jqtouch.com/preview/#home
PROS:
CONS:

iPhone Frameworks

UiUIKit

(http://code.google.com/p/iphone-universal/) (GNU General Public License v3)

DEMO: http://heidi.atrc.utoronto.ca/iphone_frameworks/UiUIKit/
PROS:
CONS: no transitioning

NOTES:

• no js
• one stylesheet
• lots of useful images/image examples (headers, icons, backgrounds, banners, chat bubbles, arrows, buttons) including a few editable PSD files
• many demo examples

Magic Framework

(http://www.jeffmcfadden.com/projects/Magic%20Framework)(Creative Commons Attribution 3.0 United States License)

DEMO: http://www.jeffmcfadden.com/magicframeworkdemo
PROS:
CONS:

NOTES:

• js: one for webkit detection, one for jquery, one for json, one for HTML5 db, and one for initializing UI (and animation?)
• "An HTML5 DB wrapper for saving data"
• just basic UI images
• one stylesheet
• detection influences UI - buttons
• auto destructs unused views from DOM
• readme: http://heidi.atrc.utoronto.ca/iphone_frameworks/magic/README

iUI

(http://code.google.com/p/iui/)(New BSD License)

DEMO: http://heidi.atrc.utoronto.ca/iphone_frameworks/iui/
PROS:
CONS:

NOTES:

• js for animation (two versions i think: one minified)
• one stylesheet (i think? but one for each js version?)
• basic UI images
• minimal demos, but interesting (play music, set preferences, digg, search for a theater)

Webapp.Net

(http://webapp.net.free.fr/) (New BSD License)

DEMO: http://webapp.net.free.fr/Demo/Index.html
PROS:
CONS:

NOTES:

• js for animation, obfuscated
• many images (different sized/coloured icons, backgrounds, tabs)
• several stylesheets: main, firefox, RTL, theme
• transitions are not smooth

Other

iPhone GUI PSD

(http://www.teehanlax.com/blog/?p=447)

A photoshop file that serves as a source for putting all things iPhone GUI into your own CSS.

PROS: just graphics - super simple
CONS: no license (yet), JUST graphics no CSS

Framework Features

The following is a list of features a CSS framework for a mobile interface may provide. The elements of iPhone applications are included (using the terminology found in their documentation), but in general this is a list of brainstorms, finding inspiration from existing Fluid components, and always aiming to follow UI best practices.

iPhone UI Design Documention

• http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/PartII/PartII.html#//apple_ref/doc/uid/TP40006556-CH9-SW1

CSS

• General Layout
  - background

• Status Bar (top)

• Navigation Bar (top)
  - header title
  - subtitle
  - navigation control on left
  - content control on right

• Tool Bar (bottom)

• Tab Bar (bottom)
  - if more than five, displays four with a fifth 'more' tab
  - badges

• Action Sheet (slides up from bottom, initiated by tapping item in Toolbar)
  - list of buttons

• Alert (pop up)

• Modal view (slides up from bottom)
  - keyboard

• List
  - basic (w/ arrows/labels)
  - contacts (alphabetical list)
  - icons (icons to the left of each list item)
  - content items (with a bit of text underneath/image), headlines, digg
  - themed ('metal', 'plastic')
  - rounded
  - items with ratings

• Widgets
  - checkboxes
  - radio buttons
  - on/off switch
  - upload file
  - dropdown
  - spinner (like a slot-machine)

• Forms
  - displaying form data ('information fields'), w/ images and extra content
  - basic entry
  - password fields
  - default text

• Gallery
  - grid of images or sprites

• Chat
  - chat bubbles w/ date/times

• Animations
  - transition between screens

• Search

• Horizontal/Vertical switch
  - when turning iphone

Images

• General UI
  - backgrounds
  - headers
  - buttons

• Icons

Javascript

• Webkit detection

Contextual Information

The following is a list of elements that would be useful to identify (via CSS class names) within an html page, so that when repurposing the markup for mobile, the look and feel, layout, and placement of each element in the new environment makes sense, and extraneous data is left out.

Layout

• header
• footer
• columns

Meaning

• main navigation
• sub-navigation(s)
• main content
• news items
• login/logout
• search
• form
• form-data display
• calendar

• extraneous (unrelated, immaterial, etc...)
  - specify this explicitly or assumed by non-identification?
  - different levels?