Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

10a4285792e47c507ab4782b6716c0d1?s=47 Marko Dugonjić
September 05, 2012

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.

10a4285792e47c507ab4782b6716c0d1?s=128

Marko Dugonjić

September 05, 2012
Tweet

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

  16. None
  17. None
  18. None
  19. None
  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

  24. None
  25. design system instead of the final state

  26. None
  27. None
  28. None
  29. designing in a browser is CSS3 enough?

  30. None
  31. None
  32. None
  33. Mobile First

  34. None
  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
  39. None
  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

  75. None
  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%

  86. None
  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