Slide 1
Slide 1 text
R e s p o n s i v e
Web Design
A BUZZ Word
IS NOT
Slide 2
Slide 2 text
Lima you said? No, NIMA!
Neither Nemo!
Frontend Web Engineer
@Nima_Izadi
Slide 3
Slide 3 text
On The Rails Again
Slide 4
Slide 4 text
Responsive Web Design ?
“Responsive web design [...] is an approach to web design in
which a site is crafted 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 desktop computer monitors to mobile phones)
Wikipedia
Slide 5
Slide 5 text
Don’t be lost
Even this
fridge
has a
browser
Slide 6
Slide 6 text
ResponsiveMuseum.com
Idea from Julien Dorra & Geoffrey Dorne
Because their websites sucks
Slide 7
Slide 7 text
National Museum of Natural History
Slide 8
Slide 8 text
Centre Pompidou
Slide 9
Slide 9 text
The Louvre
Slide 10
Slide 10 text
Trello, the way forward
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
HTML5ROCKS
Slide 14
Slide 14 text
HTML5ROCKS
Slide 15
Slide 15 text
HTML5ROCKS
Slide 16
Slide 16 text
HTML5ROCKS
Slide 17
Slide 17 text
How to do it?
Slide 18
Slide 18 text
Media Queries
“A media query consists of a media type and at least one
expression that limits the style sheets' scope by using media
features, such as width, height, and color. Added in CSS3,
media queries let the presentation of content be tailored to a
specific range of output devices without having to change
the content itself.
Mozilla Developer Network
Slide 19
Slide 19 text
Media Queries & SASS
@mixin iphone {
@media only screen and (max-width: 480px) {
@content;
}
}
@include iphone {
body { color: red }
}
Slide 20
Slide 20 text
NIMA IZADI
@Nima_Izadi
OnTheRailsAgain.com/Nima
SpeakerDeck.com/nim1989