responsive vs dedicated: insight into mobile web
TRANSCRIPT
Mobile Web
By Chathuranga Sanjeewa BandaraSoftware Engineer / VFX Artist
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
Available Technology Paradigms
Responsive web
Dedicated web solutions
Mobile Web Debate is this Serious!
Responsive web
Media Queries
Yes! Simple as that.
Focuses on mobile device resolution and orientation
Not Good for higher resolution and lower screen sizes
Initial Step
Ask yourself what is the much preferred audience (Mobile / Desktop)
Are you ready for extra work on IE? (All Hail The *Best* Browser in the world!!! )
Responsive web (example)
@media screen and (max-width: 524px) {#container, footer, #sidebar, #content {
width: 292px;}
#content article h2 {font-size: 24px;
}
#content .postinfo li {margin: 0 10px 0 0;
}
#sidebar #social {display:none;}
#sidebar #search #searchbar {width: 230px;
}}
Prefer Mobile Audience ?
#sidebar #social {display:none;
}
#sidebar #search #searchbar {width: 10%;
}
@media screen and (min-width: 800px) {#sidebar #social {
display:block;}
#sidebar #search #searchbar {width: 400px;
}}
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)" />
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
Some Good Responsive Sites
http://www.touchtech.co.nz/
http://morehazards.com/
http://earthhour.fr/
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..
JQuery Mobile
Based on JQuery Core libraryDevice support for iOS, Android, BlackBerry, Windows Phone, Symbian, webOS and BadaSupports Apache Cordova/ PhoneGapUsed for many popular mobile web projects (Disney World, Stanford, IKEA, etc)More than enough material to learn from (ebooks, online tutorials)
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">
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>
Whats Next?
Usage of HTML5 Custom tags
data-role=“ ”rel =“external”
data-ajax=“false”data-transition=“”
data-rel=“”
Single page Example
<!DOCTYPE html> <html><head>......</head> <body> <div data-role="page“>
<div data-role="header"><h1>Single page</h1>
</div><!-- /header -->
<div data-role="content"><a href=“#” data-role=“button” data-ajax=“false”>
</div>
<div data-role="footer"><h4>Footer content</h4>
</div
</div></body></html>
Multipage Example
<body> <div data-role="page" id="one">
<div data-role="content" ><p><a href="#two" data-role="button">Show page
"two"</a></p><p><a href="#popup"data-role="button" data-
rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
</div><!-- /content --></div><!-- /page one -->
<!-- Start of second page: #two --><div data-role="page" id="two" data-theme="a">
<div data-role="content" data-theme="a"><p><a href="#one" data-direction="reverse" data-
role="button" data-theme="b">Back to page "one"</a></p></div>
</div><!-- /page two -->
<!-- Start of third page: #popup --><div data-role="page" id="popup">
<div data-role="content" data-theme="d">
<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>
</div><!-- /content --></div></body>
JQuery Mobile Examplehttp://jquerymobile.com/demos/1.1.1/docs/pages/multipage-template.html
http://jquerymobile.com/demos/1.1.1/docs/pages/page-dialogs.html
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)
Mobile Browser Identification
Usage of Device Description Repository API (WURFL, UAProf, OpenDDR)
Detect using screen resolution
Manually detect using user agent string (ex: Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3)
Detection using User Agent String
If (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/SymbianOS/i) || navigator.userAgent.match(/IEMobile/i) ){
window.location = “your mobile URL” }else {}
Detect Using Screen Resolution
if ((screen.width < 480) || (screen.height < 480))
{ location.replace('/mobile/'); }
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
Remove inline <style> tags
Minimize usage of tables
Always try to have most of the layout engine types in css (webkit, moz, ms)
Minimize using cookies
Final Tweaks (cont..)
Use relative units like ems and percentages to keep styles as fluid and flexible as possible
Use HTML characters (ex: ★ to solid star and ☆ to empty stars ★ ), CSS gradients, etc.☆
Use URI Schemes (ex: <a href="tel:+18005550199">94-713-505-298-</a> )
Testing Tools
Keynote Mobile Internet Testing Environment
Opera Mobile Web Emulator
Eclipse (for PhoneGap development)
GoMo By Google
AQUA Mobile Accelerator by Akamai
Further Readings
http://www.html5rocks.com/en/mobile/
http://www.w3.org/Mobile/
https://developers.google.com/speed/articles/mobilehttp://css-tricks.com
Any Questions?
:D Just Kiddin!
