Expanded version of my "Making your site mobile-friendly" speed talk, delivered via Skype for the Russian Internet Technology (RIT) conference, Moscow, 12 April 2010

1. Making your site mobile-friendly
Patrick H. Lauke / Opera Software
Patrick H. Lauke / RIT++ 2010 / Moscow / 12 April 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

8. 1. do nothing

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
● on desktop viewport = visible area of browser
● mobile browsers have “virtual viewport”
● viewport meta gives hints
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWeb
Content/UsingtheViewport/UsingtheViewport.html

35. viewport meta
<meta name="viewport"
content="width=device-width">
<meta name="viewport"
content="width=320, initial-
scale=2.3,user-scalable=no">

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;

42. data URLs
http://software.hixie.ch/utilities/cgi/data/data

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. 1. do nothing
2. separate mobile site
3. single adaptive site

45. www.opera.com/developer
patrick.lauke@opera.com
people.opera.com/patrickl/presentations/RIT_12.04.2010/RIT_12.04.2010.pdf