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

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