Making your site mobile-friendly - DevCSI Reading 21.07.2010

4,029 views
3,944 views

Published on

Extended version of my "Making your site mobile-friendly" talk, including a short look at native applications vs web apps, for the UKOLN DevCSI event "Developing for Mobile Applications in Education" in Reading http://www.ukoln.ac.uk/events/devcsi/mobile_applications/

Published in: Education
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
4,029
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
38
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Making your site mobile-friendly - DevCSI Reading 21.07.2010

  1. 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. 2. mobile web is increasingly important
  3. 3. we need a site that works on iPhone
  4. 4. ...works on iPhone... oh, and iPad
  5. 5. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  6. 6. make your site work on all (most) mobile devices
  7. 7. 1. do nothing
  8. 8. not WAP or text anymore...
  9. 9. mobile browsers will work ok-ish
  10. 10. “But the mobile context...”
  11. 11. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  12. 12. beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  13. 13. offer users choice: desktop or mobile?
  14. 14. refactored for small screen, not dumbed down for mobile
  15. 15. 3. single adaptive site
  16. 16. nothing new... fluid layout, progressive enhancement, graceful degradation
  17. 17. CSS 2 Media Types (screen, print, handheld)
  18. 18. CSS 2.1 Media Types <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
  19. 19. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  20. 20. 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/
  21. 21. 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 }
  22. 22. viewport meta
  23. 23. viewport meta ● desktop: viewport = visible area of browser ● mobile: “virtual viewport”, physical pixels, zoom ● viewport meta gives hints
  24. 24. 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
  25. 25. minimise data and server requests (minify JavaScript, combine CSS, …)
  26. 26. minimise data ● data transfer over network can be slow ● compress images (PNGCrush) ● optimise your HTML (death to div-itis) ● minify JavaScript ● combine CSS
  27. 27. minimise server requests ● each request has overhead ● limit to concurrent requests ● caching not reliable (e.g. iPhone > 25Kb)
  28. 28. CSS sprites Dave Shea, A List Apart www.alistapart.com/articles/sprites
  29. 29. width: 50px; height: 50px; background: url(icons.gif) no-repeat -51px 0;
  30. 30. data URLs http://software.hixie.ch/utilities/cgi/data/data
  31. 31. 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; }
  32. 32. native app vs web app
  33. 33. HTML5 <!DOCTYPE html>
  34. 34. video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  35. 35. HTML5 (and friends) has lots more APIs for developers (for powerful client-side apps)
  36. 36. isgeolocationpartofhtml5.com
  37. 37. 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; ... }
  38. 38. offline detection... window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true);
  39. 39. 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
  40. 40. …and more (coming) WebGL, <device>, Contacts API …
  41. 41. 1. do nothing 2. separate mobile site 3. single adaptive site
  42. 42. www.opera.com/developer patrick.lauke@opera.com people.opera.com/patrickl/presentations/devcsi-mobile_21.07.2010/devcsi-mobile_21.07.2010.pdf

×