Thinking in Components
Adding Features To Our Site
So far, we’ve converted our basic HTML site into a basic AMP site. There is only one validation error remaining in our site, and we’ll fix it by using an
<amp-img> component instead of an
<img> tag. As we fix this last validation error, we’ll learn what AMP components are, why some HTML tags are replaced or disallowed in AMP, and how to add components to our site.
After that, it’s time to add additional functionality to our website. To complete the initial version of our Chico’s Cheese Bike homepage, we are going to add some additional marketing content. The team has decided to add a YouTube video about making our cheese bikes, a carousel of images of our various cheese bike products, and some social media links that will help users share our site with their favorite social networks.
But that’s the beauty of AMP. With AMP, we don’t have to worry about all those details! The AMP library authors have given us drop-in building blocks that provide us with these features and help take care of qualities like performance, accessibility, and security. These blocks are called components, and they are the key to making successful sites with AMP.
What are Web Components?
A name (eg.
<amp-img>) used as the tag name to identify the component.
Custom attributes that change the behavior, style, or contents of a component (like
Events that can capture user inputs to the component (
Optionally, components also have "children." Here, "children" refers to content (such as text, HTML tags, or other components) that is placed between the opening and closing tags of the component. The way these children are displayed on the page is different for each component.
AMP’s component system helps you quickly build efficient and responsive features into your pages with minimal effort. The AMP library provides a comprehensive list of components for you to use. There are components for building forms and carousels, for integrating page analytics, for making XHR requests to servers, and much more. The possibilities are virtually endless. You can see the full list of available components at the the AMP Components reference here.
As an example, here are three AMP components we could use in our site:
|AMP component||How it renders on our site|
The goal when building out your AMP sites is to use AMP components whenever possible. Components maximize the performance benefits of building with AMP, because you don’t have to create something that already exists, thereby leveraging the work of the AMP library authors.
Exercise 3: Our First Component -
Most HTML tags can be used directly in AMP, but certain tags, such as the
<img> tag, must be replaced with equivalent AMP components. These components incorporate built-in best practices in accessibility, responsiveness, and performance.
For example, in the case of
<amp-img>, AMP requires us to specify the dimensions of the image. AMP needs to understand the layout of the page before assets (such as images) load. This improves the user experience when your page is loading, but before the image assets have been downloaded. When the images are downloaded, they can be inserted into the page without causing any existing content on the page to move around. This gives the AMP runtime room to decide when to load image assets based on the capabilities of the user’s device and internet connection.
Note: If you want to know more about AMP’s automatic optimizations, you can read about lazy-loading in AMP in the appendix.
To use the component and to resolve the
<amp-img> validation error from earlier, replace the existing img tag in our page with the AMP equivalent. Hint: instead of
<img …>, write
<amp-img …> and give your image fixed dimensions. Give the image a
640 and a
If necessary, reference the documentation for
The portion of the page containing the image should look like this:
<amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746" width=”640” height="480"></amp-img>
Note:: Check the AMP Validator extension. If you’ve completed this exercise successfully, the extension icon should be green. If so, congratulations! Your page is now valid AMP!
Arranging and Sizing Components
The next problem we need to troubleshoot has to do with how our page looks. You won’t notice it on a large desktop monitor, but it’s easy to see what’s wrong when we look at the site on a mobile device.
The image we added to the page doesn’t shrink to fit smaller screens; it just spills over the side. If we don’t specify a strategy for laying out the image and resizing it, it’s going to default to a fixed width and height as we specified in our code. Luckily, we can fix this issue using AMP's layout system.
We are going to give our image a
layout of type
responsive so that it automatically scales as the window is resized. The responsive layout causes the image to assume the dimensions of the parent container, all while respecting the original aspect ratio. If the parent container is only 320 pixels wide, the image will maintain its aspect ratio and be resized to 320x240 (instead of 640x480).
layout attribute to our image. If done correctly, it will looks something like this:
<amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746" layout="responsive" width="640" height="480"></amp-img>
After you have made the change, take a look at your page. The image has the correct aspect ratio and responsively fills the width of the screen. Problem solved.
There are other layout types beyond responsive (at least 8 in total, in fact). For example, the
fixed layout indicates that the component should never be resized from the height and width that are assigned to it. The
intrinsic layout is similar to the
responsive layout, except that it has the concept of an intrinsic height and width that cannot be exceeded by the component. Some layouts can only be applied to certain components. The documentation for each component will specify which layouts are valid for that component. You can read about the rest of the layout types here.
If you want to become a successful AMP developer, learning how to use the layout system is critical. All of the layouts that AMP provides can be implemented using plain CSS, but often they can be complicated or have tricky edge cases that require deep knowledge to work around. AMP simplifies the process and exposes many of these layout options to be used on any element in your AMP page. Check out the official documentation for more information about the layout system.
Tip: Try selecting different mobile devices from the dropdown menu (see screenshot below) to see how the image adapts to different screen sizes. It’s good practice to test your site on different screen sizes. Browsers on actual mobile devices may behave differently, so when possible, test your webpage on real devices too.
Exercise 4: Embedding Video
Next, let’s embed a YouTube video in our document. Our marketing team at Chico’s Bikes released this video of one of our cheese bikes being constructed.
<amp-youtube> documentation to embed this YouTube video under the
<amp-img> component with the following settings:
Set the video id to
Make the video layout
Note: Don't forget to add the script to the
Recommended style guidelines:
- Set the element
Hint: The documentation contains examples of how to use the
<amp-youtube>component. For this exercise, it’s sufficient to copy one of those examples and adapt it to the requirements above.
After you have made the changes, look at your page. You should now see the YouTube video:
<amp-youtube data-videoid="BlpMQ7fMCzA" layout="responsive" width="480" height="270"></amp-youtube>
Remember to include the
<amp-youtube> script in the
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Note: AMP also includes support for other video players. Check out "Integrating Videos in AMP an Overview" on AMP by Example.