The document discusses making websites mobile-friendly by either doing nothing and relying on mobile browsers, creating a separate mobile site, or using a single adaptive site with fluid layouts, progressive enhancement, and CSS media queries to dynamically adjust the design for different screen sizes. It provides tips for optimizing sites for mobile such as minimizing data and server requests through image compression, JavaScript minification, and CSS combining.

1. Making your site mobile-friendly
Patrick H. Lauke / Opera Software
Patrick H. Lauke /Standards-Next / London / 12 June 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/standards-next_12.06.2010/standards-next_12.06.2010.pdf