11 Resources for Learning Amp for Mobile Websites

Last Edited January 25, 2018 by Garenne Bigby in Blog

amp resouces

Short for Accelerated Mobile Pages, AMP is a way that web pages are built so that static content will render quickly. As it works, there are three different parts of AMP—AMP JS, AMP HTML, and Google AMP Cache. The AMP HTML is like regular HTML but with some limitations to ensure reliable performance, and extensions to build content beyond the basic HTML. The AMP JS library will ensures a quick render of any AMP HTML web pages. In short, AMP is a way for web developers to build websites so that when they are accessed through mobile devices, they will not lag or malfunction. AMP ensures that all of the important and necessary information is present while unnecessary information is jettisoned. It also means that there is usually less bells and whistles, which is also what makes the mobile site load faster.

This day and age, consumers thrive on speed, and using AMP is the best way to make sure that a brand keeps up with the rush and is not bypassed because of extended loading times. Use the following resources to gain priceless information about AMPs and learn how to make your own better. If you are starting from scratch, you will also be able to learn as you go with these resources, as they are available and understandable to anyone.

Resources for Learning Amp

1. The AMP Project Site

Here you will learn about why AMP was invented, and how it impacts the lives of consumers—straight from those who are in charge of ensuring that everything done through Google runs smoothly. Readers will be able to watch a video that details exactly what the current problems are when browsing the internet on a mobile device, and how it can impact the pages that are trying to be accessed. You will learn more about Google and the companies that it partnered with to find a solution for the problem of slow mobile sites, as well as learn why brands are opting to use AMPs for their websites and how it benefits them. You will also learn why The AMP Project is open source, making it accessible to anyone, anywhere. Learn about how AMP works, the design principles, the supported browsers, platforms, documents, and read up on case studies. In essence, this is where you will find the most up to date information regarding the evolution of AMP and where they are headed, which depends a lot on the consumers.

2. The AMP Project Roadmap

Updated two times per quarter, the mid quarter update brings forth an overview of the present quarter's new priorities and it will give the status of the projects. Also, it will forecast the priorities for the next two quarters. The end of quarter update presents the status of the last quarter's projects and priorities, as well as updates for the 2 quarter outlook. The roadmap outlines everything that you need to know about AMP, and the goals that you should be meeting in a specified amount of time. It will tell you how and when to plan and design, how to start coding, creating pull requests, completing the code, and how to know when you are ready to launch it—if your AMP is stable. Each of these things has milestones that should be met before a site is ready to move on to the next step, and the roadmap will provide clear information to help along the way. You will also learn how to use Analytics for AMP pages and how they operate with a number of data analysis solutions.

3. Help Center Documentation

Here you will find out information regarding the guidelines for AMP pages, so that your AMP pages will be displayed properly within Google Search. This resource covers a plethora of recommendations that will help users to take advantage of benefits of AMPs. You will learn how to design web pages while adhering to the AMP specification, and will learn how to make your AMP discoverable. After that, you will be able to test your AMP for validation, ensuring that it is written in the correct AMP HTML. You will also be able to read about how to mark your content up with structured data, and ultimately monitor your AMP report using Search Console for any mistakes or errors. You will find information on how to deal with both AMP and non-AMP pages, to make them compliant. It is suggested that at this time, you check your website settings for the international target and crawl rate. In addition to the Help documentation from Google, you can also browse their help forum for topics and questions that have been submitted by other users.

4. AMP Blog

This blog highlights some of the most important aspects of AMPs by providing blog articles about specific things, and allowing users to comment their questions, concerns, and input about those specific posts. The blog is continually updated with topics that are new and relevant to those who are building their AMP or are looking for ways to improve upon those that already exist. There are months of archived blog posts that are free for browsing, to either seek out answers to questions that one might have, or to simply learn more about a certain portion of AMP. Search around the blog for any specific terms that you are on the lookout for. It is a mix of text and even some videos to help users understand more about the way that AMP works.

5. Getting Started Guide

This is the place to start for the person who does not know how to begin building their AMP. It provides information on how to create a standard AMP HTML page, resources on staging and validating its AMP compliance, and most importantly there will be information about how to get the AMP ready to be published and distributed. This tutorial is put together in a way that walks the user through the steps that are needed to complete their AMP HTML web page successfully.

6. FAQ

On the Frequently Asked Questions page, AMP Project aims to answer the most common questions that users have for making AMP. It covers everything from what AMPs are, what the project entails, and even what the benefits are. You will get answers on how certain content works with AMP, and how a publisher can get content transformed into AMP HTML. There is also insight into publisher monetization, regarding advertising on AMP, publishers selling their own advertising inventory, how to handle analytics within the AMP format, and how exactly someone would become a part of a project like this.

7. Web Validator

Here, you will find out what exactly is the minimum needed to make an AMP HTML document that is valid. All that is needed is the code that you have for your AMP document, and the Validator will check it in a snap. Enter the URL at the top, and select if it is AMP or AMP 4 ADs, and simply check it. It is one of the simplest tools to use and is quite valuable in the quest to developing an AMP HTML web page. There is nothing that needs to be downloaded in order to use it, and it can be run from any and all major web browsers. All that the user has to provide is their URL, and that is it. Of course, this will have to be done after the AMP HTML has been created, and should be one of the final steps.

8. Chrome Extension Validator

This plug-in makes it extremely easy to run your AMP in order to validate it. Thousands of users depend on this extension to run their validator. It will let the user know when there are invalid properties, when there are missing properties, and when the mandatory attributes are not correct. Web developers use this extension to cut their workload down, as there are so many things that will not be done manually when using the chrome extension validator. If you would rather check the validation of your AMP HTML via browser extension, this one is for you. It can be added directly to Chrome and check the current page to see if it is AMP compliant. It will give an indication of a pass or fail with green or red (respectively) through the icon of the extension. It is updated regularly to ensure that the warnings and/or errors that are given are correct for your page. When there are warnings or errors, it will give the number under the icon of the extension, and then if you click on the icon it will list the errors and warnings.

9. Stack Overflow: Ask Technical Questions About AMP

This is the place to go if you have specific questions about AMP HTML. Users are able to post their own questions, and they will receive an answer from someone that is qualified and knows how to answer. Some of the questions even have multiple answers. Chances are that if you are experiencing a problem or have a question, someone else has been in the same boat previously. Sometimes it is better to see the answer from a real person rather than in the form of a tutorial or rigid directions, as those are generally not interactive and you can only continue once a step has been completed. You are able to sort the questions by date posted, by how often they are asked, how many votes they have, and if they are active or not. You will also be able to view the questions that have not been answered yet, so not only will you be able to browse questions, you can view those that need an answer and maybe offer your input if you can provide an answer.

10. GitHub: Submit a Feature Request

On this website, you will be able to see AMP HTML source code, documentation, as well as samples. Browse over 700 posts about issues, almost 10 projects, and over 250 pull requests. The subjects are displayed clearly so that you will not have to hunt around for the information that you are looking for. This website covers so many topics ranging from what exactly AMP HTML is, how it works, what the AMP JS library is, what an AMP validator does, and what exactly are the AMP HTML Components. Users will be able to opt in to get access to the AMP Dev channel, allowing for testing and playing with new features while also using the questions portion to make sure that a website is compatible with the newest version of AMP. Users will also be able to search GitHub for specific terms that will lead them to read more about the information that they are looking for. Great for both personal and business use, GitHub is a bottomless pit of information for those who are seeking the enrichment.

11. Hangout on Air

Hear about AMP from the Head of News at Google, Richard Gingras. You will learn about what AMP is, advertisement behavior and blockers, and how to create compelling experiences for consumers so that they have a true experience with brands. You will also learn what AMP is all about and how it creates a comfortable user experience while being able to include ad experiences that will not detract from the user experience. Learn about specific use cases and how they would ideally play out on the end of both the brand and the consumer. This includes examples of large websites like Facebook, where articles are shared primarily through the AMP format. This basic web technology can be used in so many different ways, as long as the user chooses to. Learn about why AMP was created as an open source project and how it can benefit millions of users. Also learn why AMP needs to be used so that all content types receive rich benefits. AMP isn't just for larger outlets, smaller outlets can use AMP successfully, because AMP has been developed to benefit both small and large publishers.

Garenne Bigby
Author: Garenne BigbyWebsite: http://garennebigby.com
Founder @dynomapper
Garenne Bigby is freelance Chicago developer and founder of DYNO Mapper with over 10 years experience in both agency and freelance roles in design, development, user experience, SEO, and information architecture.

Back

Create Visual Sitemaps

Create, edit, customize, and share visual sitemaps integrated with Google Analytics for easy discovery, planning, and collaboration.

Popular Tags

Search Engine Optimization SEO Create Sitemaps Accessibility Testing Sitemaps UX User Experience Sitemap Generator Content Audit Website Content Audit
Create Interactive Visual Sitemaps

Discovery has never been easier.

Sign up today!