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

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

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.

Marko Dugonjić

September 05, 2012
Tweet

More Decks by Marko Dugonjić

Other Decks in Design

Transcript

  1. Brief books for people who make websites No. 4 !"#$%&#'("

    )"*+,"#'-& Ethan Marcotte Jeremy Keith
  2. 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
  3. <header id="branding" /> <!-- optional --> <div class="content" /> <div

    id="primary" /> <div id="secondary" /> <nav id="main-nav" /> </div> <footer id="main-footer" /> <!-- optional -->
  4. <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>
  5. html { font-size: 62.5%; } body { font-size: 1.4rem; }

    /* = 14px */ h1 { font-size: 2.4rem; } /* = 24px */
  6. /* CSS */ img, embed, object, video { max-width: 100%;

    height: auto; } /* IE7 and above */ /* JavaScript concept! */ if (parent.offsetWidth > 440) { img.src = 'bigger-image.jpg'; }
  7. all browsers CSS @media only screen and (min-width: 500px) @media

    only screen and (min-width: 800px) <!--[if lte IE 8]>...<![endif]-->
  8. <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]-->
  9. 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
  10. .content { display: table; border-collapse: collapse; } #main-nav { display:

    table-header-group; } /* Hat tip to Andy Clarke */
  11. #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%; }
  12. 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.