Two of the core pillars of the Accelerated Mobile Pages (AMP) Project are speed and a great user experience on the web. That said, the AMP Project also cares about making the process of building webpages faster and easier. That’s why we created AMP Start, a library of fully-featured templates and common page elements built with AMP.
Once you’ve selected a template, you can download the full code for the site, containing all the HTML, JavaScript and CSS needed to render all the pages within the site. AMP Start is built using Basscss, a low level CSS toolkit that provides lots of CSS utility classes to avoid needing any custom CSS. This way you can quickly create responsive, lightning-fast AMP pages with your own content, without needing to build page elements from scratch.
We announced AMP Start in March, and over the past few months we’ve been working with the design community to create additional templates in more verticals, such as retail and travel.
New e-commerce templates 😎
Today we are launching the redesigned AMP Start, to help you easily find the templates or components you need to get started with AMP.
This includes new templates like Lune, which highlights a single product line with seamless scrolling animations and parallax effects. Lune is designed with a modern feel to showcase details of a specific item and give visitors descriptions and information for the products of a brick and mortar store.
Because of the way these templates were designed, any specific element of a template, such as a hero image or a sidebar menu, can also be downloaded and customized to fit your brand. This is intended to make it easier to create well-designed pages even if you already have the bulk of your site completed.
What’s Next?
Additional templates will to be added to AMP Start over the coming months, including a site for showcasing a creative portfolio, news sites with content tagging and digital magazines, as well as a local business site. In order to really push the limits of what is possible with AMP, we worked with a community of design shops including North Kingdom, MetaLab and Grain & Mortar to produce these templates. Our goal was to showcase the interactive and dynamic possibilities when using components like amp-bind and amp-animation.
We hope these improvements to AMP Start will make it simple to get started with AMP, whether you are building a new site or utilizing one of the stylized components for an existing page. As always, we welcome your comments, feedback, and contributions. As with the rest of the AMP Project, the code for AMP Start is entirely on GitHub and accessible for everyone here.
Posted by Abby Beck, AMP Project UX lead, Google
& Matt Ludwig, AMP Project marketing lead, Google