Responsive Vs Dedicated: Insight into Mobile Web

493 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
493
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Vs Dedicated: Insight into Mobile Web

  1. 1. What is mobile webSpecifically designed for Handheld devicesRequires less processing power and less bandwidthTargeted for variety of device screens and applies usability of mobile phoneusers
  2. 2. 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)" />
  3. 3. Responsive web (Cont..)Adaptive ImagesLess JavaScriptNever use pixel values when defining the layout use auto or percentagesAlways try to use div instead of tables
  4. 4. Some Good Responsive Siteshttp://www.touchtech.co.nz/http://morehazards.com/http://earthhour.fr/
  5. 5. Dedicated WebSeparate website for mobileFocus more on mobile featuresCan build from scratch or using a frameworkJQuery Mobile, Sencha Touch, Zepto JS, etc..
  6. 6. Initial Mandatory StepsMeta 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">
  7. 7. 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>
  8. 8. Whats Next?Usage of HTML5 Custom tags data-role=“ ” rel =“external” data-ajax=“false” data-transition=“” data-rel=“”
  9. 9. HTML5 Features which is usefulInput typesEmail (iOS)URL (iOS)Tel (iOS/Andorid)Date (iOS)(tested on Android 2.3 and iOS 5.0)
  10. 10. Detect Using Screen Resolution if ((screen.width < 480) || (screen.height <480)) { location.replace(/mobile/); }
  11. 11. Final TweeksReduce Number of HTTP requests * Remove iFrames: ex: facebook, twitterCSS/JS compressionUse much less JSUse of CSS image sprites and Data URIsMove all the custom JS files to the bottom of the page if possible
  12. 12. Final Tweaks (cont..)Use relative units like ems and percentages to keep styles as fluid and flexibleas possibleUse 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> )
  13. 13. Further Readingshttp://www.html5rocks.com/en/mobile/http://www.w3.org/Mobile/https://developers.google.com/speed/articles/mobilehttp://css-tricks.com
  14. 14. Any Questions?:D Just Kiddin!

×