Responsive Web Design Workflow
The state of RWD and a...
JoomlaDay 2013
Definition
Definition
“The practice consists of a mix of flexible grids
and layouts, images and an intelligent use of
CSS media queries.“
-bit.ly/m3ap1L
Where we are
Where we are
5,210,000 - June 2012
Where we are
46,610,000 - June 2013
Where we are
Where we are
Where we are
Where we are
Where we are
Where we are
Where we are
Where we are
Where we are
Where we are
7 8
(Far from) Browser Support
Kill these agent(s)
XWhere we are
Workflow
Philosophy of
breakpoints
Workflow > Philosophy of breakpoints
Jeremy Keith
“I don’t think it’s desirable to have a “standard”
handful of screen widths, any more than it’s
desirable to have a single rendering engine in
every browser“
-bit.ly/IyLnvL
Workflow > Philosophy of breakpoints
Stephen Hay
“We do have to start somewhere“
-bit.ly/1aZVILN
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 > SASS
Mixins
@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 > SASS
Nesting
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
Workflow > Zen Grids
<div class="container">
<article class="content">
The main content. We like semantic HTML ordering.
</article>
<aside class="aside1">
An aside.
</aside>
<aside class="aside2">
Another aside.
</aside>
<footer class="footer1">
A footer.
</footer>
<footer class="footer2">
Another footer.
</footer>
</div>
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 > Media
img{width:auto; */ IE8 and below */max-width: 100%;height:auto; */ if you specify image width & height in your HTML */}
-bit.ly/nid1yz
Workflow > Media
Chris Coyer & Paravel: FitVid.js
Workflow > Media
Almost there...
-bit.ly/yvfcXm
Workflow > Responsive Tables
<div data-picture data-alt="Look ma, many images!">
<div data-src="small.jpg"></div>
<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
<div data-src="large.jpg" data-media="(min-width: 800px)"></div>
<div data-src="largeX2.jpg" data-media="(min-width: 1000px) and (min-
device-pixel-ratio: 2.0)"></div>
</div>
Scott Jehl: picturefill.js
Responsive Typography
-bit.ly/ZCE2nh -Photo by Wilson Miner
Workflow > Responsive Typography
100% is NOT big
Workflow > Responsive Typography
html {
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
Responsive Navigation
-bit.ly/MSO7oL
Workflow > Responsive Navigation
>1024px
<1024px
-bit.ly/MSO7oL
Workflow > Responsive Navigation
Jason Weaver: flexnav.js
<div class="menu-button">Navigation</div>
<nav role="navigation">
<ul data-breakpoint="1024" class="flexnav">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</nav>
Responsive Tables
Workflow > Responsive Tables
/* Attach the Table CSS and Javascript */<link rel="stylesheet" href="responsive-tables.css"><script src="stylesheet" href="responsive-tables.js"</script>.........<table class=”responsive”> <tr>...
ZURB: responsive-tables.js
Workflow > Responsive Tables
Workflow
- Philosophy of breakpoints
- SASS
- Zen Grids
- Media (images & video)
- Responsive Typography
- Navigation
- Tables
Yiannis Konstantakopoulos
porcupinecolors.com
twitter.com/yiannis_k
Recommended
![Responsive Design Fundamentals [Read-Only] - … Design Fundame… · Responsive Design Fundamentals Carolyn Yon, PMI-ACP Development Manager ... Responsive Design • web design](https://img.pdfslide.us/doc/110x75/5b7c060b7f8b9adb4c8df8c4/responsive-design-fundamentals-read-only-design-fundame-responsive-design.jpg)
