What works and What does not?

This custom AMP template does come with some sacrifices. Some features in the Blogger will not work or will work differently when using this template. Here is the list of known items

AMP Validation errors and the use of this template

 Does this template pass AMP Validation?

No, it does not. There are some limitations in Blogger that I find it impossible to workaround at the moment. Some of them are

• The style tags in the error are inserted automatically by Blogger. Some of them such as b:skin cannot be removed.
• The quickedit icon which causes 3 errors is part of footer and I don't know how to remove it. I have removed all other quick edit icons.
• ATOM/XML is a valid MIME type. Ref: IANA. But the AMP validator doesn't recognize it.

If it does not pass the validation, what is the purpose of this template?

The main goal of this template when I started working on this was to make the blog responsive on mobile along with the images and videos in it, instead of having two different views for mobile and desktop. AMP was a good way to do this. Maybe one day it will be possible to workaround the limitations and create a template that passes AMP Validation. Until, then this is my best. If you feel you can contribute, check out the GitHub repo. The entire template is open source.

New Release

Just released a new version of AMP Blogger Template. It is version v20.0.0 the first version in 2020.

Embending YouTube videos in this AMP template

The script required for AMP Youtube is not included in the template. First include it either in the template or in the post.

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

Making images responsive in AMP Blogger Template

The AMP blogger template make the website and text responsive by default. But the images have to be made responsive manually.Yes, you heard that right. You have to manually alter every image to make it responsive.

How to apply AMP Template to Blogger?

This is a step by step guide on how to apply AMP based template your blog. We make use of the custom template feature in blogger for this purpose.

1.  Download our AMP template from the GitHub repo.
2. Go to blogger.com dashboard.
3. Click on the theme option in the sidebar.

What are the advantages of AMP?

Basically AMP(Accelerated Mobile Pages) is a website publishing technology that improves the loading time of the site. It allows the site to load faster on mobile. Some of the advantages of AMP are discussed here

Speed
AMP pages are definitely way faster than normal ones. As Wikipedia says here,

Google reports that AMP pages served in Google search typically load in less than one second and use 10 times less data than the equivalent non-AMP pages.^[1] CNBC reported a 75% decrease in mobile page load time for AMP Pages over non-AMP pages,^[2] while Gizmodo reported that AMP pages loaded three times faster than non-AMP pages.

Responsiveness
AMP based websites are responsive in nature like this blog. That is my main reason that I tried it. Not just the website but also things like images become responsive too.

Improved User experience
A website that is faster to load and scales to a mobile screen is a big win for the end user. It definitely provides a improved user experience.

Reduced load on servers
AMP pages are usually served from Google cache for faster load times. This in turn will reduce the load on your servers.