How much are you putting into responsive design for your site? Do you have a mediocre looking frontend design? Do you not really care too much for mobile marketing? Or are you struggling with loading speeds and awkward responsive frontend? In this article, we’re going to talk about building faster responsive pages with AMP Project.
Why should you consider responsive?
If you’ve read this far and you’re not sure or convinced whether or not you need a responsive version of your site, allow me to throw some statistics your way.
Almost half of the world’s internet traffic at the time of writing this article, November 2018, came from a mobile device, keeping in mind these percentages do fluctuate. According to statistica.com, 38% of this traffic came from the United States. In fact from 2013 to 2017, the global sales of smartphone devices were at 478 billion dollars. These numbers are HUGE!
If we zone in on the United States specifically we’ll see that by end of 2018, 78 billion dollars of smartphone sales are projected. Even young children are being handed old iPhones by their parents to use as iPods and media devices for games and videos.
By 2021, projected eCommerce sales from mobile devices are expected to reach 53.9% and with a lot of buyers being linked into adverts and marketing campaigns via social media like Instagram, Facebook and Twitter, the potential for targeted impulse buying is definitely there for those with itchy thumbs on their daily commute, or while relaxing on their phones in a cafe or even at home.
Nowadays, responsive design should be considered more than just a variant of your desktop theme, they are a complete beast, they should be considered as parts of a whole.
So if you’re wondering if you should consider responsive design, ask yourself these three questions:
Do you want to maximize your sales avenues?
Let’s look at a scenario if you had a physical shop, and someone came in and said, I can take some of your products for you and distribute them to a few different storefronts across the country and increase your reach and sales, would you?
Do you want to rank higher with Google?
Guess what, Google penalizes sites that do not have responsive versions of their sites, therefore you’re less likely to get better rankings in search results than your competitors who do have responsive.
Do you want to be taken seriously?
This may come as a bit of a blow to hear it, but have you ever opened up a site on your smartphone only to be greeted with a full-scale desktop version site completely zoomed out and unreadable, and then maybe closed it out and gone somewhere else?
What if someone did that to your non-responsive site?
Let’s say they found yours ineligible on their device, clicked the next result down, liked the service they received there, then became a regular.
That could have been your customer.
How to get the best out of responsive
So let’s say that you have a really awesome website, you pulled the trigger (or are about to) on a responsive site.
Well, it doesn’t just stop there. To take your existing website and just wrap some style on it to make it look good on mobile doesn’t guarantee that you’re viewers aren’t still finding things frustrating.
What do I mean by this?
Bouncing
Bouncing, simply speaking, is when someone takes a look at your site or page and then, for some reason, decide they’re done interacting and/or looking at it. It usually denotes that the person has lost interested and decided to up and leave.
We will leave the topic of bouncing for another article and another day because there’s a lot that can be discussed about it.
That being said, one of the many reasons people tend to leave, and the most important for this article, in particular, is because of page loading performance. Someone on their phone is less likely to close out of your site if it’s taking to long, but there are ways to fix this.
Enter AMP Project
AMP is an open-sourced project that alleviates a lot of the problems that can inhabit responsive sites and help fight those volatile bounce rates that can plague sites with poor loading times or a heavy dependence on high-resolution images or scripts.
The library consists of a suite of tools that are designed to help put together responsive versions of pages that prune away all of the unnecessary components.
Sure, you may have an awesome animation or graphical slider or another cool component, but is it really necessary for mobile viewing? Is it worth keeping it around at the costs of people bouncing?
You’ll come to the conclusion that a lot of the stuff you see on a desktop version of a site is overkill for a responsive site.
To deal with this, most of the time it is just hidden via CSS or JavaScript.
One of the problems is that most sites as they load, load JavaScript files in one by one in order of priority, the same goes for CSS, and a lot of pages can grind to a halt because of this, especially if an external script is not responsive.
I’ve seen this happen before, where a page just wouldn’t load because of some external tracking script timing out.
Another issue is high-resolution images loading in and then be scaled down to size to fit the viewport width, which is overkill and completely unnecessary, especially as those images also have loading time repercussions that can really take a toll on your Google responsive page insights.
Amp has the potential to bring your Google Page Insight rankings well up to the 90% region, which should instantly pique your interest because that means people won’t be staring at a page waiting to load when they just want quick access to your page.
How does it work?
Firstly AMP doesn’t allow you to load in your own JavaScript files, so if you want to do certain trigger events, you have to use the ones they provide. That means if you have 20 different JavaScript files you’re loading in one after the other, it’s no longer going to happen.
The notion is that you want to keep your mobile pages loading fast, with minimal distractions and page load costs. Therefore by removing all of the unwanted JavaScript you would be loading for things you would otherwise be hiding anyway, you will see dramatic improvements.
Next, CSS is loaded inline and at a limit of only 50K in size, meaning you would need to keep the styles trimmed down, but this number should be ample enough and set as the limit by AMP due to experience in making responsive sites.
By doing this you again greatly reduce loading times, you know the threshold size of your CSS so you would have a good idea of what to expect in terms of loading. Another important thing that is done to mitigate loading time is in the way that images are handled.
A special image tag called <amp-img> is leveraged that loads images in asynchronously, this means that you’ll see a little loading animation for images rather than a block page that is lagging behind trying to load images. The images are set at a specific size or aspect ratio so that Amp knows beforehand what size the image will be.
Now one thing to know with AMP is you are actually building out a separate version of the page which is called via a specific path or a query parameter like “?amp” the reason for this is because a page needs to be run through the AMP engine and adhere to their code style.
This may sound like extra work, but it is still possible to leverage your existed styles at the expense of swapping out some of your JavaScript components for AMP-specific ones i.e. with a mobile slide-out header.
By creating a responsive specific version of a page, you’re actually tailoring the page specifically for responsive, not as an afterthought, loading in all of the images, javascript and CSS unnecessarily.
If you’re considering using Amp, it’s well worth a visit to the project site to watch the introductory video.
AMP with Drupal and Wordpress
If you’re curious about trying out AMP, sometimes it can be difficult to know where to start. Fortunately, if you’re on Drupal or Wordpress, you do have options. With Wordpress, you can download their plugin here, and with Drupal here.
When working with AMP on Drupal, at the time of this article the current version sits at 8.x-3.0-alpha1, this is the one I would recommend using, also to leverage their theme also.
Downloading the alpha of the Drupal Amp Theme from 3.0 upwards will give you the option to create a subtheme from your existing theme, but leveraging AMP, which will reduce a lot of time that you might take creating a subtheme based off of the AMP theme itself.
This way you could copy your entire existing theme, rename it, clean it up and trim it until you get a more efficient version of the existing one.
In order to validate your theme, you will also want to take a check using the official AMP validator which is a really useful tool for spotting any errors that may arise from a poorly formatted document or not adhering to AMP standards.
We hope you found this article useful! If you’re interested in boosting your responsive performance and have tried every other trick in the book, let us know as AMP may be the perfect solution for you!