codecanyon purchase key: How to Get Started with Google AMP

Google’s AMP project is designed to create mobile friendly, fast loading sites as well as to wrestle intrusive advertising methods back under control. Regardless of whether you choose to use AMP or not, I recommend checking it out, because if nothing else it will give you a thorough list of optimization tasks you should consider implementing into your projects either way.

At TutsPlus we’ve been steadily assembling information and guides on AMP since it was first launched, and in this article we’re rounding them all up into one place so you can conveniently take advantage of these learning resources. Together they’ll take you all the way from asking “What is AMP anyway?” through to being confident to code any AMP project and get that green lighting mark of AMP validation.

Let’s jump in!

Getting Familiar with AMP

AMP can include some terrain that’s somewhat tricky to negotiate if you just dive in head first. So before you put hand to keyboard and start coding let’s get familiar with what AMP is, what it can do for you, and how to decide if it’s something you want to use in your projects.

AMP in 60 Seconds

First, let’s get the basics down. In 60 seconds we’ll cover the key concepts you need to know before you start working with AMP.

AMP Project: Will it Make Your Sites Faster?

The whole point of AMP is to make your sites faster, so of course the real question is, will it actually do so?

In this article we get into the guts of AMP, pull it apart and find out what its moving parts are. Through this we determine whether AMP can make your sites faster, if there are equivalent non-AMP techniques, and if it will help you in the context of your specific projects.

Get Coding

Once you’re across the concepts behind AMP it’s time to hook into some coding. These tutorials and learning guides will get you rolling.

How to Make a Basic AMP Page From Scratch

In this tutorial you’ll be creating an AMP page in a way that’s designed to give you practical experience with all the key components of AMP. You’ll start with boilerplate code and from there learn everything you need to know to make the most common types of AMP pages.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Make an AMP Page</title>
    <link rel="canonical" href="/index.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="http://ift.tt/1hxtDVM"></script>
  </head>
  <body>
    <h1>Make an AMP Page</h1>
  </body>
</html>

Course: Up and Running With AMP

If learning from videos is more your thing, jump over and take the course “Up and Running with AMP”, which builds on the above tutorial.

The course will step you through how to get your basics setup, like creating a local preview and activating the AMP validation tool. From there we’ll take a look at how CSS works in an AMP context, how to create AMP friendly images, videos, galleries, web fonts & embedded tweets, and ways you can use coding techniques to create interesting layout effects while staying AMP valid.

How to Use amp-img and amp-video to Speed Up Your Website

If you’re in the photography or videography field you might not need to know how to use every AMP element under the sun, you might just need to know how to use AMP to speed up and smooth out the delivery of your images and videos. In this tutorial we’ll be stepping through just that.

Quick Tip: Make AMP’s Inline CSS Easier With Jade / Pug or PHP

One of the most awkward things about AMP can be its requirement that all CSS needs to be inline. That’s fine for a single page, but when you are creating sites with multiple pages you’ll need a solution that allows you to still write your CSS externally then bring it into the <head> section of your AMP pages later.

In this tutorial we’ll go through two ways you can do this, one using Pug, (formerly known as Jade), and the other using PHP.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://ift.tt/1PQsqax" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="http://ift.tt/1hxtDVM"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

AMP and CMSs

Making AMP mesh in with a CMS can take a little more effort, given you don’t have full control over the markup being produced. However, with a little help from the side of the CMS, creating AMP sites on WordPress and Ghost can be a straight forward affair.

How to Set Up AMP Support for WordPress

WordPress has an official plugin to add AMP support that makes the basics pretty much plug and play. However with the addition of Yoast’s SEO plugin you can get some extra control over your AMP pages. You’ll also need to know how to make sure any plugins you install don’t mess up your AMP validation, and how to go about further customization should you need it. We cover all these things in this article.

How to Use Ghost’s Built-In AMP Support

Ghost has AMP support built right in with the need for any plugins, but if you want to have your AMP pages integrated into your theme’s style you’ll want to learn how to create your own AMP template. We go through how you can do that in this tutorial.

Wrapping Up

That should be everything you need to get started with Google AMP, no matter what kind of site project you’re working on. Enjoy!

The post How to Get Started with Google AMP appeared first on Envato.

envato.com coupon from Envato http://ift.tt/2uKwAKS
envato.com coupon

codecanyon purchase key

Senin, 10 Juli 2017

How to Get Started with Google AMP - envato.com coupon