Responsive Vs Dedicated: Insight into Mobile Web
Download as PPTX, PDF0 likes333 views
The document discusses responsive web design and mobile web development. It defines responsive web as websites that detect screen size and orientation and change layout accordingly. Key aspects of responsive design include using relative units like percentages instead of pixels, responsive images, less JavaScript, and media queries to apply different CSS stylesheets based on screen size. The document also covers dedicated mobile websites that are built specifically for mobile rather than being responsive, and initial steps for mobile web development like adding viewport meta tags and including frameworks like jQuery Mobile.
Responsive Vs Dedicated: Insight into Mobile Web
- 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: ★ to solid star ★ and ☆ to empty stars ☆ ), CSS gradients, etc. Use URI Schemes (ex: <a href="tel:+18005550199">94-713-505-298-</a> )
- 29. Any Questions? :D Just Kiddin!