Accelerated Mobile Pages (AMP for short) is basically just HTML that's designed to render fast. In a nutshell, the AMP project takes some of the best practices for creating fast web pages and turns them into mandatory requirements.
Innota and AMP HTML go very well together. We're also adding some new features into Innota to make it even easier to create web pages that render fast.
What are Accelerated Mobile Pages?
AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages.
In a nutshell, the AMP project takes some of the best practices for creating fast web pages and turns them into mandatory requirements. For instance, to make a valid AMP HTML page all your image tags need to have width and height attributes. This just helps the browser render the page because it knows the image dimensions before downloading the image.
Another best practice is to not use too much CSS and avoid some bad practices in styling. For instance, the !important CSS qualifier is not allowed. Also, all CSS needs to be inlined in the head of the page.
Accelerated Mobile Pages is an open source initiative but it's heavily backed by Google. If you've read technology news in the last couple of days you probably noticed that Google announced that its search starts to highlight AMP'ed web pages.
There are two key things that make browsing experience fast, delivering the content and rendering the content as fast as possible. Aatos delivers web pages really fast and AMP concentrates on the client side and makes rendering the web page fast. We share a similar goal to make the overall browsing experience as smooth as possible and this makes Aatos and AMP HTML a good fit.
Innota and AMP
Innota doesn't care what format your site uses. You can easily create HTML, XML, JSON or any other representations of your data.
We're also working on some new features that make creating AMP HTML pages in Innota easier. And that is inlining CSS and getting image dimensions.
Inlining CSS
Styling in AMP HTML is allowed but it comes with some restrictions. All CSS must be inlined inside <head> tag and the size of your stylesheet has to be under 50,000 bytes.
Of course, you can always type in your style definitions inside your template, but it's a lot nicer to separate styles into their own stylesheets and use SCSS processing. To make inlining CSS easier we're working on a new feature that will be released soon.
This is how you can inline your stylesheet in your template. In case you're making AMP HTML pages this should go inside your <head> tag:
<style amp-custom>{{ css_inline('amp.css') }}</style>
That's it. Now you can create a stylesheet called amp.css and benefit from all the great features of SCSS. When you publish your site, the inlined CSS will even be minified to make it as small as possible.
Of, course you can inline any CSS even if you're not using AMP HTML. Just use the css_inline(filename) function.
Image Dimensions
To make rendering web pages faster AMP HTML requires that all images have width and height attributes set. This sounds easy, but if you're dynamically scaling images inside Innota it might not be that simple.
This is why we're introducing two new functions, image_width() and image_height(). You probably guessed what these do, image_width('vespa.jpg') gives you the width of image vespa.jpg and image_height('vespa.jpg') would give you the height.
That's pretty simple. If you're dynamically scaling your images to a certain width you can even use image_height('vespa.jpg', { width: 800}). That will give you the height of the image vespa.jpg after it's been scaled down to a width of 800px.
Conclusions
Innota is very flexible and it doesn't care what format you use to present your data. That makes it easy to use new formats like Accelerated Mobile Pages.
In the next release we're adding functions css_inline(), image_width() and image_height() to make it even easier to develop websites that don't only deliver fast, but also render as fast as possible.
