Introduction to Mobile Web Development

A quick introduction to the key concepts for mobile Web development, including jQuery Mobile.

Transcript

1. Introduction to Mobile Development Every new phone has a Web browser Soon mobile usage will eclipse desktop usage Still trying to figure out the right solutions
2. How Mobile Web Differs • Mobile browser support is inconsistent • Mobile devices are smaller and slower • Different input tools (stylus, fingers) • Different browsers • 320 x 480 pixels is a common resolution for mobile • Not all mobile devices are “smart” Inconsistent particularly with CSS and JavaScript Networks are particularly slower Different input tools affects UI Opera mini and Opera mobile are the world’s most popular mobile browsers.
3. Development Options • Mobile-responsive Web Design • Mobile-first Responsive Web Design • Mobile-specific Version of a Web site Mobile-first = very similar to progressive enhancement, also called content-first design Plus, mobile app, which is an entirely different thing.
4. Responsive Web Design • techniques developed by Ethan Marcotte in 2010 • adapt layouts to the environment • largely uses CSS RWD, still cutting edge simple and quick way to make a Web site work on many devices
5. Responsive Web Design • Deliver same HTML and CSS to all devices • CSS media queries determine what to apply to current environment • Only custom CSS for the elements that need to be treated differently • Identify breakpoints • Maybe use JavaScript Draw diagram breakpoints are the resolutions at which the layout should be changed
6. Responsive Web Design • CSS3 media queries • Fluid-grid layouts • Images and media scale to fit using CSS • Change image sources in CSS Fluid grid layouts: percentages, not pixels
7. CSS Media Queries @media screen { /* rules */ } @media screen and (min-width: 480px) { /* rules */ } @media screen and (monochrome) {} @media screen and (color) {} @media all and (orientation: landscape) {} <link rel="stylesheet" type="text/css" href="style.css" media="screen and (color)"> queries and logical expressions that evaluate the current values of media features in the user's browser logical "or" is represented by a comma You can also use @import Media queries can also be used to upscale: e.g., tv’s and newer displays
8. CSS Media Features • aspect-ratio • height • width • orientation These are some of the properties you can watch for.
9. RWD Goals • Reduce to a single column • Use a vertical layout • Reduce image sizes You can generally leave typography and colors alone. Mostly focus on layout and sizes of elements: the structure of the page.
10. CSS Media Queries & IE <!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" type="text/css" href="layout.css" media="all" /> <![endif]--> Not supported in IE8 and earlier You can use the conditional comments, only supported by IE, to add in IE specific CSS.
11. Fluid Layouts • Default body font size of 100% • Adjust percentages for widths • Set images and objects to a max width of 100% • img, object { max-width: 100%; } • Don’t use IMG width and height attributes Fonts can also be in ems Heights are tough to size and you can use hard numbers where necessary images and objects are limited to 100% of their container 1em = 100% ≈ 12pt ≈ 16px
12. Calculating Percentages Element Size Original Context Size percentage Total width should be 100% If you use a 960 full width and a column is supposed to be 240 pixels, that’s 25% If an element is within another container, based the percentage on that container
13. Using viewport <meta name="viewport" content="width=device-width, initial- scale=1, maximum-scale=1"> affects zooming always want one bug in iOS
14. RWD Pros and Cons • Just one site • Not about the device • Development time • Device may download too much data/ unnecessary data • Hard to adjust for all possible devices and configurations A lot of testing Loading time can be poor Cross-browser compatibility can be poor
15. Mobile-First • Start with basic functionality • Add dynamic features when supported • Also uses CSS3 media queries You can use tools like sencha.io src to dynamically serve different image sizes
16. PE Pros and Cons • Just one site • Theoretically supports all devices • Focuses on accessibility first • Development time • Some users may get a more basic result than they should
17. Mobile Web Site • Build a separate site • All users go to main domain • Detect and redirect Detection is done via user-agent sniffing. Most major Web sites do do this. www.detectmobilebrowsers.com XHTML-Basic replaces XHMTL-MP
18. Mobile Web Development • Use XHTML-Basic • Use CSS-Mobile Profile These are alternatives to the common standards.
19. Mobile Site Pros and Cons • Better performance for mobile uses • better results for mobile users • Won’t impact desktop users • A lot more development time • Requires server configuration • False identifications
20. Development Tools • W3C Markup Validator • Desktop Browsers (and YSlow!) • Mobile Perf Bookmarklet • Proxy server (e.g. Blaze Mobitest) • Mobile Emulators • Some devices Also Charles Proxy for desktop No real plug-ins for mobile browsers Read articles online for what devices to have. Borrow devices. Try your site at a phone carrier store! Online services for testing on devices.
21. PERFORMANCE • Load time • Page size • Waterfall charts (e.g. HTTP Archive file) • Put non-essential JavaScript at the bottom Reduce image sizes, can reduce image quality for some mobile devices HTTP Archive = HAR Note that just hiding or not displaying content doesn’t help performance.
22. Be Future Friendly • Semantic markup • Progressive enhancement
23. Introduction to jQuery Mobile Is iOS-centric. Used for creating a separate, mobile version of a Web site You can use CSS Media Queries with this, for example, to create a tablet version that’s different than a phone version.
24. How jQuery Mobile Works • Built on top of jQuery • Mostly about UI • Supports custom (i.e., mobile) events • Will use Ajax to download and update content dynamically • ThemeRoller • Progressively enhanced UI example: lists that look like iOS lists, even with thumbnails Automatically truncate long names that go on UI elements Events include tap, swipe, and orientation changes jQuery Mobile won’t be a problem for users that don’t support JavaScript. Can even use it with PhoneGap to build native-like apps Great accessibility
25. Incorporating jQuery Mobile <meta name="viewport" content="width=device-width, initial- scale=1"> <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css"> <script src="jquery-1.7.2.min.js"></script> <script src="jquery.mobile-1.1.0.min.js"></script>
26. Invoking jQuery <meta name="viewport" content="width=device-width, initial- scale=1"> <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css"> <script src="jquery-1.7.2.min.js"></script> <script>$(document).ready(function() { // Your jQuery commands go here before the mobile reference });</script> <script src="jquery.mobile-1.1.0.min.js"></script> If you’re doing mobile-specific JavaScript, you’d place that after the inclusion of the jQuery mobile script.
27. Invoking jQuery Mobile <meta name="viewport" content="width=device-width, initial- scale=1"> <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css"> <script src="jquery-1.7.2.min.js"></script> <script src="jquery.mobile-1.1.0.min.js"></script> <script>$(document).ready(function() { // Your jQuery commands go here before the mobile reference });</script> If you’re doing mobile-specific JavaScript, you’d place that after the inclusion of the jQuery mobile script.
28. A Standard Page <body> ! <div data-role="page" id="home"> ! <div data-role="header"><h1>Header</h1></div> ! <div data-role="content"> ! <p>Content goes here</p> ! </div> ! <div data-role="footer"><h4>Footer</h4></div> ! </div><!-- /page --> </body> data-* attribute added in HTML5 Used by jQuery Mobile to help format elements. The header, content, and footer are optional. You can put multiple page elements in one HTML file and jQuery mobile will treat them as separate pages but they’ll be downloaded immediately.
29. Data-Roles • page • header • footer • navbar • listview • button
30. Ajax Navigation • User never leaves the initial page! • jQuery Mobile loads linked pages via Ajax for a better UX • jQuery Mobile updates the URL hash to create unique URLs Much better, more app like experience. You can even prevent Ajax-loading by adding rel=”external” to a link.
31. Other Data-* • data-theme • data-nobackbtn • data-icon • data-position • data-transition • data-rel themes are the letters a through e, which represent swatches or color patterns no back button used within the header to prevent automatic creation of the back button if you add the data-position=”fixed” to the header or footer, it will always stay there use data-transition to change transition data-rel can make a page appear like a dialog
32. Using Themes
33. Transitions • Slide • Slideup • Slidedown • Pop • Fade • Flip These are built-into jQuery Mobile. Can be applied to any object or page change event. Reverse effect is applied to Back button usage.
34. App-Like Layouts • persistent navbar • Native-like buttons • Persistent header
35. Creating Navbars <div data-role="footer"> ! <div data-role="navbar" data-position="fixed"> ! ! <ul> ! ! ! <li><a href="m_standings.html">Standings</a></li> ! ! ! <li><a href="m_login.html">Login</a></li> ! ! </ul> ! </div> </div><!-- /footer --> Treats content like buttons
36. Layout Tools • Layout grids • Accordions Layout grids are for creating columns. Accordions are for collapsable content.
37. Creating Lists <ul data-role="listview" data-inset="true"> ! <li><a href="this.html">This</a></li> ! <li><a href="that.html">That</a></li> ! <li><a href="about.html">About</a></li> </ul> Mobile friendly list Each element in the list behaves like a button link to that page. Supports icons! You can have nested lists. data-inset creates curved corners and margins data-role=”list-divider” to break into sections data-filter=”true” property is awesome!
38. Creating Dialogs <a href="thing.html" data-rel="dialog">Pop up!</a> The key is the data-rel=”dialog” attribute. Must be a reference to a complete HTML jQuery Mobile page. Rounded corners, margins, dark background. May want to specify the transition for it.
39. Cancel and Save <fieldset> <div><button type="submit" data-theme="c">Cancel</button></ div> <div><button type="submit" data-theme="b">Submit</button></ div> </fieldset>
40. Creating Forms <form action=”/path/to/handler.php”> <div data-role="fieldcontain"> <label for="name">Your Name:</label> <input type="text" name="name" id="name" value=""> </div> </form> Use full path for the action attribute Form elements are touch optimized versions of standard inputs. Wrap each label-input pair in a div with a data-role of “fieldcontain” Labels and fields will be arranged based upon the available width