building the billion dollar landing page with bootstrap
DESCRIPTION
This presentation focuses on the best practices when building with Bootstrap & Django.TRANSCRIPT
![Page 1: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/1.jpg)
Building the Billion Dollar Page $
![Page 2: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/2.jpg)
goal
increase # of leads
![Page 3: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/3.jpg)
![Page 4: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/4.jpg)
but how?
![Page 5: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/5.jpg)
![Page 6: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/6.jpg)
focusing on conversion
first impression ~3 seconds attention span
responsiveneeds to adapt all devices
high performancesmall footprint and fast loading time
![Page 7: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/7.jpg)
![Page 8: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/8.jpg)
![Page 9: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/9.jpg)
what’s under the hood?
![Page 10: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/10.jpg)
![Page 11: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/11.jpg)
http://services.homedepot.com/admin/landing/programdetails/5/
one page fits all
![Page 12: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/12.jpg)
#django-pipeline
http://django-pipeline.readthedocs.org
![Page 13: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/13.jpg)
![Page 14: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/14.jpg)
building the front-end with
![Page 15: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/15.jpg)
customizing bootstrapbootstrap-custom.sass
![Page 16: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/16.jpg)
define your variables before bootstrap variables
because some internal variables are dependent on each other. ie. $link-color
![Page 17: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/17.jpg)
disable unused components
![Page 18: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/18.jpg)
define your own variablesvariables.sass
![Page 19: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/19.jpg)
leverage !default _variables.scss
![Page 20: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/20.jpg)
wrestling with bootstrap
![Page 21: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/21.jpg)
always include vars & mixins
![Page 22: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/22.jpg)
do not nest more than 3 levels deep
![Page 23: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/23.jpg)
![Page 24: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/24.jpg)
leverage existing mixins
• clearfix
• rounded corners
• gradients
• sass utilities [sass_functions.scss]
![Page 25: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/25.jpg)
mobile first!
write your responsive styles starting with mobilethen incrementally add styles for larger screens
![Page 26: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/26.jpg)
![Page 27: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/27.jpg)
responsive utilities
![Page 28: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/28.jpg)
responsive grid
• Make sure to read docs as the grid system is created from ground up in Bootstrap 3http://getbootstrap.com/css/#grid
![Page 29: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/29.jpg)
![Page 30: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/30.jpg)
after the fluff...
![Page 31: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/31.jpg)
progressive images
![Page 32: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/32.jpg)
adapt to viewport
![Page 33: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/33.jpg)
![Page 34: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/34.jpg)
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]
![Page 35: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/35.jpg)
customizing animate.css
![Page 36: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/36.jpg)
Questions?
![Page 37: Building the Billion Dollar Landing Page with Bootstrap](https://reader034.vdocument.in/reader034/viewer/2022051817/54851259b479590f0d8b4cc7/html5/thumbnails/37.jpg)
supercharging your front-end with the best UX practices
speaking at codefront.io