Your SlideShare is downloading. ×
0
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Responsive websites. Toolbox
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive websites. Toolbox

3,536

Published on

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

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
9 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
3,536
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
61
Comments
4
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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/

×