Skip to main content
Responsive websites.
Toolbox

@appspirina



WARSAW, 29.03.2012
Agenda
 • Feature detection   • Responsive images
 • Media Queries 101   • Micro libraries
 • Viewport Tricks     • jQuery plugins
 • Performance         • Mobile Wordpress
 • CSS frameworks      • Browser testing
PROGRESSIVE
 enhancement
      vs

  PIXEL
  perfection
Source: Justin Avery (CC BY-SA 3.0)




  Interfaces don’t have to
look the same everywhere.
  TV already solved this problem.
“Android WebKit
      is the closest thing to being
the IE6 of mobile development for me.”
      Dion Almaer, A day in the life of Android WebKit dealings




                                        http://www.flickr.com/photos/thebetancourts/899849126/
We know          There are
    features:       constraints:

✦   screen size      ✦   screen size
✦   local storage    ✦   no touch
✦   touch            ✦   poor JavaScript
✦   canvas           ✦   no canvas
✦   SVG              ✦   isMSIE


                                  Hat tip: Yiibu
Feature detect
Media Queries 101

                    http://www.flickr.com/photos/seeminglee/3967329241/
Party like it’s 1998!


<link rel="stylesheet" media="screen, projection" href="normal.css">
<link rel="stylesheet" media="print" href="print.css">


CSS2 media types
CSS3 Media Queries

<link rel="stylesheet" type="text/css"
      href="example.css" media="screen and (color)">




                          Media type          Expression
Better CSS3 Media Queries
Increase maintainability with @import:

 @import url("example.css") screen and (color);




Save HTTP requests:

 @media screen and (color) {
     body { background: #f00; }
 }
max/min
                -width or
                -device-width?

✦   former updates on orientation change, latter doesn’t
✦   only max/min-width will be visible in desktop browser
Detect high DPI screens
Just retina display:

<link rel="stylesheet"
      media="only screen and (-webkit-min-device-pixel-ratio: 2)"
      type="text/css" href="highdpi.css" />
“Remove iPhone from ass.”
                PPK, The iPhone obsession



                       http://www.flickr.com/photos/redux/5065152716/
Detect high DPI screens
 Saves HTTP request, non-iOS-specific:

 @media
 only screen   and   (-webkit-min-device-pixel-ratio: 1.5),
 only screen   and   (-o-min-device-pixel-ratio: 3/2),
 only screen   and   (min--moz-device-pixel-ratio: 1.5),
 only screen   and   (min-device-pixel-ratio: 1.5) {
   /* Styles   */
 }
Detect iPad orientation

<link rel="stylesheet"
      media="all and (orientation: landscape)"
      href="landscape.css">


<link rel="stylesheet"
      media="all and (orientation: portrait)"
      href="portrait.css">
Test it!
 • Screenfly
 • Responsive Design
  Testing

 • Responsive Design
  Test Bookmarklet
Browser support



— caniuse.com
Need support
 for IE6-8?
respond.js
https://github.com/scottjehl/Respond
Viewport Tricks

                  http://www.flickr.com/photos/neilkrug/3934372897/
Viewport demystified
<meta name="viewport" content="width=device-width, initial-scale=1.0">




width=500                Custom width setting


minimum-scale=1.0        Prevents from zooming out


maximum-scale=1.0        Prevents from zooming in. Useful with forms

user-scalable=no         Use cautiously. Mostly for mobile-specific designs
Hey girl,


when I see you,
my iPhone
gets 2x initial zoom
Home screen icon

<link rel="apple-touch-icon" href="apple-touch-icon.png">



                pported by Andr oid 2.1+, too!
             su
Home screen icon
iOS adds by default:

• Rounded corners
                       <link rel="apple-touch-icon-precomposed"

• Drop shadow                href="apple-touch-icon-precomposed.png">


• Reflective shine
                          prevents addition of iO
                                                      S effects
Home screen icon
  144 × 144              iPad ‘Retina’ display

  114 × 114              iPhone ‘Retina’ display

   72 × 72               iPad, iPad 2

   57 × 57               non-Retina iOS and others


 Complete snippet:

 http://mathiasbynens.be/notes/touch-icons
Hiding address bar
 After adding as a bookmark:

 <meta name="apple-mobile-web-app-capable" content="yes">




 Cross-browser solution:

  https://github.com/scottjehl/Hide-Address-Bar
iOS viewport scaling bug




     Portrait      Landscape
iOS viewport scaling bug fix
  if (navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta
  [name="viewport"]');
    if (viewportmeta) {
      viewportmeta.content = 'width=device-width, minimum-scale=1.0,
  maximum-scale=1.0';
      document.body.addEventListener('gesturestart', function() {
        viewportmeta.content = 'width=device-width, minimum-
  scale=0.25, maximum-scale=1.6';
      }, false);
    }
  }


  — http://adactio.com/journal/4470/
Performance




              http://www.flickr.com/photos/frinky/2548934532/
Mobile first, stupid!
Decrease dependencies
Load resources conditionally
The Boston Globe used the following methodology:



       ASSETS                             DESIGN
        depend on                         depends on
        screen                              window
      dimensions                          dimensions
Optimize performance
 ✦   Mobile perf bookmarklet
 ✦   YSlow for mobile bookmarklet
Use CSS Data URL generators
or… built-in editor tools
(e.g. implemented in Sublime)
Mobile-friendly frameworks
                       http://www.flickr.com/photos/dunechaser/3385957841/
Develop your own!




Starbucks style guide:
http://www.starbucks.com/static/reference/styleguide/
6 takes to responsive images




                        http://www.flickr.com/photos/mightyboybrian/3457507731/
max-
       width:
      100%;
Doesn’t provide resources optimization
lowsrc
Defined as obsolete in HTML5
   Needs 2 http requests
Standard
JavaScript
replacement

Uses up the most resources
1px
                    gif

Relies on JS for displaying content. Poor idea.
data-highsrc

  developed by Filament Group
     used on Boston Globe
Adaptive-images.com
by Matt Wilcox




 ✦   PHP solution
 ✦   quick to set up
 ✦   doesn’t work with CDNs
Micro libraries




                  http://www.flickr.com/photos/lrargerich/4999906554/
jQuery Plugins




                 http://www.flickr.com/photos/vidyo/6109749573/
Wordpress goes mobile

                        http://www.flickr.com/photos/andivszf/5306544164/
1. Complete plugins
✦   WPTouch
✦   Wordpress Mobile Pack
✦   MobilePress




                            WPTouch plugin used on
                            Stephen Fry’s website
2. Responsive themes
✦   Twenty ten fully responsive
    equivalent available
✦   List of responsive themes
    at Free Themes Directory grows constantly
✦   Lots of responsive premium themes
    on Forest, WooThemes and Themify




                                                http://responsivetwentyten.com/
3. Theme switchers

Theme switchers usually base on user agent sniffing
to serve users separate WordPress theme.

 ✦   Wordpress Mobile Pack
 ✦   Mobile Smart
 ✦   Device Theme Switcher
4. Responsive design helpers

✦   Mobble
                      if (is_mobile()) {
✦   Dropdown Menus       echo "Dude, you rock."
                      }
✦   WP Fluid Images
Browser Testing




                  http://www.flickr.com/photos/blakespot/6860486028/
There are
             38 to solve your
                EMULATORS  *
                                        99

                 P R O B LEMS
* http://www.mobilexweb.com/emulators
Testing on
REAL
DEVICES
is crucial.
Building your pool of devices
 ✦   Analyze your website’s traffic
 ✦   Review the local platform landscape
 ✦   Check against device-specific factors
     (form, screen size, performance, DPI)
 ✦   Compare with project-specific factors
     (location-based?)



— Stephanie Rieger,
http://stephanierieger.com/strategies-for-choosing-test-devices/
Thanks!

                                          Q&A


Wojtek Zając (@theanxy)
                                                    This work is licensed
http://www.slideshare.net/wojciechzajac                under a Creative
                                                    Commons Attribution
                                                    3.0 Unported License
Credit where it’s due
Based on the brilliant research and works by:
• Scott Jehl           • Matt Wilcox            • Yiibu.com
• Patrick H. Lauke     • Brad Frost
• Russ Weakley         • Rachel McCollin
& others.


First slide photo: http://www.flickr.com/photos/johnmcnab/5758738799/
Stephanie Rieger: http://www.flickr.com/photos/29022619@N03/6116794697/