Making your site mobile-friendly - DevCSI Reading 21.07.2010
6 likes1,817 views
The document provides tips and techniques for creating mobile-friendly websites, emphasizing the importance of accommodating various mobile devices, particularly iPhones and iPads. It discusses three approaches: doing nothing, creating a separate mobile site, or developing a single adaptive site using CSS media queries and viewport meta tags. Additionally, it highlights strategies to minimize data and server requests, optimize web performance, and utilize HTML5 features for enhanced mobile applications.
Making your site mobile-friendly - DevCSI Reading 21.07.2010
- 1. Making your site mobile-friendly TIPS AND TECHNIQUES FOR A BETTER MOBILE PRESENCE Patrick H. Lauke / Developing for Mobile Applications in Education / DevCSI / Reading / 21 July 2010
- 2. mobile web is increasingly important
- 3. we need a site that works on iPhone
- 4. ...works on iPhone... oh, and iPad
- 5. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
- 6. make your site work on all (most) mobile devices
- 9. not WAP or text anymore...
- 10. mobile browsers will work ok-ish
- 11. “But the mobile context...”
- 12. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
- 13. beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
- 14. offer users choice: desktop or mobile?
- 23. refactored for small screen, not dumbed down for mobile
- 24. 3. single adaptive site
- 25. nothing new... fluid layout, progressive enhancement, graceful degradation
- 26. CSS 2 Media Types (screen, print, handheld)
- 27. CSS 2.1 Media Types <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
- 28. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
- 29. CSS 3 Media Queries ● build and extend CSS 2.1 Media Types ● more granular control of capabilities ● width, height, orientation, color, resolution, … http://www.w3.org/TR/css3-mediaqueries/
- 30. CSS 3 Media Queries <link rel="stylesheet" ... media="screen and (max-width:480px)" href="..."> @import url("...") screen and (max-width:480px); @media screen and (max-width:480px) { // insert CSS rules here }
- 33. viewport meta
- 34. viewport meta ● desktop: viewport = visible area of browser ● mobile: “virtual viewport”, physical pixels, zoom ● viewport meta gives hints
- 35. viewport meta <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=320, initial- scale=2.3,user-scalable=no"> http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
- 37. minimise data and server requests (minify JavaScript, combine CSS, …)
- 38. minimise data ● data transfer over network can be slow ● compress images (PNGCrush) ● optimise your HTML (death to div-itis) ● minify JavaScript ● combine CSS
- 39. minimise server requests ● each request has overhead ● limit to concurrent requests ● caching not reliable (e.g. iPhone > 25Kb)
- 40. CSS sprites Dave Shea, A List Apart www.alistapart.com/articles/sprites
- 41. width: 50px; height: 50px; background: url(icons.gif) no-repeat -51px 0;
- 43. data URLs <img width="48" height="48" alt="Redux gravatar" src="data:image/jpeg,%FF%D8%FF%E0%00%10JFIF %00%01%01%01%00H%00H%00%00%FF% … "> h1 { background: url("data:image/jpeg,%FF%D8%FF %E0%00%10JFIF%00%01 … ") no-repeat left top; }
- 44. native app vs web app
- 46. video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
- 50. HTML5 (and friends) has lots more APIs for developers (for powerful client-side apps)
- 52. geolocation navigator.geolocation.getCurrentPosition(success, error); navigator.geolocation.watchCurrentPosition(success, error); function success(position) { /* where's Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ... }
- 53. offline detection... window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true);
- 54. application cache <html manifest=”blah.manifest”> CACHE MANIFEST images/sprites.png scripts/common.js scripts/jquery.js styles/global.css data.xml NETWORK: resources/news.xml FALLBACK: images/ offline/not-available.png
- 55. …and more (coming) WebGL, <device>, Contacts API …
- 56. 1. do nothing 2. separate mobile site 3. single adaptive site
- 57. www.opera.com/developer [email protected] people.opera.com/patrickl/presentations/devcsi-mobile_21.07.2010/devcsi-mobile_21.07.2010.pdf