Responsive web design
Mobile matters
Global traffic share from mobile devices
18 %

12 %

6 %

0 %
2008 Q4

gs.statcounter.com

2010 Q1

2011 Q2

2012 Q3

2013 Q...
pureawesomeness.com
m.pureawesomeness.com
77% of mobile Google searches
take place at home or work

Google/Nielsen Life360 Mobile Search Moments Q4 2012
Whether you like it or not, if you're a
web designer, you're also a mobile
web designer.
Brad Frost
Responsive web design
Adaptive web design
Best practice web design
Web design
UX of the modern web
Learning by doing
Introducing multiple content types
further down the page requires users to
go on a scavenger hunt to find them.
Brad Frost
Retrofitting
Mobile first
Your website is this wide
Less is never less enough
Where am I and
where can I go?
What can I do on this
page?
What will I get if I
scroll?
Where am I and
where can I go?
What can I do on this
page?
What will I get if I
scroll?
Where am I and
where can I go?
What can I do on this
page?
What will I get if I
scroll?
Lists

Back in time

Immersion
Performance by design
If your website is 15MB it’s not HTML5,
it’s stupid.
Christian Heilmann
WiFi
3G
Building the damn thing
UX designer

Visual designer

Developer
Visual designer

UX designer

Developer
HTML + CSS
Click
Tap
44px
delay: 300ms
fastclick.js
Images
PNG
JPEG
Retina
Quality 80
29 kB
325x225 px

Low
Hi

650x450 px
27 kB
Quality 30
PNG
SVG
Scalable Vector Graphics
PNG
SVG
K ittyshop
3 kB

PNG
SVG
1 kB

Kittysh op
Tables
Tables are a hack
body {
font-size: 16px;
}
I think there is a profound and enduring beauty in
simplicity. In clarity. In efficiency. True simplicity is derived
from so...
Flat is better
.nifty-box {
border-radius: 1em;
box-shadow: 0 0 1em black;
background: url(‘pattern.png’);
}
Click me
Click me
Edge Relflow
768px

1280px
320px
568px
Deviceagnostic
Start with the small screen first, then
expand until it looks like shit. Time for a
breakpoint!
Stephen Hay
Your content defines
your breakpoints
Test on real devices
Test on really old devices
Edge Inspect
Respect the browser
Don’t do stupid shit
Email
claus.stadel@gmail.com
Email
Email
Mobile first
Performance by design
Bye bye Photoshop. Hello HTML + CSS.
44x44 px links with fastclick.js
Replace PNGs with ...
Have fun and make something cool
claus.stadel@gmail.com
@clausstadel
clausstadel.com
Responsive web design - or just web design?
Responsive web design - or just web design?
Responsive web design - or just web design?
Responsive web design - or just web design?
Responsive web design - or just web design?
Responsive web design - or just web design?
Responsive web design - or just web design?
Responsive web design - or just web design?
Responsive web design - or just web design?
Responsive web design - or just web design?
Responsive web design - or just web design?
Responsive web design - or just web design?
Responsive web design - or just web design?
Upcoming SlideShare
Loading in …5
×

Responsive web design - or just web design?

2,145 views
2,041 views

Published on

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.

Published in: Design, Technology, Business

Responsive web design - or just web design?

  1. 1. Responsive web design
  2. 2. Mobile matters
  3. 3. Global traffic share from mobile devices 18 % 12 % 6 % 0 % 2008 Q4 gs.statcounter.com 2010 Q1 2011 Q2 2012 Q3 2013 Q3
  4. 4. pureawesomeness.com
  5. 5. m.pureawesomeness.com
  6. 6. 77% of mobile Google searches take place at home or work Google/Nielsen Life360 Mobile Search Moments Q4 2012
  7. 7. Whether you like it or not, if you're a web designer, you're also a mobile web designer. Brad Frost
  8. 8. Responsive web design
  9. 9. Adaptive web design
  10. 10. Best practice web design
  11. 11. Web design
  12. 12. UX of the modern web
  13. 13. Learning by doing
  14. 14. Introducing multiple content types further down the page requires users to go on a scavenger hunt to find them. Brad Frost
  15. 15. Retrofitting
  16. 16. Mobile first
  17. 17. Your website is this wide
  18. 18. Less is never less enough
  19. 19. Where am I and where can I go? What can I do on this page? What will I get if I scroll?
  20. 20. Where am I and where can I go? What can I do on this page? What will I get if I scroll?
  21. 21. Where am I and where can I go? What can I do on this page? What will I get if I scroll?
  22. 22. Lists Back in time Immersion
  23. 23. Performance by design
  24. 24. If your website is 15MB it’s not HTML5, it’s stupid. Christian Heilmann
  25. 25. WiFi
  26. 26. 3G
  27. 27. Building the damn thing
  28. 28. UX designer Visual designer Developer
  29. 29. Visual designer UX designer Developer
  30. 30. HTML + CSS
  31. 31. Click
  32. 32. Tap
  33. 33. 44px
  34. 34. delay: 300ms
  35. 35. fastclick.js
  36. 36. Images
  37. 37. PNG
  38. 38. JPEG
  39. 39. Retina
  40. 40. Quality 80 29 kB 325x225 px Low Hi 650x450 px 27 kB Quality 30
  41. 41. PNG
  42. 42. SVG
  43. 43. Scalable Vector Graphics
  44. 44. PNG SVG K ittyshop
  45. 45. 3 kB PNG SVG 1 kB Kittysh op
  46. 46. Tables
  47. 47. Tables are a hack
  48. 48. body { font-size: 16px; }
  49. 49. 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.
  50. 50. Flat is better
  51. 51. .nifty-box { border-radius: 1em; box-shadow: 0 0 1em black; background: url(‘pattern.png’); }
  52. 52. Click me
  53. 53. Click me
  54. 54. Edge Relflow
  55. 55. 768px 1280px 320px 568px
  56. 56. Deviceagnostic
  57. 57. Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! Stephen Hay
  58. 58. Your content defines your breakpoints
  59. 59. Test on real devices
  60. 60. Test on really old devices
  61. 61. Edge Inspect
  62. 62. Respect the browser Don’t do stupid shit
  63. 63. Email
  64. 64. claus.stadel@gmail.com
  65. 65. Email
  66. 66. Email
  67. 67. Mobile first Performance by design Bye bye Photoshop. Hello HTML + CSS. 44x44 px links with fastclick.js Replace PNGs with JPEGs and SVGs Content based breakpoints Test on real devices
  68. 68. Have fun and make something cool
  69. 69. claus.stadel@gmail.com @clausstadel clausstadel.com

×