The document discusses how designers can start learning basic coding skills by doing design sign-offs directly in browsers using HTML and CSS. It suggests this approach will force designers to learn arguments, HTML, CSS, and possibly some JavaScript. Doing sign-offs this way shows clients the real browser experience and allows designers to take advantage of CSS features like responsive design. CSS frameworks and preprocessors can help but designers should learn real CSS first before using them.

2. Designers Shouldn’t Code

3. Designers Shouldn’t Code
Hyper Island 27th of Nov 2013

7. But first a quick(-ish) answer to:
Who is this guy?

9. Mathias Hellquist
Creative Technology Director

10. Mathias Hellquist
Freelance Creative Technology Director

11. ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director
Mathias Hellquist
Background:

12. ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director
Mathias Hellquist
Halo
ge
n
Background:Active online (professionally)
Pro
since -93, working in several
fer
re
o web agencies in Stockholm, Hamburg and
Da
a
I-D Me d i
London (where I lived 11 years, 1999-2010)
Projecto
r
lk E
Catwa
do

13. ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director
Mathias Hellquist
Halo
ge
n
Background:Active online (professionally)
Pro
since -93, working in several
fer
re
o web agencies in Stockholm, Hamburg and
Da
a
I-D Me d i
London (where I lived 11 years, 1999-2010)
Projecto
r
lk E
Catwa
do
In London I worked with solutions and
strategy for clients like Apple, Microsoft,
SonyEricsson, Unilever, Barclays, RBS etc.
Mem
ber o
co m
f
pany
boar
d
s
than 30 project
More
r
UK Public Secto
for the

14. ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director
Mathias Hellquist
Halo
ge
n
Background:Active online (professionally)
Pro
since -93, working in several
fer
re
o web agencies in Stockholm, Hamburg and
Da
a
I-D Me d i
London (where I lived 11 years, 1999-2010)
Projecto
r
lk E
Catwa
do
Ag e
ncy
Of
The
Year
4 ti
mes
os t
m
on
l
ve w
Ha
ona
nati
nter
i
s at
d
war
a
e
onc
ea s t
l
In London I worked with solutions and
strategy for clients like Apple, Microsoft,
SonyEricsson, Unilever, Barclays, RBS etc.
Two of the projects I’ve worked on were
judged Top10 Campaigns Of The Decade.
Mem
ber o
co m
f
pany
boar
d
s
than 30 project
More
r
UK Public Secto
for the

15. ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director
Mathias Hellquist
Halo
ge
n
Background:Active online (professionally)
Pro
since -93, working in several
fer
re
o web agencies in Stockholm, Hamburg and
Da
a
I-D Me d i
London (where I lived 11 years, 1999-2010)
Projecto
r
lk E
Catwa
do
Ag e
ncy
Of
The
Year
4 ti
mes
In London I worked with solutions and
strategy for clients like Apple, Microsoft,
SonyEricsson, Unilever, Barclays, RBS etc.
Two of the projects I’ve worked on were
judged Top10 Campaigns Of The Decade.
os t
m
on
l Those were for Mini Cooper and Axe/Lynx.
e w
Hav
iona
rnat
Mem
inte
at
ber o
s
ds
r
co m
f
than 30 project
More
awa
pany
e
r
onc
boar
t
UK Public Secto
d
for the
leas

16. Mathias Hellquist
Freelance Creative Technology Director
Background:

17. Mathias Hellquist
Freelance Creative Technology Director
Background:

18. Mathias Hellquist
Freelance Creative Technology Director
Background: Back in Sweden I worked for
Tieto 3 years and later for Society46

19. Mathias Hellquist
Freelance Creative Technology Director
Background: Back in Sweden I worked for
Tieto 3 years and later for Society46
At Tieto I was running a department
called Service Design & User Experience
Clients like SVT, Entercard, Fortum etc

20. Mathias Hellquist
Freelance Creative Technology Director
Background: Back in Sweden I worked for
Tieto 3 years and later for Society46
At Tieto I was running a department
called Service Design & User Experience
Clients like SVT, Entercard, Fortum etc
At Society46 we worked with clients like
Duracell, Red Bull and Pepsi

21. Mathias Hellquist
Freelance Creative Technology Director
Background: Back in Sweden I worked for
Tieto 3 years and later for Society46
At Tieto I was running a department
called Service Design & User Experience
Clients like SVT, Entercard, Fortum etc
At Society46 we worked with clients like
Duracell, Red Bull and Pepsi
Loves:

22. Mathias Hellquist
Freelance Creative Technology Director
Dr
aw
in
g
Background: Back in Sweden I worked for
Tieto 3 years and later for Society46
on
s w M
At Tieto I was running a department
S
Ha
kcalled Service Design & User Experience
oc
R
Clients like SVT, Entercard, Fortum etc
Deat
h Me
tal At Society46 we worked with clients like
Duracell, Red Bull and Pepsi
rs
ita
u
Loves: Technology, amazing end user experiences,
G
Social Media (used right), Accessibility,
Photog
rap hy
API’s, Open Source and visionary thinking.
My family
Fo
o
d
G
am
ng
i
RP
G
’s

24. Designers Shouldn’t Code

27. Excuse me! Define “Code” please…

30. How to eat an elephant

31. How to eat an elephant
one bite at the time

32. How to eat an elephant
one bite at the time

33. How to eat an elephant
one bite at the time
No one knows ALL that stuff!

34. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
Start with what is close to you

35. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
Start with what is close to you
Having an understanding of and
knowing it isn’t the same thing

36. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
Start with what is close to you
Having an understanding of and
knowing it isn’t the same thing
Remember:

37. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
Start with what is close to you
Having an understanding of and
knowing it isn’t the same thing
Remember:
“Good Design”
is soft and
subjective

38. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
Start with what is close to you
Having an understanding of and
knowing it isn’t the same thing
Remember:
“Good Design”
is soft and
subjective
Code is
hard and
binary

39. How to eat an elephant
one bite at the time
No one knows ALL that stuff!
Start with what is close to you
Having an understanding of and
knowing it isn’t the same thing
Remember:
“Good Design”
is soft and
subjective
Code is
hard and
binary
You CAN
design with
code!

40. How to eat an elephant
one bite at the time

41. How to eat an elephant
one bite at the time

42. How to eat an elephant
one bite at the time
Suggested Goal:

43. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser

44. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
This should mean it probably looks
different in the different browsers
on the different platforms…

45. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
This should mean it probably looks
different in the different browsers
on the different platforms…
…but as that fact is the reality
already today, it should be fine.

46. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
This should mean it probably looks
different in the different browsers
on the different platforms…
…but as that fact is the reality
already today, it should be fine.
Only now it will be sold in right!

47. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser

48. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser

49. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
It will force you to learn:

50. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
It will force you to learn:
ents
rgum
les a
Sa

51. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
It will force you to learn:
ents
rgum
les a
Sa
HTML

52. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
It will force you to learn:
ents
rgum
les a
Sa
HTML
CS S

53. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
It will force you to learn:
ents
HTML
rgum
CS S
es a
Sal
Possibly even a little JavaScript!

54. How to eat an elephant
one bite at the time
Suggested Goal:
Do the design sign-offs with
your clients in a browser
It will force you to learn:
ents
HTML
rgum
CS S
es a
Sal
Possibly even a little JavaScript!
The main thing we are after is CSS
…and HTML

56. Benefits with HTML/CSS sign-off

57. Benefits with HTML/CSS sign-off
“Graphic design tools are
bringing a knife to a gun fight”
- Andy Clarke

58. Benefits with HTML/CSS sign-off
“Graphic design tools are
bringing a knife to a gun fight”
- Andy Clarke
Percentage-based layouts
Media Queries
Native form element styling
Font rendering (and web fonts)
Flexible leading and measure
Browsers CSS capabilities
Pseudo-classes
CSS3 ligatures and swashes
CSS3 animations
CSS3 transitions

59. Benefits with HTML/CSS sign-off
“Graphic design tools are
bringing a knife to a gun fight”
- Andy Clarke
Photos
Percentage-based layouts
hop
where
Media Queries
the
live w
Native form element styling
hen
Font rendering (and web fonts)
Flexible leading and measure
Browsers CSS capabilities
Pseudo-classes
CSS3 ligatures and swashes
CSS3 animations
CSS3 transitions
probab
ly isn’t
pro du
ct w il
l
yo u go
live

60. Benefits with HTML/CSS sign-off
“Graphic design tools are
bringing a knife to a gun fight”
- Andy Clarke
Photos
Percentage-based layouts
hop
where
Media Queries
the
live w
Native form element styling
hen
probab
ly isn’t
pro du
ct w il
l
yo u go
live
Font rendering (and web fonts)
Flexible leading and measure
drive
Browsers CSS capabilities
o tes t ing.
ant t e buy
o u w efor
Y
Pseudo-classes
car b
a
CSS3 ligatures and swashes
thes
r y clo
ally t uying
CSS3 animations
usu
Yo u
ore b
n bef
CSS3 transitions
o

62. CSS Zen Garden

63. CSS Zen Garden

64. CSS Zen Garden

65. CSS Zen Garden

66. CSS Zen Garden

67. CSS Zen Garden

68. CSS Zen Garden

70. CSS + jQuery Plug-ins

71. CSS + jQuery Plug-ins

72. CSS + jQuery Plug-ins

73. CSS + jQuery Plug-ins

74. CSS + jQuery Plug-ins

75. CSS + jQuery Plug-ins

77. Trent Walton Using It All

78. Trent Walton Using It All

79. Trent Walton Using It All

80. Trent Walton Using It All

81. Trent Walton Using It All

82. Trent Walton Using It All

83. Trent Walton Using It All

84. Trent Walton Using It All

85. Trent Walton Using It All

87. CSS Frameworks

88. CSS Frameworks
Go ahead, use them (carefully)

89. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
Foundation
PureCSS

90. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
PureCSS

91. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
PureCSS

92. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
PureCSS
SMACSS

93. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
CSS Pre-Processors
PureCSS
SMACSS

94. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
PureCSS
SMACSS
CSS Pre-Processors
Basically CSS but handles variables

95. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
PureCSS
SMACSS
CSS Pre-Processors
Basically CSS but handles variables
You should learn “real” CSS first

96. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
PureCSS
SMACSS
CSS Pre-Processors
Basically CSS but handles variables
You should learn “real” CSS first
JavaScript & jQuery

97. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
PureCSS
SMACSS
CSS Pre-Processors
Basically CSS but handles variables
You should learn “real” CSS first
JavaScript & jQuery
jQuery is awesome. Include it.

98. CSS Frameworks
Go ahead, use them (carefully)
Bootstrap
LESS
Foundation
SASS
PureCSS
SMACSS
CSS Pre-Processors
Basically CSS but handles variables
You should learn “real” CSS first
JavaScript & jQuery
jQuery is awesome. Include it.
To use it fully you need
to learn more JavaScript

100. More Good links

101. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs

102. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally

103. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
CloudCannon
Dropbox based CMS (no database)

104. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
CloudCannon
Dropbox based CMS (no database)
Kirby
Excellent PHP based CMS (no database)

105. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
CloudCannon
Dropbox based CMS (no database)
Kirby
Excellent PHP based CMS (no database)
Hammer for Mac
Link HTML pages together as in a CMS (no database)

106. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
CloudCannon
Dropbox based CMS (no database)
Kirby
Excellent PHP based CMS (no database)
Hammer for Mac
Link HTML pages together as in a CMS (no database)
YQL
For the adventurous - anything on Internet as a database

107. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
CloudCannon
Dropbox based CMS (no database)
Kirby
Excellent PHP based CMS (no database)
Hammer for Mac
Link HTML pages together as in a CMS (no database)
YQL
For the adventurous - anything on Internet as a database
BugHerd
Visual bug tracking (for your browser based creation)

108. More Good links
CSS Zen Garden
1 HTML file, 100’s of CSS designs
GistBox
Save your code snippets centrally
CloudCannon
Dropbox based CMS (no database)
Kirby
Excellent PHP based CMS (no database)
Hammer for Mac
Link HTML pages together as in a CMS (no database)
YQL
For the adventurous - anything on Internet as a database
BugHerd
Visual bug tracking (for your browser based creation)
Marvel
Create prototypes from PSD’s via DropBox

110. More Good links

111. Fittext
More Good links
jQuery plug-in - Excellent for headlines

112. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines

113. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines
Lettering
jQuery plug-in - Excellent for radical typography

114. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines
Lettering
jQuery plug-in - Excellent for radical typography
KernJs
Bookmarklet - Plug-in to Lettering (above)

115. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines
Lettering
jQuery plug-in - Excellent for radical typography
KernJs
Bookmarklet - Plug-in to Lettering (above)
Responsive IMG
jQuery plug-in (needs PHP) - for resizing images

116. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines
Lettering
jQuery plug-in - Excellent for radical typography
KernJs
Bookmarklet - Plug-in to Lettering (above)
Responsive IMG
jQuery plug-in (needs PHP) - for resizing images
HTML5
Dictionary of all HTML5 elements and how to use them

117. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines
Lettering
jQuery plug-in - Excellent for radical typography
KernJs
Bookmarklet - Plug-in to Lettering (above)
Responsive IMG
jQuery plug-in (needs PHP) - for resizing images
HTML5
Dictionary of all HTML5 elements and how to use them
Strut
Make HTML5/CSS3 Prezi like presentations

118. Fittext
More Good links
jQuery plug-in - Excellent for headlines
BigText
jQuery plug-in - Excellent for headlines
Lettering
jQuery plug-in - Excellent for radical typography
KernJs
Bookmarklet - Plug-in to Lettering (above)
Responsive IMG
jQuery plug-in (needs PHP) - for resizing images
HTML5
Dictionary of all HTML5 elements and how to use them
Strut
Make HTML5/CSS3 Prezi like presentations
Trent Waltons blog
Clever use of Lettering, Fittext and CSS. Good read too.

120. …but wait, there is more!

121. …but wait, there is more!
A List Apart
THE online magazine for web design/development

122. …but wait, there is more!
A List Apart
THE online magazine for web design/development
Zeldman
The man, the myth, the legend, the concept. ALA founder.

123. …but wait, there is more!
A List Apart
THE online magazine for web design/development
Zeldman
The man, the myth, the legend, the concept. ALA founder.
Sidebar
5 daily links of excellence for designers/developers

124. …but wait, there is more!
A List Apart
THE online magazine for web design/development
Zeldman
The man, the myth, the legend, the concept. ALA founder.
Sidebar
5 daily links of excellence for designers/developers
CSS Mac Plus
How-to on building a Mac Plus in CSS

126. Thank you!

127. Mathias Hellquist
Freelance Creative Technology Director
Email: mathias@imakethingswork.com
Twitter: @hellquist
About me: http:/
/about.me/hellquist

128. Mathias Hellquist
Freelance Creative Technology Director
Email: mathias@imakethingswork.com
Twitter: @hellquist
About me: http:/
/about.me/hellquist
Final Thought
I have yet to meet someone who
became less good at what they do
from gaining more knowledge.
!
The opposite I have seen many times though.
Try learning (at least) one new thing every day.