The future of responsive web design
Nikos Zinas
The present
Responsive Web Design
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).
A bit of history...
Cameron Adams - Resolution dependent layout
2004
Ethan Marcotte (A List Apart) - Responsive web design
2010
Fluid grids
Flexible images
Media queries
The future
Element Queries
Element query is the method of adapting an element's styling, based on the size of its container and not the size of the viewport
Conceptual example
.profile .avatar {
float: left;
width: 180px;
}
.profile ( max-width: 320px ) .avatar {
display: block;
float: none;
width: auto;
}
Don't get too excited...
Element queries do not exist
Circular dependency
.container {
display: inline-block;
}
.container .block {
width: 200px;
}
.container ( min-width: 150px ) .block {
width: 100px;
}
Can I do anything today?
eq.js
.profile .avatar {
float: left;
width: 180px;
}
.profile[data-eq-state$="small"] .avatar {
display: block;
float: none;
width: auto;
}
<div class="profile" data-eq-pts="small: 300, medium: 600, large: 900">
<div class="avatar"></div>
</div>
css-element-queries
.profile .avatar {
float: left;
width: 180px;
}
.profile[max-width="200px"] .avatar {
display: block;
float: none;
width: auto;
}
elementQuery
.profile .avatar {
float: left;
width: 180px;
}
.profile[max-width~="200px"] .avatar {
display: block;
float: none;
width: auto;
}
boomqueries
.profile .avatar {
display: block;
}
.profile--large .avatar {
float: left;
width: 180px;
}
boomQueries.add('.profile', [
[180, 'profile--large']
]);
Resources
Tab Atkins - 2014 State of Element Queries
Ian Storm Taylor - Media Queries are a Hack
Think responsively
Thank you
Nikos Zinas - @nzinas
The future of responsive web design
By Nikos Zinas
The future of responsive web design
- 1,217