Building the Billion Dollar Landing Page with Bootstrap

890 views

Published on

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

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
890
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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 http://django-pipeline.readthedocs.org
  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 http://getbootstrap.com/css/#grid
  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 codefront.io

×