responsive web design - or just web design?
Post on 17-Oct-2014
910 views
DESCRIPTION
My talk from Digital Marketing 2013 (http://dm13.dk). Making a fluid layout with Responsive web design is just a small part of creating a design, that works and looks stunningly across all devices. Good, modern web design is about so much more. It's about getting rid of clutter and unnecessary content, about optimized images for better performance, about changing the way you work and the tools you use, and a lot more.TRANSCRIPT
![Page 1: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/1.jpg)
Responsive web design
![Page 2: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/2.jpg)
![Page 3: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/3.jpg)
![Page 4: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/4.jpg)
![Page 5: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/5.jpg)
![Page 6: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/6.jpg)
Mobile matters
![Page 7: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/7.jpg)
Global traffic share from mobile devices
0 %
6 %
12 %
18 %
2008 Q4 2010 Q1 2011 Q2 2012 Q3 2013 Q3
gs.statcounter.com
![Page 8: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/8.jpg)
pureawesomeness.com
![Page 9: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/9.jpg)
pureawesomeness.comm.
![Page 10: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/10.jpg)
![Page 11: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/11.jpg)
77% of mobile Google searches take place at home or work
Google/Nielsen Life360 Mobile Search Moments Q4 2012
![Page 12: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/12.jpg)
![Page 13: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/13.jpg)
![Page 14: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/14.jpg)
Whether you like it or not, if you're a web designer, you're also a mobile web designer.
Brad Frost
![Page 15: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/15.jpg)
![Page 16: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/16.jpg)
![Page 17: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/17.jpg)
![Page 18: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/18.jpg)
web designResponsive
![Page 19: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/19.jpg)
web designAdaptive
![Page 20: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/20.jpg)
web designBest practice
![Page 21: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/21.jpg)
Web design
![Page 22: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/22.jpg)
UX of the modern web
![Page 23: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/23.jpg)
Learning by doing
![Page 24: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/24.jpg)
Introducing multiple content types further down the page requires users to go on a scavenger hunt to find them.
Brad Frost
![Page 25: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/25.jpg)
Retrofitting
![Page 26: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/26.jpg)
Mobile first
![Page 27: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/27.jpg)
Your website is this wide
![Page 28: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/28.jpg)
Less is never less enough
![Page 29: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/29.jpg)
![Page 30: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/30.jpg)
Where am I and where can I go?
What can I do on this page?
What will I get if I scroll?
![Page 31: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/31.jpg)
Where am I and where can I go?
What can I do on this page?
What will I get if I scroll?
![Page 32: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/32.jpg)
Where am I and where can I go?
What can I do on this page?
What will I get if I scroll?
![Page 33: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/33.jpg)
Lists Back in time Immersion
![Page 34: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/34.jpg)
Performance by design
![Page 35: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/35.jpg)
If your website is 15MB it’s not HTML5, it’s stupid.
Christian Heilmann
![Page 36: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/36.jpg)
WiFi
![Page 37: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/37.jpg)
3G
![Page 38: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/38.jpg)
Building the damn thing
![Page 39: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/39.jpg)
UX designer Visual designer Developer
![Page 40: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/40.jpg)
UX designer
Visual designer
Developer
![Page 41: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/41.jpg)
![Page 42: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/42.jpg)
HTML + CSS
![Page 43: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/43.jpg)
Click
![Page 44: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/44.jpg)
Tap
![Page 45: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/45.jpg)
![Page 46: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/46.jpg)
44px
![Page 47: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/47.jpg)
delay: 300ms
![Page 48: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/48.jpg)
fastclick.js
![Page 49: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/49.jpg)
Images
![Page 50: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/50.jpg)
PNG
![Page 51: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/51.jpg)
JPEG
![Page 52: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/52.jpg)
Retina
![Page 53: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/53.jpg)
Low
Hi
325x225 px
650x450 px
29 kBQuality 80
Quality 3027 kB
![Page 54: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/54.jpg)
PNG
![Page 55: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/55.jpg)
SVG
![Page 56: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/56.jpg)
Scalable Vector Graphics
![Page 57: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/57.jpg)
Kittyshop
PNG
SVG
![Page 58: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/58.jpg)
Kittyshop
PNG
SVG
3 kB
1 kB
![Page 59: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/59.jpg)
Tables
![Page 60: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/60.jpg)
Tables are a hack
![Page 61: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/61.jpg)
body {font-size: 16px;
}
![Page 62: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/62.jpg)
I think there is a profound and enduring beauty in simplicity. In clarity. In efficiency. True simplicity is derived from so much more than just the absence of clutter and ornamentation. It’s about bringing order to complexity.
![Page 63: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/63.jpg)
Flat is better
![Page 64: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/64.jpg)
.nifty-box {border-radius: 1em;box-shadow: 0 0 1em black;background: url(‘pattern.png’);
}
![Page 65: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/65.jpg)
Click me
![Page 66: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/66.jpg)
Click me
![Page 67: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/67.jpg)
Edge Relflow
![Page 68: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/68.jpg)
320px
568px
768px
1280px
![Page 69: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/69.jpg)
Deviceagnostic
![Page 70: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/70.jpg)
Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!
Stephen Hay
![Page 71: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/71.jpg)
Your content defines your breakpoints
![Page 72: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/72.jpg)
Test on real devices
![Page 73: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/73.jpg)
Test on really old devices
![Page 74: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/74.jpg)
Edge Inspect
![Page 75: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/75.jpg)
Respect the browser Don’t do stupid shit
![Page 76: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/76.jpg)
![Page 78: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/78.jpg)
![Page 79: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/79.jpg)
![Page 80: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/80.jpg)
Mobile firstPerformance by designBye bye Photoshop. Hello HTML + CSS.44x44 px links with fastclick.jsReplace PNGs with JPEGs and SVGsContent based breakpointsTest on real devices
![Page 81: Responsive web design - or just web design?](https://reader034.vdocument.in/reader034/viewer/2022051311/5440e4bfb1af9ff34b8b4593/html5/thumbnails/81.jpg)
Have fun and make something cool