hi
These are the slides I used for aFronteers presentation at MicrosoftZaventem.
LET’S CONNECT• http://www.linkedin.com/in/jorishens• @goodbytes• http://www.goodbytes.be
SOLIDSHOPS.COM
100% DESIGN FREEDOM<h3>Latest {{ category.name }}</h3>{% for p in products %}   <a href="{{ p.url }}" title="{{ p.name }}"...
FOCUS ONWEB DESIGNERS
FOCUS ONWEB DESIGNERS
FOCUS ONWEB DESIGNERS
FOCUS ONWEB DESIGNERS
MONEY BABY!
MONEY BABY!
MONEY BABY!
WHITE LABEL
API
THINGS I LEARNED
BE A YES MAN
LEARN TO SAY NO
“don’t give people what they want,   give them what they need”           - Joss Whedon
http://startupquote.com/
RESPONSIVEREDESIGN TIPS
PROBLEM #1 BORDERS
CSS BOX MODEL  width              width: 500px+ padding          + padding: 10px+ border =         + border: 1px =  render...
border:1% solid black;
border:1px solid black;
100% + 1PX=TOO MUCH
outline:1px solid black;/* sorry, no support in IE6+7 */
border: 1px solid black;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: ...
PREFIX TROUBLE IN PARADISE?
HIGH RES?
@mediaonly screen and (min-device-pixel-ratio : 2){"" #logo" {" " background-image: url("logo-2x.png");" }}
2 IMAGES    :(
#logo{" background-image: url("logo-2x.png");" background-size: 50%;}
TESTING
http://bricss.net/post/16538278376/simple-responsive-design-test-page
http://bricss.net/post/16538278376/simple-responsive-design-test-page
https://github.com/xdissent/ievms
IMPROVINGPERFORMANCE
ImageAlpha+ ImageOptim= SAVINGS !
ImageAlpha+ ImageOptim= SAVINGS !
rgb(255,0,0)
-73% FILESIZE
GOOGLE PAGE SPEED ONLINEhttps://developers.google.com/pagespeed/
AUTO OPTIMIZED   IMAGES
FEWER HTTP REQUESTS
SPRITES
SPRITES
ICON FONTS
COMBINE CSS + JS
MINIFICATIONjava -jar yuicompressor.jar uncompressed.js -o compressed.js              http://developer.yahoo.com/yui/compr...
CACHING
#APACHE httpd.confExpiresByType text/css"access plus 1 month"ExpiresByType image/jpeg"access plus 1 month"
<link href="frontend.minified.4160.css" rel="stylesheet" /><script src="frontend.minified.4160.js"></script>
1-CLICKDEPLOYMENT
SVN   + PHING   +JENKINS
1. click deploy in jenkins
1. click deploy in jenkins2. jenkins starts script with phing recipe
1. click deploy in jenkins2. jenkins starts script with phing recipe     3. get latest source from SVN
1. click deploy in jenkins2. jenkins starts script with phing recipe     3. get latest source from SVN      4. merge’n’min...
1. click deploy in jenkins2. jenkins starts script with phing recipe     3. get latest source from SVN      4. merge’n’min...
1. click deploy in jenkins2. jenkins starts script with phing recipe     3. get latest source from SVN      4. merge’n’min...
DocumentRoot "/releases/live"
MAKE REVERTING   PAINLESS ln -f -s /releases/buildXXXX/ live
IMPROVECONVERSIONS
A/B TESTING
www.google.com/websiteoptimizer
TEST LARGE CHANGES
<script>utmx_section("Person")</script><img src=”pascal.png”></noscript>
<script>utmx_section("Headline")</script><h1>Hosted e-commerce software for web designers</h1></noscript>
TOO MANYCOMBINATIONS
MICRO GOALS
COPY MATTERS
PROBLEM-AGITATE-SOLVE      FORMULA
PROBLEM-AGITATE-SOLVE      FORMULA
60.0%30.3%
34%45%
FAILURE IS OK,IF YOU FAIL WELL
CODING ISTHE EASY PART
#1 MARKET#2 MARKETING#3 AESTHETICS#4 PRODUCT
BUSINESS &ADMINISTRATION
FAIL YOUR WAY  TO SUCCES
BALANCE    http://www.flickr.com/photos/kalexanderson
LIFE        =JUGGLING 5 BALLS
http://www.flickr.com/photos/eschipul/
work  health friends familyintegrity      http://www.flickr.com/photos/eschipul/
“Stack Overflow and Stack    Exchange have been wildlysuccessful, but I finally realized that success at the cost of my chil...
http://www.startupquote.com/
@goodbyteshttp://www.goodbytes.be
http://www.flickr.com/photos/opensourceway
SOLIDSHOPS.COM
SOURCEShttp://lists.w3.org/Archives/Public/www-style/2012Feb/0313.htmlhttp://www.quirksmode.org/blog/archives/2010/04/a_pi...
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Fronteers 2012 - Lessons learned from building a SAAS app
Upcoming SlideShare
Loading in...5
×

Fronteers 2012 - Lessons learned from building a SAAS app

322

Published on

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.

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

  • Be the first to like this

No Downloads
Views
Total Views
322
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Fronteers 2012 - Lessons learned from building a SAAS app

  1. 1. hi
  2. 2. These are the slides I used for aFronteers presentation at MicrosoftZaventem.
  3. 3. LET’S CONNECT• http://www.linkedin.com/in/jorishens• @goodbytes• http://www.goodbytes.be
  4. 4. SOLIDSHOPS.COM
  5. 5. 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 %}
  6. 6. FOCUS ONWEB DESIGNERS
  7. 7. FOCUS ONWEB DESIGNERS
  8. 8. FOCUS ONWEB DESIGNERS
  9. 9. FOCUS ONWEB DESIGNERS
  10. 10. MONEY BABY!
  11. 11. MONEY BABY!
  12. 12. MONEY BABY!
  13. 13. WHITE LABEL
  14. 14. API
  15. 15. THINGS I LEARNED
  16. 16. BE A YES MAN
  17. 17. LEARN TO SAY NO
  18. 18. “don’t give people what they want, give them what they need” - Joss Whedon
  19. 19. http://startupquote.com/
  20. 20. RESPONSIVEREDESIGN TIPS
  21. 21. PROBLEM #1 BORDERS
  22. 22. CSS BOX MODEL width width: 500px+ padding + padding: 10px+ border = + border: 1px = rendered width 522 pixels total
  23. 23. border:1% solid black;
  24. 24. border:1px solid black;
  25. 25. 100% + 1PX=TOO MUCH
  26. 26. outline:1px solid black;/* sorry, no support in IE6+7 */
  27. 27. 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 */
  28. 28. PREFIX TROUBLE IN PARADISE?
  29. 29. HIGH RES?
  30. 30. @mediaonly screen and (min-device-pixel-ratio : 2){"" #logo" {" " background-image: url("logo-2x.png");" }}
  31. 31. 2 IMAGES :(
  32. 32. #logo{" background-image: url("logo-2x.png");" background-size: 50%;}
  33. 33. TESTING
  34. 34. http://bricss.net/post/16538278376/simple-responsive-design-test-page
  35. 35. http://bricss.net/post/16538278376/simple-responsive-design-test-page
  36. 36. https://github.com/xdissent/ievms
  37. 37. IMPROVINGPERFORMANCE
  38. 38. ImageAlpha+ ImageOptim= SAVINGS !
  39. 39. ImageAlpha+ ImageOptim= SAVINGS !
  40. 40. rgb(255,0,0)
  41. 41. -73% FILESIZE
  42. 42. GOOGLE PAGE SPEED ONLINEhttps://developers.google.com/pagespeed/
  43. 43. AUTO OPTIMIZED IMAGES
  44. 44. FEWER HTTP REQUESTS
  45. 45. SPRITES
  46. 46. SPRITES
  47. 47. ICON FONTS
  48. 48. COMBINE CSS + JS
  49. 49. MINIFICATIONjava -jar yuicompressor.jar uncompressed.js -o compressed.js http://developer.yahoo.com/yui/compressor/
  50. 50. CACHING
  51. 51. #APACHE httpd.confExpiresByType text/css"access plus 1 month"ExpiresByType image/jpeg"access plus 1 month"
  52. 52. <link href="frontend.minified.4160.css" rel="stylesheet" /><script src="frontend.minified.4160.js"></script>
  53. 53. 1-CLICKDEPLOYMENT
  54. 54. SVN + PHING +JENKINS
  55. 55. 1. click deploy in jenkins
  56. 56. 1. click deploy in jenkins2. jenkins starts script with phing recipe
  57. 57. 1. click deploy in jenkins2. jenkins starts script with phing recipe 3. get latest source from SVN
  58. 58. 1. click deploy in jenkins2. jenkins starts script with phing recipe 3. get latest source from SVN 4. merge’n’minify JS + CSS
  59. 59. 1. click deploy in jenkins2. jenkins starts script with phing recipe 3. get latest source from SVN 4. merge’n’minify JS + CSS 5. create folder “version3394”
  60. 60. 1. click deploy in jenkins2. 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
  61. 61. DocumentRoot "/releases/live"
  62. 62. MAKE REVERTING PAINLESS ln -f -s /releases/buildXXXX/ live
  63. 63. IMPROVECONVERSIONS
  64. 64. A/B TESTING
  65. 65. www.google.com/websiteoptimizer
  66. 66. TEST LARGE CHANGES
  67. 67. <script>utmx_section("Person")</script><img src=”pascal.png”></noscript>
  68. 68. <script>utmx_section("Headline")</script><h1>Hosted e-commerce software for web designers</h1></noscript>
  69. 69. TOO MANYCOMBINATIONS
  70. 70. MICRO GOALS
  71. 71. COPY MATTERS
  72. 72. PROBLEM-AGITATE-SOLVE FORMULA
  73. 73. PROBLEM-AGITATE-SOLVE FORMULA
  74. 74. 60.0%30.3%
  75. 75. 34%45%
  76. 76. FAILURE IS OK,IF YOU FAIL WELL
  77. 77. CODING ISTHE EASY PART
  78. 78. #1 MARKET#2 MARKETING#3 AESTHETICS#4 PRODUCT
  79. 79. BUSINESS &ADMINISTRATION
  80. 80. FAIL YOUR WAY TO SUCCES
  81. 81. BALANCE http://www.flickr.com/photos/kalexanderson
  82. 82. LIFE =JUGGLING 5 BALLS
  83. 83. http://www.flickr.com/photos/eschipul/
  84. 84. work health friends familyintegrity http://www.flickr.com/photos/eschipul/
  85. 85. “Stack Overflow and Stack Exchange have been wildlysuccessful, but I finally realized that success at the cost of my children is not success. It is failure.” JEFF ATWOOD - stackoverflow
  86. 86. http://www.startupquote.com/
  87. 87. @goodbyteshttp://www.goodbytes.be
  88. 88. http://www.flickr.com/photos/opensourceway
  89. 89. SOLIDSHOPS.COM
  90. 90. SOURCEShttp://lists.w3.org/Archives/Public/www-style/2012Feb/0313.htmlhttp://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.htmlhttp://thinkvitamin.com/business/startups-think-again-writing-code-is-not-your-biggest-challenge/http://www.amazon.com/Ultimate-Sales-Letter-Powerful-Techniques/dp/1580622577http://www.amazon.com/Start-Small-Stay-Developers-Launching/dp/0615373968All pictures used in this presentation are used under a Creative Commons license andare attributed on the slides itself.
  1. A particular slide catching your eye?

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

×