Why Does Google AMP Not Accept Material Design Lite?

Google’s Accelerated Mobile Pages (AMP) has revolutionized the way mobile users interact with content online. AMP enables the delivery of 2 billion mobile web pages and 900,000 domain loads, significantly faster than traditional web pages. However, when it comes to styling these pages, AMP imposes strict limitations on the types of stylesheets and JavaScript libraries that can be used. This article explores why Material Design Lite (MDL) may not be compatible with Google AMP.

AMP’s Restrictions and Performance Considerations

AMP was designed to enhance the performance and quick loading times of mobile pages, making it a popular choice for publishers. To achieve this, AMP restricts the use of external style sheets and JavaScript libraries. The following guidelines underscore these constraints:

External CSS is not allowed. External JavaScript libraries, including jQuery, are prohibited. Every page’s CSS must be written internally within the head tag, including inline styles, with no external stylesheets references. The total size of CSS on a single page should be less than 50KB.

These restrictions are implemented to ensure that AMP pages load as quickly as possible, minimizing the time users spend waiting for content to appear on their screens. This focus on performance means that certain resources, including Material Design Lite (MDL), may not be entirely compatible with AMP.

Material Design Lite (MDL) and AMP

Material Design Lite (MDL) is a lightweight implementation of Google’s Material Design principles, designed to provide a rich, interactive experience without the bloated styles and scripts of full MD or other heavy design frameworks. MDL is an excellent choice for speed and performance optimization, making it an attractive option for AMP pages. However, its reliance on external stylesheets and JavaScript libraries poses challenges for AMP compliance.

AMP does not accept the references to external style sheets required by MDL. Similarly, MDL often relies on external JavaScript files for its interactive components, which are not permissible under AMP’s constraints. This means that while MDL can provide the aesthetics and functionality of Material Design, it may not be appropriate for an AMP page that needs to adhere strictly to AMP’s rules.

Alternatives for Material Design in AMP

Given the restrictions of AMP, there are alternative libraries and methods that can be used to achieve a similar design aesthetic without the external dependencies.

1. Using Inline Styles in the AMP Head

Instead of relying on external CSS, developers can include all necessary styles within the head tag of the AMP document. This involves writing a stripped-down version of the Material Design styles, ensuring that they fit within the 50KB limit. While this approach may require additional coding effort, it ensures that the page remains valid AMP.

2. Customizing MDL for AMP

While it may be challenging, developers can modify MDL to remove external dependencies and inline all necessary scripts and styles. This involves carefully examining MDL’s structure and removing any external references. This approach requires a good understanding of both Material Design and AMP standards.

3. Using Web Components

Web Components are an emerging standard that allows developers to create reusable UI components with encapsulated styles and scripts. By leveraging Web Components, developers can create a Material Design-like experience that is inherently AMP compatible. This approach provides a more modular and scalable solution for building AMP pages with the Material Design aesthetic.

Examples of AMP Based Sites

Many well-known sites have successfully implemented AMP pages. Notable examples include:

Washington Post: National, World, D.C. Area News and Headlines DASIS

These sites have managed to balance performance and design excellence by adhering to AMP’s strict guidelines.

Conclusion

While Material Design Lite (MDL) offers a powerful and elegant design solution, its reliance on external dependencies can make it incompatible with Google’s Accelerated Mobile Pages (AMP). Developers seeking to achieve Material Design aesthetics on AMP pages need to adapt their approach by either inlining styles and scripts, customizing MDL, or leveraging Web Components. By understanding and adapting to these constraints, developers can create high-performing, visually appealing AMP pages that align with the goals of AMP.