Responsive Web Design: How I Started Caring And Adopted Mobile First

A talk given at https://www.facebook.com/events/188741017978316/ event in Kraków, Poland. #omgkrk

Transcript

1. #RWD Wojtek Zając epizody how i started caring and adopted mobile first OR: KRAKÓW 02.11.2013
2. Hi! @theanxy Designinclusive.com
3. founder, XHTMlized office
4. Lead developer, x-team
5. ❶methodology ❷ ❸implementation professional workflow
6. http://www.flickr.com/photos/lng0004/7881151510/ 46% of population has access to a mobile phone (of any kind) http://www.economist.com/blogs/babbage/2012/10/global-mobile-usage?fsrc=scn/tw_ec/sim_earth
7. 1,083 billion of smartphones
 used worldwide http://www.lukew.com/ff/entry.asp?1644 http://www.flickr.com/photos/lng0004/7881151510/
8. http://www.flickr.com/photos/lng0004/7881151510/ 59% of smartphone owners use them every day
9. basic terminology
10. what is Inclusive Design?
11. http://www.flickr.com/photos/adforce1/4425475660/
13. interfaces should be easy to use for everyone
14. Progressive Enhancement http://www.flickr.com/photos/aigle_dore/4089511514/
15. 8 great food that everyone can enjoy (except those with an allergy, of course). In a similar sense, the content of our website should be able to be enjoyed without embellishment. Figure 1.2: A confectionary continuum. THINK OF THE USER, NOT THE BROWSER content presentation client-side scripting by aaron gustafson “adaptive web design”
17. we’re not as tolerant as we used to be
18. use feature detection modernizr.com
19. there’s much more than that…
20. content strategy http://www.flickr.com/photos/yourdon/2715583000/
21. http://xkcd.com/1174/
22. “Mobile must never be a dumbed-down, limited experience.” — Steven Hoober http://www.flickr.com/photos/chrisjl/5664339020/
23. context != intent
24. http://blogs.forrester.com/sarah_rotman_epps/12-04-11-the_tablet_tv_connection 85% of U.S. tablet owners use them while watching tv
25. deliverables 2.0
26. We’re living in a POst-psd era.
27. Try responsive prototyping tools (uxpin.com)
28. Test early & iterate.
29. Possible approaches to device-agnostic websites
30. … hard to Maintain Content parity Dedicated mobile websites #1
31. rwd: mobile last most websites don’t optimize assets… ~ Guy Podjarny, Performance Implications of Mobile Design #2
32. starting small should be the default rwd: mobile first #3
33. RESS responsive design + server side components #4
35. implementation ````````` part 2
36. <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 viewport
37. CSS3 Media Queries <link rel="stylesheet" type="text/css" href="example.css" media=“all and (min-width: 50rem)”> Media type Expression
38. CSS3 Media Queries <link rel="stylesheet" type="text/css" href="example.css" media=“all and (min-width: 50rem)”> Media type Expression @import url("example.css") all and (min-width: 50rem);
 Equivalent of:
39. CSS3 Media Queries <link rel="stylesheet" type="text/css" href="example.css" media=“all and (min-width: 50rem)”> Media type Expression @import url("example.css") all and (min-width: 50rem);
 Equivalent of: @media all and (min-width: 50rem) {
 body { background: #f00; }
 } Equivalent of:
40. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Hi-res images */ } Detecting high density displays
41. rem ems relative to root element ! vh, vw, vmin, vmax based on viewport dimensions New css3 units
42. check backwards compability (caniuse.com)
43. use a CSS preprocessor
44. choose your breakpoints wisely
45. Design for people, not devices http://www.flickr.com/photos/epsos/5644801034/
46. http://www.flickr.com/photos/brad_frost/ embrace long tail of viewports
47. testing breakpoints quirktools.com/screenfly
48. targeting devices can be tricky (touch?) asus eee transformer
49. southstreet https://github.com/filamentgroup/Southstreet
50. elephant in the room
51. 1.25MB average page weight (2012) http://wpdaily.co/responsive-server-side/ 86% of responsive websites don’t optimise resources http://www.lukew.com/ff/entry.asp?1681
52. “87% of mobile users expect sites to load at least as fast, or faster than on their desktop.” "57% will abandon a site after waiting 3 seconds for a page to load.” http://www.strangeloopnetworks.com/web-performance-infographics/
53. http://mobile.httparchive.org/ Images are often the biggest part
54. responsive 
 images adaptive-images.com
55. optimize front-end performance!
56. Avoid or conditionally load: - iframes - social plugins - 3rd party assets
57. icon fonts
58. follow web performance best practices
59. professional workflow ````````````` part 3
60. master your editor sublime text 2
61. Learn chrome devtools http://devtools.chrome.com
62. follow common set of coding standards
63. Create a css style guide (.net magazine)
64. style guides in the wild http://www.starbucks.com/static/reference/styleguide/
65. responsive grids 
 and frameworks
66. automate tasks
67. yeoman
68. grunt
69. bower $ npm install -g bower $ bower search jquery $ bower install jquery —save-dev
70. grunt-contrib-watch with livereload
71. css Regression testing
72. if possible, Test on real devices
73. otherwise get an emulator http://www.mobilexweb.com/emulators
74. contribute to the community!