Building the Billion Dollar Page $

goal

increase # of leads

but how?

focusing on conversion

first impression ~3 seconds attention span

responsiveneeds to adapt all devices

high performancesmall footprint and fast loading time

what’s under the hood?

http://services.homedepot.com/admin/landing/programdetails/5/

one page fits all

#django-pipeline

http://django-pipeline.readthedocs.org

building the front-end with

customizing bootstrapbootstrap-custom.sass

define your variables before bootstrap variables

because some internal variables are dependent on each other. ie. $link-color

disable unused components

define your own variablesvariables.sass

leverage !default _variables.scss

wrestling with bootstrap

always include vars & mixins

do not nest more than 3 levels deep

leverage existing mixins

• clearfix

• rounded corners

• gradients

• sass utilities [sass_functions.scss]

mobile first!

write your responsive styles starting with mobilethen incrementally add styles for larger screens

responsive utilities

responsive grid

• Make sure to read docs as the grid system is created from ground up in Bootstrap 3http://getbootstrap.com/css/#grid

after the fluff...

progressive images

adapt to viewport

open issues

• best way to load mobile & desktop components [user-agent sniffing]

• best way build js bundles for progressive loading [requirejs]

• loading images for different resolutions [modernizr]

• making grunt & bower part of the build process [animate.css]

customizing animate.css

Questions?

supercharging your front-end with the best UX practices

speaking at codefront.io