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 (profe...
ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director

Mathias Hellquist

Halo
ge

n

Background:Active online (profe...
ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director

Mathias Hellquist

Halo
ge

n

Background:Active online (profe...
ie d
r
ar ds
M
ki
2 Freelance Creative Technology Director

Mathias Hellquist

Halo
ge

n

Background:Active online (profe...
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 ...
Mathias Hellquist

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

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

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

Freelance Creative Technology Director

Dr

aw

in
g

Background: Back in Sweden I worked for
Tieto 3 y...
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 under...
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 under...
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 under...
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 under...
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 under...
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 ...
How to eat an elephant

one bite at the time
Suggested Goal:

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

one bite at the time
Suggested Goal:

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

one bite at the time
Suggested Goal:

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

one bite at the time
Suggested Goal:

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

one bite at the time
Suggested Goal:

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

one bite at the time
Suggested Goal:

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

one bite at the time
Suggested Goal:

Do the design sign-offs with
your clients in a browser
It wi...
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...
Benefits with HTML/CSS sign-off
“Graphic design tools are
bringing a knife to a gun fight”
- Andy Clarke

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

Photos
Percentag...
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
Basical...
CSS Frameworks

Go ahead, use them (carefully)
Bootstrap
LESS

Foundation
SASS

PureCSS
SMACSS

CSS Pre-Processors
Basical...
CSS Frameworks

Go ahead, use them (carefully)
Bootstrap
LESS

Foundation
SASS

PureCSS
SMACSS

CSS Pre-Processors
Basical...
CSS Frameworks

Go ahead, use them (carefully)
Bootstrap
LESS

Foundation
SASS

PureCSS
SMACSS

CSS Pre-Processors
Basical...
CSS Frameworks

Go ahead, use them (carefully)
Bootstrap
LESS

Foundation
SASS

PureCSS
SMACSS

CSS Pre-Processors
Basical...
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

CloudCanno...
More Good links

CSS Zen Garden

1 HTML file, 100’s of CSS designs

GistBox

Save your code snippets centrally

CloudCanno...
More Good links

CSS Zen Garden

1 HTML file, 100’s of CSS designs

GistBox

Save your code snippets centrally

CloudCanno...
More Good links

CSS Zen Garden

1 HTML file, 100’s of CSS designs

GistBox

Save your code snippets centrally

CloudCanno...
More Good links

CSS Zen Garden

1 HTML file, 100’s of CSS designs

GistBox

Save your code snippets centrally

CloudCanno...
More Good links

CSS Zen Garden

1 HTML file, 100’s of CSS designs

GistBox

Save your code snippets centrally

CloudCanno...
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

Let...
Fittext

More Good links

jQuery plug-in - Excellent for headlines

BigText

jQuery plug-in - Excellent for headlines

Let...
Fittext

More Good links

jQuery plug-in - Excellent for headlines

BigText

jQuery plug-in - Excellent for headlines

Let...
Fittext

More Good links

jQuery plug-in - Excellent for headlines

BigText

jQuery plug-in - Excellent for headlines

Let...
Fittext

More Good links

jQuery plug-in - Excellent for headlines

BigText

jQuery plug-in - Excellent for headlines

Let...
Fittext

More Good links

jQuery plug-in - Excellent for headlines

BigText

jQuery plug-in - Excellent for headlines

Let...
…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 l...
…but wait, there is more!

A List Apart

THE online magazine for web design/development

Zeldman

The man, the myth, the l...
…but wait, there is more!

A List Apart

THE online magazine for web design/development

Zeldman

The man, the myth, the l...
Thank you!
Mathias Hellquist

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

Freelance Creative Technology Director
Email: mathias@imakethingswork.com
Twitter: @hellquist
About me:...
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Designers shouldn't code - The wrong answer to the right question
Upcoming SlideShare
Loading in …5
×

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

788
-1

Published on

A presentation/lecture given at the worlds foremost education for Interaction and Innovation, Hyper Island (in Stockholm, Sweden).

It is meant as an introduction for designers to start seeing the possibilities with CSS, and to promote the idea of doing creative sign-offs (with clients) in the browser, which assumes the creative assets have been taken into the early stages of code in to a working prototype.

It is not meant to create developers of designers. It is meant to increase the knowledge level of designers, which has the added benefit (for them) of becoming more adjusted for future times in their work life, as well as the benefit of leaving the more advanced stuff to developers.

Both developers and designers would benefit from the designers designing suggestions that are easy to transform into code though.

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
788
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Designers Shouldn’t Code
  2. 2. Designers Shouldn’t Code Hyper Island 27th of Nov 2013
  3. 3. But first a quick(-ish) answer to: Who is this guy?
  4. 4. Mathias Hellquist Creative Technology Director
  5. 5. Mathias Hellquist Freelance Creative Technology Director
  6. 6. ie d r ar ds M ki 2 Freelance Creative Technology Director Mathias Hellquist Background:
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. Mathias Hellquist Freelance Creative Technology Director Background:
  12. 12. Mathias Hellquist Freelance Creative Technology Director Background:
  13. 13. Mathias Hellquist Freelance Creative Technology Director Background: Back in Sweden I worked for Tieto 3 years and later for Society46
  14. 14. 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
  15. 15. 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
  16. 16. 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:
  17. 17. 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
  18. 18. Designers Shouldn’t Code
  19. 19. Excuse me! Define “Code” please…
  20. 20. How to eat an elephant
  21. 21. How to eat an elephant one bite at the time
  22. 22. How to eat an elephant one bite at the time
  23. 23. How to eat an elephant one bite at the time No one knows ALL that stuff!
  24. 24. How to eat an elephant one bite at the time No one knows ALL that stuff! Start with what is close to you
  25. 25. 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
  26. 26. 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:
  27. 27. 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
  28. 28. 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
  29. 29. 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!
  30. 30. How to eat an elephant one bite at the time
  31. 31. How to eat an elephant one bite at the time
  32. 32. How to eat an elephant one bite at the time Suggested Goal:
  33. 33. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser
  34. 34. 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…
  35. 35. 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.
  36. 36. 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!
  37. 37. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser
  38. 38. How to eat an elephant one bite at the time Suggested Goal: Do the design sign-offs with your clients in a browser
  39. 39. 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:
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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!
  44. 44. 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
  45. 45. Benefits with HTML/CSS sign-off
  46. 46. Benefits with HTML/CSS sign-off “Graphic design tools are bringing a knife to a gun fight” - Andy Clarke
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. CSS Zen Garden
  51. 51. CSS Zen Garden
  52. 52. CSS Zen Garden
  53. 53. CSS Zen Garden
  54. 54. CSS Zen Garden
  55. 55. CSS Zen Garden
  56. 56. CSS Zen Garden
  57. 57. CSS + jQuery Plug-ins
  58. 58. CSS + jQuery Plug-ins
  59. 59. CSS + jQuery Plug-ins
  60. 60. CSS + jQuery Plug-ins
  61. 61. CSS + jQuery Plug-ins
  62. 62. CSS + jQuery Plug-ins
  63. 63. Trent Walton Using It All
  64. 64. Trent Walton Using It All
  65. 65. Trent Walton Using It All
  66. 66. Trent Walton Using It All
  67. 67. Trent Walton Using It All
  68. 68. Trent Walton Using It All
  69. 69. Trent Walton Using It All
  70. 70. Trent Walton Using It All
  71. 71. Trent Walton Using It All
  72. 72. CSS Frameworks
  73. 73. CSS Frameworks Go ahead, use them (carefully)
  74. 74. CSS Frameworks Go ahead, use them (carefully) Bootstrap Foundation PureCSS
  75. 75. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation PureCSS
  76. 76. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS
  77. 77. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS SMACSS
  78. 78. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS CSS Pre-Processors PureCSS SMACSS
  79. 79. CSS Frameworks Go ahead, use them (carefully) Bootstrap LESS Foundation SASS PureCSS SMACSS CSS Pre-Processors Basically CSS but handles variables
  80. 80. 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
  81. 81. 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
  82. 82. 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.
  83. 83. 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
  84. 84. More Good links
  85. 85. More Good links CSS Zen Garden 1 HTML file, 100’s of CSS designs
  86. 86. More Good links CSS Zen Garden 1 HTML file, 100’s of CSS designs GistBox Save your code snippets centrally
  87. 87. 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)
  88. 88. 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)
  89. 89. 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)
  90. 90. 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
  91. 91. 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)
  92. 92. 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
  93. 93. More Good links
  94. 94. Fittext More Good links jQuery plug-in - Excellent for headlines
  95. 95. Fittext More Good links jQuery plug-in - Excellent for headlines BigText jQuery plug-in - Excellent for headlines
  96. 96. 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
  97. 97. 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)
  98. 98. 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
  99. 99. 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
  100. 100. 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
  101. 101. 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.
  102. 102. …but wait, there is more!
  103. 103. …but wait, there is more! A List Apart THE online magazine for web design/development
  104. 104. …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.
  105. 105. …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
  106. 106. …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
  107. 107. Thank you!
  108. 108. Mathias Hellquist Freelance Creative Technology Director Email: mathias@imakethingswork.com Twitter: @hellquist About me: http:/ /about.me/hellquist
  109. 109. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×