Mobile First

Development with CQ Made Easy



Bruce Lefebvre / @brucelefebvre

Mobile first != RWD

moto.oakley.com
* This website is best viewed in the First World
Mat Marquis
It’s called forking, and it’s a forking nightmare from a maintenance perspective.
Karen McGrane 

html.touch div {
    /* touch specific styles */
}

RWD

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design.
Ethan Marcotte
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design.
- Ethan Marcotte

Breakpoints


/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Your project:

bradfrost.github.io/this-is-responsive/

Demo

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design.
Ethan Marcotte
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design.
Ethan Marcotte

Picturefill

Picturefill

Picturefill

adapt.[0-10000].high.jpg

Demo

Client Libraries

Embrace the cascade.
Stephanie Rieger

Demo

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design.
Ethan Marcotte

Resources

(more)

(even more)

Everyone is now trying to return the web to it's inherently fluid state. And that's perfect.
Brad Frost

Thank you

@brucelefebvre


http://brucelefebvre.com/assets/cqcon-mobile-first/

https://github.com/blefebvre/cqcon-rwd-demo