Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010

on

  • 2,296 views

 

Statistics

Views

Total Views
2,296
Views on SlideShare
2,295
Embed Views
1

Actions

Likes
3
Downloads
16
Comments
0

1 Embed 1

https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010 Making your site mobile-friendly - ThoughtWorks Manchester GeekNights 17.11.2010 Presentation Transcript

    • Making your site mobile-friendly TIPS AND TECHNIQUES FOR A BETTER MOBILE PRESENCE Patrick H. Lauke / ThoughtWorks Manchester GeekNights / 17 November 2010
    • mobile web is increasingly important
    • we need a site that works on iPhone
    • ...works on iPhone... oh, and iPad
    • “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
    • make your site work on all (most) mobile devices
    • 1. do nothing
    • not WAP or text anymore...
    • mobile browsers will work ok-ish
    • “But the mobile context...”
    • 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
    • beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
    • offer users choice: desktop or mobile?
    • refactored for small screen, not dumbed down for mobile
    • 3. single adaptive site
    • nothing new... fluid layout, progressive enhancement, graceful degradation
    • CSS 2 Media Types (screen, print, handheld)
    • CSS 2.1 Media Types <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
    • CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
    • 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/
    • 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 }
    • viewport meta
    • 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
    • viewport meta <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=320, initial- scale=2.3,user-scalable=no">
    • minimise data and server requests (minify JavaScript, combine CSS, …)
    • minimise data ● data transfer over network can be slow ● compress images (PNGCrush) ● optimise your HTML (death to div-itis) ● minify JavaScript ● combine CSS
    • minimise server requests ● each request has overhead ● limit to concurrent requests ● caching not reliable (e.g. iPhone > 25Kb)
    • CSS sprites Dave Shea, A List Apart www.alistapart.com/articles/sprites
    • width: 50px; height: 50px; background: url(icons.gif) no-repeat -51px 0;
    • data URLs http://software.hixie.ch/utilities/cgi/data/data
    • 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; }
    • 1. do nothing 2. separate mobile site 3. single adaptive site
    • www.opera.com/developer patrick.lauke@opera.com people.opera.com/patrickl/presentations/mcr-geeknights_17.11.2010/mcr-geeknights_17.11.2010.pdf