SlideShare a Scribd company logo
Designers Shouldn’t Code
Designers Shouldn’t Code
Hyper Island 27th of Nov 2013
But first a quick(-ish) answer to:

Who is this guy?
Mathias Hellquist

Creative Technology Director
Mathias Hellquist

Freelance Creative Technology Director
ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director

Mathias Hellquist

Background:
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
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
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
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
Mathias Hellquist

Freelance Creative Technology Director
Background:
Mathias Hellquist

Freelance Creative Technology Director
Background:
Mathias Hellquist

Freelance Creative Technology Director
Background: Back in Sweden I worked for
Tieto 3 years and later for Society46
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
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
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:
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
Designers Shouldn’t Code
Excuse me! Define “Code” please…
How to eat an elephant
How to eat an elephant

one bite at the time
How to eat an elephant

one bite at the time
How to eat an elephant

one bite at the time

No one knows ALL that stuff!
How to eat an elephant

one bite at the time

No one knows ALL that stuff!
Start with what is close to you
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
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:
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
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
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!
How to eat an elephant

one bite at the time
How to eat an elephant

one bite at the time
How to eat an elephant

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

one bite at the time
Suggested Goal:

Do the design sign-offs with
your clients in a browser
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…
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.
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!
How to eat an elephant

one bite at the time
Suggested Goal:

Do the design sign-offs with
your clients in a browser
How to eat an elephant

one bite at the time
Suggested Goal:

Do the design sign-offs with
your clients in a browser
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:
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
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
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
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!
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
Benefits with HTML/CSS sign-off
Benefits with HTML/CSS sign-off
“Graphic design tools are
bringing a knife to a gun fight”
- Andy Clarke
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
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
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
CSS Zen Garden
CSS Zen Garden
CSS Zen Garden
CSS Zen Garden
CSS Zen Garden
CSS Zen Garden
CSS Zen Garden
CSS + jQuery Plug-ins
CSS + jQuery Plug-ins
CSS + jQuery Plug-ins
CSS + jQuery Plug-ins
CSS + jQuery Plug-ins
CSS + jQuery Plug-ins
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
Trent Walton Using It All
CSS Frameworks
CSS Frameworks

Go ahead, use them (carefully)
CSS Frameworks

Go ahead, use them (carefully)
Bootstrap

Foundation

PureCSS
CSS Frameworks

Go ahead, use them (carefully)
Bootstrap
LESS

Foundation

PureCSS
CSS Frameworks

Go ahead, use them (carefully)
Bootstrap
LESS

Foundation
SASS

PureCSS
CSS Frameworks

Go ahead, use them (carefully)
Bootstrap
LESS

Foundation
SASS

PureCSS
SMACSS
CSS Frameworks

Go ahead, use them (carefully)
Bootstrap
LESS

Foundation
SASS

CSS Pre-Processors

PureCSS
SMACSS
CSS Frameworks

Go ahead, use them (carefully)
Bootstrap
LESS

Foundation
SASS

PureCSS
SMACSS

CSS Pre-Processors
Basically CSS but handles variables
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
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
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.
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
More Good links
More Good links

CSS Zen Garden

1 HTML file, 100’s of CSS designs
More Good links

CSS Zen Garden

1 HTML file, 100’s of CSS designs

GistBox

Save your code snippets centrally
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)
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)
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)
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
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)
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
More Good links
Fittext

More Good links

jQuery plug-in - Excellent for headlines
Fittext

More Good links

jQuery plug-in - Excellent for headlines

BigText

jQuery plug-in - Excellent for headlines
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
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)
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
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
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
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.
…but wait, there is more!
…but wait, there is more!

A List Apart

THE online magazine for web design/development
…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.
…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
…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
Thank you!
Mathias Hellquist

Freelance Creative Technology Director
Email: mathias@imakethingswork.com
Twitter: @hellquist
About me: http:/
/about.me/hellquist
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.

More Related Content

Similar to Designers shouldn't code - The wrong answer to the right question

Touch Screens | The very expensive mistake
Touch Screens | The very expensive mistakeTouch Screens | The very expensive mistake
Touch Screens | The very expensive mistake
Casey Dubbs
 
Alissa Chan - Inclusive Design Presentation
Alissa Chan - Inclusive Design PresentationAlissa Chan - Inclusive Design Presentation
Alissa Chan - Inclusive Design Presentation
Alissa Chan
 
Cultivating Lean Startup Teams When People Don't Know What Lean Is
Cultivating Lean Startup Teams When People Don't Know What Lean IsCultivating Lean Startup Teams When People Don't Know What Lean Is
Cultivating Lean Startup Teams When People Don't Know What Lean Is
Emily Holmes
 
UX South Africa 2014 - Keynote
UX South Africa 2014 - KeynoteUX South Africa 2014 - Keynote
UX South Africa 2014 - Keynote
Phil Barrett
 
Design, the Importance of Research, and a Call to Arms
Design, the Importance of Research, and a Call to ArmsDesign, the Importance of Research, and a Call to Arms
Design, the Importance of Research, and a Call to Arms
DesignMap
 
Tools and Resources for Transition from Libraries to Wider Community Use Cent...
Tools and Resources for Transition from Libraries to Wider Community Use Cent...Tools and Resources for Transition from Libraries to Wider Community Use Cent...
Tools and Resources for Transition from Libraries to Wider Community Use Cent...
CILIP
 
Introduction to Design & Prototyping
Introduction to Design & PrototypingIntroduction to Design & Prototyping
Introduction to Design & Prototyping
Ryo Lu
 
Building a better web with free, open technologies
Building a better web with free, open technologiesBuilding a better web with free, open technologies
Building a better web with free, open technologies
Christian Heilmann
 
Future web developer, you are going to be tremendously valuable
Future web developer, you are going to be tremendously valuableFuture web developer, you are going to be tremendously valuable
Future web developer, you are going to be tremendously valuable
Polcode
 
HR DevFest - Web Design
HR DevFest - Web DesignHR DevFest - Web Design
HR DevFest - Web Design
Frances Coronel
 
Case Study OESL.pptx
Case Study OESL.pptxCase Study OESL.pptx
Case Study OESL.pptx
ssuserc6f5161
 
Goto Berlin - Migrating to Microservices (Fast Delivery)
Goto Berlin - Migrating to Microservices (Fast Delivery)Goto Berlin - Migrating to Microservices (Fast Delivery)
Goto Berlin - Migrating to Microservices (Fast Delivery)
Adrian Cockcroft
 
Irn bru pro forma
Irn bru pro formaIrn bru pro forma
Irn bru pro forma
Benjamin Fahey
 
Who is Listening, and Why? Audience, Purpose, & Presentation Skills
Who is Listening, and Why? Audience, Purpose, & Presentation SkillsWho is Listening, and Why? Audience, Purpose, & Presentation Skills
Who is Listening, and Why? Audience, Purpose, & Presentation Skills
Sarah Glova
 
6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website
Floown
 
Get your screen together - design skills for frontend people
Get your screen together - design skills for frontend peopleGet your screen together - design skills for frontend people
Get your screen together - design skills for frontend people
Sílvia Otto Sequeira
 
Solar
SolarSolar
Growing with the Open-Source Community
Growing with the Open-Source CommunityGrowing with the Open-Source Community
Growing with the Open-Source Community
Tomasz Urbaszek
 
Intro to the SF Design Community Resources
Intro to the SF Design Community ResourcesIntro to the SF Design Community Resources
Intro to the SF Design Community Resources
Huge
 
Irn bru pro forma
Irn bru pro formaIrn bru pro forma
Irn bru pro forma
Alexander Sullivan-Cree
 

Similar to Designers shouldn't code - The wrong answer to the right question (20)

Touch Screens | The very expensive mistake
Touch Screens | The very expensive mistakeTouch Screens | The very expensive mistake
Touch Screens | The very expensive mistake
 
Alissa Chan - Inclusive Design Presentation
Alissa Chan - Inclusive Design PresentationAlissa Chan - Inclusive Design Presentation
Alissa Chan - Inclusive Design Presentation
 
Cultivating Lean Startup Teams When People Don't Know What Lean Is
Cultivating Lean Startup Teams When People Don't Know What Lean IsCultivating Lean Startup Teams When People Don't Know What Lean Is
Cultivating Lean Startup Teams When People Don't Know What Lean Is
 
UX South Africa 2014 - Keynote
UX South Africa 2014 - KeynoteUX South Africa 2014 - Keynote
UX South Africa 2014 - Keynote
 
Design, the Importance of Research, and a Call to Arms
Design, the Importance of Research, and a Call to ArmsDesign, the Importance of Research, and a Call to Arms
Design, the Importance of Research, and a Call to Arms
 
Tools and Resources for Transition from Libraries to Wider Community Use Cent...
Tools and Resources for Transition from Libraries to Wider Community Use Cent...Tools and Resources for Transition from Libraries to Wider Community Use Cent...
Tools and Resources for Transition from Libraries to Wider Community Use Cent...
 
Introduction to Design & Prototyping
Introduction to Design & PrototypingIntroduction to Design & Prototyping
Introduction to Design & Prototyping
 
Building a better web with free, open technologies
Building a better web with free, open technologiesBuilding a better web with free, open technologies
Building a better web with free, open technologies
 
Future web developer, you are going to be tremendously valuable
Future web developer, you are going to be tremendously valuableFuture web developer, you are going to be tremendously valuable
Future web developer, you are going to be tremendously valuable
 
HR DevFest - Web Design
HR DevFest - Web DesignHR DevFest - Web Design
HR DevFest - Web Design
 
Case Study OESL.pptx
Case Study OESL.pptxCase Study OESL.pptx
Case Study OESL.pptx
 
Goto Berlin - Migrating to Microservices (Fast Delivery)
Goto Berlin - Migrating to Microservices (Fast Delivery)Goto Berlin - Migrating to Microservices (Fast Delivery)
Goto Berlin - Migrating to Microservices (Fast Delivery)
 
Irn bru pro forma
Irn bru pro formaIrn bru pro forma
Irn bru pro forma
 
Who is Listening, and Why? Audience, Purpose, & Presentation Skills
Who is Listening, and Why? Audience, Purpose, & Presentation SkillsWho is Listening, and Why? Audience, Purpose, & Presentation Skills
Who is Listening, and Why? Audience, Purpose, & Presentation Skills
 
6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website
 
Get your screen together - design skills for frontend people
Get your screen together - design skills for frontend peopleGet your screen together - design skills for frontend people
Get your screen together - design skills for frontend people
 
Solar
SolarSolar
Solar
 
Growing with the Open-Source Community
Growing with the Open-Source CommunityGrowing with the Open-Source Community
Growing with the Open-Source Community
 
Intro to the SF Design Community Resources
Intro to the SF Design Community ResourcesIntro to the SF Design Community Resources
Intro to the SF Design Community Resources
 
Irn bru pro forma
Irn bru pro formaIrn bru pro forma
Irn bru pro forma
 

Recently uploaded

Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 

Recently uploaded (20)

Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 

Designers shouldn't code - The wrong answer to the right question

  • 1.
  • 3. Designers Shouldn’t Code Hyper Island 27th of Nov 2013
  • 4.
  • 5.
  • 6.
  • 7. But first a quick(-ish) answer to: Who is this guy?
  • 8.
  • 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
  • 23.
  • 25.
  • 26.
  • 27. Excuse me! Define “Code” please…
  • 28.
  • 29.
  • 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
  • 55.
  • 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
  • 61.
  • 69.
  • 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
  • 76.
  • 86.
  • 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
  • 99.
  • 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
  • 109.
  • 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.
  • 119.
  • 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
  • 125.
  • 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.