2. What is mobile web
Specifically designed for Handheld devices
Requires less processing power and less bandwidth
Targeted for variety of device screens and applies usability of mobile phone
users

9. Responsive web (Cont..)
Separate Style sheets for separate screens
<link rel="stylesheet" type="text/css" href="style.css"
media="screen, handheld" />
<link rel="stylesheet" type="text/css"
href="enhanced.css" media="screen and (min-width:
620px)" />

10. Responsive web (Cont..)
Adaptive Images
Less JavaScript
Never use pixel values when defining the layout use auto or percentages
Always try to use div instead of tables

11. Some Good Responsive Sites
http://www.touchtech.co.nz/
http://morehazards.com/
http://earthhour.fr/

12. Dedicated Web
Separate website for mobile
Focus more on mobile features
Can build from scratch or using a framework
JQuery Mobile, Sencha Touch, Zepto JS, etc..

14. Initial Mandatory Steps
Meta Tags
<meta name="viewport" content="width=device-width, initial-
scale=1.0, maximum-scale=1 user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">

15. Include JQM files
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-
1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-
1.1.0.min.js"></script>

16. Whats Next?
Usage of HTML5 Custom tags
data-role=“ ”
rel =“external”
data-ajax=“false”
data-transition=“”
data-rel=“”

20. HTML5 Features which is useful
Input types
Email (iOS)
URL (iOS)
Tel (iOS/Andorid)
Date (iOS)
(tested on Android 2.3 and iOS 5.0)

23. Detect Using Screen Resolution
if ((screen.width < 480) || (screen.height <
480))
{
location.replace('/mobile/');
}

24. Final Tweeks
Reduce Number of HTTP requests
* Remove iFrames: ex: facebook, twitter
CSS/JS compression
Use much less JS
Use of CSS image sprites and Data URIs
Move all the custom JS files to the bottom of the page if possible

26. Final Tweaks (cont..)
Use relative units like ems and percentages to keep styles as fluid and flexible
as possible
Use HTML characters (ex: &#9733 to solid star ★ and &#9734 to empty stars
☆ ), CSS gradients, etc.
Use URI Schemes (ex: <a href="tel:+18005550199">94-713-505-298-</a> )

28. Further Readings
http://www.html5rocks.com/en/mobile/
http://www.w3.org/Mobile/
https://developers.google.com/speed/articles/mobil
e
http://css-tricks.com

29. Any Questions?
:D Just Kiddin!