Your SlideShare is downloading. ×
0
Making your site mobile-friendly
 TIPS AND TECHNIQUES FOR A BETTER MOBILE PRESENCE




Patrick H. Lauke / Developing for M...
mobile web is
increasingly important
we need a site that
 works on iPhone
...works on iPhone...
    oh, and iPad
“remove iPhone from ass”
  Peter-Paul Koch, The iPhone obsession
        www.quirksmode.org/blog/archives/2010/02/the_ipho...
make your site work on
all (most) mobile devices
1. do nothing
not WAP or text anymore...
mobile browsers
will work ok-ish
“But the mobile context...”
2. separate mobile site
  (m.flickr.com, mobile.mysite.com, ...)
beware browser sniffing
     photo: http://www.flickr.com/photos/timdorr/2096272747/
offer users choice:
desktop or mobile?
refactored for small screen,
not dumbed down for mobile
3. single adaptive site
nothing new...
fluid layout, progressive enhancement, graceful degradation
CSS 2 Media Types
   (screen, print, handheld)
CSS 2.1 Media Types

<link rel="stylesheet" ...
media="print" href="...">

@import url("...") print;

@media print {
  // ...
CSS 3 Media Queries
  “...the new hotness” Jeffrey Zeldman
    http://www.zeldman.com/2010/04/08/best-aea-yet/
CSS 3 Media Queries

● build and extend CSS 2.1 Media Types
● more granular control of capabilities

● width, height, orie...
CSS 3 Media Queries
<link rel="stylesheet" ...
media="screen and (max-width:480px)" href="...">

@import url("...") screen...
viewport meta
viewport meta

● desktop: viewport = visible area of browser
●
  mobile: “virtual viewport”, physical pixels, zoom
●
  vie...
viewport meta

<meta name="viewport"
content="width=device-width">

<meta name="viewport"
content="width=320, initial-
sca...
minimise data
and server requests
(minify JavaScript, combine CSS, …)
minimise data

● data transfer over network can be slow
● compress images (PNGCrush)

● optimise your HTML (death to div-i...
minimise server requests

● each request has overhead
● limit to concurrent requests

● caching not reliable (e.g. iPhone ...
CSS sprites
 Dave Shea, A List Apart
 www.alistapart.com/articles/sprites
width: 50px; height: 50px;
background: url(icons.gif) no-repeat -51px 0;
data URLs
http://software.hixie.ch/utilities/cgi/data/data
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%00...
native app vs web app
HTML5
<!DOCTYPE html>
video, audio and canvas on any device
           without plugins
         (Java / Flash / Silverlight not ubiquitous)
HTML5 (and friends) has
lots more APIs for developers
       (for powerful client-side apps)
isgeolocationpartofhtml5.com
geolocation
navigator.geolocation.getCurrentPosition(success, error);
navigator.geolocation.watchCurrentPosition(success, ...
offline detection...
window.addEventListener('online', function(){ … }, true);
window.addEventListener('offline', function...
application cache
<html manifest=”blah.manifest”>

CACHE MANIFEST
images/sprites.png
scripts/common.js
scripts/jquery.js
s...
…and more (coming)
WebGL, <device>, Contacts API …
1. do nothing
2. separate mobile site
3. single adaptive site
www.opera.com/developer
                        patrick.lauke@opera.com
people.opera.com/patrickl/presentations/devcsi-mob...
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Upcoming SlideShare
Loading in...5
×

Making your site mobile-friendly - DevCSI Reading 21.07.2010

3,867

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
3,867
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×