The AMPlifing Of

At, we're eating our own dog food again. Our new website will be completely built with AMP so you can find working examples of AMP code - approved in Google's Search Console. When we screw up, we'll document it. When we find a solution, we'll document that to. You can also find great examples of working source code on Github - AMP Project.

A look behind the scenes

At CATANICH, we worry about digital things that are to come. In short, we don't like to get caught with our pants off or miss out on an opportunity to make money. This new Accelerated Mobile Page [AMP] specification or project is going to catch the digital industry with their pants off. Major changes are coming.

What is the Accelerated Mobile Page [AMP] project?

One thing about something new is the never ending bitching about "not enough documentation" or "examples". So you see, I've been doing this before PC existed. Yea, I've been around for a while and have seen the industry's BS come and go.

Well, AMP is another industry concept and I must say... It's about time! I having redesigned many web sites over the years, and the garbage I've seen as "professional code" is unbelievable. It now seems that AMP appears to be addressing it. Specifically in the jScript sector of code design.

As we decided to Amp up our site, basic design concepts started changing and a customized web design was selected to be implement. Code & templates we have relied on were thrown out. No content management systems used here because the CMS contains way to much junk code today! Plain and simply, it's bloated junk where 70% of the code wasn't really needed. It's just a bad template design.

As a result, is now evolving as a viable, working, and Google approved (explain later) web site that meets the Accelerated Mobile Page (AMP) specification. That's 104 AMP Indexed pages as of 2016/07/20 -- Yea!!! Oh those 77 AMP Errors, that's why we are making this site. Simple, dumb coding errors add up quickly; they're very easy to fix

But it takes Google for ever to update the AMP index. And this will screw up any Project Management Plan or customer's schedule!!! Warning -- Google's slowness here has a direct impact on the coding of the web design.

"We have documented 28 day delays due to the Google index cycle" - Jim Catanich

The learning curve for a professional programmer is moderate, but with the "view source" examples, it will become easy for any programmer to implement and then modify for their needs. We've kept the cosmetics simple as to not cloud or muck up the design concepts.

A Little Background

At Catanich, we are seasoned programmers that SEO and sell digital marketing services. This will explain some of the motivation for this undertaking. Normally, we rank within the top 20 most of the time unless we piss off Google and then we clear the dust off of position 2,000 in our keyword SERP. We will push the limits to see what is really the SEO facts, not what is published or assumed, This is called "benchmarking" and the is what the AMPing of is all about. What's the Good, Bad, and Ugly in this AMP specification. The following is a living series of web pages that will be modified as needed during our design of the our new site. I hope it will save you some time and frustration.

Notes Per Template Section

Since most webdesign follow the 12 column gride standard, we have brokendown our comments into the normal grid sections for ease of learning. The following sections will reflect the normal design section or elements:

  • Design Architecture
  • Header Example
  • CSS
  • Structured MarkUp
  • AMP component specific CSS
  • Navigation - Inline desktop & hamburger Mobile
  • Breadcrumbs
  • 12 Column Content Design with standard @media queries applied.
  • AMP components and associated links to web page examples
  • Google Search Console (Webmaster Tools)
  • Google Analytics
  • Browser Differences
  • Open Issues

AMP Components - Find working examples of each amp components here