Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Developing Cross-Browser Compatible AMP Pages

DZone's Guide to

Developing Cross-Browser Compatible AMP Pages

Accelerated Mobile Pages (AMP) applications can be a good way to structure your app for mobile consumers. But, that can lead to cross-browser issues.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

If you don’t already know about it, then let me tell you that the next big thing in the web world right now is Accelerated Mobile Pages (AMP). Backed by Google, AMP pages are quite popular in the mobile-first world, especially in emerging markets. If you are building AMP pages of your website then you are on the right track. However, have you wondered about the cross-browser compatibility of these pages?

With more and more diverse types of mobile devices being launched each month, checking cross-browser compatibility of AMP apps is becoming more and more essential. But how can you ensure that your AMP app gives a high quality user experience to your users across all mobile browsers like iOS Safari, Opera, UC browser, Chrome, and so on?

Why Cross Browser Compatible AMP Apps?

To start with, let’s revise what AMP is first.

"Accelerated Mobile Pages (AMP), it’s an open-source project aimed at allowing mobile website content to render nearly instantly." - moz.com

With an increase in the number of mobile users, tech companies were worried about how to provide a smooth distribution of their web content to mobile users, especially to those that are not on a fast internet connection.

Another argument in favor of cross-browser compatible AMP apps can be inferred from this data: (Source: https://www.ampproject.org/learn/overview/)

  • 75% of mobile sites take 10+ seconds to load.
  • 53% of mobile site visitors leave after 3 seconds of load time.
  • There's 2X more mobile ad revenue for sites that load in 5 seconds vs 19 seconds.

A deep dive into mobile analytics for June 2018 found some interesting facts.

Mobile users are leading the world with 52.52% of market share while Desktop users are 43.63%. AMP is a revolution for all companies to provide their content to their users in no time. We need to take care of all the users accessing different types of mobile browsers irrespective of their location. If we talk about mobile browser use across the globe, here is the browser share report according to StatCounter.

Most tech teams work on a web project taking one browser in mind which covers most of the user base supporting all the cutting-edge web technologies. But a BIG FAT QUESTION comes to my mind, which is: who will care if other users who are using some hated browsers like Samsung Internet, Opera, and the Default Old Android browser (covers approx 12-13% of the mobile user base)?

So, I researched on some of the major factors that cause cross-browser compatibility issues in AMP apps.

Cross-Browser Issues of AMP Pages

Taking browser elements and property compatibility for specific mobile browsers is first step to find issues. I found the following web elements which are not supported by different mobile browsers:

  • Web elements not supported on Android native browser:
    • ::placeholder
    • CSS pseudo-element
    • CSS text-orientation
    • CSS display: contents
    • :focus-within CSS pseudo-class
  • Web elements not supported on Blackberry:
    • Speech Synthesis API
    • Media Queries: interaction mediafeatures
    • Picture element
    • HTMLtemplates
  • Web elements not supported on Opera:
    • CSS writing-mode property
    • High Resolution Time API
    • Link type “noreferrer”
    • Viewportunits: vw,vh,vmin,vmax

The latest web technologies don’t support old mobile browser versions.

  • AMPs use HTML5: A few HTML5 tags are not supported in old browser versions of all the latest mobile browsers. Some examples include:
    •  header
    • footer
    • aside
    • bdi
    • canvas
    • Drawing graphics, on the fly, via scripting (usually JavaScript)
  • Although AMP tags are supported in a wide range of browsers. But there is few browsers that do not support amp tags like: amp-imgstyle amp-custom[amp-font][amp-anim]. AMP apps are designed for mobile browsing. Although a page looks broken in old Android 4.0 devices below Chrome 28.
  • If you are using the AMP img tag and your image is a third-party resource, then you have to define dimensions (height and width). Otherwise, you are going to face the following error:

Image title

  • Script rendering: Allows only asynchronous scripts.
  • SVG animation: The biggest limitation is that, due to scripting restrictions, you won’t be able to animate your SVG vectors with JavaScript. You can still do so using CSS animations.
  • CSS Stylecompatibility: Different CSS style properties for different browsers. Moz-prefixis used for Mozilla browser- Webkit- prefix is used for Chrome browsers.
  • AMP layout and required properties of their tags.
  • The following table describes acceptable parameters, CSS classes, and styles used for the layout attribute.

Image title

How to Fix Issues Faced Across Different Browsers

Accelerated Mobile Pages are just like any other HTML page with a limited set of allowed technical functionality. AMP is very important for publishers and CMS providers. Hence, diagnosing the issues and fixing them is the foremost thing to do. Let’s quickly hop to the solution of issues found for cross-browser compatibility.

Use Inline CSS Style Sheets:

AMP uses inline CSS placed under the head section. We need to add all CSS elements and classes inside a style amp-custom tag in the head element of the document. For example:

<!DOCTYPE html>
    <head>
    ...
        <style amp-custom>
        /* any custom styles go here. */
        body {
            background-color: white;
        }
        amp-img {
            border: 5px solid black;
        }
        amp-img.grey-placeholder {
            background-color: grey;
        }
    </style>
    ...
</head>

For better font rendering, fonts must be loaded with a link tag or a CSS @font-face rule.

Let’s Validate AMP Codes

Are you done with the coding part? Have you taken care of all the precautions and conditions while coding? AMP code validation is a crucial part of the AMP development life cycle. Like web pages, you don’t need to validate HTML and CSS separately. You can validate AMP code directly with AMP project validator.

Last but Not Least Cross-Browser Testing:

Validating AMP code is not enough to go live. Testing AMP apps across different mobile browsers is necessary for a seamless user experience, especially for those websites that have a very diverse user base. You need to make sure your efforts at making AMP apps are worth your time and energy. 

You are all set with bugs and issues found in your AMP. Now are ready to move ahead!

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,amp ,mobile web app development ,cross-browser testing

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}