This is the slide deck I used to give a talk at the Belgian Fronteers meetup at Microsoft Zaventem in 2012. The talk covered the personal lessons I learned while building a SAAS application.

1. hi

2. These are the slides I used for a
Fronteers presentation at Microsoft
Zaventem.

3. LET’S CONNECT
• http://www.linkedin.com/in/jorishens
• @goodbytes
• http://www.goodbytes.be

9. SOLIDSHOPS.COM

10. 100% DESIGN FREEDOM
<h3>Latest {{ category.name }}</h3>
{% for p in products %}
<a href="{{ p.url }}" title="{{ p.name }}">
<img src="{{ p.thumbnail}}" alt="{{ p.name }}" />
</a>
{% endfor %}

11. FOCUS ON
WEB DESIGNERS

12. FOCUS ON
WEB DESIGNERS

13. FOCUS ON
WEB DESIGNERS

14. FOCUS ON
WEB DESIGNERS

15. MONEY BABY!

16. MONEY BABY!

17. MONEY BABY!

18. WHITE LABEL

19. API

20. THINGS I LEARNED

21. BE A YES MAN

23. LEARN TO SAY NO

25. “don’t give people what they want,
give them what they need”
- Joss Whedon

26. http://startupquote.com/

27. RESPONSIVE
REDESIGN TIPS

29. PROBLEM #1
BORDERS

30. CSS BOX MODEL
width width: 500px
+ padding + padding: 10px
+ border = + border: 1px =
rendered width 522 pixels total

32. border:1% solid black;

33. border:1px solid black;

34. 100% + 1PX
=TOO MUCH

35. outline:1px solid black;
/* sorry, no support in IE6+7 */

36. border: 1px solid black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
/* cool, but breaks in IE6+7 */

37. PREFIX TROUBLE
IN PARADISE?

39. HIGH RES?

42. @media
only screen and (min-device-pixel-ratio : 2)
{"
" #logo
" {
" " background-image: url("logo-2x.png");
" }
}

43. 2 IMAGES
:(

44. #logo
{
" background-image: url("logo-2x.png");
" background-size: 50%;
}

45. TESTING

46. http://bricss.net/post/16538278376/simple-responsive-design-test-page

47. http://bricss.net/post/16538278376/simple-responsive-design-test-page

50. https://github.com/xdissent/ievms

51. IMPROVING
PERFORMANCE

52. ImageAlpha
+ ImageOptim
= SAVINGS !

53. ImageAlpha
+ ImageOptim
= SAVINGS !

54. rgb(255,0,0)

57. -73% FILESIZE

59. GOOGLE PAGE SPEED ONLINE
https://developers.google.com/pagespeed/

60. AUTO OPTIMIZED
IMAGES

62. FEWER HTTP
REQUESTS

63. SPRITES

64. SPRITES

65. ICON FONTS

67. COMBINE CSS + JS

69. MINIFICATION
java -jar yuicompressor.jar uncompressed.js -o compressed.js
http://developer.yahoo.com/yui/compressor/

70. CACHING

71. #APACHE httpd.conf
ExpiresByType text/css
"access plus 1 month"
ExpiresByType image/jpeg
"access plus 1 month"

72. <link href="frontend.minified.4160.css" rel="stylesheet" />
<script src="frontend.minified.4160.js"></script>

73. 1-CLICK
DEPLOYMENT

74. SVN
+
PHING
+
JENKINS

77. 1. click deploy in jenkins

78. 1. click deploy in jenkins
2. jenkins starts script with phing recipe

79. 1. click deploy in jenkins
2. jenkins starts script with phing recipe
3. get latest source from SVN

80. 1. click deploy in jenkins
2. jenkins starts script with phing recipe
3. get latest source from SVN
4. merge’n’minify JS + CSS

81. 1. click deploy in jenkins
2. jenkins starts script with phing recipe
3. get latest source from SVN
4. merge’n’minify JS + CSS
5. create folder “version3394”

82. 1. click deploy in jenkins
2. jenkins starts script with phing recipe
3. get latest source from SVN
4. merge’n’minify JS + CSS
5. create folder “version3394”
6. switch web server to latest build

83. DocumentRoot "/releases/live"

84. MAKE REVERTING
PAINLESS
ln -f -s /releases/buildXXXX/ live

85. IMPROVE
CONVERSIONS

86. A/B TESTING

90. www.google.com/websiteoptimizer

91. TEST LARGE
CHANGES

98. <script>utmx_section("Person")</script>
<img src=”pascal.png”>
</noscript>

99. <script>utmx_section("Headline")</script>
<h1>
Hosted e-commerce software for web designers
</h1>
</noscript>

101. TOO MANY
COMBINATIONS

102. MICRO GOALS

104. COPY MATTERS

106. PROBLEM-AGITATE-SOLVE
FORMULA

107. PROBLEM-AGITATE-SOLVE
FORMULA

109. 60.0%
30.3%

110. 34%
45%

111. FAILURE IS OK,
IF YOU FAIL WELL

112. CODING IS
THE EASY PART

114. #1 MARKET
#2 MARKETING
#3 AESTHETICS
#4 PRODUCT

115. BUSINESS &
ADMINISTRATION

117. FAIL YOUR WAY
TO SUCCES

118. BALANCE
http://www.flickr.com/photos/kalexanderson

119. LIFE
=
JUGGLING 5 BALLS

120. http://www.flickr.com/photos/eschipul/

121. work
health
friends
family
integrity
http://www.flickr.com/photos/eschipul/

122. “Stack Overflow and Stack
Exchange have been wildly
successful, but I finally realized that
success at the cost of my children
is not success. It is failure.”
JEFF ATWOOD
- stackoverflow

123. http://www.startupquote.com/

125. @goodbytes
http://www.goodbytes.be

126. http://www.flickr.com/photos/opensourceway

127. SOLIDSHOPS.COM

128. SOURCES
http://lists.w3.org/Archives/Public/www-style/2012Feb/0313.html
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
http://thinkvitamin.com/business/startups-think-again-writing-code-is-not-your-
biggest-challenge/
http://www.amazon.com/Ultimate-Sales-Letter-Powerful-Techniques/dp/1580622577
http://www.amazon.com/Start-Small-Stay-Developers-Launching/dp/0615373968
All pictures used in this presentation are used under a Creative Commons license and
are attributed on the slides itself.