"Responsive web design: The good, the bad and the ugly" por @martuishere
description
Transcript of "Responsive web design: The good, the bad and the ugly" por @martuishere
![Page 1: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/1.jpg)
RESPONSIVEWEB DESIGN
Marta Armada@martuishere
#WebCatFeb 2012
![Page 2: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/2.jpg)
A N T EW D
barackobama.com
mediaqueri.es
![Page 3: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/3.jpg)
A N T EW DFLUID GRID
FLEXIBLE IMAGES
MEDIA QUERIESalistapart.com/articles/responsive-web-design
![Page 4: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/4.jpg)
![Page 5: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/5.jpg)
CODE ONCE
![Page 6: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/6.jpg)
CODE less
![Page 7: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/7.jpg)
C O N T E N TFIRST
ALWAYS
adactio.com/journal/4523
![Page 9: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/9.jpg)
![Page 10: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/10.jpg)
B R E A K I N GPOINTS
![Page 11: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/11.jpg)
1363px
1362px
![Page 12: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/12.jpg)
it can be boring*
![Page 13: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/13.jpg)
![Page 14: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/14.jpg)
I F Y O U A R E LAZY
*
![Page 15: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/15.jpg)
playdulla.com
gingerwhale.com
![Page 16: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/16.jpg)
OVERSIZEDASSETS
bit.ly/responsive-images
![Page 17: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/17.jpg)
JAVASCRIPTrwd-images.js
fitvids.js
respond.js
D EPENDENCIES
![Page 18: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/18.jpg)
swwweet.com/training
HARDIT CAN BE FUCKING
![Page 19: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/19.jpg)
![Page 20: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/20.jpg)
seo
sem&
bit.ly/google-mobile-sites
bit.ly/google-mobile-ads
![Page 21: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/21.jpg)
adsbit.ly/markboulton-responsive-ads
![Page 22: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/22.jpg)
CMS
![Page 23: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/23.jpg)
When you have to shoot,
SHOOT, don’t TALK.
![Page 24: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/24.jpg)
bit.ly/trend-shift
trendshift
IT’S NOT A
RWD IS A
![Page 25: "Responsive web design: The good, the bad and the ugly" por @martuishere](https://reader035.fdocuments.in/reader035/viewer/2022081404/5594ec471a28ab905d8b45f7/html5/thumbnails/25.jpg)
YEE HAW!Marta Armada@martuishere
#WebCatFeb 2012