fronteers 2012 - lessons learned from building a saas app
DESCRIPTION
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.TRANSCRIPT
hi
These are the slides I used for a Fronteers presentation at Microsoft Zaventem.
LET’S CONNECT
• http://www.linkedin.com/in/jorishens• @goodbytes• http://www.goodbytes.be
SOLIDSHOPS.COM
<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 %}
100% DESIGN FREEDOM
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
RESPONSIVE REDESIGN TIPS
PROBLEM #1BORDERS
CSS BOX MODEL width+ padding+ border = rendered width
width: 500px+ padding: 10px+ border: 1px = 522 pixels total
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: border-box;
/* cool, but breaks in IE6+7 */
PREFIX TROUBLEIN 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
ImageAlphaImageOptimSAVINGS !
+=
ImageAlphaImageOptimSAVINGS !
+=
rgb(255,0,0)
-73% FILESIZE
https://developers.google.com/pagespeed/
GOOGLE PAGE SPEED ONLINE
AUTO OPTIMIZED IMAGES
FEWER HTTP REQUESTS
SPRITES
SPRITES
ICON FONTS
COMBINE CSS + JS
java -jar yuicompressor.jar uncompressed.js -o compressed.jsMINIFICATION
http://developer.yahoo.com/yui/compressor/
CACHING
#APACHE httpd.conf
ExpiresByType 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 jenkins
2. jenkins starts script with phing recipe
1. click deploy in jenkins
2. jenkins starts script with phing recipe
3. get latest source from SVN
1. click deploy in jenkins
2. jenkins starts script with phing recipe
3. get latest source from SVN
4. merge’n’minify JS + CSS
1. click deploy in jenkins
2. jenkins starts script with phing recipe
3. get latest source from SVN
5. create folder “version3394”
4. merge’n’minify JS + CSS
1. click deploy in jenkins
2. jenkins starts script with phing recipe
3. get latest source from SVN
5. create folder “version3394”
6. switch web server to latest build
4. merge’n’minify JS + CSS
DocumentRoot "/releases/live"
MAKE REVERTINGPAINLESS
ln -f -s /releases/buildXXXX/ live
IMPROVE CONVERSIONS
A/B TESTING
www.google.com/websiteoptimizer
TEST LARGECHANGES
<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-SOLVEFORMULA
PROBLEM-AGITATE-SOLVEFORMULA
60.0%
30.3%
34%
45%
FAILURE IS OK,IF YOU FAIL WELL
CODING IS THE EASY PART
#1 MARKET#2 MARKETING#3 AESTHETICS#4 PRODUCT
BUSINESS &ADMINISTRATION
FAIL YOUR WAYTO SUCCES
http://www.flickr.com/photos/kalexanderson
BALANCE
LIFE =
JUGGLING 5 BALLS
http://www.flickr.com/photos/eschipul/
http://www.flickr.com/photos/eschipul/
work health friendsfamily
integrity
JEFF ATWOOD- stackoverflow
“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.”
http://www.startupquote.com/
http://www.flickr.com/photos/opensourceway
SOLIDSHOPS.COM
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.
SOURCES