Tag Archives: AMP

Our First Iteration AMP Accelerated Mobile Pages

AMP or Accelerated Mobile Pages is a project that endeavors to create faster loading pages. Specifically for mobile devices. Pages that load so fast in fact that the pages seem to load instantaneously.

I’ve been keeping up to ‘speed’ on the AMP project since it’s inception as it comes very close to our own iteration of mobile speed. Something we started working with six or seven years ago with our Gen10 ( Generation 10 ) templates.

The Introduction of Mobile Responsive

When the term mobile responsive started to have an impact on the design community, mostly due to the article posted by ‘A List Apart‘ back in 2010, we realized that ‘mobile’ was a device that we would need to take into consideration when building web templates.

Up to that point in time we only really had desktop computers and resolutions of 1024×768 or 1280×1024 to deal with. Older computers with resolutions of 800×600 were going the way of the dinosaur. And IE8 was starting to take a back seat to Firefox and Chrome.

A few years earlier the first iPhone was released and by 2010 the flip phone was going out of style making way for our current slew of touch devices. More and more people were pulling up websites on their mobile phones and having to pinch and zoom for the most part to read the content.

We were still mostly limited to CSS2 at that point in time, but with the introduction of CSS3 in 2012 and the @media queries it brought to the table, mobile devices quickly took to supporting the latest CSS standards unlike many ( cough, IE ) web browsers of the time.

Mobile Limitations

As mobile became a popular method of accessing the web, service providers started to provide better plans, and more importantly better coverage. But the problem at the time was that most access to the internet was still through your service provider, sucking the ever precious life out of your monthly ‘bandwidth’ allowance every time you accessed the internet. By todays standards, I don’t think you can walk through any populated area without finding some kind of wifi connection you can use. Just 5 or 6 years ago, connecting to wifi wasn’t something that was readily available.

Overcoming the Limitations with our First Iteration of AMP

So back to where we started, our first iteration of AMP. When we first started designing fully mobile responsive websites back in 2012 one of the first considerations we took was ‘bandwidth’. It wasn’t enough to just create a site that would resize or adapt to a mobile device, we didn’t want the end user put into a situation where there would need to download all the bells and whistles that a desktop user on a high speed connection would.

We decided on using a more ‘minimalist’ layout for mobile users, which we could do through the use of the CSS3 media queries. We could target certain parts of the site and display them with minimal styling for mobile users. This saved on the amount of ‘graphics’ and extra CSS used for different components such as sliders. We actually used the media queries to prevent certain elements from being displayed on mobile to really increase the download time. Reducing the amount of bandwidth the end user would need to load the web page.

In a sense, this is a similar approach to what the AMP project is doing. Targeting mobile devices and loading just what they need for a near instantaneous page load, less all the bells and whistles. We attempted to do this through CSS alone, but the AMP project takes it to the next step with some slick AJAX programming and a little help from Google.

Where we are now

Our newest templates use the Twitter Bootstrap CSS framework as it’s designed for mobile on up. Meaning that you start with the mobile layout then built it up to desktop. Bootstrap is the most popular CSS framework available right now. It’s not minimalist to the degree we first started with because bandwidth is becoming less and less of an issue. But it does the allow for mobile only styles to be applied first.

Where we going next

We have our own major projects in the works ( Accelerator ) which goes beyond what AMP is currently doing. This project, I’m excited about. Not only because we’re doing it, but because we need it. There is no solution on the market that will improve your page loads times AND improve your Google Page speed scores. This is something I think every web master should consider as this is one of the key ‘search engine optimization’ criteria that you can now have some control over.

Accelerator is set for launch December 1st, 2016.

Save

Save

Save

Save

Save

Save

Save