A short intro to the state of Responsive Web Design and a list of tools and techniques that can help us develop decent responsive websites.
Responsive WebDesign WorkflowThe state of RWD and a...JoomlaDay 2013
View Slide
Definition
Definition“The practice consists of a mix of flexible gridsand layouts, images and an intelligent use ofCSS media queries.“-bit.ly/m3ap1L
Where we are
Where we are5,210,000 - June 2012
Where we are46,610,000 - June 2013
Browser SupportWhere we are~83% - June 2012-bit.ly/GsHMm
Browser SupportWhere we are~91% - June 2013-bit.ly/GsHMm
7 8(Far from) Browser SupportKill these agent(s)XWhere we are
Where we areDon’t forget:+ RWD =-bit.ly/LsYjA6
Workflow
Philosophy ofbreakpoints
Workflow > Philosophy of breakpointsJeremy Keith“I don’t think it’s desirable to have a “standard”handful of screen widths, any more than it’sdesirable to have a single rendering engine inevery browser“-bit.ly/IyLnvL
Workflow > Philosophy of breakpointsStephen Hay“We do have to start somewhere“-bit.ly/1aZVILN
Workflow > Philosophy of breakpoints-bit.ly/12BjSsO
SASSSyntactically Awesome Stylesheets.scss > .css-bit.ly/3wRpzR
Workflow > SASS$radius: 1px;$golden: 1.618rem;$shadow: 0 1px 12px rgba(0, 0, 0, 0.1);a.call {margin: $golden*2 auto;-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;}Variables
Workflow > SASSMixins@mixin rounded-shadowed{-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;-webkit-box-shadow: $shadow;-moz-box-shadow: $shadow;box-shadow: $shadow;}body.work figure img{margin: $golden auto;@include rounded-shadowed}
Workflow > SASSNestingtable.hl {margin: 2em 0;td.ln {text-align: right;}}li {font: {family: serif;weight: bold;size: 1.2em;}}
Zen Grids-bit.ly/AoG8vG
Workflow > Zen GridsThe main content. We like semantic HTML ordering.An aside.Another aside.A footer.Another footer.
Workflow > Zen Grids.container {@include zen-grid-container;$zen-column-count: 7;$zen-gutter-width: 10px;width: 80%;max-width: 1240px;}.aside1 { @include zen-grid-item(2, 1); }.content { @include zen-grid-item(4, 3); }.aside2 { @include zen-grid-item(1, 7); }.footer1 { @include zen-grid-item(3, 5); }.footer2 { @include zen-grid-item(4, 1); }
Workflow > Zen Grids@include zen-grid-item(2, 1) @include zen-grid-item(4, 3)@includezen-grid-item(1, 7)@include zen-grid-item(3, 5)@include zen-grid-item(4, 1)
Media
Workflow > Mediaimg{width:auto; */ IE8 and below */max-width: 100%;height:auto; */ if you specify image width & height in your HTML */}
-bit.ly/nid1yzWorkflow > MediaChris Coyer & Paravel: FitVid.js
Workflow > MediaAlmost there...
-bit.ly/yvfcXmWorkflow > Responsive TablesScott Jehl: picturefill.js
Responsive Typography
-bit.ly/ZzkdOZWorkflow > Responsive Typography
-bit.ly/ZCE2nh-Photo by Wilson MinerWorkflow > Responsive Typography100% is NOT big
Workflow > Responsive Typographyhtml {font-size: 62.5%; */ 16px*0.625=10px=1em */line-height: 1.5;}p{font-size: 16px; */ IE8 and below */font-size: 1.6rem; */ rem=RootEM - 1.6*10px=16px */}
@media all and (max-width: 768px) {html {font-size: 58%; */ 16px*0.58=9px */}}*/ p{font-size: 16px;font-size: 1.6rem; */ 9*1.6=14.4px */} */Workflow > Responsive Typography
-bit.ly/Vr0RbLWorkflow > Responsive Typography
Responsive Navigation
-bit.ly/MSO7oLWorkflow > Responsive Navigation>1024px<1024px
-bit.ly/MSO7oLWorkflow > Responsive NavigationJason Weaver: flexnav.jsNavigation.........
Responsive Tables
Workflow > Responsive Tables/* Attach the Table CSS and Javascript */<br/>...<br/>...<br/>...<br/><table class=”responsive”><br/><tr>...<br/>ZURB: responsive-tables.js<br/>
Workflow > Responsive Tables
Workflow-Philosophy of breakpoints-SASS-Zen Grids-Media (images & video)-Responsive Typography-Navigation-Tables
Yiannis Konstantakopoulosporcupinecolors.comtwitter.com/yiannis_k