Mobile Web Framework

The campus is involved with a systemwide mobile development group that is working on a language agnostic web framework to mobilize content.

If you would like to use this in one of your web projects, here's how to get started.

Background

The UCLA Moble Web Framework is a cross-platform web framework that focuses on mobile web standards, semantic markup, device agnosticism and graceful degradation, providing a robust presentation layer that allows applications to define a single set of markup optimized for HTML 5 capable devices that degrades gracefully to any HTML 4.01 or XHTML MP compliant device including Blackberry, Windows Mobile and even T9 phones.

UCLA has a site that provides a lot of background information on this work.

Quick Start

Basically, if you've got some pages, you can pull the MWF libraries inserting them in the head of the document (1 js, 1 css). These libraries will mobile-fy your site and you can take advantage of the features which include javascript and CSS tools, HTML/CSS Entities, Javascript API, helper functions, etc.

UCSF Library has a great quick start guide for web developers that you can experminet with on some basic HTML pages. UC Berkeley has a mobile resources page as well.

Next Steps

If you would like to try this out, ITS CRM hosts a copy of the MWF libraries at http://crm-mwf.ucsc.edu

Future development of the MWF will be focused on the expansion of a tool kit currently called Web Blocks. Web Blocks will allow developers to select frameworks, libraries, etc., into a package that focuses on responsive web design. The Web Blocks project will be language agnostic so that developers using python, Ruby on Rails or PHP can take advantage of the underlying framework and tools. One such framework is Twitter's Bootstrap which uses a 12 column, responsive grid with all the goodies.

A UCSC example, I've been working on with Bootstrap and Drupal 7 is a new, mobile version of the campus map. Here I'm using a Bootstrap theme from Stanford University called Open Framework.

See Also

If you'd like to read more about some of the work I've done using mobile tools, here are some articles links.

http://petermcmillan.com/node/101

http://petermcmillan.com/node/103