AMP Accelerated Mobile Pages

Lightning bolt symbols AMP compliant

Accelerated Mobile Pages is an open source project aimed to make news pages load faster on the web. It dictates how the page resources are loaded, primarily Javascript, because JS can be a resource hog that does not allow the rest of the page to load until it finished loading all it’s JS first. This is called render-blocking JS. It also requires knowing the dimensions of your assets so it can take control of your page layout. In other words, it knows the final dimensions of assets in the page, so it won’t half load the content, allow the user to start reading, and then have content “jump” around because it’s still loading content. This is a particularly painful point around ads, because this is what a slow-loading ad does to the user experience. Additionally, users are turning to “ad blockers” to mitigate the poor user experience. The AMP project is finding a solution that benefits not only the user experience, but a better solution for monetized publishers also. The hope of the project is to have content, and ads, load so fast that utilizing a 3rd party ad blocker will be the slower experience, thus eliminating the need for the blocker.

To load fast, there are certain rules a developer must follow when implementing the website. Most of these rules are centered around loading all JS files async, portion-sizing the CSS down to what is needed at just the page level, concentrate on loading above-the-fold content immediately, and limiting CPU usage.

WordPress is adopting the AMP methods so we might see this baked-into core WordPress in the future. Right now there are a couple of plugins available. I downloaded and tried the AMP plugin on this blog and observed what it is doing.

AMP research
Comparing the website with and without the AMP plugin for WordPress.
  • To see the AMP styling, you have to append “/amp” to the end of your URL.
  • It adds the appropriate js framework needed to make the page AMP compliant.
  • It adds “async” to javascript files so they are not render-blocking.
  • It added it’s own CSS to the head of the page, including @font-face definitions for custom fonts
  • It removed the main navigation and sidebar
  • Images are replaced with amp-img so the SRCSET is baked right into the solution.
  • Speed test shows the AMP page scores an 88 for the speed test, while non AMP page scores 32.

You don’t get to choose which version of the page the user sees, that is handled by the Google Cache System.

Plugins are only able to AMP the POSTS, not pages and not the archives.

The key strength of AMP isn’t just that it makes your pages fast, but that it makes your pages fast in a way that can be validated.” So I guess this is the advantage AMP has over using just a CDN to deliver speed.

See that Lightning Bolt?

At first I thought this was a sign of AMP compliant pages, but it is instead a symbol of Facebook’s Instant Articles:

AMP in the wild
AMP in the wild: on Facebook

I clicked it to see what it looks like, and it really was “lightning” fast, and this is what the article looked like:

AMP article found in the wild

This article has 3 sponsored ads in it that I scrolled right on by… but the ads were just as fast as the content delivery so as a user, I really didn’t mind them being there because they did not hinder my experience.  This article also has an embedded video that auto played as I scrolled over it.  I wasn’t too thrilled about the sound coming from my phone (since I was at work) but even the video, sound, and ads never slowed down my browsing experience.

Notice the URL for this ends in .html.

 

Social Media Buttons Code

pink social media buttons with hover

Keeping for my toolbox:

/*
Social media icons by Kieran Hunter

contact me for any questions

kieranhunter.co.uk

*/

<div>
<a href=”#”><span>Facebook</span></a>
<a href=”#”><span>Twitter</span></a>
<a href=”#”><span>Google+</span></a>
<a href=”#”><span>Github</span></a>
<a href=”#”><span>Dribble</span></a>
<a href=”#”><span>CodePen</span></a>
</div>
body {
background-color:#d34c65;
text-align:center;
}

/* icon container with excessive gradient */

div {
display: inline-block;
margin-top:125px;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 20%, rgba(211,76,101,1) 70%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(255,255,255,0)), color-stop(70%,rgba(211,76,101,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 20%,rgba(211,76,101,1) 70%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 20%,rgba(211,76,101,1) 70%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 20%,rgba(211,76,101,1) 70%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 20%,rgba(211,76,101,1) 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#00ffffff’, endColorstr=’#d34c65′,GradientType=0 );
}

/* Icons */

a {
color:#fff;
background: #DB6E82;
border-radius:4px;
text-align:center;
text-decoration:none;
font-family:fontawesome;
position: relative;
display: inline-block;
width:40px;
height:28px;
padding-top:12px;
margin:0 2px;
-o-transition:all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
-webkit-font-smoothing: antialiased;
}

a:hover {
background: #ef92a3;
}

/* pop-up text */

a span {
color:#666;
position:absolute;
bottom:0;
left:-25px;
right:-25px;
padding:5px 7px;
z-index:-1;
font-size:14px;
border-radius:2px;
background:#fff;
visibility:hidden;
-o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* pop-up text arrow */

a span:before {
content:”;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
position:absolute;
bottom:-5px;
left:40px;
}

/* text pops up when icon is in hover state */

a:hover span {
bottom:50px;
visibility:visible;
}

/* font awesome icons */

a:nth-of-type(1):before {
content:’\f09a’;
}
a:nth-of-type(2):before {
content:’\f099′;
}
a:nth-of-type(3):before {
content:’\f0d5′;
}
a:nth-of-type(4):before {
content:’\f113′;
}
a:nth-of-type(5):before {
content:’\f17d’;
}
a:nth-of-type(6):before {
content:’\f1cb’;
}

 

 

 http://kieranhunter.co.uk/social-media-icons-hover-titles/

Facebook API & Instagram API

Here’s what my coworker Kandice figure out for us on the FB api.  I am thankful to get this information from her, as she spent 7 hours trying to figure it out; she showed me how to do it in 3 minutes!

In the Facebook for developers site, after you have set up your app:

  1. Must have a contact email
  2. Go to Status & Review, on the right, make public.
  3. Go to Tools, Access Token; Grant permission to your app (its the first link)
  4. In the search box up top, search for “like box”; this box will give you recent posts and some stuff.  Make sure the URL is the clients FB URL.

I don’t remember it being this hard the last time I worked with some FB iframe stuff!

I found this article for working with the Instagram API, so I am archiving it here because I think I will need it soon!

http://www.developerdrive.com/2014/02/how-to-use-the-instagram-api/