Hands-on with AMP, Instant Articles, and Apple News – GEN Summit Masterclass –



Hands-on with AMP, Instant Articles, and Apple News – GEN Summit Masterclass –

0 0


gensummit-masterclass-2016

Hands on with AMP, Instant Articles and Apple News

On Github bcampeau / gensummit-masterclass-2016

Hands-on with AMP, Instant Articles, and Apple News

GEN Summit Masterclass

Bradford Campeau-Laurion / @potatomasterPartner & Chief Strategy Officeralleyinteractive.com

  • We are the digital team for publishers
  • We design and build big websites for news organizations and large-scale non-profit institutions.

Responsive design

Responsive design was the most important way to deliver content to mobile devices.

Publish once for all devices

Slightly more complex coding (HTML and CSS, maybe JS) allows you to publish once for all devices.

Still important but...

Major technology companies with large percentages of your target audience have created new publishing channels.

Requires developers?

Advertising

Analytics

Publishing Tools

Live Demos!

Using the internet! The most dangerous thing to do in any presentation!

Apple News

Launched with iOS 9 on September 16, 2015

iCloud News Publisher

https://www.icloud.com/#newspublisher

Live Demo #1

iCloud News Publisher

RSS Feeds

Apple News Format

							
{
    "version":"0.10",
    "identifier":"post-12345",
    "language":"en",
    "title":"A headline goes here",
    "layout":{
        "columns":7,
        "width":1024,
    },
    "components":[
        {...}
    },
    "metadata":{
        "thumbnailURL":"bundle:\/\/featured.jpg"
    }
}
							
						
Apple News format lets you take advantage of all the custom design options.

Animations

Behaviors (Motion)

Custom Layout and Style Options

Examples of Apple News from the NYPost.
Immersive news experiences for all three NYPost properties.
NYPost design combined with a native Apple experience.

Live Demo #2

Publish to Apple News for WordPress

Demo the plugin settings for customizing Apple News format, show publishing a post from the post edit screen and from the Apple News list. Show downloading the JSON file and troubleshooting via the News Preview tool. Show adjusting the pull quote position, byline format and title font size/color options as a way to show settings. Show the API debug email.

Summary

Requires developers?No if you use the built-in settings Yes if you want a custom template

AdvertisingiAd only

AnalyticsReports provided by Apple, integrates with comScore

Google AMP

Launched on February 24, 2016

Accelerated Mobile Pages

Crucial for Mobile Traffic

Not particpating in AMP means lower search results and your traffic is likely majority mobile.

April 1, 2016

15% of mobile search traffic

(and growing)

Today

25% of mobile search traffic

(and still growing)

Example of Google AMP from the NYPost.
Example of Google AMP from POLITICO Europe.

Live Demo #3

AMP for WordPress

Show the meta tag in the source to demonstrate how Google knows to find the AMP version. Show the article in mobile responsive versus AMP. Maybe show the templating structure in the theme.

Summary

Requires developers?No for the built-in treatment Yes for customized look and feel or ads/analytics integrations

AdvertisingUse your own

AnalyticsUse your own

Facebook Instant

Launched on April 12, 2016

A new way for publishers to create fast, interactive stories on Facebook (Facebook)

Publish using:

Custom RSS feed (WordPress plugin V1)

API (WordPress plugin V2)

Version 1 of the plugin required publishing via a custom RSS feed, but version 2 is using the more full featured API.

Design

Live Demo #5

Instant Articles for WP and Publishing Tools

Show the same article that was published to Apple News and AMP to FB IA. Show the interface for managing articles. Show formatting options.

5% of mobile traffic

(and growing)

Summary

Requires developers?No, except for the most customized experience

AdvertisingUse your own or Facebook ads

AnalyticsUse your own

Learn

Google AMP

https://www.ampproject.org

Facebook Instant

https://instantarticles.fb.com

Apple News

https://news.apple.com/

Build

Google AMP

https://www.ampproject.org

Facebook Instant

https://developers.facebook.com/docs/instant-articles/

Apple News

https://developer.apple.com/news-publisher/

Implement

(in WordPress)

Google AMP

https://wordpress.org/plugins/amp/

Facebook Instant

https://wordpress.org/plugins/fb-instant-articles/

Apple News

https://wordpress.org/plugins/publish-to-apple-news/

More Questions?

brad@alleyinteractive.com @potatomaster

http://bcampeau.github.io/gensummit-masterclass-2016/

Alley Interactive @alleydevhttp://www.alleyinteractive.com

#GENSummit
Hands-on with AMP, Instant Articles, and Apple News GEN Summit Masterclass Bradford Campeau-Laurion / @potatomasterPartner & Chief Strategy Officeralleyinteractive.com