So I was tasked with turning the article section of one of the websites I am responsible for into an "ampy" type site. First of all, AMP stands for Accelerated Mobile Pages. It is a very stripped down version of the content that has many strict rules to enable performance of the article to be displayed within a mobile device.
Some of the rules are:
- Cannot embed custom JavaScript
- Cannot link to custom JavaScript
- Only amp provided JavaScript files can be used
- Cannot link to css files
- Cannot have inline styles within the markup
- Cannot have !important in your custom style section
- Image tags need to be represented with
instead of - Ads must be able to be pulled from a provider that honors amp.
Some of my heartaches included first of all how to get my site to recognize an AMP request. So I plagiarized a great idea from @sitecoreRick at this URL from stackexchange. Thanks @sitecoreRick!
I created a device type named AMP. Then I set up a querystring param to recognize when that "device" should be honored. So when the querystring comes in, the AMP device is triggered, thus using the renderings based upon that device of AMP.
Simple, huh...Well in Sitecore as always, that was the most solid piece of this whole pie. The rest was modifying the AMP specific renderings to honor the dictatorship rules of the AMP project.
The next heartache was how to test this AMP response locally. Well thankfully Google Chrome has a plug-in that allows you to test the HTML as you go. Whew! Because I had 67 errors on my first test.
My last errors was converting my hamburger menu to a CSS driven only (no JS) component and that led me to a green button and quite a bit of dancing.
Now we see if the ROI is there for this new(ish) thing called AMP, or is this just another passing web fad...Time will tell!
No comments:
Post a Comment