Fronteers 2012 - Lessons learned from building a SAAS app

533 views

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
  • Be the first to comment

  • Be the first to like this

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.

×