How to implement responsive design and designing for mobile first into your workflow.

1. Responsive Design
& Mobile First
@lukebrooker

2. There is a
new movement
on the web

3. We have become
comfortable

4. We assume everything
can be served on a
960px wide canvas

5. We are not
print designers...

6. We are
Web Designers!

7. “Today, anything that’s fixed and unresponsive isn’t
web design, it’s something else. If you don’t embrace
the inherent fluidity of the web, you’re not a web
designer, you’re something else.
Web design is responsive design, Responsive Web
Design is web design, done right.”
Andy Clarke

8. We need to move from
prescribed design to
responsive design.

9. The Stats

10. The growth of the
mobile web has out
paced the desktop web
8x

11. Smartphone sales
have surpassed
desktop sales

12. 1 in 5
use the mobile Internet
everyday

13. The average time spent
a day on smartphones
is more than
30mins

14. In the next 4 years
mobile Internet usage
will increase
by a factor of 26

15. But...

16. Responsive design is
not mobile design

17. About 87,000 iPads
are sold a day

18. Add to this - 170,000
iPhones bought a day
and 300,000
android devices
activated a day

19. That’s557,000
new portable devices
a day

20. We have more
screens to design for
than ever
320
X 768 1280
480 X X
1024 800 1920
X
1200

21. We need to
rethink

22. Responsive Design
is flexible device
independent design for
the web

23. OR...
A flexible grid (with flexible images)
that incorporates media queries to create
a responsive, adaptive layout.
Ethan Marcotte

24. 1. Flexible Grids

25. 1. Flexible Grids
Fonts
body {
font-size: 100%;
}

26. 1. Flexible Grids
Fonts
h2 {
font-size: 28px;
}
p {
font-size: 14px;
}

27. 1. Flexible Grids
Fonts... Becomes
h2 {
font-size: 1.75em; /* 28px/16px */
}
p {
font-size: .875em; /* 14px/16px */
}

28. 1. Flexible Grids
Layout
section {
width: 960px;
}

29. 1. Flexible Grids
Layout... Becomes
section {
max-width: 960px;
}

30. 1. Flexible Grids
Layout
figure {
float: left;
width: 300px;
margin: 0 10px;
}

31. 1. Flexible Grids
Layout... Becomes
figure {
float: left;
width: 31.25%; /* 300px / 960px */
margin: 0 1.0416667;
}

32. 2. Flexible Images

33. 2. Flexible Images
img {
}

34. 2. Flexible Images
img {
max-width: 100%;
}

35. 2. Flexible Images
img,
video,
object {
max-width: 100%;
}

36. 2. Flexible Images
Issue #1: IE6 Bug
img,
video,
object {
width: 100%;
}

37. 2. Flexible Images
Issue #2: Windows Image Resizing
Ethan Marcottes Fix
http://unstoppablerobotninja.com/entry/fluid-images

38. 2. Flexible Images
Issue #3: Bandwidth
Filament Fix
http://github.com/filamentgroup/responsive-images

39. 3. Media Queries

40. 3. Media Queries
@media screen and (max-width:
320px;) {
...
}
@media screen and (min-width:
800px;) {
...
}

41. 3. Media Queries
Issue #1: Browser Compatability
No IE 8,7,6
No Safari 2
No Firefox 1,2
So..
http://code.google.com/p/css3-mediaqueries-js

42. 3. Media Queries
Issue #2: Mobile Resizing
<meta name=”viewport”
content”width=device-width:
initial-scale=1.0”>

43. After all this our site will
adapt to different
sizes

48. So where does
mobile first
come in?

49. What is great about
mobile websites?

50. The
content
is in your face

53. What is
Mobile First?

54. Designing your site for
mobile...
first.
yep thats it.

55. Really it is
content first

56. Reasons to design for
mobile first

57. 1. Growth Opportunity
2. Constraints Focus
3. Capabilities Innovation

58. 1. Growth Opportunity
Everyone is on mobile

59. 2. Constraints Focus

60. 2. Constraints Focus
"Design is the process of gradually applying
constraints until an elegant solution remains"

61. 2. Constraints Focus
• Screen Size - 320 x 480

62. 2. Constraints Focus
• Screen Size - 320 x 480
• No Hover

63. 2. Constraints Focus
• Screen Size - 320 x 480
• No Hover
• Speed

64. 2. Constraints Focus
• Screen Size - 320 x 480
• No Hover
• Speed
• Context

65. 3. Capabilities Innovation

66. 3. Capabilities Innovation
• Touch

67. 3. Capabilities Innovation
• Touch
• Location

68. 3. Capabilities Innovation
• Touch
• Location
• Orientation

69. 3. Capabilities Innovation
• Touch
• Location
• Orientation
• Voice

70. 3. Capabilities Innovation
• Touch
• Location
• Orientation
• Voice
• And more

71. Implementing it

72. It's not your standard
workflow

73. Create Flow
Use Storyboards

74. Design
in the browser

75. Iterate

76. Frameworks
320 and Up - Andy Clarke
http://stuffandnonsense.co.uk/projects/320andup/

77. Examples
http://mediaqueri.es/
http://yiibu.com/
http://hicksdesign.co.uk/
http://brightondigitalfestival.co.uk/
http://thinkvitamin.com/

78. Thank You
@lukebrooker