Optimizing content for the "mobile web"

2,551 views

Published on

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.

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,551
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
48
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Optimizing content for the "mobile web"

    1. 1. Optimizing content for the "mobile web" Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills
    2. 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. 3. Let’s look at...‣ What the mobile web is‣ Why the mobile web is booming‣ Mobile limitations‣ Optimizing for mobile
    4. 4. What is the mobile web? http://www.flickr.com/photos/daryl_mitchell/3560636199/
    5. 5. WAP was the mobile web,right?
    6. 6. The real mobile web...Arrived in about 2005‣ Opera Mobile, Opera Mini, Webkit‣ Ok processors, graphics, standards support
    7. 7. "We want an iPhone site"
    8. 8. "ummm, can we have an iPad site too?"
    9. 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. 10. Why is mobile booming? http://www.flickr.com/photos/braddavisseal/3139714024/
    11. 11. Why is the “mobile web”market so big?‣ Cost‣ Lifestyle‣ Marketing
    12. 12. Cost‣ Mobiles cost less than PCs, generally speaking‣ Bandwidth costs too, and downloads are largely cheaper on mobile
    13. 13. "The proportion of people of accessing the Internet bymobile increased enormously from 39.5% in late 2008to 46% in June 2009 (close to 150 million people),while the proportion of using desktops and laptopsdecreased”.--Statistical Report on Internet Development in China, p25-26, www.ccnic.cn
    14. 14. Lifestyle‣ Hectic lifestyles‣ Nomadic or low tech lifestyles
    15. 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. 16. http://www.flickr.com/photos/leebennett/2908300983/
    17. 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. 18. Mobile limitations http://www.flickr.com/photos/watt_dabney/2329373883/
    19. 19. Mobile limitations‣ Varying standards support‣ Device limitations (eg screensize, control mechanisms, CPU)
    20. 20. Limitation: varying browsersupportMobile 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. 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. 22. Limitations: screen size
    23. 23. Limitations: performanceBandwidth, 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. 24. Mitigating performanceproblemsCut 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. 25. Limitation: colours, fontsYou 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. 26. User experience should beacceptable...But it doesn’t need to be the same across alldevices‣ 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. 27. Optimizing for mobile http://www.flickr.com/photos/drp/18463461/
    28. 28. Optimizing sites for devicesMany options available‣ Do nothing...‣ Browser and feature detection/”sniffing”, and serving of appropriate content‣ Separate mobile version‣ Media types and media queries‣ Viewport
    29. 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. 30. "We want an iPhone site"
    31. 31. Browser sniffingDetect UA strings, and optimize content asappropriateOpera/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. 32. DONT do browser sniffing
    33. 33. Aim to make your site work on most mobile devices
    34. 34. Feature detection is betterTest availability of features insteadif
(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. 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. 36. Optimizing a single site formobile‣ Media types‣ Media queries‣ Viewport
    37. 37. Media types all braille embossed handheld print projection screen speech tty tv
    38. 38. Media types<link
rel="stylesheet"
...
media="print"
href="...">@import
url("...")
print;@media
print
{

//
insert
CSS
rules
here}
    39. 39. Media queriesMedia 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. 40. Media features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
    41. 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. 42. Comma separatedexpressions@media
screen
and
(max‐width:480px),
print
and
(max‐width:20em)

{

//
insert
CSS
rules
here}
    43. 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. 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. 45. mediaqueri.es
    46. 46. mediaqueri.es
    47. 47. mediaqueri.es
    48. 48. mediaqueri.es
    49. 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. 50. Viewport: the premise‣ Its all about physical versus virtual pixels‣ Desktop computers are fairly simple‣ But mobiles lie‣ Viewport suggests sizing to mobiles
    51. 51. Viewport example<meta
name="viewport"
content="width=480"><meta
name="viewport"
content="width=480,
user‐scalable=no">
    52. 52. Viewport properties width initial-scale height minimum-scale user-scalable maximum-scale
    53. 53. CSS viewport@viewport
{

width:
device‐width;}@viewport
{

width:
320px;

zoom:
2.3;

user‐zoom:
fixed;}
    54. 54. CSS viewport properties width/min-width/ user-zoom max-width height/min-height/ orientation max-height zoom/min-zoom/ max-zoom
    55. 55. 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
    56. 56. 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/

    ×