Making AMP Page Elements More Responsive

By Rob Gravelle

WEBINAR: On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

I've talked about Google's AMP project in the What are Accelerated Mobile Pages (AMP)? and Creating AMP Content articles. Today I'd like to highlight some of the differences between Accelerated Mobile Pages (AMP) and Responsive Web Design (RWD) as well as how to achieve responsive layouts in your AMP pages.

AMP vs. RWD

While both Accelerated Mobile pages and those built using Responsive Design techniques will render on a mobile browser, the AMP Project and Responsive Web Design have very different goals:

  • Responsive Web Design is a method of organizing and designing a website so that it looks good on any device, from a desktop computer to a mobile phone. In that respect, RWD is focused on flexibility.
  • The AMP Project is a web framework designed for delivering content to mobile users instantly. Ergo, it focuses on speed.

The differences don't end there:

  • AMP can work with an existing website, RWD requires some re-design.

    There's no need to replace an existing website with AMP. While it is possible to use AMP exclusively, AMP can also be added to an existing non-responsive (or responsive) website, without a site re-design. In contrast, implementing RWD requires a website re-design.

  • AMP currently only works with static content, RWD can be used for any website.

    For now, the ideal use for AMP is news articles, blog entries, informational pages, and other published content. RWD is better equipped for things like web forms and custom applications.

Adding Responsiveness to your AMP Pages

Even though AMP's main purpose is to load web pages instantaneously, there is no reason why you can't apply RWD techniques to your AMP pages. In fact, it's quite easy to do. AMP supports responsiveness in three ways:

  1. You can continue to use the same CSS @media queries as in your regular web pages.
  2. For finer control over an AMP element, you can specify the media attribute on the element. This is particularly useful when you need to either show or hide an element based on a media query.
  3. AMP provides built-in responsive components to include in your web pages.

The layout Attribute

Styling and layout on AMP HTML pages is very similar to normal HTML pages - in both cases, you'll use CSS. However, AMP limits some use of CSS for performance and usability reasons, while expanding responsive design capabilities with features like placeholders & fallbacks, advanced art direction via srcset and the layout attribute for better control over how your elements display.

Rather than set responsive styling inside of your stylesheet(s), the better approach in AMP pages is to apply styles at the element level. AMP elements accept the layout attribute, which gives you easy, per-element control over how your element should render on screen.

Let's apply it to a DIV element and see what it does.

<div class="square">
  <amp-fit-text width="300" height="200" layout="responsive">
    Lorem ipsum dolor sit amet, 
    has nisl nihil convenire et, 
    vim at aeque inermis reprehendunt.
  </amp-fit-text>
</div>

There are a couple of things to notice in the above markup:

First, there's the layout="responsive" attribute. AMP has a number of different layout types, but the most common of these is the "responsive" layout. When an element is assigned a height, width, and the "responsive" layout attribute value, AMP calculates an aspect ratio from the height and width, and responsively scales the element's containing box to match the width of the parent element.

The other noteworthy feature in the above code is the amp-fit-textcomponent. AMP will try to find the best font size to fit all of the content within the amp-fit-text element's available space. If content of the amp-fit-text is still overflowing the available space even at the minimum font size, the overflowing content will be cut off and hidden. WebKit and Blink-based browsers will show an ellipsis in this case.

We can set the initial DIV dimensions using custom CSS:

<style amp-custom>
  div.square {
    width: 200px;
    height: 200px;
    background-color: grey;
    padding:2px;
  }
</style>

Here is an approximation of how our DIV would render in an AMP-powered page:

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.

 

Under the covers, there's a lot of things happening. AMP adds custom classes, an i-amphtml-sizer element, and even a hidden copy of our amp-fit-text content!

<div class="square">
  <amp-fit-text width="300" height="200" layout="responsive" 
   class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout">
    <i-amphtml-sizer style="display: block; padding-top: 66.6667%;"></i-amphtml-sizer>
    <div class="i-amphtml-fill-content i-amphtml-fit-text-content" style="z-index: 2;">
      <div style="line-height: 1.15em; font-size: 21px;">
        Lorem ipsum dolor sit amet, 
        has nisl nihil convenire et, 
        vim at aeque inermis reprehendunt.
      </div>
    </div>
    <div style="position: absolute;top: 0px;left: 0px;z-index: 1;visibility: hidden;line-height: 1.15em;font-size: 21px;">
      Lorem ipsum dolor sit amet, 
      has nisl nihil convenire et, 
      vim at aeque inermis reprehendunt.
    </div>
  </amp-fit-text>
</div>

In case you're wondering, elements prefixed with i-amp- are internal to AMP and should not be tampered with via stylesheets or scripting.

The "responsive" Layout in Action

Now let's see what effect resizing the containing DIV has on its contents.

First, let's change the dimensions to a width of 426 pixels and height of 320 pixels. As you can see, the font size has increased to fill up the available space:

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.

 

Next, let's shrink down the width of our DIV to 180 pixels. That would simulate a vertical phone viewport:

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.

 

The font becomes quite a bit smaller to fit.

The demo on Codepen allows you to toggle between the three different viewport sizes via the click of a button.

Conclusion

In today's tutorial we saw how achieving a responsive layout in AMP pages requires a different approach than with traditional web pages. Rather than apply styles using media queries, in AMP pages, it's better to apply styles at the element level by including the layout="responsive" attribute/value combination in the opening tag. Having said that, there are instances where media queries make good sense in AMP pages. We'll be exploring some of those in the next installment.



Rob Gravelle

Rob Gravelle resides in Ottawa, Canada. His design company has built web applications for numerous businesses and government agencies. Email him.

Rob's alter-ego, "Blackjacques", is an accomplished guitar player, who has released several CDs and cover songs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92).



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date