In this presentation I discuss the mobile web: what it is, why it is lucrative, the limitations of developing for mobile, and how to best optimize web sites for viewing on mobile. This includes media queries, viewport and general best practices. I delivered this to a class at Oxford Brookes university on the 25th March 2011.

1. Optimizing content for the
"mobile web"
Chris Mills, Opera Software
Slides available on http://slideshare.net/chrisdavidmills

2. Who the hell am I?
‣ Opera open standards evangelist and tech writer
‣ Telling the world about open standards & Opera
‣ Improving web education
‣ Drinking beer & saving the world before morning

3. Let’s look at...
‣ What the mobile web is
‣ Why the mobile web is booming
‣ Mobile limitations
‣ Optimizing for mobile

4. What is the mobile
web?
http://www.flickr.com/photos/daryl_mitchell/3560636199/

5. WAP was the mobile web,
right?

6. The real mobile web...
Arrived in about 2005
‣ Opera Mobile, Opera Mini, Webkit
‣ Ok processors, graphics, standards support

7. "We want an iPhone site"

8. "ummm, can we have an iPad
site too?"

9. But the mobile web is
‣ Smart phones
‣ Feature phones
‣ Tablets
‣ Other browsing devices
‣ We now have full standards support, touch
screens, GPS, accelerometers, cameras, and
more

10. Why is mobile
booming?
http://www.flickr.com/photos/braddavisseal/3139714024/

11. Why is the “mobile web”
market so big?
‣ Cost
‣ Lifestyle
‣ Marketing

12. Cost
‣ Mobiles cost less than PCs, generally speaking
‣ Bandwidth costs too, and downloads are largely
cheaper on mobile

13. "The proportion of people of accessing the Internet by
mobile increased enormously from 39.5% in late 2008
to 46% in June 2009 (close to 150 million people),
while the proportion of using desktops and laptops
decreased”.
--Statistical Report on Internet Development in China, p25-26, www.ccnic.cn

14. Lifestyle
‣ Hectic lifestyles
‣ Nomadic or low tech lifestyles

15. Marketing
‣ All the cool kids use the mobile web
‣ And business professionals
‣ Everyone, in fact!
‣ It’s not about phones anymore, or even camera
phones...

16. http://www.flickr.com/photos/leebennett/2908300983/

17. Happy world stats
‣ There are over 100 million smart phones
‣ But more than 4bn mobile users
‣ Much bigger than the desktop market
‣ See the state of the mobile web report for useful
stats (http://www.opera.com/smw/)

18. Mobile limitations
http://www.flickr.com/photos/watt_dabney/2329373883/

19. Mobile limitations
‣ Varying standards support
‣ Device limitations (eg screensize, control
mechanisms, CPU)

20. Limitation: varying browser
support
Mobile browsers vary widely in standards support
‣ Some have great standards support (eg Opera
Mobile, Webkit-based browsers)
‣ Some have limited standards support (eg
Netfront, Mobile IE)
‣ Some are proxy-based (eg Opera Mini)

21. How does Mini work?
The browser is just a thin client for the server farm
‣ Mini sends request
‣ Server retrieves page, runs it and reformats it into
OBML (compressed by up to 90%)
‣ Page sent back to phone
‣ Mini displays page

22. Limitations: screen size

23. Limitations: performance
Bandwidth, memory, processor
‣ Generally smaller on phones
‣ Some mobile browsers handle JavaScript badly
‣ Does your web 2.0 app work across 3G/Edge?
‣ You can mitigate problems...

24. Mitigating performance
problems
Cut down on HTTP requests:
‣ Use CSS sprites
‣ Put all CSS/JavaScript in one file
‣ Use embedded SVG for graphics?
‣ Serve a slim-line version to mobile browsers

25. Limitation: colours, fonts
You thought designing for desktop sucked?
‣ Low number of colours on some devices
‣ Low number of fonts on some devices: some
devices have one font, plus perhaps an italic
version and a simulated monospace font
‣ Test across lower end devices as well as smart
phones

26. User experience should be
acceptable...
But it doesn’t need to be the same across all
devices
‣ It’s all about context
‣ What is good for desktop is not necessarily good
for mobile
‣ What tasks do people want to perform on
mobile?

27. Optimizing for mobile
http://www.flickr.com/photos/drp/18463461/

28. Optimizing sites for devices
Many options available
‣ Do nothing...
‣ Browser and feature detection/”sniffing”, and
serving of appropriate content
‣ Separate mobile version
‣ Media types and media queries
‣ Viewport

29. Do nothing special...
‣ ..using web standards and best practices goes a
long way anyway
‣ Make designs flexible and as simple as possible
‣ Test: think about it will look on a variety of small
screen devices
‣ Minimize HTTP requests
‣ Look at how well it works without CSS and
JavaScript

30. "We want an iPhone site"

31. Browser sniffing
Detect UA strings, and optimize content as
appropriate
Opera/9.80 (J2ME/MIDP; Opera Mini/$CLIENT_VERSION/$SERVER_BUILD; U;
$CLIENT_LANG) Presto/2.4.15
‣ This is crap:
‣ The code needs updating as new browsers
become available
‣ Separate sites for each device?

32. DON'T do browser sniffing

33. Aim to make your site work on
most mobile devices

34. Feature detection is better
Test availability of features instead
if (operamini.features.sms) {
// send SMS message using operamini.sms object
}
else // provide fallback
‣ You don’t need to test for loads of browsers
‣ Or update your code for new browsers

35. Separate mobile version?
A separate mobile site may work for you
‣ But optimizing a single site is better
‣ Less of a maintenance nightmare
‣ Lots of phones can run full fat sites anyway these
days
‣ If you do it, provide a link between sites so the
user can choose

36. Optimizing a single site for
mobile
‣ Media types
‣ Media queries
‣ Viewport

37. Media types
all braille
embossed handheld
print projection
screen speech
tty tv

38. Media types
<link rel="stylesheet" ... media="print"
href="...">
@import url("...") print;
@media print {
// insert CSS rules here
}

39. Media queries
Media types on steroids
‣ Apply CSS depending on value of certain media
features
‣ (http://people.opera.com/danield/css3/vangogh/
index.php)
‣ http://mediaqueri.es

40. Media features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

41. A sample media query
<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
}

42. Comma separated
expressions
@media screen and (max‐width:480px), print
and (max‐width:20em) {
// insert CSS rules here
}

43. not and only
@media not screen and (min‐width:800px) {
// insert CSS rules here
}
@media only screen and (min‐width:800px) {
// insert CSS rules here
}

44. Multiple media queries
@media screen and (min‐width:800px) {
// insert CSS rules here
}
@media screen and (max‐width:800px) {
// insert CSS rules here
}
@media screen and (max‐width:480px) {
// insert CSS rules here
}

45. mediaqueri.es

46. mediaqueri.es

47. mediaqueri.es

48. mediaqueri.es

49. Viewport
‣ Meta tag introduced by Apple to control display
of web apps on the iPhone
‣ Adopted by other vendors too
‣ Control initial zoom level, maximum zoom, width
or displayed area, etc.
‣ Functionality available as CSS @-rule too
‣ http://dev.opera.com/articles/view/an-
introduction-to-meta-viewport-and-viewport/

50. Viewport: the premise
‣ It's all about physical versus virtual pixels
‣ Desktop computers are fairly simple
‣ But mobiles lie
‣ Viewport suggests sizing to mobiles

51. Viewport example
<meta name="viewport"
content="width=480">
<meta name="viewport"
content="width=480, user‐scalable=no">

52. Viewport properties
width initial-scale
height minimum-scale
user-scalable maximum-scale

55. CSS viewport
@viewport {
width: device‐width;
}
@viewport {
width: 320px;
zoom: 2.3;
user‐zoom: fixed;
}

56. CSS viewport properties
width/min-width/
user-zoom
max-width
height/min-height/
orientation
max-height
zoom/min-zoom/
max-zoom

57. High DPI device: caveat
‣ These have another level of viewport abstraction
‣ This is brain-melting territory
‣ For example, iPhone 4 has four times as many
physical pixels

58. Thanks for listening!
‣ cmills@opera.com
‣ @chrisdavidmills
‣ http://dev.opera.com
‣ http://www.opera.com/wsc
‣ http://dev.opera.com/articles/view/the-mobile-
web-optimization-guide/
‣ http://dev.opera.com/articles/view/opera-mini-
web-content-authoring-guidelines/