Responsive websites. Toolbox


Published on

A talk given at Appspirina workshop on March 29th, 2012 organized by

Event page:

Published in: Technology, Design
  • GOOD.

    Are you sure you want to  Yes  No
    Your message goes here
  • One problem for RWD is that advertisements are not fluid. But search advertising and display advertising support specific device platform targeting and different advertisement size formats for desktop, smartphone, and basic mobile devices, and different landing page URLs can be used for different platforms.
    Are you sure you want to  Yes  No
    Your message goes here
  • woowwwwwwww is interesting
    Are you sure you want to  Yes  No
    Your message goes here
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive websites. Toolbox

  1. Responsive websites.Toolbox@appspirinaWARSAW, 29.03.2012
  2. Agenda • Feature detection • Responsive images • Media Queries 101 • Micro libraries • Viewport Tricks • jQuery plugins • Performance • Mobile Wordpress • CSS frameworks • Browser testing
  3. PROGRESSIVE enhancement vs PIXEL perfection
  4. Source: Justin Avery (CC BY-SA 3.0) Interfaces don’t have tolook the same everywhere. TV already solved this problem.
  5. “Android WebKit is the closest thing to beingthe IE6 of mobile development for me.” Dion Almaer, A day in the life of Android WebKit dealings
  6. 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
  7. Feature detect
  8. Media Queries 101
  9. 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
  10. CSS3 Media Queries<link rel="stylesheet" type="text/css" href="example.css" media="screen and (color)"> Media type Expression
  11. Better CSS3 Media QueriesIncrease maintainability with @import: @import url("example.css") screen and (color);Save HTTP requests: @media screen and (color) { body { background: #f00; } }
  12. max/min -width or -device-width?✦ former updates on orientation change, latter doesn’t✦ only max/min-width will be visible in desktop browser
  13. Detect high DPI screensJust retina display:<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="highdpi.css" />
  14. “Remove iPhone from ass.” PPK, The iPhone obsession
  15. 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 */ }
  16. 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">
  17. Test it! • Screenfly • Responsive Design Testing • Responsive Design Test Bookmarklet
  18. Browser support—
  19. Need support for IE6-8?respond.js
  20. Viewport Tricks
  21. Viewport demystified<meta name="viewport" content="width=device-width, initial-scale=1.0">width=500 Custom width settingminimum-scale=1.0 Prevents from zooming outmaximum-scale=1.0 Prevents from zooming in. Useful with formsuser-scalable=no Use cautiously. Mostly for mobile-specific designs
  22. Hey girl,when I see you,my iPhonegets 2x initial zoom
  23. Home screen icon<link rel="apple-touch-icon" href="apple-touch-icon.png"> pported by Andr oid 2.1+, too! su
  24. Home screen iconiOS 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
  25. 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:
  26. Hiding address bar After adding as a bookmark: <meta name="apple-mobile-web-app-capable" content="yes"> Cross-browser solution:
  27. iOS viewport scaling bug Portrait Landscape
  28. 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); } } —
  29. Performance
  30. Mobile first, stupid!
  31. Decrease dependencies
  32. Load resources conditionallyThe Boston Globe used the following methodology: ASSETS DESIGN depend on depends on screen window dimensions dimensions
  33. Optimize performance ✦ Mobile perf bookmarklet ✦ YSlow for mobile bookmarklet
  34. Use CSS Data URL generatorsor… built-in editor tools(e.g. implemented in Sublime)
  35. Mobile-friendly frameworks
  36. Develop your own!Starbucks style guide:
  37. 6 takes to responsive images
  38. max- width: 100%;Doesn’t provide resources optimization
  39. lowsrcDefined as obsolete in HTML5 Needs 2 http requests
  40. StandardJavaScriptreplacementUses up the most resources
  41. 1px gifRelies on JS for displaying content. Poor idea.
  42. data-highsrc developed by Filament Group used on Boston Globe
  43. Adaptive-images.comby Matt Wilcox ✦ PHP solution ✦ quick to set up ✦ doesn’t work with CDNs
  44. Micro libraries
  45. jQuery Plugins
  46. Wordpress goes mobile
  47. 1. Complete plugins✦ WPTouch✦ Wordpress Mobile Pack✦ MobilePress WPTouch plugin used on Stephen Fry’s website
  48. 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
  49. 3. Theme switchersTheme switchers usually base on user agent sniffingto serve users separate WordPress theme. ✦ Wordpress Mobile Pack ✦ Mobile Smart ✦ Device Theme Switcher
  50. 4. Responsive design helpers✦ Mobble if (is_mobile()) {✦ Dropdown Menus echo "Dude, you rock." }✦ WP Fluid Images
  51. Browser Testing
  52. There are 38 to solve your EMULATORS * 99 P R O B LEMS*
  53. Testing onREALDEVICESis crucial.
  54. 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,
  55. Thanks! Q&AWojtek Zając (@theanxy) This work is licensed under a Creative Commons Attribution 3.0 Unported License
  56. Credit where it’s dueBased on the brilliant research and works by:• Scott Jehl • Matt Wilcox •• Patrick H. Lauke • Brad Frost• Russ Weakley • Rachel McCollin& others.First slide photo: Rieger: