responsive websites. toolbox

Download Responsive websites. Toolbox

If you can't read please download the document

Post on 15-Jan-2015




0 download

Embed Size (px)


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


2. Agenda Feature detection Responsive images Media Queries 101 Micro libraries Viewport Tricks jQuery plugins Performance Mobile Wordpress CSS frameworks Browser testing 3. PROGRESSIVE enhancementvsPIXELperfection 4. Source: Justin Avery (CC BY-SA 3.0)Interfaces dont have tolook the same everywhere.TV already solved this problem. 5. Android WebKitis the closest thing to beingthe IE6 of mobile development for me.Dion Almaer, A day in the life of Android WebKit dealings 6. We knowThere arefeatures: constraints: screen size screen size local storage no touch touch poor JavaScript canvas no canvas SVG isMSIEHat tip: Yiibu 7. Feature detect 8. Media Queries 101 9. Party like its 1998!CSS2 media types 10. CSS3 Media QueriesMedia typeExpression 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 doesnt only max/min-width will be visible in desktop browser 13. Detect high DPI screensJust retina display: 14. Remove iPhone from ass.PPK, The iPhone obsession 15. Detect high DPI screens Saves HTTP request, non-iOS-specic: @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 17. Test it! Screeny Responsive DesignTesting Responsive DesignTest Bookmarklet 18. Browser support 19. Need support for IE6-8?respond.js 20. Viewport Tricks 21. Viewport demystifiedwidth=500Custom width settingminimum-scale=1.0Prevents from zooming outmaximum-scale=1.0Prevents from zooming in. Useful with formsuser-scalable=no Use cautiously. Mostly for mobile-specic designs 22. Hey girl,when I see you,my iPhonegets 2x initial zoom 23. Home screen iconpported by Andr oid 2.1+, too! su 24. Home screen iconiOS adds by default: Rounded corners Reective shineprevents addition of iOS effects 25. Home screen icon144 144iPad Retina display114 114iPhone 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: Cross-browser solution: 27. iOS viewport scaling bug PortraitLandscape 28. iOS viewport scaling bug fixif (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 DESIGNdepend on depends onscreenwindowdimensionsdimensions 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%;Doesnt provide resources optimization 39. lowsrcDened as obsolete in HTML5 Needs 2 http requests 40. StandardJavaScriptreplacementUses up the most resources 41. 1pxgifRelies on JS for displaying content. Poor idea. 42. data-highsrcdeveloped by Filament Group used on Boston Globe 43. Adaptive-images.comby Matt Wilcox PHP solution quick to set up doesnt work with CDNs 44. Micro libraries 45. jQuery Plugins 46. Wordpress goes mobile 47. 1. Complete plugins WPTouch Wordpress Mobile Pack MobilePressWPTouch plugin used onStephen Frys website 48. 2. Responsive themes Twenty ten fully responsiveequivalent available List of responsive themesat Free Themes Directory grows constantly Lots of responsive premium themeson Forest, WooThemes and Themify 49. 3. Theme switchersTheme switchers usually base on user agent sningto serve users separate WordPress theme. Wordpress Mobile Pack Mobile Smart Device Theme Switcher 50. 4. Responsive design helpers Mobbleif (is_mobile()) { Dropdown Menus echo "Dude, you rock."} WP Fluid Images 51. Browser Testing 52. There are 38 to solve yourEMULATORS*99 P R O B LEMS* 53. Testing onREALDEVICESis crucial. 54. Building your pool of devices Analyze your websites trac Review the local platform landscape Check against device-specic factors (form, screen size, performance, DPI) Compare with project-specic factors (location-based?) Stephanie Rieger, 55. Thanks!Q&AWojtek Zajc (@theanxy)This work is licensed a CreativeCommons Attribution3.0 Unported License 56. Credit where its 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:[email protected]/6116794697/