How To Design Websites For Google AMP

How To Design Websites For Google AMP

How To Design Websites For Google AMP

How To Design Websites For Google AMP

Mobile devices are not just tools to keep in contact with family and friends – they are a lifestyle. Mobile owners use their smartphones and tablets to access content online, learn, do and buy.

As a result of slow mobile connections, Google introduced a new coding practice for web developers they have called AMP – Accelerated Mobile Pages.

AMP HTML is designed to improve the user-experience by speeding up the time it takes for a website to load. However, to do that, Google AMP Cache only reads relevant data. Design work gets stripped out.

This causes a problem for web designers and web developers. Brands pay for their websites to look professional and appealing. If design elements that portray the brand are missing, your client could be missing out on sales.

AMP-enabled content

To cure a potential problem, Google has released AMP HTML codes in the AMP JS Library together with best practices for coding AMP-enabled content.

The main goal of AMP is to reduce load times. Therefore, ask yourself whether features you want are really needed or are they just nice to have. Unnecessary HTML, javascript or CSS is just a waste of time.

Ads are another problematic cause of poor user-experience on mobile phones. Not only do they slow load times, but they can be intrusive and redirect users away from the site they are trying to access.

AMP is essentially a framework specifically designed to improve the experience for users accessing articles. Google’s latest buzzword ‘micro-content’ plays a star role in conjunction with AMP.

Micro-content includes news (I want to know), review sites (I want to go), to do articles (I want to do) and eCommerce sites (I want to buy). The objective for online businesses is to create mobile pages that deliver relevant micro-moments.

Building AMP frameworks

The AMP framework impacts traditional web development as it does not support user- generated script. The good news is that pre-programmed codes are readily available and speeds up the design process.

Although this will effect custom-designs for mobiles, it does increase performance for on-the- go customers without Google wrecking your design work.

It is still possible to include custom features, but you will need to build them through the amp-iframe tag otherwise it will not be supported.

There are also rules for styling AMP codes. For example, fonts should have a link tag of CSS + type face and served over HTTPS. You can no longer load fonts through javascript, although you can have custom fonts.

Although AMP will help brands provide a faster service to their mobile customers, there is a concern that removing features that create a rich user-experience your competitors do not provide will have a negative impact on uniqueness.

Google is trying to offer a solution by gearing AMP towards micro-moments, particularly as mainstream news websites and large eCommerce sites are notoriously bad performers on any device.

Essentially, the goal is to keep the weight down and increase load speeds, but publish content that keeps users engaged rather than programming unique features that will be scrapped anyway.

Website Design Services

Copyright © 2004 - 2018 Designaweb (BSE) Ltd, All rights reserved