Making your site mobile-friendly - DevCSI Reading 21.07.2010

  • 3,817 views
Uploaded 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" …

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/

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • mobile, web design
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,817
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
37
Comments
1
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 7. 1. do nothing
  • 8. not WAP or text anymore...
  • 9. mobile browsers will work ok-ish
  • 10. “But the mobile context...”
  • 11. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  • 12. beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  • 13. offer users choice: desktop or mobile?
  • 14. refactored for small screen, not dumbed down for mobile
  • 15. 3. single adaptive site
  • 16. nothing new... fluid layout, progressive enhancement, graceful degradation
  • 17. CSS 2 Media Types (screen, print, handheld)
  • 18. CSS 2.1 Media Types <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
  • 19. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  • 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. 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. viewport meta
  • 23. viewport meta ● desktop: viewport = visible area of browser ● mobile: “virtual viewport”, physical pixels, zoom ● viewport meta gives hints
  • 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. minimise data and server requests (minify JavaScript, combine CSS, …)
  • 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. minimise server requests ● each request has overhead ● limit to concurrent requests ● caching not reliable (e.g. iPhone > 25Kb)
  • 28. CSS sprites Dave Shea, A List Apart www.alistapart.com/articles/sprites
  • 29. width: 50px; height: 50px; background: url(icons.gif) no-repeat -51px 0;
  • 30. data URLs http://software.hixie.ch/utilities/cgi/data/data
  • 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. native app vs web app
  • 33. HTML5 <!DOCTYPE html>
  • 34. video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  • 35. HTML5 (and friends) has lots more APIs for developers (for powerful client-side apps)
  • 36. isgeolocationpartofhtml5.com
  • 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. offline detection... window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true);
  • 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. …and more (coming) WebGL, <device>, Contacts API …
  • 41. 1. do nothing 2. separate mobile site 3. single adaptive site
  • 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