Responsive websites. Toolbox

6,316 views

Published on

A talk given at Appspirina workshop on March 29th, 2012 organized by http://mobiledeveloper.pl/.

Event page: https://www.facebook.com/events/296799847060237/

Published in: Technology, Design
4 Comments
10 Likes
Statistics
Notes
  • GOOD.

    PEDRO PAULO SANTOS SILVEIRA
       Reply 
    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. http://www.vjstreet.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • woowwwwwwww is interesting
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • BEAUTIFUL!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,316
On SlideShare
0
From Embeds
0
Number of Embeds
233
Actions
Shares
0
Downloads
62
Comments
4
Likes
10
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 http://www.flickr.com/photos/thebetancourts/899849126/
  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 http://www.flickr.com/photos/seeminglee/3967329241/
  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 http://www.flickr.com/photos/redux/5065152716/
  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— caniuse.com
  19. Need support for IE6-8?respond.jshttps://github.com/scottjehl/Respond
  20. Viewport Tricks http://www.flickr.com/photos/neilkrug/3934372897/
  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: http://mathiasbynens.be/notes/touch-icons
  26. 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
  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); } } — http://adactio.com/journal/4470/
  29. Performance http://www.flickr.com/photos/frinky/2548934532/
  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 http://www.flickr.com/photos/dunechaser/3385957841/
  36. Develop your own!Starbucks style guide:http://www.starbucks.com/static/reference/styleguide/
  37. 6 takes to responsive images http://www.flickr.com/photos/mightyboybrian/3457507731/
  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 http://www.flickr.com/photos/lrargerich/4999906554/
  45. jQuery Plugins http://www.flickr.com/photos/vidyo/6109749573/
  46. Wordpress goes mobile http://www.flickr.com/photos/andivszf/5306544164/
  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 http://responsivetwentyten.com/
  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 http://www.flickr.com/photos/blakespot/6860486028/
  52. There are 38 to solve your EMULATORS * 99 P R O B LEMS* http://www.mobilexweb.com/emulators
  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,http://stephanierieger.com/strategies-for-choosing-test-devices/
  55. Thanks! Q&AWojtek Zając (@theanxy) This work is licensedhttp://www.slideshare.net/wojciechzajac 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 • 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/

×