I started using Bootstrap for my landing pages and websites shortly after it was first released years ago. Bootstrap is an amazing framework for developing mobile first responsive websites.
Mobile first means that the framework is setup to work with mobile devices and then expand for desktop browsers and tablets. Up until fairly recently, this was the exact opposite of how web developers created websites. Websites were developed to look great on a desktop browser, but as mobile traffic started to grow many developers would build their website so it would look good on mobile too. Now, we build for mobile knowing the desktop experience will look fine as well.
Bootstrap makes it extremely easy to build for both mobile and desktop. When you use Bootstrap, your website is almost sure to look good on both.
Needless to say, I really like Bootstrap and I recommend it to everyone. Aside from being responsive and making your website or landing page look good with any browser, the framework also comes with all the key components you are going to need with web development. Great looking buttons, hero units, forms, tables, progress bars, and navigation menus can be coded up with very little work.
But wait, there’s more!
Because Bootstrap is so popular, there are some great CDN sources you can use when including it on your website or landing page.
CDN, short for content delivery network, is an awesome tool you can use to speed up the page load of your pages and decrease your overall bandwidth use. Essentially, it’s a version of the file you want to use that is hosted by a CDN. CloudFlare is the major CDN network that I use in the example below.
Bootstrap CDN Template
One trick you can use to speed up the development of your landing pages (aside from using Bootstrap) is to setup a template that you can easily copy and paste into a new file when you start development. My IDE (integrated development environment) of choice, Coda, has a cool feature that lets you create “Clips” of code that you can then easily access. My most used Clip is definitely my Bootstrap CDN template, shown below.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap core CSS -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<!-- Include all compiled plugins (below), or include individual files as needed -->
Once you have that basic template setup, all you need to do is add your container, rows, and the content of your page.
Here is an example I made in about 15 minutes.
Easy! Now, how well will it convert? We’ll see 🙂
If you are not using Bootstrap or CDNs on your landing pages then I highly recommend you give it a try. If you are not building landing pages, then that is the first step! Learn how to build landing pages to help take your campaigns to the next level.
I will be doing another article soon showing how to setup a survey landing page and promote it on Plenty of Fish.
Let me know if you have any questions. Let’s make some money!