AMP Page Example: How to Get Started with Accelerated Mobile Page

Anyone with a website should be thinking about how to make their mobile pages even more user-friendly and simple for their readers. Making sure that a website can load quickly and efficiently is going to help you reduce bounce rates from each potential viewer. AMP, or accelerated mobile page, is going to help with that and it’s easier than you might think to get started using it for yourself. You just have to understand what it is and how it works to get on the right path. Whether you own an e-commerce website using WordPress or another site that is the face of your business, AMP could help you in so many ways. Read on to find out more.

What Is AMP?

Created by Google, AMP (as well as AMP plugins) is a framework that helps you create mobile pages that load more quickly than their traditional counterparts. It’s something that more advanced and experienced developers have been working on anyway (since it’s so important), but not everyone can do it on their own. That’s why AMP is so important, and that’s why it’s being used by so many other developers as well. By creating a simpler method of advanced web development, Google is making things easier for anyone who wants to create a website.

The Parts Of AMP

So what does AMP consist of and how are you going to get exactly what you’re looking for out of it? Well, there are only three different pieces of the system and once you understand them and how they are going to work you’ll have a much easier time of trying to get the system to work for you. You’ll be able to easily collaborate with each of the different aspects once you understand them and that’s going to make sure that you have a high-quality and highly functioning website to work with.

AMP HTML

HTML is one of the most basic and one of the original coding languages and AMP is a subset version of the program. It lets you create custom tags as well as properties. You’ll have to use some that are already set, and you’ll have some restrictions to what you have and what you can do, but you’ll be able to adapt from regular HTML to AMP HTML relatively quickly. It’s just going to require a little bit of required tagging, like these codes right here and then you’ll be able to get off to your system.

AMP JS

This is the JavaScript aspect of your mobile page. It helps you get asynchronous loading, and it’s going to manage all of the handlings of resources. You’re not going to be able to use a third-party JavaScript with AMP, but you can get a bit of uniqueness out of the process as well. You just have to make sure you do a little bit of research on just how that third-party JavaScript process is going to work and what you need to do to get it just the way you want it to look.

AMP CDN

Finally, the Content Delivery Network is optional so that you could be done with your AMP setup with just those two previous options. With this, you’re going to have a cache of each of your pages created through AMP, and it’s going to help to optimize them. That way, you’re going to have a better optimized and better-performing website, and each of the pages is going to interact even better with the different aspects and components that you decide to put on it. You just need to agree to implement it, and you’re better off just like that.

Styling Your Website To AMP

So now let’s say you’re ready to start optimizing your website. You already have versions of all of your pages, but now you’re going to need to work with two different versions. One is the original. The other is the AMP version with AMP plugins. You won’t be able to use form elements, lead forms, on-page comments or any third party JavaScript. This means you’re going to have to slim some things down to get what you’re looking for and it’s going to have to be more standard in formatting. For some of these, you can add iframes, but you can’t use that for everything.

You will need to adjust any CSS that you might be already using to make sure that it’s in line and also to make sure that it doesn’t take up too much space. You’re not going to get more than 50 KB because of the way that this system works and how important it is to create a highly functioning website. Too much CSS slows things down, and since the entire point of AMP is to speed things up, too much is not going to be allowed.

When you want to use images (which you will on almost all website and mobile pages) you need to do them very carefully. They need to use the amp-img element, and they have to be specified. That means you can’t just put a pic in and let it be. You have to be extremely precise about what you’re putting in and how large it’s going to be. You need to know everything about that image and you need to do the same when it comes to videos as well. You’ll need to be even more careful about videos because they need to be specified in some different ways.

If you want an animated image, you want to use the amp-anim attribute, which will help you get exactly the right formatting. For videos, you use custom tags depending on where the video is coming from. YouTube videos can even be added directly from YouTube. When you want slide shows or lightboxes for your images or even embedded aspects from your favorite social media sites you can also take care of that with certain kinds of coding and different tags as well. Each of these needs to be sorted out, so you know what you’re using and how you’re going to put in the things you want, but they’re not difficult once you know.

Keep in mind that if you’re going to put AMP into your website, you need to allow for it in the original version of your website with the <link rel=”amphtml” href=”yourwebsite.com/amp/”> tag. This is going to make sure that mobile devices can find the right version of the website and will present the AMP version when someone attempts to open your website from a phone or tablet of any kind. Just make sure you put everything in the right place.

Start On The Right Foot

So, let’s say you’re ready to get started on using AMP yourself. The first step is to have your website, which is likely not optimized for AMP. But don’t worry; no one really starts out with an AMP optimized website. It’s too new and just not practical if you’re going to be using your website primarily for laptop and desktop use when you start. Then you start thinking about how you’re going to get the most out of mobile optimizing and making things easier for other users who are on the go. Check out the code below, from AmpProject.

<!doctype html>

<htmlamplang=”en”>

<head>

<metacharset=”utf-8″>

<scriptasyncsrc=”https://cdn.ampproject.org/v0.js”></script>

<title>Hello, AMPs</title>

<linkrel=”canonical”href=”http://example.ampproject.org/article-metadata.html” />

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

<scripttype=”application/ld+json”>

{

“@context”:”http://schema.org”,

“@type”:”NewsArticle”,

“headline”:”Open-source framework for publishing content”,

“datePublished”:”2015-10-07T12:02:41Z”,

“image”: [

“logo.jpg”

]

}

</script>

<styleamp-boilerplate>body{-webkit-animation:-amp-start 8ssteps(1,end) 0s1normalboth;-moz-animation:-amp-start 8ssteps(1,end) 0s1normalboth;-ms-animation:-amp-start 8ssteps(1,end) 0s1normalboth;animation:-amp-start 8ssteps(1,end) 0s1normalboth}@-webkit-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><styleamp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

</head>

<body>

<h1>Welcome to the mobile web</h1>

</body>

</html>

This code should be saved with an HTML extension, and then you’re going to need to work on the markup aspects and the customization of this coding.

• <!doctype html> is required at the beginning of the coding for any HTML document.
• <html amp> is needed to show that the content is AMP
• <head> and <body> are needed as parts of AMP content (though not required in HTML)
• <meta charset=”utf-8”> must appear first after <head> tag to show the encoding method.
• <script async src=https://cdn.ampproject.org/v0.js></script> is second after the <head> tag to identify the JavaScript library of the AMP system.
• <link rel=”canonical” href=”$SOME_URL”/> must also go inside the <head> tag to show the AMP version when the standard HTML is not being used.
• <meta name=”viewport” content=”width=device-width, minimum-scale=1”>should be there also to show the proper viewport for the content itself. You can also include initial scale=1.
• Make sure to include the AMP boilerplate code (required code) in the <head> tag to make sure content is hidden until your AMP JS starts to load.

All of this together is going to make sure that you have an AMP page. That’s all it takes. Now, you don’t have a whole lot going on in here just yet, but your page is optimized, and that’s important for the intro process.

Specialized Coding

You’re going to need some special coding to get that first page to look great, however. Where you can use regular HTML on most pages, to create something unique, you’re going to need specialized AMP HTML to get the same result. That’s because it’s going to need more streamlined features and the ability to load more quickly. This is done with codes that have a lot of specifications, like the size that you’re getting and the particular location for the content, making sure it’s going to load right.

Start the customization process by adding a style element from an inline sheet. You can use CSS as your element form with the <style amp-custom> tag. You put in any of the customized tags and formatting that you want and you’ll be able to create the exact layout that you’re looking for. You can also make sure that you have the same aspects in the way of presentation and the images, videos or other added features that you might want. It’s going to create a unique and truly high-quality performance on the website, wherever it’s loaded from.

You will need to be explicit and extremely accurate about everything that you want in the page because that’s important with AMP. The system requires everything you add to have size attributes and specifications to every aspect so you can be sure that you’re not getting too bogged down. No one wants to spend a lot of time and effort trying to get into a website from their mobile device, but they’re going to want something that looks great, and that’s what you can do with the correct coding and with a combination of AMP elements.

Finishing Up

So, if you’re looking to get a high-quality AMP website, you’re going to want to look at the different features and the different aspects that are all included. You want to be sure that you have all the various components necessary to get your AMP looking great no matter who is loading it and what device they’re using since it’s always going to be important to them. Just make sure that you look into your coding to make sure you have all of the required features and aspects. Once you have all of that, you’ll be able to start looking at some of the more elective options.

Creating your AMP website with high-quality features and unique aspects is going to create something great. You’ll have no problem creating something that anyone who visits is going to like and something that they definitely won’t be bouncing out of.

Getting the information that they want quickly and making sure that it’s high quality is the key. Anyone who’s used an AMP site versus a traditional one on their mobile device has been able to tell the difference, which is going to be extremely important when you want people to stick around with your services.