0

With a Google AMP site how do you accomplished sharing code that is standard across the site?

Assets such as: Headers Navigation Footer General Style definitions

Based on what I've read this far, and on the demos I've worked with it seems there is a lot of code being duplicated across AMP pages. This duplicated code means an AMP site would potentially be more costly to maintain or modify.

How do other approach solving these challenges with AMP? What am I missing?

Zoop
  • 872
  • 3
  • 11
  • 24

4 Answers4

0

I'm assuming by duplicating code you mean potentially maintaining an AMP site for mobile and a desktop site that is not AMP'd? You don't necessarily have to do this. You can treat AMP as a framework and have an all encompassing site for both desktop and mobile running on AMP.

The website for the company I work for (https://www.craigattachments.com) is built on-top of WordPress using AMP as a framework. We utilize some PHP to selectively call in certain things where we need them such as style sheets so as to avoid hitting the CSS max file size implemented by AMP.

Here's somewhere where I have answered a question similar to this before that might offer a little more insight: Does it make sense to AMP enable a desktop site?.

Maybe this isn't what you meant at all and I misinterpreted the question... Apologies if that is the case.

Craig Scott
  • 892
  • 4
  • 14
  • Thanks for the response. I am referring to things like site navigation. All the examples I have seen have the site navigation code duplicated on every AMP page across the site. Adding an amp page to the navigation would require changes to every single page. I'd like to avoid this... Is there something akin to a masterpage ? – Zoop Jun 06 '19 at 18:53
  • Got a link to an example? I guess my first thought based on that explanation would be to use a language such as PHP (or ASP) to create "master" files (ie; header.php, footer.php) that get included rather than duplicating code across multiple files. Then just use some logic in the header that chooses to either add or not add an AMP library to a page based on what's required (ie; using amp-carousel on your home page and no other page). – Craig Scott Jun 07 '19 at 09:30
  • https://amp.dev/documentation/templates/ My understanding is that mixing AMP with PHP, or ASP that has its stylesheets and/or javascript would violate standards and not be considered a valid AMP page. Is this incorrect? I'm interested in creating an AMP site for both mobile and desktop, but want to avoid duplicating common site assets. – Zoop Jun 07 '19 at 12:41
  • 1
    Update: I found a good example of using partials here: https://github.com/ampproject/samples/blob/master/amp-camp/src/html/pages/blog-article.html I wasn't sure this was possible / compliant. Looks good! – Zoop Jun 07 '19 at 12:57
  • Nice! The website I maintain is built on WordPress (uses PHP) and is all valid AMP. There's even a plug-in for WordPress for AMP - I don't use it personally but it is something that's available. – Craig Scott Jun 07 '19 at 13:01
  • The AMP plugin has a mode that allow you to use your active theme's templates and stylesheets in AMP responses. I'll add another answer to explain. – Weston Ruter Jun 17 '19 at 15:53
0

The official AMP plugin for WordPress has “Native” mode (soon called “Standard”) which allows you to use your active theme's templates and stylesheets to make an AMP-first site. This allows you to use AMP as the framework for your site without having to maintain two separate versions.

For more information, see the Serving Strategies documentation. For some examples of sites using this, see the Showcase.

Version 1.2 is scheduled for release by June 20th, 2019. You can use the 1.2-RC1 pre-release on GitHub. I recommend using this instead of the current 1.1.x release, due to many improvements.

Weston Ruter
  • 1,041
  • 1
  • 9
  • 21
0

Totally agree that you don't want to be copying and pasting HTML and CSS for headers, footers, menus, etc from file to file. It's strongly recommended that you do for AMP what you'd do for other webpages: build your HTML pages from partials or using components. And build your CSS from smaller files and then include that within each AMP page.

One example is here: https://github.com/ampproject/samples/tree/master/amp-camp

Ben Morss
  • 116
  • 1
  • 2
0

You should approach AMP the same as any other web project, and this includes creating re-usable components and templates.

For AMP in particular, if you're trying to build without relying upon a CMS, I would recommend taking a look at static site generators like Jekyll or Hugo. They'll get you building quickly - just drop your AMP boilerplate code into the 'default' layout, and away you go.

You can then start creating re-usable includes (Jekyll) or partials (Hugo) for things like common headers, menu layouts, footers, etc. You'll also want to compile your CSS into an includes/partials file so you can load it inline your head, as required by AMP.

mCpXZKq3ruqgFXrvvAWRj9cYxk8RLX
  • 395
  • 2
  • 13