Responsive Web Design workshop @ eZ Publish Summer Camp, Bol, Croatia

Kick start into Responsive Web Design, from concept to code with content first, mobile first approach.

Transcript

1. Responsive Web Design Marko Dugonjić Creative Nights
2. @markodugonjic
3. Nice to meet you!
4. begginer or The Old Grump?
5. Definition of RWD
6. Ethan Marcotte flexible layout flexible images media queries
7. Brief books for people who make websites No. 4 !"#$%&#'(" )"*+,"#'-& Ethan Marcotte Jeremy Keith
8. Responsive Web Design is web design, done right. — Andy Clarke aka Malarkey
9. Examples
10. http://bostonglobe.com/
11. http://smashingmagazine.com/
12. http://foodsense.is/
13. http://iso.org/
14. http://maratz.com/
15. The latest eZ Publish
20. The switch
21. a picture of a web site (way back then)
22. the paradox of undeliverable promise
23. interface elements instead of full layout
25. design system instead of the final state
29. designing in a browser is CSS3 enough?
33. Mobile First
35. (probably) last month
36. Mobile First Content
37. http://bit.ly/QWNTkA
38. page diagrams HIGH PRIORITY ITEMS LOW PRIORITY ITEMS 1 2 3 ARTICLE Article elements (by priority): - title - hero image - intro - body text - inline images - pull quotes Pull quotes should be used as the reading rest areas, not promotional tool, double-check the font-size on small devices, so it always fit in the screen. “SMART” POOL Pools offer users a set of pre-set answers, as well as option to enter their own answer. We are using the entered value to query the database and offer related articles. COMMENTS The article page features the last five comments, with a link to full comments list page. Commenting is allowed for logged-in members only. Comment form should have two states: 1. “log in to participate” 2. text area + submit button Comment elements (by priority): - comment text - “reply to this comment” - avatar - author’s nickname - publish date RELATED ARTICLES Related articles are associated to the main article by tags. If no tag- related article is found, then use a list of category-related entries. Display 3 articles at most. Related article elements (by priority): - thumbnail - title - publish date
40. Let’s build stuff! “the plan”
41. analyze design sketch elements HTML structure modular CSS @media CSS breakpoints flexible layout
42. #1 Analyze design
43. look and feel instead of layout
44. typography color shape lines artwork
45. http://clearairchallenge.com/
46. http://www.dolectures.com/
47. http://lifeingreenville.com/
48. #2 Sketch elements
49. essential elements are always visible but flexible
50. headlines body text images + multimedia data tables primary forms
51. supplementary elements a/ fully visible state b/ contracted state
52. branding (logo) (multi-level) navigation search pagination
53. #3 HTML structure
54. header nav section article aside footer
55. branding main navigation local navigation search primary content secondary content footer
56. <header id="branding" /> <!-- optional --> <div class="content" /> <div id="primary" /> <div id="secondary" /> <nav id="main-nav" /> </div> <footer id="main-footer" /> <!-- optional -->
57. component markup enclose each component and give it a unique class name
58. <article class="news-entry"> <h1>Article title</h1> <div class="article-body"> <p>Article content</p> </div> <ol class="comment-list"> <li>Comment</li> <li>Comment</li> <li>Comment</li> </ol> </article>
59. <!-- Instruct the browsers --> <meta name="viewport" content="initial-scale=1.0, width=device-width" />
60. #4 Scalable and Modular CSS
61. typography hierarchy + vertical spacing
62. * { margin: 0; padding: 0; }
63. rem = root em
64. html { font-size: 62.5%; } body { font-size: 1.4rem; } /* = 14px */ h1 { font-size: 2.4rem; } /* = 24px */
65. p, ul, ol { line-height: 1.5em; margin: 0 0 1.5em; }
66. /* CSS */ img, embed, object, video { max-width: 100%; height: auto; } /* IE7 and above */ /* JavaScript concept! */ if (parent.offsetWidth > 440) { img.src = 'bigger-image.jpg'; }
67. #5 @media
68. going up with min-width
69. all browsers CSS @media only screen and (min-width: 500px) @media only screen and (min-width: 800px) <!--[if lte IE 8]>...<![endif]-->
70. <link ... href="general.css" /> <link ... href="500-up.css" media="only screen and (min-width: 500px)" /> ... <!--[if lte IE 8]> <link ... href="800-up.css" /> <![endif]-->
71. #6 Breakpoints
72. reading distances and line-length instead of device resolutions
73. Breakpoints should not be dictated by devices, but by content. Let the content decide when to expand and then adjust your designs. — Jeremy Keith http://www.lukew.com/ff/entry.asp?1393
74. 0,26mm 1,3mm 71cm 350cm
76. create a set of typographic rules for each reading distance
77. @media (breakpoint) { /* reading distance rules */ /* layout rules (in a minute) */ }
78. vertical flipping
79. NAVIGATION NAVIGATION
80. .content { display: table; border-collapse: collapse; } #main-nav { display: table-header-group; } /* Hat tip to Andy Clarke */
81. #7 Flexible layout “columns management”
82. maintain proportions with percentages
83. column / wrapper = percentage
84. column / wrapper = percentage COLUMN WRAPPER
85. 300px / 1000px = 30%
87. 483px 300px
88. 483px 300px IAB
89. 483px / 783px = 61,685823% 300px / 783px = 38,314176%
90. box-sizing: border-box (not supported in IE7)
91. WIDTH PADDING BORDER WIDTH (box-sizing: border-box)
92. emulate box-sizing with CSS expressions for IE7 http://maratz.com/blog/?p=2046
93. #primary, #secondary { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 2rem; } #primary { width: 61.685823%; } #secondary { width: 38.314176%; }
94. http://bit.ly/P4xZTF Faux Columns
95. .content { background-image: url(columns.png); background-repeat: repeat-y; background-size: 100% auto; }
96. Viewport-percentage length vw, vh, vmin, vmax The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the viewport is changed, they are scaled accordingly.
97. :root { font-size: calc(100vw / 40); } h1 { font-size: 2rem; } p { font-size: 1rem; }
98. Viewport Sized Typography http://bit.ly/MABc8Q
99. Close-up
100. Tools and resources http://responsive.is/ http://responsivepx.com/ https://vimeo.com/34662135 http://galleria.io/
101. Q & A
102. Thank you! creativenights.com @markodugonjic