Fronteers 2012 - Lessons learned from building a SAAS app

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

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

MONEY BABY!

WHITE LABEL

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/

http://startupquote.com

http://startupquote.com

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



https://github.com/xdissent/ievms



IMPROVINGPERFORMANCE

ImageAlphaImageOptimSAVINGS !

+=

rgb(255,0,0)

-73% FILESIZE

https://developers.google.com/pagespeed/

GOOGLE PAGE SPEED ONLINE



AUTO OPTIMIZED IMAGES

FEWER HTTP REQUESTS

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"

1-CLICKDEPLOYMENT

SVN+

PHING+

JENKINS

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”





5. create folder “version3394”

6. switch web server to latest build


DocumentRoot "/releases/live"

MAKE REVERTINGPAINLESS

ln -f -s /releases/buildXXXX/ live

IMPROVE CONVERSIONS

A/B TESTING

www.google.com/websiteoptimizer

http://www.google.com/websiteoptimizer

http://www.google.com/websiteoptimizer

TEST LARGECHANGES

TOO MANYCOMBINATIONS

MICRO GOALS

COPY MATTERS

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/




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/



@goodbyteshttp://www.goodbytes.be



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



















Fronteers 2012 - Lessons learned from building a SAAS app

Technology

Transcript of Fronteers 2012 - Lessons learned from building a SAAS app