Responsive durch amp.dev

What is amp.dev?

Since more and more accesses take place via a mobile device these days, Google in particular has dealt with develop a standard for mobile website formats. It is in the foreground that websites do so provided that they are clear and also load smoothly. Of course, this should also be the case happen without delay. In order to be able to guarantee this, AMP pages are very lean HTML The code and the CSS are set directly in the <head>. However, with these specifications, the free design is a Website also restricted.

Since the JavaScript is loaded asynchronously, it can be ensured that the content of a page is loaded first and the user sees relevant content first. By caching AMP pages, the loading time can be improved tremendously. For this purpose, Google, for example, provides certain AMP caches. However, this leads to the fact that the URL for AMP pages is changed to a Google URL. It doesn’t matter which was the original url.

The first requirements

If you build websites with amp.dev, you have to make sure that HTTPS is used as the default. Otherwise, the full range of functions is not guaranteed. This includes, for example, videos or iFrames that have a Request access via HTTPS.

First we take a closer look at the first part of a amp.dev page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<!doctype html>
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "NewsArticle",
            "headline": "Open-source framework for publishing content",
            "datePublished": "2015-10-07T12:02:41Z",
            "image": [
                "logo.jpg"
            ]
        }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>

At first glance it looks like a normal HTML page. However, if you take a closer look, there are some differences. The document type is defined by default like an HTML page.

The following tag <html amp lang="en"> defines that this is amp.dev content. While <head> and <body> are optional on a pure HTML page, they are required on an amp.dev page. Furthermore, the AMP JavaScript library is specified within the <script>.

In the event that you are using an HTML page with AMP and one without, we use the <link> to create a link to the appropriated page. This is necessary in this case, for example, so that Google knows which page should be loaded. <meta name="viewport" content="#""> is a responsive viewport for displaying the page content certainly.

Finally, a amp-boilerplate is determined, which hides the content until AMP-JS is completely loaded. You have now seen all the necessary requirements for a AMP page.

Of course, you can add additional elements. As seen above, there is also a <script> with integrated Schema.org. This enables you to display your content in different places, for example in the Google Search Top Stories Carousel. On the non- AMP page you must also insert a link so that the two pages are connected.

1

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

However, if you are only using a AMP version of your site, you still have to insert the link <link rel="canonical"...> and link it to your site yourself.

The use of tags

Most of the time you can use the standard HTML tags. However, there are also cases where the tags are just similar and have been adjusted a little. This includes, for example, the image tag. There is also a list in which you see can see which tags have been changed or even tags which you are not allowed to use on a AMP page.

1

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

The styling

When it comes to styling, a AMP page is based on the HTML standards and uses CSS for this. The CSS styling is specified within the <head>. Here you can use class or element selectors do the styling as usual.

A AMP page may only have a single embedded style sheet and inline style, which is located directly in <head>. When it comes to styling, you also have to pay attention if the CSS properties are allowed. You can find them in this list. The styling in your <head> could look like this.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

While you typically use CSS to lay out some of the elements on the page, the AMP has stricter rules that must be followed. Because for performance reasons, all elements on a AMP page need a fixed size from the beginning.

Preview and validation

You can easily open a AMP page from your file system via a web browser. Here, however, it is does not guarantee that all elements will work. Therefore, the better option is to open the site via a local web server.

You can have your newly created page validated directly within the browser. To do this, go to your page and add #development=1 after the URL. You can now see validation errors in the Chrome DevTools console if you should have some.

You have now successfully created your first AMP page. Congratulations!

This text was automatically translated with our golang markdown translator.