city mouse mobile - a case study

City Mouse Mobile

A Case Study

Me

• Serge Krul• FED Team Leader at netcraft• Loves Plants• Hates Zombies

// TODO

– City Mouse Mobile– Why Mobile Web?– Mobile Web Gaps– How Mouse Mobile minds them– How would you mind it today? 

City Mouse Mobile [link]

Why Mobile Web?

It's Web

Still, a website

Splash Screen Look & Feel Native Share Look & Feel

Native Call Action Keypad Location Aware Smart Loading

One to many

App Store Market Place

Stand Alone

Desktop

The business factor

• Use existing knowledge• One code-base• Deliver to several platforms

The cool factor

• Push web technologies to the edge• Evangelize FED• Internet will be everywhere / everything

Mobile Web Gaps

• Look & feel• Fixed scrolling• Vanilla features• Map• Last gap

Mind the Gap

How's Mobile Web different

It's Web...

Look & feel

• Custom themes• CSS3• jqTouch for Pages• Touch events

border-radius

Images

Today

Mobile UI components

Sencha Touch Kitchen Sink [link]

jQuery Mobile [link]

<input type="checkbox" />

Happily ever ::after CSS3 shapes

To name a few...

jqTouch iUI joApp

kendoUI (soon)

TouchyBP (wink)

PastryKit (wtf?)

Mind the Gap

Fixed scrolling

Fixed header and footer

Uses iScroll

$.fn.scrollVertically = function (options) {    return this.each(function () {        new iScroll(this, options);    });};

$.fn.scrollHorizontally = function (options) {    return this.each(function () {        new iScrollHorizontal(this, options);    });};

$.jQTouch.addExtension(function (jQT) {    $(document.body).bind('pageInserted', function () {        horizontal.scrollHorizontally(...);        vertical.scrollVertically(...);    });});

jqt.scrolling.js

Today

Newer scrolling plugins

To name a few...

iScroll 4 Scrollability touch-scroll

[more]

Tomorrow

What the future (aka Apple) brings

{ position: fixed; }

iOS5

Mind the Gap

Vanilla Features

#gallery

?Pages

System

Templates System

Local Content

Geolocation

Mind the Map

It's Waze

var g_waze_config = {    div_id: "map",    locale: "israel",    zoom: 8,    token: "666",    framed_cloud_image_url: "cloud",    alt_base_layer: "israel_colors",    alt_map_servers: "ymap1/wms-c"};

Simulate Event

MouseTouch

It's a maze...

MapManager.simulateEvent = function (event, type, doNotPreventDefault)  {

    var event = event.originalEvent,        touches = event.changedTouches,        first = touches[0];

    var simulatedEvent = document.createEvent("MouseEvent");    simulatedEvent.initMouseEvent(first.screenX, first.screenY, first.clientX, first.clientY    );

    first.target.dispatchEvent(simulatedEvent);    if (doNotPreventDefault != true) {        event.preventDefault();    }};

Today

Israel is on GMap

The last Gap

PhoneGap

Makes these possible

Appstore Native Share

Thank you!

• Me again: Serge Krul• sergek@netcraft.co.il• FED Team leader, netcrfat• Mobile Web course• HTML5 course• Netcraft Academy - Ben Gurion 30, Ramat Gan.

And if you've asked yourself about the font...

I'm Comic Sans, Asshole :)