Building Mobile WebsitesAdd Spark to your mobile presence

Sachin Khosla

Founder, Digimantra.com

What’s the catch?

Mobile Website

Quick Glimpse Why do I need it anyways ? Technology ?

What’s the USP ?

Being intelligent

User / Device sensing Location Sensing

Making it faster

Some Tips on iphone website development

Mobile Websites

WOW 1 WOW 2

WAP

WML

GPRS

RingTones

WallPapers

Animation

Sorry If that hurt your eyes

;)

Why do I need it ?

• Google lists Mobile websites separately

• Reach & Availability

• Micro world (iPad, SmartPhones,Tablets)

• Mobile web is catching up in countries like US

• More Social == More Users

• mCommerce , Advertising and a lot more ..

• It’s evolving

• if nothing else, then get because everyone is getting it :)

Technologies

• HTML / HTML5

• CSS / CSS3

• JS / AJAX

• And of course any server side language

HTML / HTML5

• Minimum script required == Less KB == Fast

• Video tag – being used by Youtube

• Local storage being used by FB, Twitter

• Offline application cache

• Not just mobile http://www.youtube.com/html5

CSS / CSS3

•Yes Smartphones support CSS

•In fact, CSS3 is much more powerful

•Nice UI

•Smooth Transitions

•No JavaScript – for most features like slide etc.

•Built-in , so faster

JS / Ajax

•Jquery Mobile

• Awesome UI

• Events

• Accessibility

• Basic JavaScript

DEMO - http://jquerymobile.com/demos

USP

• Know your visitors

• Relate to them – Socialize

• Relevance == Context

• Surprise them – Nice of course :)

• Don’t miss a lead

• Affiliate

Being Intelligent

• Yes you are – but is your APP ?

• Sense the device & Serve relevant content

• Keep Track of what you are doing.

• Look Smart – Sparky !

Making it faster

• Utilize Cache

• Remove the irrelevant content

• Use of proper HTML/HTML5 tags

• Use CSS3 instead of images, wherever possible

• Use CSS Sprite or Data URI scheme – reduces http request

• Fallback mechanism for the lowest compatible devices

• Bits & Bytes matter, Minify JS, css, even html

• Test on various Emulators available over the internet

Tips on Smartphone website development

Data URI Scheme

<imgsrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKcA

AABBCAIAAAA7aSMkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllP

AAARzFJREFUeNrtvXm8” width="167" height="65">

Detect Location

navigator.geolocation.getCurrentPosition(getLocation, unknownLocation);function getLocation(pos){var latitde = pos.coords.latitude;var longitude = pos.coords.longitude;alert('Your current coordinates (latitide,longitude) are : ' + latitde + ', ' + longitude);

}function unknownLocation(){alert('Could not find location');

}

Photo slideshow with Swap

$('.swipe').swipe({

swipeLeft: function() { $('#someDiv').fadeIn() },

swipeRight: function() { $('#someDiv').fadeOut() },

})

Serving the Appropriate CSS file

<link rel="stylesheet" href="site.css" media="screen" /><link rel="stylesheet" href="mobile.css" media="handheld" />

Scale your website

<meta name="viewport" content="width=devic

e-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Make your web APP fullscreen

window.scrollTo(0, 1);

HomeScreen icon

<link href="path/to/your/icon.png" rel="apple-touch-icon" />

Thank you !

www.digimantra.com

Twitter - @realin

FB – http://fb.me/sachinkhosla