building mobile websites
DESCRIPTION
Explains the advantage of building Mobile website and why one business should have a Mobile website along with a main websiteTRANSCRIPT
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