How to recreate a site in AMP, in 15 minutes.

March 22, 2020
by Omer Ram

Cloning an existing website into AMP can be a daunting task. This is particularly true when the site includes many dynamic elements. Such elements heavily rely on Javascripts, something that as we know – AMP doesn’t allow.

In this tutorial, we’ll walk through a full AMP recreation of an HTML site, including all its dynamic elements. We’ll be using Ampify Development Platform, which will enable us to accurately finalize the entire process in 15 minutes

If you want to jump ahead:

Ampify conversion algorithm in action : 3:10
Recreate dynamic elements with jQuery:
- Animated Menu and sub-menu: 6:02
- Search with auto-complete: 11:00
- AMP Carousel: 14:15
- Sticky Scroll triggered bottom banner: 16:55

The site that we recreated: https://demo.trvbox.com/bike-tour-from-vienna-wonderous-bike-tour-among-wineries-in-the-wachau-valley/

The AMP project website: https://amp.dev/

Want More AMP tips and how tos? Subscribe to Ampify!

We’ll send you fresh content whenever it’s pusblished.

Convert your site to AMP now:

Top Ampify Guides

What is Ampify?

Ampify is a development platform for fast and accurate AMP conversion of any site.

Learn more

end-to-end AMP

by

Even with the AMP Development Platform, you may want more. Therefore Ampify offers to do the setup of your site.