February 29, 2016

AMP Project: Will it Make Your Sites Faster?

As of February 24th, Google search results have started including links to versions of mobile pages created using Accelerated Mobile Pages, aka “AMP”, an open source project it has backed. AMP has the goal of making mobile sites load faster and providing a better experience for users.

Google and the AMP Project are making a big push to get AMP adopted across the web, and they’re already doing well. Automattic is adding AMP support to WordPress.com, Pinterest is AMPing itself up, Twitter has pledged support as have Chartbeat, Parse.ly, Adobe Analytics & LinkedIn, and we’re seeing AMP versions come into the mix for the popular sites Wall Street Journal, Buzzfeed, The Guardian, BBC News, The New York Times and several others.

The reason all these companies are getting on board is simple: load speed. There’s no debating that faster sites are better, so in this article I won’t be preaching to the choir by going into all the reasons why that’s the case. I’m also going to avoid focusing too much on information you can get easily just by visiting the AMP Project website, or watching their promo film.

Rather, we’re going to get down to the brass tacks of exactly what AMP means for you when you’re actually coding up websites. We’re going take a plain-speaking look at exactly what using AMP is going to require from you in practice, what potential benefits and drawbacks you can expect, and most importantly, whether or not it will make your websites faster.

Why Should I Care?

Well, to be direct, because it’s Google. As with most things related to Google it’s a good idea to get across new developments early because you never know when or how their existence might influence your sites’ performance in the search engines. It’s quite possible that sites using AMP might set the bar for speed and performance requirements expected by Google if you want to do well in search rankings.

As stated by Richard Gingras, Google’s Senior Director of News and Social Products, when talking about AMP:

“...If we had two articles that from a signaling perspective scored the same in all other characteristics but for speed, then yes we will give an emphasis to the one with speed...”

So even if you’re not planning to use AMP you may be well advised to examine it anyway and aim to ensure your mobile sites are optimized to a comparable degree.

TheHighlighting in Search Results

Right now, AMP sites that are listed in search results get a little lighting bolt highlighting them. You can’t help but imagine that’s going to make these sites stand out more than others.

This may not actually have happened

Will it only be large news sites that get showcased in this way? It’s still too early to tell. But it may well be a factor that’s worth keeping an eye on.

Will Using AMP Make My Sites Faster?

Here’s the straight and honest answer: probably, but not necessarily.

That’s because the counter question that has to be asked is: “Faster than what?”

Faster than a media heavy site with standard, run of the mill optimization? Probably.

Faster than a site using a minimal design style and advanced optimization? Not necessarily.

The truth is there’s nothing in AMP that’s a magic bullet. It’s not a new type of HTML (as some commentators have described it), or a never before seen technology that is guaranteed to make your sites faster. In Google’s own words it is:

“...built entirely out of existing web technologies, which allows websites to build light-weight webpages.”

If you are up with the absolute cutting edge of optimization and have a high level of technical insight on exactly how to make sites run blazing fast, AMP may not help you at all. In fact, it’s possible to even see speed losses in certain circumstances, though that may well change as the project evolves.

AMP is not perfect, it’s not an automatic fix-all, and nor does it claim to be. Paul Bakaus, Developer Advocate for Chrome and the Open Web at Google, says in a presentation on AMP:

“Now of course, if you build your own site, and you know what you’re doing and it’s great it’s fast and everything, AMP might not make your site better, right. To be clear, it might not make your site better”.

What AMP really is, is a collection of relatively complex optimization techniques bundled together for convenience, in a way that you don’t have to think about all the moving parts behind the curtain. It gives you a strict set of rules, and if you follow them you’ll have a faster site than one that is either not optimized, or not optimized to the same degree.

At the same time though, if you prefer to be hands on with every element of your optimization workflow, you can actually assemble your own comparable techniques without using AMP at all. Using AMP, at least for now, is not essential - but knowing how to optimize to an equivalent level may well soon be.

Let’s dig deeper into what AMP is, how it works, and look at some speed test results, then we’ll revisit the question of "Will it make my sites faster?" at the end of the article.

What AMP is for a Developer

AMP is officially described as being a combination of three things: AMP HTML, AMP JS and AMP CDN. This is of course true, however from a developer’s perspective I feel the three things that will be most pertinent to you while coding are:

  1. AMP’s best practice rules for coding
  2. AMP’s custom HTML elements
  3. AMP’s validator to make sure you implement the above two

In a nutshell, you’ll start creating an AMP document pretty much by copying and pasting the code you’ll find in the example page on the AMP docs. From there, you start filling out your pages using the three items in this list, all of which are powered by AMP HTML and AMP JS.

Note: the AMP CDN can be used automatically and free of charge by AMP users, however it’s possible you could do equally well using another CDN such as CloudFlare. Because of this, and the fact the CDN is not part of the coding process, I’ve left it out of my list of AMP’s three most pertinent aspects for developers.

Allow me to summarize each of the three.

1. AMP’s Rules for CSS, HTML and JS

Straight off the bat there are rules when working with AMP that would help optimize any page, so they’re worth familiarizing yourself whether you use AMP or not. They’re quite strict, and there are some things you’ll probably be used to using that you’ll need to go without, so be prepared for coding to feel a little awkward to begin with.

For example, all CSS must be contained inline within the head section, wrapped in the tags <style amp-custom>...</style> - so no more linking to any external stylesheet(s). You’re unlikely to want to write your CSS straight into your HTML documents, so you’ll need to consider using something like Jade includes or having PHP output the contents of your stylesheet inline.

Your CSS can also be no greater than 50kb worth. To put that in perspective, Bootstrap’s minified standard CSS, without a theme, is 121kb. A theme would add roughly 23kb bringing it to 144kb total, almost three times the allowed amount. So you’ll have to be right on top of using styling code very efficiently.

On top of that there are prohibited CSS selectors, such as * for example, so there’ll be no more use of * { box-sizing: border-box } to control spacing throughout your site. In the same fashion there are prohibited HTML elements, such as base, frame, embed and a few others. Support for forms is currently in development, so for the time being there is also no using the form element or any input elements.

You may load in external web fonts, but only from Google Fonts or Fonts.com via the origins https://fonts.googleapis.com and https://fast.fonts.net respectively.

For a full rundown on what you can and can’t do in your CSS and HTML, check out the AMP HTML Specification.

The “big one” in AMP’s rules is that absolutely no custom JavaScript is allowed whatsoever. If you’re used to having JavaScript power your responsive menus, or anything else for that matter, you’re out of luck and will have to find another way. However this is balanced out to a degree through the presence of AMP’s in-built components like a lightbox and carousel, among others, which brings us to the next section: custom elements.

2. Custom HTML Elements

AMP includes a set of media focused custom HTML elements each prefixed with amp-. There are components to replace some standard HTML elements, and extras that add functionality you’d usually need added JavaScript to bring about.

Standard img, video, audio and iframe tags are replaced with amp-img, amp-video, amp-audio and amp-iframe respectively.

There are also a number of elements designed for embedding third party content, such as amp-ad, amp-analytics, amp-pinterest, amp-twitter and amp-youtube.

And finally there are what I would describe as feature adding elements such as amp-lightbox, amp-carousel and amp-anim.

For a full rundown check out the AMP HTML components spec.

AMP’s custom elements are there to do two primary things:

  1. Ensure optimized code
  2. Facilitate loading prioritization and optimization

I mentioned earlier the three most pertinent aspects of AMP for developers are its best practice rules, its custom elements and the validator to enforce it all. With this in mind, given it’s possible to follow the best practice rules whether you use AMP or not, I feel a big determiner of whether you should use AMP is the degree to which your site will use the custom elements it provides.

If you feel your site could use them often, it’s likely AMP will help you with fast and efficient loading of media.

If you feel your site would only use them sparingly, your results may be just as good leaving AMP out of the picture and implementing best practice rules without it.

One aspect of balancing whether AMP will give you improvement is the fact the JavaScript it requires to run is 44kb. So there has to be enough media on your page that having AMP coordinate efficient loading will both make up for its own addition of 44kb, and then give you advantages beyond that. Certain custom elements, such as those for Twitter and YouTube, require additional scripts to be loaded too.

In my tests, AMP’s JavaScript loads in around 779ms - 932ms on a simulated 3G connection of 750kbs, the Twitter script loads in around 367ms - 468ms and YouTube in 318ms - 386ms.

If you can make those types of times up in efficiency gains and then some, you’re in good form.

Importance of the amp-ad Element

One of the big reasons the AMP project exists is to give publishers a way to monetize their sites via advertising that isn’t horribly slow and obnoxious for visitors.

The AMP project is trying to eliminate experiences like reaching a website and waiting five seconds just for a full screen ad to block your path to an article. Or of trying to read some text and barely being able to see anything because a giant banner is taking up four fifths of the available space.

However, they want to get rid of these types of problems while ensuring publishers can still earn enough money from their advertising to support their business. This is where the amp-ad element comes into play.

The <amp-ad>...</amp-ad> tags look odd at the outset, but they’re actually a unified and performant way to show ads from a solid list of major providers:

If ad display is a major part of your sites, AMP is worth checking out just for the amp-ad element alone.

For more information on how to use it visit: https://www.ampproject.org/docs/reference/amp-ad.html

3. Validator

The AMP validator exists to make sure you stick to the AMP rules. It will tell you if you write code that doesn’t fit with best practices, and if you use a native element that should be replaced by a custom element.

When you start working on an AMP page, using the validator is a matter of just adding #development=1 to the end of your preview’s URL then watching the console in Chrome Developer Tools.

If you do something wrong, the validator will let you know.

Especially given that coding for AMP may take some adjustment, it’s a good idea to keep this validator open all the time so you can catch any issues the moment they pop up.

How AMP Generates Speed

The best rundown on the technical specifics of AMP’s optimization methods can be found at the official blog. However, I promised you a plain English break down, so here it is:

Code That Isn’t There

A huge chunk of how AMP pages are faster is all the code that simply isn’t there.

You have no greater than 50kb of CSS, and that’s code that doesn’t need its own http request to be loaded. You don’t have certain CSS and you don’t have certain HTML. You don’t have any of your own JavaScript, which in turn means you don’t have things like JS powered modals, tabs, tooltips, alerts and so on. And on top of all that, you don’t have code for five different ad providers and three different analytics services.

The absence of all these elements gives you an advantage right off the bat. Code that isn’t there at all has zero load time. Of course you don’t need AMP to leave out code, so that’s something to keep in mind whether you decide to use AMP or not.

Loading Prioritization and Optimization

We’ve already touched on AMP’s custom elements and the fact they facilitate loading prioritization and optimization.

The way this happens in practice is when you land on an AMP page the media visible on the screen, (“above the fold”), will load first allowing you to commence viewing, then any remaining media will load after that. There are also cases where a page may be loaded before a user navigates to it, making it seem to load instantly.

This all happens via a few different techniques, including things like lazy loading, prerendering, preconnecting and prefetching. You can actually implement these methods yourself if you choose not to use AMP. In the article on the AMP blog I mentioned above, it states:

“Every web page can have these optimizations, but AMP pages cannot not have them. While this article is about optimizations in AMP, it might also be useful as a kind of todo list for optimizing a non-AMP website.”

So if nothing else, take a look at the way AMP handles loading to get new ideas on what you can do for your own sites.

Layout Efficiency

All media added to an AMP page must have its height and width properties specified. This means that even though it’s still possible to have resizable and responsive elements, AMP will know how it has to lay out the page before said media is loaded. This prevents having to wait until an image is loaded, then recalculating the layout of the page, saving rendering time in the process.

Some Speed Tests

If you’ve been following the buzz about AMP you’ll have heard Google share its test results of achieving up to 85% speed boosts with early partners’ pages. Pinterest ran tests recently and found that “AMP pages load four times faster and use eight times less data than traditional mobile-optimized pages”.

These are some pretty significant numbers, so I wanted to know exactly what was behind these speed differences. As I mentioned earlier, the big question is “Faster than what?”

To find out I started from the ground up with nothing but the starter page code provided by the AMP docs, and an equivalent page made in plain HTML. I wanted to see what would happen as I added content to one page in the AMP way, and to the other in the typical way.

In each of these tests I used Chrome Developer Tools to emulate an iPhone 6 with a “regular” 3G connection of 750kb/s. Google’s own tests used essentially the same approach with a “simulated 3G connection and a simulated Nexus 5 device”.

I repeated the tests multiple times to rule out any random hiccuping causing delayed loading. In the results, I’m also always showing you the lowest load time in each test. The tests have used the “Empty Cache and Hard Reload” page refresh method so as to simulate landing on the content for the first time.

Test 1: Single Image

First, I started basic, including a single 500kb image (from Unsplash) on each page.

AMP Version
AMP Version
Regular Version
Regular Version

Results

  • AMP: 6.23 seconds
  • Regular: 5.48 seconds

In this first test AMP came in a tiny bit slower, and if you look at the network panel in the screenshots you can see it was due to needing to load AMP JS plus a slightly larger HTML page size. The larger HTML file size was caused by the requirement for some boilerplate CSS to prevent FOUT (flash of unstyled text) while AMP JS does its processing.

Note: In this first test I’ve shown a screenshot of the entire page being tested so you can see the setup I used. For the next few tests I’ll just describe what I did and show you the network panel as otherwise it will be too many large images to put you through loading.

Test 2: Two Images

I knew the idea was that AMP would start to come out ahead as more media was added. As such I started doing so in the second test, adding another 500kb image.

AMP Version
AMP Version
Regular Version
Regular Version

Results

  • AMP: 11.14 seconds
  • Regular: 10.44 seconds

Again, in this test AMP came in a tiny bit slower by about the same margin, for the same reason.

Test 3: Five Images

In the tests so far the extra markup and JS had been causing AMP to lag behind ever so slightly, but it was now time to see the effect of AMP’s loading prioritization, whereby content below the fold has its loading deferred. This time, I added three more 500kb images, bringing the total to five.

AMP Version
AMP Version
Regular Version
Regular Version

Results

  • AMP: 16.14 seconds
  • Regular: 26.08 seconds

Here we see AMP pull ahead by a substantial margin. If you look closely at the network graph for AMP’s loading, you can see it loads the first three images in 16.14 seconds and then allows the user to start viewing. It loads the remaining two images after that, which you can see happens between approximately the 22 and 34 second mark.

In the regular version on the other hand, all five images have to be loaded at once, which takes 26.08 seconds.

Test 4: Five Images with Page Scrolling

In this test, I wanted to see how AMP compared if the page was scrolled during loading, something that keen visitors are likely to do from time to time.

AMP Version
AMP Version
Regular Version
Regular Version

Results

  • AMP: 26.87 seconds
  • Regular: 26.09 seconds

In this test the scrolling prevented any content being identified as below the fold, which bought the load time back up to the same ballpark as the regular version. The regular version, as would be expected, had its load time unchanged by scrolling during load.

Test 5: Five Images with Lazy Load Script

Because the speed advantage of AMP in “Test 2” was coming from a kind of lazy loading technique, I wanted to see how it would compete against a script offering comparable functionality. To test this I loaded jQuery and the Lazy Load plugin, both minified, into the regular HTML version, and set Lazy Load to run on default settings.

AMP Version
AMP Version
Regular Version
Regular Version

Results

  • AMP: 16.14 seconds
  • Regular: 6.59 seconds

As expected, the AMP load speed was the same as in “Test 2”. The regular page however dropped from 26.08 seconds to 6.59 seconds with the jQuery Lazy Load script.

It’s important to note here, however, that on default settings jQuery Lazy Load only pulled in the first image, the one that was visible in the viewport. AMP on the other hand also loaded the next two images it thought you would look at.

Test 6: Lazy Load Threshold Change

To make the comparison more even, I wanted to make sure jQuery Lazy Load was pulling in the first three images, just as AMP was. So I changed the threshold setting for the script to 1400, meaning any image 1400px beyond the viewport would load too, hence making it load the first three images.

AMP Version
AMP Version
Regular Version
Regular Version

Results

  • AMP: 16.14 seconds
  • Regular: 16.51 seconds

Here, with both pages loading three images, AMP pulled ahead again by a small margin.

Loading the same number of images brought the two roughly inline, which to me suggested one approach was not necessarily hands down better than the other, rather the jQuery option was more configurable, while AMP was automated and hands free.

Test 7: Twitter and YouTube Embeds

In this test I wanted to see how the amp-twitter and amp-youtube custom elements fared out of the box compared to the native embed code for each service. I embedded a video and tweet in each page, using each method.

AMP Version
AMP Version
Regular Version
Regular Version

Results

  • AMP: 11.22 seconds
  • Regular: 9.56 seconds

In this test, AMP’s custom elements came out a little slower than using native embed code. However what I did not do in this test was stack several videos and tweets on top of each other to see how AMP’s load prioritization mojo took effect.

With images, we saw gains only once there was enough content on the page that prioritized loading helped, so it’s likely the same thing would occur with YouTube videos and Tweets.

Test 8: AMP CDN vs GitHub

The next thing I wanted to try was seeing what potential speed gains might come from having the page with five images I used in “Test 3” served from the AMP CDN.

If you’d like to test any AMP page that’s online to see how it goes being served from the CDN just add cdn.ampproject.org/c/ before its URL, or cdn.ampproject/c/s/ if it’s being loaded over https. For example:

The way the CDN works in practice is the regular version of a page will include a link to the AMP version in its head section. Google will follow that link, and upon recognizing the new page as an AMP site will store it in the AMP CDN automatically.

When testing the AMP CDN for yourself, be sure to allow for a longer load the first time as the page goes through being cached, then check on the load times after that.

I loaded my test page onto GitHub pages hosting, then I had a version loaded into the AMP CDN. The comparative load times, still with a simulated iPhone 3G connection, were as follows.

AMP Served from AMP CDN
AMP Served from AMP CDN
AMP Served from GitHub
AMP Served from GitHub

Results

  • AMP via CDN: 16.71 seconds
  • AMP via GitHub: 16.50 seconds

The two results were basically the same, with GitHub pages serving a fifth of a second faster.

Test 9: AMP CDN vs. Personal Host

I wasn’t sure if GitHub might be doing some kind of voodoo to make it serve pages just as fast as the AMP CDN, so the next test I performed was comparing it to my own personal hosting, which I knew for a fact had no out of the ordinary load speed optimization.

AMP Served from AMP CDN
AMP Served from AMP CDN
AMP Served from Personal Hosting
AMP Served from Personal Hosting

Results

  • AMP via CDN: 17.28 seconds
  • AMP via Personal Host: 16.33 seconds

My personal hosting, surprisingly, served the page just as fast as the CDN. In this test the CDN actually dropped off a little bit to over seventeen seconds.

Unfortunately I wasn’t able to create a test where the AMP CDN served a page the fastest. However, my living in Australia and being located outside a capital city may have everything to do with that. Your results may vary.

Test 10: The Guardian Pre and Post AMP

In all the tests so far I used pages with almost no CSS, just the raw content. But that’s not how we design sites, is it? We work hard to perfect styling and layout, we splash in some JavaScript for added features, and not all that uncommonly, we might be prone to using more code than is absolutely necessary.

Additionally, running a few tests with very basic content in place is not the same as testing complete sites with live, real world content. In this context the real test, arguably, comes from testing live sites pre and post AMP optimization.

So that’s what I did next, starting with an article from The Guardian. First I tested the regular HTML version of the article, and then the AMP version of the exact same article.

Pre AMP link
Pre AMP (link)
Post AMP link
Post AMP (link):

Results

  • Pre AMP: 5.05 seconds
  • Post AMP: 3.87 seconds

Here we start to see significant improvement between the pre and post AMP versions, cutting 1.18 seconds off the load time. That’s a 23% improvement, pretty solid!

Test 11: BBC News Pre and Post AMP

In the next test, the last one I’ll be talking about, I compared a BBC news article’s default version to its AMP version. As with the test on The Guardian, the exact same article is tested in each of its formats.

Pre AMP link
Pre AMP (link)
Post AMP link
Post AMP (link)

Results

  • Pre AMP: 20.44 seconds
  • Post AMP: 2.74 seconds

Okay so now we’re talking. That increase in speed is massive. Going from 20.44 seconds to 2.74 seconds is even a little over the reported 85% improvement from early AMP tests. It’s actually an 86% improvement.

Take a close look at the screenshots, in particular the charts depicting the loading of each individual resource with a green/red/blue horizontal bar. The number of resources being loaded in the pre AMP version is bananas. Compare that to the chart in the post AMP version, where the number of resources has been reigned way in. It’s no wonder the optimization was able to create such a big improvement.

Here, two questions spring to mind.

One, could this degree of optimization have been made without AMP? Yes, I think it probably could have.

Two, would this degree of optimization have been made without AMP? No, in all likelihood it probably wouldn’t have.

Outside of controlled testing, in a real organization, developers may want to optimize a production site but they may not be able to due to push back from colleagues who need to focus on monetization and analytics. Both parties are trying to do their job, and they may not be able to reach a common ground.

That’s where AMP is aiming to step in and bridge the gap. They create a strict optimization framework that has to be adhered to if you want the AMP tick of approval, which makes the developers happy. But they also provide integrated monetization, analytics and possibly greater exposure in Google, which makes the people responsible for income streams happy .

If you are a developer who finds yourself in this situation, these results suggest AMP may be just what the doctor ordered.

So Now, Will AMP Make My Sites Faster?

We’ve gone through a lot in this article, all with the goal of finding out whether at the end of the day, AMP will make your sites faster. The answer, it seems, depends not just on the technical considerations of your sites, but also on the practical needs of the businesses those sites support.

If you make all the decisions on how your sites are built, AMP may make your sites faster if:

  • You’re using enough media to benefit from the optimized loading processes.
  • You would prefer to have AMP guide your optimization process rather than handling it manually yourself.

At the same time, if it is within your decision making power to optimize your sites however you please, you may get results just as good or possibly better by using your own optimization methods, as long as they are at a level comparable to what AMP does.

If you don’t get to make all the decisions on how your sites are built, AMP may make your sites faster if:

  • It allows you to convince your colleagues to approve its implementation, hence giving you the ability to apply optimizations you wouldn’t get the green light for otherwise.

I think the point to be clear on is that AMP itself isn’t fast - that’s the wrong way to phrase it.

AMP gives you a method to make your sites fast.

You don’t necessarily have to use that method, but if you want a convenient approach or one that your colleagues will accept, AMP may be the right choice for you.

Wrapping Up

AMP is still a very new project, so it’s a good idea to keep a close eye on it as it evolves. What it means for your search engine rankings could change at any time, as could the requirements of using AMP, or its performance.

In the tests I ran AMP was a little slower in certain circumstances, but as the project goes on I’m sure it will become more efficient and we might see these results become irrelevant. At the same time, outside of the controlled tests, it was clear that on major live sites applying AMP optimization was a means to sometimes huge performance gains.

I do feel that whether you decide to actually use AMP or not, everyone should at the very least take a very close look at it. It’s a potentially great source of ideas for developers on ways they can boost the optimization of their sites, if nothing else.

With the brand new rollout of AMP pages into Google search results, it will be very interesting to keep an ear out for feedback from the early adopters of AMP. The reason I say this is it could be speculated they will only continue using AMP if the results are greater traffic retention and revenues. What happens in this regard may well be the make or break of AMP.

Until then, possibly the biggest takeaway from the emergence of AMP is that optimizing sites to the highest degree possible is likely to become increasingly important. The days of bloated stylesheets and excessive JavaScript, not to mention overbearing ads, may soon be as far behind us as Flash animated site intros.

And that’s something we can all be happy about.

Related Links:

February 29, 2016

10 Best Bootstrap Landing Page Templates—With Responsive Designs

Are you working on a new marketing campaign? Or is your product launching soon? Do you need a landing page ready to publish as soon as possible? One that’s made to convert?

It takes work to design an effective landing page from scratch though. You’d have to fire up Photoshop or Sketch to craft your layout, pull together your design elements (get all your colors, fonts, icons, and graphics just right), and then jump into your favorite editor to code it up to modern responsive standards. Test, and then test some more, to make sure it’s functioning properly in all modern browsers, oh yah and on mobile devices as well. And finally, wipe the sweat off your forehead, whew!

There is another option to consider. You can save a whole lot of time, and still get quality results, with a landing page template. It’s already custom designed, coded, tested, and ready to be put to use!

Bootstrap Compatible, Responsive Designs

There are a number of responsive Landing Page Templates featured here from GraphicRiver—which are available for purchase and download.

They are crafted for any business purpose you may need. Whether you want to drive signups through to your email newsletter, push click-throughs, generate leads, promote your event, or convert sales of your new product, these landing page templates have all the features you’d want.

Bootstrap Landing Page Templates on GraphicRiver
Best Landing Page Templates, available for sale and download on ThemeForest.

Built with well-tested coding standards, these templates are versatile, high-performance landing page solutions for entrepreneurs, marketers, or web professionals. They have a number of the quality features you’d expect, such as:

  • Bootstrap 3 Compatible
  • Fully Responsive
  • Multiple Page Styles
  • Valid HTML5/CSS3 Markup
  • Clean and Well Commented Code
  • Email Software Integration

Each of these landing page templates have a unique feature set as well. They come with a number of creative, customizable options, such as: page builders, image galleries, video backgrounds, creative layouts, pricing tables, working contact forms, Mailchimp integration, included icons, and web font support. This way you get everything you need in a landing page package that you can customize easily.

You can quickly set them up, add your unique graphics, tailor your marketing message, and get your landing page launched fast, so you can start driving those conversions!

Bootstrap Landing Page Templates

Here are ten of the best Bootstrap compatible landing page templates with responsive designs:

1. Urip - Professional Bootstrap Landing Page

Urip is a landing page HTML template that is built with Bootstrap 3. It has a modern professional design, with a number of creative layout options, for lead lead generation, app promotion, event announcement, hero form, and more. Each of these options has different features that you can use to customize your design from. It has Mailchimp integration and a number of easy to use features. Get a professional landing page up quickly with this template.

Urip - Professional Bootstrap Landing Page Template

2. Select - Landing Page Template Set With Page Builder

With 30 multi-purpose landing page options inside this page builder, you have a lot of choices to work with. It also includes a number of mockups, layout options, and unique sections tow work with. It’s coded in valid Valid HTML5 & CSS3, is compatible with Bootstrap v3, and comes with google fonts. Its has powerful functionality for editing text, modifying elements, and integrating video. It’s loaded with options and ready to put to use!

Select landing page template builder

3. R.Gen - Landing Page Template with Page Builder

This responsive landing page template has a clean modern design, It’s built with Bootstrap 3 and has cleanly commented code that is easy to work with and modify as needed. It’s made to integrate with Aweber, MailChimp, GetResponse, Constant Contact, Campaign Monitor, and more.

It includes over 35 landing page designs that are easy to load into the included drag and drop builder for quick customization. With over 260 design sections, it’s bursting with page options!

RGen landing page template with page builder

4. Multipurpose Landing Page Template - All in One

If you need a landing page designed with conversion principles first, then look no further. This All in One landing page template is  structured to convert leads and push sales. The unique selling proposition is well positioned, as well as the hero shot, and there are sections to showcase your product benefits, demonstrate social proof, and highlight your call to action. With an included HTML Page Builder, and coding based on the popular Bootstrap 3.x Framework, this responsive landing page template is a great choice!

All In One Landing Page Template Builder

5. Launch - Responsive Startup Landing Page Template

With hero image and full screen video options, Launch is a simple, on trend landing page template design. It has a number of sections you’d need to showcase where your company has been featured, your products main benefits, key features, and price points.

It’s quick to setup and easy to work with. This responsive template is built to be compatible with Bootstrap v3 and made with HTML5 & CSS3, Font Awesome Icons, and Google Web Fonts. It’s Multilingual supported and SEO friendly.

Launch Bootstrap Landing Page Template

6. Getleads - Landing Page Template Pack with Page Builder

Built with HTML5 & CSS3, and the Bootstrap 3 Framework, this is a flexible, powerful landing page solution. There are more than 215 sections in Getleads. It comes with a Page Builder to make use of all the easy to edit design elements. The text, image and source code options are easy to edit and work with. Get your landing page setup now!

Getleads Landing Page Template Responsive Builder

7. Wava App - Responsive Landing Page Template

Present your app to the world! The Wava template is coded with HTML5 and CSS3 markup that is built with Bootstrap V3 and tested for cross browser support. It features a clean design, responsive layout, engaging graphics, and is made to promote startup mobile apps. It’s well documented and easy to customize. If you’ve got a new mobile app to feature and push sales to, this is the landing page template for you.

Wava Responsive Landing Page App Template

8. Multipurpose Landing Page Template - Flat Vault

FlatVault is a landing page template with a modern flat design style. It’s fully responsive and built with Bootstrap. Easy to customize and setup, you can add your product or service details quickly. It includes a lead-capture and a click-through variant designs, as well as video integration, working form, text rotator animation, pricing tables, and more. Purchase this theme to get an attractive landing page design.

Flat Vault Responsive Landing Page Template

9. KeySoft - Software Landing Page Template

If you need a beautiful responsive landing page for your new software, mobile app, or Sass startup, then this template is built for you. There are multiple layout styles for dashboards, mobile, or subscribe, as well as numerous color schemes, video and image backgrounds, header variants, and more. With KeySoft you get an organized, well documented, easy to setup template!

KeySoft Landing Page Design Template

10. Zollo - Bootstrap Multipurpose Landing Page for Apps

Zollo is a flexible, fully responsive landing page template for applications based on iOS and Android. It has stylish features with a clean design, as well as an eye-catching interface. It’s fast to load, setup with smooth navigation, and subtle animated scrolling. This is an effective landing page template that you can customize to your brand style. If you need a modern landing page template, then grab this one today!

Zollo Bootstrap Responsive Landing Page Template

5 Basic Landing Page Tips

Here are a few helpful tips, which covers how to design your landing page, customize your messaging, and optimize for conversions. This way you can put together your landing page quickly, customized to your business goals and brand, and begin converting right away. 

Before we jump into these tips, if you need to take a step back and review more carefully what a landing page is and get a primer on how it works, then read through this article first:

1. Start With a Quality Landing Page Template

With so many professional landing page templates to choose from, it can be hard to finalize on the one to use. Here are a couple points to consider:

  • First, think about what visual style you want for your landing page. You should choose one that fits your brand and product well. Are you more interested in a modern design with trendy hero video header as in the Launch Startup Landing Page? Or are you leaning more towards a landing page that’s made for showcasing your software like the Wava App Landing Page? In either case, you want a landing page that is attractive and has the design style that fits your goals.
  • In addition to style, you should also consider what functionality you need. Do you want a resume builder included, which will walk you through customization options? Do you need integration with your email marketing software, like MailChimp? Is a built-in video field important? Before you purchase, review what a template includes to make sure it fits your needs.

Choose a landing page template that has both the look and features you need. And if you need help with crafting a unique landing page, we have pro web designers for hire. They can customize any template you choose or build one for you from scratch.

2. Keep Your Landing Page Design Simple

A landing page should have an uncluttered design. It needs to be streamlined, with all excess elements removed. Your landing page should be designed with a single goal. That’s why landing pages convert at such high rates. It’s because they’re focused.

Your landing page template will give you a layout that is organized, with sections for your messaging, showcasing your product features, adding testimonials, and more. Take care to work with the design and not add unnecessary elements—as that can confuse your visitors.

People are visiting this page for a reason, so keep it simple and move visitors towards your signup form or purchase button, without addition options that pull them away from your clear call to action (CTA). It should be obvious to everyone the actions they should take on your landing page, what they should fill out, or where they should click.

Don’t add extra menu links or navigation that may push visitors away from your goal. Every elements, every photo, every message, should fit your strategy and flow together towards a single purpose.

Learn more about the principles of landing page design in our course on the subject, or get started with this article that covers the basics:

3. Add Your Graphics and Brand Assets

The graphics and visuals you use on your landing page can have a dramatic impact on your conversions.

You want to make sure all the colors and assets you use fit your brand well. They should compliment the colors of the product you’re selling and align with your brand guidelines.

Take care not to use stock photos that look like generic stock photography that everyone else uses. You want your photography to showcase your product in action, feel genuine, and make an emotional connection with the visitor.

Browse through Envato Unstock for authentic photos or jump over to GraphicRiver to grab custom illustrations or unique graphics. You can also grab video project files from VideoHive, such as product promotions, application showcases, motion graphics, and opener footage.

4. Customize Your Messaging

To nail your landing page messaging you need to first figure out who you’re talking to. Clearly identify your target audience, then more narrowly identify what problem your product solves for them.

Now you can work on crafting your headline, to grab attention. Also, work on short paragraphs and compelling bullet points about the benefits of your solution framed from your potential customer's perspective.

When writing your landing pages, keep your copy short and to the point. Use language that fits your brand but grabs attention. Write directly using the “you” voice, so that you’re speaking directly with a visitor and not just droning on about features of your product.

Inspire them and lead them through why your product is the best choice, or what they’ll get out of filling out your form. Really paint them a picture—but make it punchy. And make sure all your points clearly lead to your call to action.

Learn more about writing effective landing pages:

Keep in mind, your messaging is rarely ever finalized. It’s something you’ll want to test and refine.

5. Optimize for Conversions

It will take time to nail your landing page. A key component of improving your conversion rates and the effectiveness of your page is to approach it as an iterative process.

After you’ve added your visual assets, inserted your headlines and messaging, and keyed in your call to action, then you need to start testing. Run through comparative options and test to see which one performs better.

You can A/B test to see which elements work the best on your landing pages. Here are just a few key components you can begin testing:

  • Headlines
  • Copy
  • Testimonials
  • Call To Action
  • Images or Videos

That’s just a starting point, you can test a whole lot more. Learn more about the process of optimizing landing pages and A/B testing:

Have a narrow purpose for your landing page with a clear call to action, and include only as much information that helps you hit your conversion goals, then test until you get it right.

Grab a Premium Landing Page Template!

Bottom line results are what make landing pages so unique from any other page on your site or in your marketing campaign. They’re highly focused on specific topics and on the goal of converting more visitors to leads and sales. They are a key component of effective online marketing.

We have hundreds of professional design options, any one of which will save you time, and give you a professional well-coded solution. Take a look through the Landing Page Templates on ThemeForest to find just the right one for your next campaign.

February 26, 2016

What’s New in Foundation 6

Foundation for Sites is currently at version 6. But what's changed from previous versions? That's what you'll learn in this short video tutorial from my recent course on Foundation 6.Watch the Tutorial Watch the Full CourseIn the full course, Getting S...
February 25, 2016

Weekly Inspiration: Scrollin’, Scrollin’, Scrollin’

Web browsers all have one thing in common: almost without exception they allow us to scroll through content. Scrolling gets us from the top of a document, to the bottom. But it allows much more than that–and for better or worse, web designers have been challenging the scrollbar for some time now, seeing how else it can be used to interact with the web.

As usual in these inspiration posts; we’re going to look at some examples in the wild, examine some of the techniques used, point to some tutorials and courses to help you learn what we find, and list some inspiring examples on Envato Market.

Inspiration

We’ll kick off with forbetter.coffee (ten points for the URL) which begins with a coffee bean, then follows its progress down the page as it gets ground, percolated, and poured into a coffee cup.

Start here, then scroll..

This is in the spirit of the classic scrolling example lostworldsfairs.com. The coffee bean’s position is fixed throughout, so it stays fixed in the browser as the background scrolls past. Eventually it meets certain waypoints, whereupon its position is changed to relative and it scrolls off the top of the screen, only to be replaced by different elements. All this is done with scrollmagic.io.

Susan Lin uses a similar effect (though a completely different aesthetic) on her personal homepage. Get ready to feel nostalgic for 8bit role-play games as Susan’s sprite waddles downward through the pixelated landscape:

Prepare yourself for a detailed tutorial on how this is achieved very soon!

www.voog.com uses scrolling to different effect. Its split layout combines bright colours and interchanging background images, fixed in their masked positions.

This is all done with JavaScript, though you can achieve a very similar masked background effect, as shown by Kezz Bracey, with nothing but CSS.

Parallax

How have we come this far without mentioning parallax?! Let’s fix that now, with help from @claudioguglieri. Check out his homepage, which starts with a beautifully presented open letter. Scroll down and experience the depth suggested by leaves and rose petals as they float past:

httpwwwgugliericom
www.guglieri.com

Claudio uses this sort of thing on more of his websites; check out www.wedontneedroads.co while you’re at it.

More subtle parallax can be found on sublime.fyi; a curated aggregation of design talks and interviews by some very recognisable figures. Scroll down and watch layers of duotone graphics and images drift past:

Firewatch is stunning. Stunning in the game’s painted graphics, in the concept, in its marketing. And its website follows suit. Scroll downwards to gain a sense of depth and environment, and also scale, as you shrink in relation to the landscape.

This next example is a little different, in that the window’s scroll position is used to influence quite a tiny detail. frankbody.com has a menu panel which sticks to the top left of the viewport, then, as you scroll, its background pattern changes subtly.

httpseufrankbodycom
eu.frankbody.com

The JavaScript (or rather jQuery) behind it is as follows:

// function triggered on window scroll
$(window).on('scroll', function() {
    
    // store the current vertical position of the scroll bar    
    var scroll_top = $(window).scrollTop();
    
    // change inline css rule, based on factor of scroll_top
    $('.menu').css('background-position-y', scroll_top * -.1);
});

Feel free to pull this apart in this example:

Envato Market

Let’s take a look at some inspiring scrolling themes and templates for sale on Themeforest.

Zoo - Responsive One Page Parallax Theme
Zoo - Responsive One Page Parallax Theme
Startuply  Multi-Purpose Startup Theme
Startuply — Multi-Purpose Startup Theme
Borderland - A Daring Multi-Concept Theme
Borderland - A Daring Multi-Concept Theme
Scroller - Parallax Scroll  Responsive Theme
Scroller - Parallax, Scroll & Responsive Theme
ROSA - An Exquisite Restaurant WordPress Theme
ROSA - An Exquisite Restaurant WordPress Theme

Learn About Scrolling Events

If you’re interested in creating your own scrolling masterpieces, check out Craig Campbell’s recent course Scroll Events Made Easy. In it, you’ll learn about the basics of scroll events, then build several examples using existing libraries such as parallax.js, wow.js, and skrollr.js. Grab this course for $9.

Additionally, checkout Parallax Scrolling for Web Design, to round off your learning.

Troubleshooting rendering performance issues

When you’re toying with scrolling and positioning, you’re quite potentially toying with the browser’s ability to repaint the scene. In this great quick tip from Harry Roberts, he demonstrates some performance troubleshooting using the browser inspector.

You’ve Reached the Bottom

That’s it for this inspiration roundup, see you in the next one!