The future of responsive web design

Nikos Zinas

@nzinas

http://github.com/zinas

www.prevent-default.com

Amsterdam HTML / CSS meetup

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...

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...

Circular dependency

.container {
    display: inline-block;
}

.container .block {
    width: 200px;
}

.container ( min-width: 150px ) .block {
    width: 100px;
}

Can I do anything today?

eq.js

https://github.com/Snugug/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

https://github.com/marcj/css-element-queries

.profile .avatar {
    float: left;
    width: 180px;
}

.profile[max-width="200px"] .avatar {
    display: block;
    float: none;
    width: auto;
}

elementQuery

https://github.com/tysonmatanich/elementQuery

.profile .avatar {
    float: left;
    width: 180px;
}

.profile[max-width~="200px"] .avatar {
    display: block;
    float: none;
    width: auto;
}

boomqueries

https://github.com/BoomTownROI/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

RICG - Use Cases and Requirements for “Element Queries”

Ian Storm Taylor - Media Queries are a Hack

Think responsively

Thank you

Nikos Zinas - @nzinas