Slides from my talk at Front End Conference, Oslo 2011

1. Iopsy
Turvy
Design Adapting your design process
for adaptive design
@richquick
Background texture thanks to ~Essence of a Dream~
http://www.flickr.com/photos/30886604@N04/3564381283/sizes/l/in/photostream/

2. Iopsy
Turvy
Design Adapting your design process
for adaptive design
Background texture thanks to ~Essence of a Dream~
http://www.flickr.com/photos/30886604@N04/3564381283/sizes/l/in/photostream/

3. Who am I?

4. Rich Quick

5. Rich Quick
(before you ask)

6. Yes
(it is my real name)

7. Here’s my passport to prove it

8. Web
Designer

9. Front end
Developer

10. 12
Years

11. Just started working for

15. Very traditional site

16. Very traditional site
Designed for desktop

17. Very traditional site
Designed for desktop
Traditional design process

18. Very traditional site
Designed for desktop
Traditional design process
Looks “so so”

20. The
Traditional
Design
Process

21. The

22. The Traditional Design Process

23. The Traditional Design Process
1
Big
Fat
Cheque
http://www.flickr.com/photos/nznationalparty/6078616366/sizes/z/in/photostream/

24. 2
Have a latte
http://www.designfloat.com/blog/2010/07/21/latte-art-charming-coffee-designs-part-ii/

27. s

28. Do some wireframes 3

29. Do some wireframes 3 (maybe)
http://www.flickr.com/photos/rohdesign/3307873748/sizes/m/in/photostream/

30. Do some wireframes 3

31. Do some wireframes 3

32. Do some wireframes 3

33. Do some wireframes 3

35. 4
Give to the
(ultra cool)
designer

36. Who does some Photoshop magic

37. 5
Then the client / your boss sees it

38. 5
Then the client / your boss sees it
and loves it 1 st
TIME

39. 5
Then the client / your boss sees it
and loves it 91st
TIME

40. 6
Next, the design gets handed over to this guy

41. 6
The geek* / techie* / HTML monkey*
* delete as applicable

42. He* does a load of geekytechienerdy stuff
* It a he, obviously.

43. 7
Big
Fat
Final
Cheque

44. 1 Big fat deposit cheque
2 Have a latte
3 Do some wireframes
4 Photoshop comps
5 Sign off
6 HTML Monkey does voodoo
7 Big fat final cheque

45. 1 Big fat deposit cheque
2 Have a latte
3 Do some wireframes
4 Photoshop comps
5 Sign off
6 HTML Monkey does voodoo
7 Big fat final cheque

47. Traditional
Print
Process

49. Big fat deposit cheque 1
Have a latte cappuccino 2
Do some wireframes 3
Photoshop Indesign comps 4
Sign off 5
HTML Monkey Printer does voodoo 6
Big fat final cheque 7

50. 1 2 3 5
4 6 7

51. WHY?

52. CHAN
GE

53. DONʼT MAKE ME
CHANGE

54. THE MORE YOU
ASK PEOPLE TO
CHANGE

55. THE LESS OF THEM
WILL

56. var ageOfWebDesignProcess; // in years
if (webDesignProcess == printDesignProcess) {
echo(‘wtf!’);
ageOfWebDesignProcess = 572;
}

57. PEOPLE HATE CHANGE
THAT MUCH }

58. Web Designers

59. Get asked to change
more than most

60. First I learnt tables.. then that was wrong
Then I learnt Flash.. then that wasnʼt cool
Then I learnt CSS..
Then it was accessibility..
Then it was XHTML..
Then it was HTML5..
Now what?!!

61. Adaptive Web Design*
* or responsive, depending on what book you read

63. Aww crap!

64. can I be
bothered?

65. some good
news

66. some good
news

67. itʼs really
easy

68. there’s just
1 thing
you need to learn

69. Media Queries
@media screen and (min-width:1025px) {
/* your CSS here */
}

70. That’s it (pretty much)

71. At least from a
technical point of view

72. From a
technical point of view
Learn 1 line of code
and you know how to do
adaptive design

73. From a
technical point of view
Learn 1 line of code
and you know how to do
adaptive design

74. From a
design point of view
It doesnʼt need to be
much harder

75. There’s no wrong or right
way to do adaptive design
But hereʼs how I do it...

76. Remember the cutlery
in Titanic?

77. No?

78. Just start from the outside,
Jack, and work in

79. Just start from the outside,
Jack, and work in

80. Start in
the “traditional” way

81. Cheque,
latte,
wireframes,
Photoshop

82. Then ask “what if”?

83. “What if it was
a bit thinner?”

84. “What if it was
thinner still?”

86. When youʼre designing
Start from the outside
and work in

87. When youʼre designing
Start from the outside
and work in

89. When coding
Start from the inside
and work out

90. It’s way easier
and there’s a hidden
IE gift

91. Code
thinnest
first

92. Then
code
outwards

93. Gracefully degrade your design
Progressively enhance your code

94.  A word about IE

95. IE <8 doesn’t support @media
Use conditional comments
or javascript (modernizr.js, css3-media-queries.js)
http://code.google.com/p/css3-mediaqueries-js/

96. Learn to let go
Safari, Chrome, Firefox,
Opera, your fridge
IE

97. The IE
Gift

98. jQuery

99. Books
Adaptive Web Design
Aaron Gustafson
Responsive Web Design
Ethan Marcote

100. Thanks
Rich Quick
@richquick
rich@richquick.tv