In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

Drupal AMP: Drupal's Accelerated Mobile Pages Module

Drupal AMP: Drupal's Accelerated Mobile Pages Module

by Adrian Ababei on Dec 01 2016
Drupal's ready to turn into your best ally in your endeavours to constantly comply with Google's ever-changing “rules”! With mobile-friendliness being the ultimate goal and the main words on the lips of all marketers and web developers these days, it would be quite “reckless” to ignore all the efforts that the Drupal community has put into developing this module: Drupal AMP (Accelerated Mobile Pages).
 
Just think about it:

 
  • as a marketer speeding up your website's load time on mobile means happy users (boosting UX) and therefore, “overwhelming” organic traffic for you

     
  • as a content editor, it instantly eases your whole workflow: you're given the easy-to-use toolkit for making your content mobile-friendly in no time

     
  • as a web designer, it lifts a great deal of the “pulling off the best solution for crafting responsive design” weight off your shoulders

     

In short: it's “Optimize for mobile or die trying!" Not really an exaggeration if we think that you only have less than 5 seconds to catch your users' attention and to get them hooked on your website. 5 golden seconds when, if your site loads all its awesome content at a really slow speed or makes content look weird on mobile devices, you can as well “bid farewell” to your users. They'll be off to greener pastures in no time: to websites ideally optimized for the web, that doesn't waste their way too valuable time.

 

What Web Pages Does It Target?

 
That's right, you should know before installing the Drupal AMP module that it doesn't address your whole website. It targets blog posts and informational, news article-based pages on your website!
 
So, it's not geared towards e-commerce websites!

 

How Does It Work?

 
If you're still undecided, facing the challenge of picking between Drupal AMP module and other solutions available out there for helping your site gain speed on mobile devices, consider this: the Drupal AMP module is an open-source project

 
So, if you're a future-oriented type of developer/marketer, you know what this means: it will constantly get tested and improved! 
 
But how does it work precisely? 
 
Once you integrate it into your website, it creates a new view mode for the targeted content type.Then, you get to choose the AMP field formatters that will handle your target content's conversion for the mobile (formatters for video, text or images). Next, it's the PHP library that “comes into the picture”, processing the entered HTML and doing its best to come up with the proper AMP HTML equivalents.
 
It practically gets to “work its magic” on any type of content that you want to optimize for the web.

 

Let's dig into the AMP Theme and the AMP PHP Library!

 
OK, now walk us through short “descriptions” of each one of the AMP module's 2 main components:
 
  •  AMP Theme: familiar with the AMP HTML (a subset of HTML) and its standard? The one aimed at encouraging beautifully looking, quickly loading content on mobile? Well, then you should know that what the AMP Theme does is actually producing the markup that this standard requires for websites venturing in the mobile world. Moreover (for it's still a Drupal theme that we're talking about, so it's got “flexibility” written all over it), it enables content managers to come up with custom-made AMP pages. They gain total control over how these pages on mobile will actually display their content!

     
  • AMP PHP Library: it handles the final corrections and repairs. Whenever the entered HTML doesn't comply with the AMP HTML standard, it's the PHP library that makes the right images, Youtube HTML, Tweets and Instagram conversions and creates the issues reports. Take it as a “quality assurance” tool!
 
In a nutshell: with Drupal 8 you can now respond to the challenge of the “developing for the mobile landscape” trend: quickly displaying AMP HTML pages on your website!

How Do You Install Drupal AMP?

Familiar with Composer Manager? For it's this module that will help you a great deal installing and therefore, boosting your website with all the “mobile optimization features” that AMP comes packed with!
 
So, here are first steps to take:
 
  1. first, a composer.json file (in the Drupal AMP module) confirms the dependency on the AMP PHP library (which features its own dependencies)

     
  2. other modules could state the same library dependencies

     
  3. last, the Composer Manager module gathers all the info in the composer.json files of the modules (all those installed on your website) and puts them all together, thus avoiding the risk of ending up with several modules installing the same dependencies.
         
Now walk us through the installation process:
 
Keep in mind: We'll be enabling the Composer Manager module before we go on and install the Drupal AMP one!
  1. enter this command (in your Drupal's website directory): drush dl amp, amptheme, composer_manager and get your AMP theme, AMP module and Composer Manager downloaded.

     
  2. enable the first items needed for your installation: drush en composer_manager, amptheme, ampsubtheme_example. It's at this step that we're enabling the “ExAMPle subtheme". Take a look at its code, for it will reveal to you how you can, later on. customize your AMP pages.

     
  3.  use Drush for enabling your AMP module: drush en amp
            
Next, you'll be notified about dependencies being downloaded. 
 
There you have them all enabled and ready to be used: the AMP theme, the AMP module, the AMP PHP library and the example subtheme, too.

Configure Your Site For The Drupal AMP Module

Go to /admin/config/content/amp, the AMP module's configuration page. There, pick the content types that you'd like this module to come up with AMP equivalents for!
 
 
Bravo! You're now closer than ever to show off your optimized website which loads its high-quality content faster than ever on mobile! 
Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

10 Best Headless CMS in 2020, That Cover Most of Your Requirements (Part 2)
Ready to compare the features of 5 other best headless CMS in 2020?   We've got them ready for you to just dive in and: survey the key reasons why you'd want to choose one over the other discover each one's main use cases narrow down your options … and pick the one that matches your requirements. What Is the Best Headless CMS in 2020? 5.6. Directus An open source tool for managing and delivering content across an entire network of platforms and devices. And here are some of the top reasons for choosing Directus: it provides your editorial team with an easy to use admin app for managing content it can be in the cloud or self-hosted it provides API for your development team to fetch content 5.7. Netlify CMS  One of your top 10 headless CMS options, an open source one, that you get to add to any static site generator of your choice. A React single-page application that provides you with an easy to use UI, playing the role of a… wrapper for your Git Workflow. Basically, when using Netlify CMS your content gets stored in your web app's git repository (as markdown files), close to your codebase.   "How does a Netlify CMS Gatsby setup work?"   It's pretty straightforward: You enter your content via that user-friendly interface, then Gatsby uses it to come up with the right pages for your web app. Why would you use it? it fits both large and small-sized projects, with fewer pages to create, add content to, to edit, and to manage you get to review/preview your content and make changes in real-time, and even control entries status in editorial workflow mode it provides you with an easy-to-use UI, with just 3 tabs: workflow, media, and content you're free to use it with any static site generator you get to extend its functionality: add your own UI widgets, editor plugins, customized previews, etc. 5.8. GraphCMS     An API-first content management system, a GraphQL-native one, that allows you to distribute content across multiple digital platforms. And not just anyhow, but… within minutes. Your developer team gets to create content APIs in no time, whereas your content team gets all the tools they need for a smooth editor experience.   Source: capterra.com GraphCMS vs Contentful: Main Differences GraphCMS works best for enterprise and mid-market companies, enabling them to build highly scalable applications GraphQL is its underlying technology: an open source query language for APIs, that's been growing more and more popular among developers Contentful targets top global brands, helping them distribute digital content experiences across complex networks of markets and channels REST is its underlying technology: a programming paradigm for distributed systems And here are 2 good reasons for choosing GraphCMS as your go-to headless content management system:  you get a CMS that's client-side and JAMstack compatible you get to tap into the benefits of a JAMstack approach to development (JavaScript & Markup & API) 5.9. Cosmic A cloud-hosted headless content management system that provides you with both GraphQL and REST APIs. But What makes Cosmic one of the best headless CMS in 2020? Why choose the Cosmic Headless CMS?  it ships with features like content modeling, media management, localization, and webhooks it grants you a smooth editor experience with its WYSIWYG  editor, that you can use to incorporate (by embedding code) third-party services like Typeform and GitHub. it integrates smoothly with AWS, Slack, Algolia, Stripe, HubSpot 5.10. Kentico Kontent A cloud-based content delivery API that turns your structured content into content that's easy to be "consumed" by any device or digital platform that you might use as a front-end delivery layer.  Why would you choose it over other great options of headless CMS? you get an AI chatbot when using Kentico Kontent it provides webhooks and custom elements that make third-party integrations a lot smoother you get content management API enabling content consumption And we've come to… the END of the list of 10 best headless CMS in 2020. Which one checks the most features off your list?   If you're facing a "Headless Drupal 8 vs Contentful" dilemma, we're here to: help you identify the one that works best for your business and your requirements make your headless CMS-based project work Just drop us a line!   Image by tdfugere from Pixabay   ... Read more
Adriana Cacoveanu / Sep 26'2020
10 Best Headless CMS in 2020, That Cover Most of Your Requirements (Part 1)
Overwhelmed with options? Are you building your first (e-commerce) headless CMS and you don't know what headless CMS platform to choose?  What are the best headless CMS in 2020, so you can at least narrow down your choices and start... somewhere? Which system matches most of your feature requirements? Here's a top 10: 1. But First: What Is a Headless CMS, More Precisely? Relax, I won't bore you with too many details — we already have an in-depth post on the differences between headless and traditional CMS. So, if we were to sum up the concept in just a few words, we could say that: A headless content management system is an architecture where content is separated from the presentation layer (the client-side front-end). Meaning that you get to create, store, and edit "raw" content (with no design or layout) in the backend and deliver it wherever needed —wearable, mobile app, website — via API. In short, what you get in a headless architecture is: a database to store your content in a dashboard for editing your content Source: Zesty.io As for the "head" that serves your content to the end-user : you're free to build your own front-end, from the ground up … and even multiple front-ends, if needed, that will all use calls from the API to retrieve and display content 2. … Then What's a Decoupled CMS? Headless CMS vs decoupled CMS: what's the difference? And why headless over decoupled? The role that the API plays… That's what makes the difference (and why you'd want to go for a headless approach): If, in a decoupled architecture, the API plays the role of an intermediary between back-end and front end, in a headless architecture the API can be used by any of the front-end portions for pulling data. In other words, a decoupled CMS does come with a built-in front-end delivery layer, that you can rely on, but a headless approach is an API-driven content repository. Which gives you more flexibility for delivering content to any type of display layer. … to multiple "heads". You're free to distribute it wherever it needs to get displayed. 3. Why Choose a Headless CMS? Top 9 Benefits Before I "divulge" the best headless CMS in 2020 to you, here's a shortlist of the key advantages of using a headless CMS software: you get to engage your customers with personalized content across an entire network of digital channels, at different stages in their journey you can deliver richer digital experience, tailored to each channel you gain platform independence you're free to choose your technology of choice you benefit from cross-platform support you get to manage your content from a central location and distribute it to multiple platforms/IoT-connected devices, in a universal format you're free to manage all your platforms from one interface your development team gets to choose the development framework of their choice, integrate new technologies and, overall… innovate you're free to redesign as often as you need to, without the dread of re-implementing your entire CMS from the ground up     4. … And When Should You Use It? 5 Best Use Cases  How do you know for sure that you need to adopt this approach? You know it because your scenario describes one of the following use cases for headless CMS: you're building a site using a technology you're familiar with you're building a website with a static site generator you're building a JS-based website or web app you're building a native mobile app you're building an e-commerce site and you know that the commerce platform you're using won't… cut the mustard as a CMS; or you need to enrich product info in your online store 5. What Are the Best Headless CMS in 2020? Top 10 "Which CMS should I use?" you wonder. "The one that meets most of your requirements…" So, you should start by pinning them down. What features are you looking for in a CMS? Maybe you need a system that should: be straightforward and easy to use for the marketers/non-technical people in your team be built on… Node be highly customizable and editable for your content team to be able to change overlay text, logo, background video/image be simple to set up integrate easily with Gatsby support multi-site setups not be tied up to (just) one specific database provide ease of content entry and rich-text support provide a granular permission system provide native support for content types What are the features that your project couldn't live without? Now, with that list of "mandatory" features at hand, just drill down through your top headless CMS options in 2020. Here they are: 5.1. Storyblok A purely headless CMS that ships with a visual editor, as well. Why would you go for Storyblok? What makes it one of the best headless CMS in 2020? it provides the experience of a page builder for all those non-technical users in your team: editors get to manage content via a more user-friendly interface it grants your developers easy access to the APIs they need 5.2. Prismic Its major selling point? It allows you to choose your own language, framework, technology… And these are the 3 good reasons to go with Prismic as your headless CMS: it allows you to model your content schema and to add your content you're free to choose whatever framework that meets your feature needs: React, Vue, Next, Nuxt, Node, Gatsby… you're free to choose either GraphQL or RESTful API to query content 5.3. Drupal 8 Headless CMS   Another great option is to exploit Drupal's headless capabilities and pair them with the JavaScript framework of your choice. Here are some of the best reasons why you'd use a Drupal 8 API-first architecture: Drupal's a mature and enterprise-level headless solution backed by a wide community, used by more than 1 million sites globally; you get to tap into its massive module collection and even create new custom ones to extend your website's functionality its JSON:API follows the JSON:API specification; developers in your team can start using the API even if they're not experts in working with Drupal you get to load your GraphQl schemas straight from your Drupal content repository; there's a specialized module for this: the GraphQL module you get to use all of  Drupal's famed features (granular access to content, processes, workflows, modules, etc.) right away; you get them out-of-the-box since the REST API is… rooted deep into Drupal 5.4. Strapi, One of the Best headless CMS for Gatsby. It's an open-source Node.js headless CMS, a "host it yourself" one, that allows you to build Node.js apps in… minutes. Why would you use it? because it generates available RESTful API or uses GraphQL shortly after installation, making data available via customizable API because it allows your developers to invest all their resources in writing reusable app logic (instead of having to use some of that time to build an infrastructure) because it's fully JavaScript because it supports plugins that extend the platform's functionality because it's open-source: you'll find the entire codebase on GitHub  5.5. Contentful  Looking for a platform-agnostic solution? A… content delivery network that would enable your development team to manage and distribute (and reuse) content to multiple channels? Then this is the API-driven headless CMS you're looking for. Here are 6 other reasons why you'd want to put Contentful on your shortlist: consistent APIs easy to set up you're free to create your own models easy to use: ships with a robust, non-technical, user-friendly UI you get to add custom plugins quick and easy you get to set your own schemas to get displayed the way you want them to, across different apps Good to know! There's even a Shopify extension available. What it does is connect your online store to your content, stored in Contentful. And if you'll need help with building, fine-tuning, and integrating your content hub, we're ready to tweak Contentful to your needs.  END of Part 1! Stay tuned, for there are 5 more candidates for the title of "the best headless CMS in 2020" waiting in line.  Image by Couleur from Pixabay ... Read more
Adriana Cacoveanu / Sep 25'2020
Drupal 9 Modules Readiness: How Hard Is It to Find Compatible Modules and Build a Website in Drupal 9?
Is it (still) too early to give Drupal 9 a try? To start fresh and build a website from scratch in the latest version of Drupal? Should you stick to Drupal 8 for... a little longer and upgrade later? How difficult will it be for you to find compatible Drupal 9 modules (and themes)? Let's find out: 1. But First: Why Drupal 9? What are the biggest benefits of Drupal 9 over Drupal 8? Why would you choose precisely this version of Drupal to build your new website with? because of the automated updates that it makes possible because of the headless support that it ships with because of the robust multilingual capabilities because of the improved performance: your web pages will load faster thanks to the BigPipe technology because it removes a lot of the legacy code because of its layout features because of its extensibility: you get to incorporated third-party systems quick and easy because of its media library and robust media functionality because of the new, Twig-based theme engine because it's easier to use: you can make the most of its in-place editing (CKEditor) And particularly because there will be no more major re-builds (aka "major pains to upgrade"). Instead, a set of new features gets released every 6 months, including new improvements and additions to be incorporated seamlessly into your Drupal 9 build. 2. Most Drupal 9 Modules Don't Change at All So, stay assured: you won't be having a hard time finding compatible modules for your new Drupal 9 website. Many of the modules on Drupal.org have been, are being made, and will be made compatible with Drupal 9. There's a collective effort coming from the Drupal community in this direction. And where do you add that the process is pretty straightforward:  Same code, but without the deprecated APIs. 3. But What About Those that Do Need Changes? For there have been changes under Drupal 9's hood. Changes in coding with a direct impact on some modules and APIs. Which means that some modules have turned from Drupal core modules to... outside dependencies: this is good news, considering the performance gains you get but also a challenge if you were relying precisely on those modules for your Drupal 9 website Luckily, you have at least 2 helpful tools at hand that you can use to: identify the Drupal modules that still need to get updated apply the fixes needed to make those modules compatible with Drupal 9 3.1. The Upgrade Status Module Why use it? Because it offers you a view of all that has been changed in Drupal.  Source: Drupal.org You have links to the modules' pages there, that you can access to review those changes. 3.2. The Upgrade Rector Module The great thing about this tool is that it provides you with automated code fix suggestions to help you make your target modules Drupal 9 compatible. Source: Drupal.org 4. Some Module Get Removed from Drupal 9 Now, there are a few Drupal modules that didn't get the chance to grow into Drupal 9 modules. And I'm talking here about: Simple Test, that's now replaced by PHPUnit Place Blocks, now replaced by the Layout Builder  As you can see, in both cases you get to use better alternatives. So, it's just a matter of favoring more powerful solutions. Good to know! Expect other modules and themes (i.e. the Classy theme, the Stable theme) to get deprecated and removed by the time we reach Drupal 10. 5. What About the Contributed Modules? What if you need more than the out-of-the-box Drupal 9 modules to build your new website? What if you depend on particular contributed modules? Or on... many contributed modules? Well, then things get a little more challenging... Because many of the contributed Drupal modules still need to be made compatible with Drupal 9. They need some time to catch up with the new version of Drupal. Take for instance: updating tests to PHPUnit or updating deprecated API usages. Now, what you can do is give a helping hand to accelerate the updating of these modules. And the steps/best practices to follow are pretty simple, as suggested in this guide on Drupal.org : use the patch referred to here, create an issue in the module project (first, make sure it doesn't exist already), and choose a title suggestive enough to let the maintainer know that it needs to be tested for Drupal 9 deprecations add an explanation for the signaled issue ... and follow all the other steps suggested in that Drupal.org guide. Tip! Ask that contributed module's maintainer how he/she would like to address the issues you're signaling. Because the guidelines available for Drupal core aren't always relevant for addressing contributed module issues, as well. The END! Now, assuming that: you only need a limited no. of contributed modules for your new Drupal 9 build it's not a heavily customized website that you're building ... how do you get it up and running in? We're here to help. Just drop us a line! We've been building Drupal websites since... Drupal 5. Image by Siggy Nowak from Pixabay   ... Read more
Adriana Cacoveanu / Aug 28'2020