Building the Billion Dollar Landing Page with Bootstrap

50 %
50 %
Information about Building the Billion Dollar Landing Page with Bootstrap
Design

Published on April 24, 2014

Author: gercheq

Source: slideshare.net

Description

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

Building the Billion Dollar Page

goal increase # of leads

but how?

focusing on conversion first impression ~3 seconds attention span responsive needs to adapt all devices high performance small footprint and fast loading time

what’s under the hood?

one page fits all •single django model for each landing page •define content in each sections •use components to render

#django-pipeline http://django-pipeline.readthedocs.org

building the front-end with

customizing bootstrap bootstrap-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 variables variables.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 mobile then 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 3 http://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

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Building a Moodle theme with bootstrap - Technology

Building the Billion Dollar Landing Page with Bootstrap This presentation focuses on the best practices when building with Bootstrap & Django. ...
Read more

12 Premium Responsive Landing Page Templates - Mashable

These responsive landing page templates ... page template based on Twitter Bootstrap, ... audience of 45 million monthly ...
Read more

Inspiring Landing Page Examples Designed Using Unbounce

Get the creative juices flowing for your next landing page design project by exploring our gallery of inspiring landing page examples built using Unbounce.
Read more

How to Write a Landing Page With a 500% Conversion Lift ...

How to Write a Landing Page With a 500% ... He wrote an excellent article on Unbounce on how to write a $1 million dollar landing page in comic style ...
Read more

How we made $1 million for Moz—with one landing page and ...

It’s important to note that “we” refers to a team effort between Conversion Rate Experts ... Conversion secrets of a million-dollar landing page.
Read more

670+ Retail Templates for E-Commerce stores | ThemeForest

Check out the best retail templates on offer ... Landing Pages; ... IE10, IE11, Firefox, Safari, Opera, Chrome, Edge, Compatible With: Bootstrap 3.x ...
Read more

InstaBuilder 2.0 Bonus - 1 Million Dollar Bonus - YouTube

... InstaBuilder 2.0 Bonus - 1 Million Dollar Bonus. Category ... Poor Man's list building ... (Landing Page HTML, Logo, redes sociales, texto, ...
Read more

KickoffLabs - Smarter Landing Pages, Opt-in Forms, & Email ...

KickoffLabs makes building a social sharing page a breeze, ... Our customers have added over 3 Million ... We use Kickofflabs for all of our landing page ...
Read more

Bootstrap Themes at BootstrapZero

Here's a Bootstrap landing page theme with a ... You will get all necessary component for building application ... Thanks for checking out BootstrapZero.
Read more

Bootstrap 3 tutorial -Create your first one-page ...

Bootstrap 3 tutorial -Create your first one-page ... create an amazing million dollar ... Bootstrap 3 Tutorial: Building ...
Read more