Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building the Billion Dollar Landing Page with Bootstrap


Published on

This presentation focuses on the best practices when building with Bootstrap & Django.

Published in: Design, Technology
  • Be the first to comment

Building the Billion Dollar Landing Page with Bootstrap

  1. 1. Building the Billion Dollar Page
  2. 2. goal increase # of leads
  3. 3. but how?
  4. 4. focusing on conversion first impression ~3 seconds attention span responsive needs to adapt all devices high performance small footprint and fast loading time
  5. 5. what’s under the hood?
  6. 6. one page fits all •single django model for each landing page •define content in each sections •use components to render
  7. 7. #django-pipeline
  8. 8. building the front-end with
  9. 9. customizing bootstrap bootstrap-custom.sass
  10. 10. define your variables before bootstrap variables because some internal variables are dependent on each other. ie. $link-color
  11. 11. disable unused components
  12. 12. define your own variables variables.sass
  13. 13. leverage !default _variables.scss
  14. 14. wrestling with bootstrap
  15. 15. always include vars & mixins
  16. 16. do not nest more than 3 levels deep
  17. 17. leverage existing mixins •clearfix •rounded corners •gradients •sass utilities [sass_functions.scss]
  18. 18. mobile first! write your responsive styles starting with mobile then incrementally add styles for larger screens
  19. 19. responsive utilities
  20. 20. responsive grid •Make sure to read docs as the grid system is created from ground up in Bootstrap 3
  21. 21. after the fluff...
  22. 22. progressive images
  23. 23. adapt to viewport
  24. 24. 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]
  25. 25. customizing animate.css
  26. 26. Questions?
  27. 27. supercharging your front-end with the best UX practices speaking at