HELLO,
CSSDAY

Pralie Dutzel

praliedutzel.com
@praliedutzel

Responsive web design has been around for

a while now.

RWD Article from A List Apart in 2010

It's been a great
six-ish years so far!

But we often try to cram our sites into these buckets...

Desktop

Mobile

Tablet

But RWD is more than that.

Smart Watches

Game Consoles

IoT Devices

Constantly Evolving Device Sizes

RWD isn't about fitting a website onto specific devices.

Stop thinking of it as "mobile" and "desktop"

Focus on building one fluid experience that works at any size.

Yes, I get it, but...

How do you make something responsive with so many potential points of failure?

Give your content the attention it needs by building mobile-first.

This applies to both designers and developers.

Designers:
Showcase your content for small screens and work your way up.

Developers:
Focus on writing semantic markup and set your base styles.

It takes a village...
to make a good responsive experience.

Teamwork makes the dream work

Media queries are the building blocks of RWD.

@media (min-width: 320px) { ... }


@media (min-width: 568px) { ... }


@media (min-width: 768px) { ... }


@media (min-width: 1024px) { ... }

Look familiar?

/* iPhone 5 portrait */
@media (min-width: 320px) { ... }

/* iPhone 5 landscape */
@media (min-width: 568px) { ... }

/* iPad portrait */
@media (min-width: 768px) { ... }

/* iPad landscape */
@media (min-width: 1024px) { ... }

How about now?

These are tied to specific devices, and they're not enough.

Photo by Brad Frost

Let your content dictate your breakpoints.

The "resize until it breaks" test

Start small and resize your browser...

...until your content or layout breaks...

...then add a breakpoint and adjust!

Repeat for happy little layouts

What about
device labs?

The downside:
lots and lots of breakpoints

Look for trends and adjust as needed.

/* Defined variable based on trends in common breakpoints */
@media screen and (min-width: $bp-md) { ... }

/* Custom breakpoint specific to its context */
@media screen and (min-width: 1140px) { ... }

My preferred approach

This will get better with container queries.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

<article class="media">
    <div class="media__figure">
        <img src="" alt="">
    </div>

    <div class="media__content">
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
</article>

.media {
    display: flex;
    flex-wrap: wrap; /* default is nowrap */
}

.media__figure {
    margin-right: 1em;
}

.media__content {
    flex: 1;
}

flex: 1

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Flexbox = Magic?

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

The little tweaks you make matter.

You don't need a framework to use a grid system.

.item {
    width: 100%;
}

@media (min-width: 40em) {
    width: 50%;
    float: left;
}

@media (min-width: 40em) {
    width: 50%;
    float: left;
}

<div class="row">
    <div class="col-md-6">...</div>
    <div class="col-md-6">...</div>
</div>

The Bootstrap Way

:nth-child(n)

@media (min-width: 40em) {
    .item:nth-child(2n+1) {
        clear: left;
    }
}

@media (min-width: 40em) {
    .item:nth-child(2n+1) {
        clear: left;
    }
}

@media (min-width: 40em) {
    .item:nth-child(2n+1) {
        clear: left;
    }
}

@media (min-width: 64em) {
    width: 33.333%;
}

@media (min-width: 64em) {
    width: 33.333%;
}

@media (min-width: 64em) {
    width: 33.333%;
}

@media (min-width: 40em) {
    .item:nth-child(2n+1) {
        clear: left;
    }
}

@media (min-width: 40em) {
    .item:nth-child(2n+1) {
        clear: left;
    }
}

@media (min-width: 40em) {
    .item:nth-child(2n+1) {
        clear: left;
    }
}

@media screen and (min-width: 40em) and (max-width: 64em) {
    .item:nth-child(2n+1) {
        clear: left;
    }
}

Reduce scope

@media (min-width: 64em) {
    .item:nth-child(3n+1) {
        clear: left;
    }
}

@media (min-width: 64em) {
    .item:nth-child(3n+1) {
        clear: left;
    }
}

@media (min-width: 64em) {
    .item:nth-child(3n+1) {
        clear: left;
    }
}

Continue for progressively larger displays to better make use of the space.

Media queries and :nth-child allow us to create robust grid systems.

Create Visual Hierarchies

.item {
    width: 33.333%;
}

.item {
    width: 33.333%;
}

.item {
    width: 33.333%;
}

.item {
    width: 33.333%;
}

.item {
    width: 33.333%;
}

.item {
    width: 33.333%;
}

.item:first-child {
    width: 100%;
}

.item {
    width: 33.333%;
}

.item {
    width: 33.333%;
}

.item {
    width: 33.333%;
}

:nth-child(1)
=
:first-child

.item:first-child {
    width: 100%;
}

.item:nth-child(n+2):nth-child(-n+3) {
    width: 50%;
}

.item:nth-child(n+2):nth-child(-n+3) {
    width: 50%;
}

.item {
    width: 33.333%;
}

.item {
    width: 33.333%;
}

.item {
    width: 33.333%;
}

:nth-child(n+2)

:nth-child(-n+3)

:nth-child(n+2)
:nth-child(-n+3)

Fill Remaining
Grid Space

.item {
    width: 33.333%;
}

.item {
    width: 33.333%;
}

.item {
    width: 33.333%;
}

.item {
    width: 33.333%;
}

.item:last-child:nth-child(3n+2) {
    width: 50%;
}

.item:last-child:nth-child(3n+1) {
    width: 100%;
}

:nth-child can be a little confusing
at first...

css-tricks.com/useful-nth-child-recipies

nth-test.com

Leverage existing tools to make better responsive experiences.

Further enhance with flexbox,
grid layout, and
container queries.

RWD covers more than screens and devices

Print Styles

Screen Readers

Future Tech

I know.
It's a lot to consider...

Building responsive experiences
isn't easy.

But with the right tools and some dedication...

We can all work towards building better experiences on the web overall.

THANK YOU

bit.ly/cssday-rwd
@praliedutzel