As we talked earlier, the mobiles appear to be a greater part of all of the devices the Internet get accessed through. So it's not a big surprise the way web pages get created and structured more and more gets to turn around that the responsive frameworks and the most popular amongst them – the Bootstrap framework – now come to be the only acceptable way to create a web page – responsive and mobile-friendly. Additionally, some new ways to get things done appear, like the Accelerated Mobile Pages by Google or AMP – a stripped down to the bone HTML code eventually spiced up with a list of allowed scripts by (of course) the AMP library – endorsed by its creator and claiming to provide your content a faster and better appearance on mobiles, free Google CDN caching of your content and a better ranking in the search results. That's what they claim.
Due to the way they get constructed, AMP pages themselves can't be taken as fully functional pages, but rather as alternative mirrors which your potential audience can get access on from their mobile devices and is what the AMP web builder says is true – it has good loading times and fast access to the content you would like to share.
The AMP standard is generally mobile-oriented and the most logical thing to conclude is - it also has some means to handle some different screen widths since, as we took a quick glimpse not so while ago, it’s not impossible to make a normal Bootstrap and AMP page as one, but it's rather an interesting experience. As it looks like, the AMP tries to also prove itself as a mobile-friendly framework in a way – providing a strict and a bit complicated scheme marking up the content and a few custom layout attributes which can be handled by their script only for achieving some of the tasks we got used to as granted in The Bootstrap framework.
Let's take a look at how the AMP page markup should be written in order to act responsively.
Let's start with the simplest thing – the images. As you probably know – there is no such thing as <div class="img"><img></div> tag in AMP. What they use instead is their own <amp-img> tag. In order to behave responsively it has to have the layout="responsive" attribute (we'll get to the layout attribute and its possible values in just a bit) and to probably make the page load a bit faster here we have the so-called srcset attribute following the good classical src What it does is providing to AMP base script a list of image – screen width pairs separated by comma defining which image to get displayed on a page according to the viewport width.
Something like: srcset="/assets/images/img-xs.jpg 575w, /assets/images/img-md.jpg 767w" and so on. So, we guess the right way to think about this as for a max-width rule concerning not the viewport, but the image itself.
Additionally, if an AMP image needs to have a responsive appearance (with the responsive layout defined) it also needs to have its dimensions like width and height explicitly provided. This seems confusing – if an image will scale up/ down according to the viewport why do we need to defied its dimensions? The answer – in order the AMP script to be able to get the images proportions and scale it properly since that's what layout="responsive" actually does - width:100%; height:auto;
Maybe here comes the place to mention a small quote from the AMP official documentation:
"These things are possible with pure CSS – but they're much harder, and require a myriad of hacks"
And we totally agree with it.
Let's take a look at all of the possible layouts in AMP. There are seven of them available and covering some of the possible responsive appearances a web page might have. Some of them like responsive explicitly require the width and height attributes being defined, some need just one of them and some don't need them in order to function properly.
If you need an element to not take place on a page but only in your code (or display:none; ) the AMP way doing it is assigning layout="nodisplay" to it. No width or height are required. The AMP responsive framework also has a layout for nonresponsive elements. Defining layout="fixed" and explicitly providing its width and height will get you a nice nonresponsive element looking exactly the same on any screen width.
As we mentioned above the responsive behavior gets achieved by layout="responsive" - width and height are still needed. The width of the element spans the whole width of its container and the height follows proportionally. The next layout is a bit confusing – it fixes the element's height only so it takes the space available to it, but remains fixed in height. The attribute – value pair is layout = "fixed-height" and obviously - height is required. So this AMP-responsive element will have the same height on a 300px phone and 2880px retina display.
If you need your element to entirely cover its parent you need to assign layout="fill" to it. No width or height are required.
The opposite behavior – the element taking as much space as its children require gets achieved by assigning layout="container" to it. No height or width required either.
And finally – as The Bootstrap framework embraces flexbox so tries to do AMP providing an optional layout="flex-item" option. Elements set this way need not width nor height attributes. The layout pretty much works like display:flex CSS declaration.
So the AMP manages the elements layouts when they are explicitly defined. If not – it tries to guess the right one to use in the following sequence:
- If we have only height defined it assigned layout ="fixed-height"
- When the width, height and sizes attributes are present the layout to be assigned is layout="responsive"
- When only width and height take place (no sizes ) we're getting layout="fixed" - one size on all viewports
- If there are no width or height defined the elements gets assumed to be acting as container and therefore we have layout = "container"
When it comes to the media queries, surprisingly, AMP has no specific restrictions – we can use them in the good classical way we got used to – as long as we define them in the amp-custom style tag. Since we can't reference them from a stylesheet – remember?
Additionally, the AMP introduces another attribute called media which comes to take place as some kind of element-specific query hiding / displaying it according to the viewport width. While using - it is pretty much CSS like – all you need to do is write the appropriate part of the @media rule as a value to the media attribute. For example – if you need to have an image shown only on the small screens you can set media="max-width: 767px" as an attribute to the amp-image tag referencing it.
layout attributeThe layout feature grants you easy, per-element management over the way your element needs to be rendered on screen. Many of these things are possible with pure CSS-- but they're much harder, and require a myriad of hacks. Utilize the layout feature as an alternative.
layout attributeThe following values can surely be utilized in the layout attribute:
width and also height are actually undefined?In a few cases if width or height are not really established, the AMP runtime can certainly default these kinds of values as the following:
- amp-pixel: Both width and height are default to 0.
- amp-audio: The default width and height are actually supposed from a web browser.
layout characteristic actually is not specified ?If the layout characteristic actually is not defined, AMP aims to deduce or predict the appropriate value:
Utilize @media to know how the webpage format looks and behaves, as you would do on any other website. When the internet browser window changes size or orientation, the media queries are re-evaluated and elements are hidden and shown based on the new results.
Another extra element for responsive concept readily available in AMP is the media property. This attribute can possibly be employed on each and every AMP element; it performs much like media queries in your global stylesheet, but only impacts the certain component on a single webpage.
Here you can see some examples.
<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width=466
height=355
layout="responsive">
</amp-img>Depending on the display width, one or the other will definitely be delivered and rendered.
<amp-img
media="(max-width: 649px)"
src="narrow.jpg"
width=527
height=193
layout="responsive">
</amp-img>That's pretty much how AMP try to achieve responsiveness to the pages meant to be for mobile devices mostly. It's not a full-sized responsive framework like The Bootstrap and the way things get done are a bit different than the regular way we are used to, but in case you want your pages validated as AMP - that's the way you need to go for. At least now you know where to start from.