HTML Archives - Leveling Up

This post originally appeared on Single Grain, a growth marketing agency focused on scaling customer acquisition.

Business owners with slow-running and poorly-optimized websites need a serious wake-up call.

Forty percent of people will abandon a website that takes more than three seconds to load. In 2016, your website might as well not exist if it’s not loading quickly across all platforms, from laptops to smartphones. Fortunately, there’s a solution that can tackle this problem and improve your mobile marketing strategy.

Google recently released a new solution called Accelerated Mobile Pages (AMP), which can significantly boost your website speed and make it better optimized for mobile users.

What Are AMP Pages?

The AMP project is an open-source initiative created by Google. Its purpose is to improve the experience of mobile users.

Google first announced the new project on October 7, 2015. However, many content marketers still know very little about AMP or are not using it to their advantage. So what is the purpose of AMP, and what are its limitations?

Optimizing mobile web page speed is crucial for your success. Website bounce rates are significantly higher for pages that take a long time to load. Long loading times also cause conversion rates to plummet—as much as 27% for a 1-second delay—and slow-loading pages rank much lower in the SERPS.

One of the main purposes of the AMP Project is to allow publishers to scale their revenue. Web pages that load quickly receive more visibility, which means that publishers can earn a lot more in advertising revenue.

The primary downside with AMP pages is that they only work with static content. Static content appears exactly the same every time the page is loaded.

In other words, you can’t use AMP pages for mobile web pages that use geo-targeting or content created with random number generators. This can diminish the user experience on pages that used to allow for more user interactivity.

Free Bonus Download: Get your handy, downloadable cheat sheet for future-proofing your SEO – actionable advice not found in this post! Click here to download it free.

Elements of AMP

AMP pages are very easy to create. You just need to familiarize yourself with the three basic components, which are listed on the AMP project site, and summarized below.

HTML has been the primary markup language for building websites for over 20 years. This has not changed with the introduction of AMP.

AMP HTML is the open-source code used to create AMP pages. The majority of AMP HTML code is the same as regular HTML. However, there are some special tags that are made specifically for AMP.

<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

<script async custom-element=”amp-carousel” src=”https://cdn.ampproject.org/v0/amp-carousel-0.1.js”></script>

As you can see, the meta, script, body, link, and formatting tags are the same as standard HTML. However, some of the tags used to embed content are different, such as the image and ad tags.

JavaScript plays an important role in modern web design. The AMP Project provides its own open-source JavaScript code called AMP JS.

These scripts are important for increasing web page load speeds. Unfortunately, since AMP can only be used to create static pages, you won’t be able to embed third-party JavaScript in it.

AMP CDN is a content delivery network built specifically for AMP pages. You don’t need to utilize it to make use of AMP pages, but it can significantly improve the performance of your pages and it allows you to cache them, making them easier to share.

Getting Started with AMP

Now that you understand the primary elements of AMP pages, you can start incorporating them into your site. Here’s how to get started:

Remember that many of the features you’re accustomed to using will not be available on AMP, including:

Despite these limitations, you can still find ways to make your pages engaging, and you can store locally-hosted images with HTML5.

Start by creating an outline of your web pages. Despite the speed of AMP page loading, you should still avoid using unnecessarily large images and redundant content that can interfere with loading times.

If you’re proficient writing HTML pages, you can learn to create AMP pages pretty quickly. As I said earlier, most of the code is identical to regular HTML.

I recommend following the tutorials on this page from the AMP Project website. Here’s a brief overview:

Start by copying the code from this page. You can easily modify this page to see how it looks.

There are some key differences between traditional HTML and AMP HTML that you should know before you start editing.

All HTML code requires a top-level tag. In traditional HTML, this is simply the <html> tag, but the top-level tag for AMP HTML is <html amp>.

Change the formatting of your AMP pages with CSS. The process is pretty much the same, except you need to use the AMP equivalent element for the <style tag>, which is <style amp-custom>. Here are some AMP styling rules to be aware of:

Acclimating to the styling differences is probably the biggest challenge you’ll deal with while building AMP pages, but you’ll get the hang of them pretty quickly.

Free Bonus Download: Get your handy, downloadable cheat sheet for future-proofing your SEO – actionable advice not found in this post! Click here to download it free.

You can’t use the standard <img> tag to embed images in AMP pages. Instead, use the AMP equivalent tag: <amp-img>. You also need to get used to using a closing tag for your image: </amp-img>.

You won’t need to be as conservative with your images since they’ll load much faster on AMP pages, but that doesn’t mean you should get carried away. They can still reduce performance if you use too many.

Of course you should always preview any web page before publishing it to the web, but this takes on particular importance when you’re just getting started creating AMP pages and learning how to get the formatting just right. Either open your page directly in the browser, or use a local server such as Apache to check your work.

You’ll also need to append the following to your link #development=1. Use Chrome DevTools Console to scan for validation errors.

Move Your Content to AMP Today

AMP is revolutionizing mobile web page optimization. If you’re building a lot of static pages, then you may want to start transitioning them all to AMP. However, don’t change your dynamic pages unless you’re willing to do without some of the functionality.

One more thing: If you liked this article, you might like our digital marketing agency’s blog: Single Grain.

Have you started using AMP pages yet? Share your experiences with them by leaving a comment below:

Hi everyone, today’s interview is with David White, CEO of import.io, a web data platform and free web scraping tool that lets you transform any website into a table of data or an API in minutes without even writing any code. I’ve used this tool a few times for my projects and it’s been super helpful!

Today we’re talking about the importance of indexible data as the cornerstone to decision-making in businesses, his view of the semantic web, and how they used startup competitions as a (genius!) customer acquisition plan.

There’s a huge amount of data on the web but the web was never designed for it. If you want to get data off the web and put it in a spreadsheet or database or somewhere you can make decisions from, it’s tough and you end up doing things like running web scrapers. Having written a fair few scrapers in his time, David felt this was a horribly inefficient way to use this incredibly valuable resource. So import.io is all about taking that enormous amount of data on the web and making it really easy for people to make decisions from it.

The business has been going for about 3 years and they’ve now got about 600,000 customers on the platform pulling about a billion data points a day, so they’re finally starting to get people to use the power of the web.

David was head of technology innovation at Royal Bank of Scotland—the largest bank in the world before it all went terribly wrong in 2008—and they were really struggling with making good, data-driven decisions. And as part of that journey, he really got excited about the possibility of using the web as a source of data to make better decisions.

One of the common uses for the typical user is for price-based decisions. In a market where you’re highly dynamic on your pricing, how do you know how to price? how do you know the decision points that drive you to a market-competitive price? To really know that, you have to gather lots of prices from the web, from competitors, from adjacent businesses, etc.

Another common use on the free platform is lead generation. In fact, one of the co-founders, Andrew Fogg, has a great 20-minute presentation on YouTube called “10,000 Leads in 10 Minutes” (see Resources below). So those are two quite common use cases they see a lot. And, of course, you also get a lot of weird and wonderful use case, as well. He’s heard of an art installation in Barcelona that’s powered by data coming from their platform. Definitely not a typical use case!

The definition of “semantic web” dates back to the work that Sir Tim Berners-Lee was doing in the early 2000s. Having invented the World Wide Web and the web standard, there was a disparity between the original intention of HTML, which was a display language, and the reality of the type of information that was now being served on the web, which was a mixture: content and data were being mixed together using the same output.

So the semantic web standards were really about trying to separate those two to make it easier for a machine, whether it be a browser, a crawler or a scraper, to be able to identify data on a page and extract it. The problem was that the semantic web was not widely adopted. Hence, many websites were not actually marked up clearly with “this is a place, this is a person, this is a price, etc.” And import.io makes this data more usable.

For example: if you go to a shopping website, you want to be able to see what the product’s name, description, price, etc., is and do that in such a way so that on every single page of that site, and many other sites that hold similar content, you have a clear identification of each of those elements and then be able to express them in a table format.

When you use their free tool, you typically go onto a page and click on an element on that page and say, “I want this piece of data and I’m going to describe it as a product name.” What import.io does is take all those descriptions of product names convert the semantic description to how it is typically expressed in HTML. So, as David points out, this is a translation of languages: from English to HTML.

There are many different ways to mark up that data, but after having seen enough examples—and they’ve seen millions of examples—they’ve gotten really good at an algorithmic level, at going on a page and saying, “In a probabilistic sense, that element is actually describing a product name based on what is around it, based on the page.”

Their free tool is also their primary lead tool for the paid data sets, because typically people come to their website and want to do some quick prototyping with data, but if they have a long-term production requirement then David’s team will reach out to those customers and say, “These are the benefits of taking data as a service rather than continuing to build it yourself through the free tool or writing scrapers, etc.”

They didn’t have any master plan but they did have a pretty good idea about who the customers were, so they didn’t go into business without first having done a reasonable amount of customer discovery up front. They honed it down to three primary personas, and the two they were really focused on were data analysts and data scientists.

They decided that the best way to get immediate attention from these two personas was to enter a startup competition, which was run by Strata who does conferences for big data guys. They won the competition, which gave them their first market presence and got them some traction around the private beta. For 6 months they focused on those couple thousand customers to learn what they were doing wrong.

That process of going through a startup competition helped them define their pitch, as well as their features and benefits, and the press attention from winning helped them fill up that private beta almost instantly. They then entered four other startup competitions, including one of the largest, the Dublin Web Summit, and won all of them! As a result at the Dublin Web Summit alone they acquired about 5,000 users within 24 hours of winning it.

Tips on winning startup competitions: it’s a bit like pitching to VC—you have to really grab their attention early on and really explain why this is a pain point that many people have, and you’ve got to be clear on what the USPs (Unique Selling Propositions) are. And it helped them with fundraising as well because quite often there were major VCs in the audience.

Their conference is called Extract and they ran their first one about 18 months in. Their purpose was to build a community and talk about opportunities in general (not just their company/product). In doing the first one they realized it was a great lead generation process because they had brought together people who had the problem and were also interested in solving it and were doing interesting things with data—which is obviously a huge target market for them.

They’ve run Extract four times now: the first one in London attracted 150 people, and the latest one was in San Francisco with about 600 attendees. These events turned into a major part of their marketing drive, but one caveat is that the content has got to be genuinely good and interesting. They made a policy from day one to not make content all about import.io, but rather about data stories. That’s an easy mistake to make.

Another mistake they made was that they didn’t follow up after the events. Get great speakers and build themes into the conference so that people enjoy the whole event and actually look forward to the next one—and don’t forget to follow up afterwards to maintain that excitement. Now they produce a series of blog posts about each individual’s talk to continue the momentum days and even months afterwards.

Companies that scale very quickly—like 100% per annum—create some fairly unique problems within the organization. For example, processes that used to work really well break down quite often. You have to understand that growing an organization quickly inherently means you’re going to break the processes that supported you really well 6-12 months ago.

Hiring was one of those processes for them. They were really focused on hiring through their networks at first, which quickly became problem when they saw that managers were spending as much time on hiring as on their actual job. So the one lesson he’s learned is to accept the fact that whatever you put into place today will probably break down in 12 months’ time. And the fact that it breaks is perfectly ok because it indicates that your organization is growing, so embrace constant change!

He would tell his younger self to focus on the big problems and the big picture. You can get drawn into the details or winning every little battle, and you can even get complacent because the things you’re doing are working, but unless you’re trying to solve a big problem those are probably not the best use of your time.

David has given out about 20 copies of one of his favorite books called Bold: How to Go Big, Create Wealth and Impact the World by Peter Diamandis and Steven Kotler. He finds it fascinating because it really talks about the fact that the most interesting problems are also the ones that probably affect a billion people, so they’re the ones that from both a personal and intellectual perspective and a financial perspective are worth solving.

Read The 1st Chapter For Free

Enter your email to get free instant access to the 1st chapter of Leveling Up.

What Are AMP Pages?

Elements of AMP

Getting Started with AMP

Move Your Content to AMP Today

Read The 1st Chapter For Free

Free 1st Chapter Of Leveling Up