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