Optimizing content for the "mobile web"
Upcoming SlideShare
Loading in...5
×
 

Optimizing content for the "mobile web"

on

  • 2,648 views

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 ...

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.

Statistics

Views

Total Views
2,648
Views on SlideShare
2,648
Embed Views
0

Actions

Likes
4
Downloads
44
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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" Optimizing content for the "mobile web" Presentation Transcript

  • Optimizing content for the "mobile web" Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills
  • 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
  • Let’s look at...‣ What the mobile web is‣ Why the mobile web is booming‣ Mobile limitations‣ Optimizing for mobile
  • What is the mobile web? http://www.flickr.com/photos/daryl_mitchell/3560636199/
  • WAP was the mobile web,right?
  • The real mobile web...Arrived in about 2005‣ Opera Mobile, Opera Mini, Webkit‣ Ok processors, graphics, standards support
  • "We want an iPhone site"
  • "ummm, can we have an iPad site too?"
  • 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
  • Why is mobile booming? http://www.flickr.com/photos/braddavisseal/3139714024/
  • Why is the “mobile web”market so big?‣ Cost‣ Lifestyle‣ Marketing
  • Cost‣ Mobiles cost less than PCs, generally speaking‣ Bandwidth costs too, and downloads are largely cheaper on mobile
  • "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
  • Lifestyle‣ Hectic lifestyles‣ Nomadic or low tech lifestyles
  • 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...
  • http://www.flickr.com/photos/leebennett/2908300983/
  • 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/)
  • Mobile limitations http://www.flickr.com/photos/watt_dabney/2329373883/
  • Mobile limitations‣ Varying standards support‣ Device limitations (eg screensize, control mechanisms, CPU)
  • 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)
  • 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
  • Limitations: screen size
  • 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...
  • 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
  • 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
  • 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?
  • Optimizing for mobile http://www.flickr.com/photos/drp/18463461/
  • 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
  • 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
  • "We want an iPhone site"
  • 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?
  • DONT do browser sniffing
  • Aim to make your site work on most mobile devices
  • 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
  • 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
  • Optimizing a single site formobile‣ Media types‣ Media queries‣ Viewport
  • Media types all braille embossed handheld print projection screen speech tty tv
  • Media types<link
rel="stylesheet"
...
media="print"
href="...">@import
url("...")
print;@media
print
{

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

{

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

width:
device‐width;}@viewport
{

width:
320px;

zoom:
2.3;

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