beyond-responsive

Beyond Responsive

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

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 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.

Required?

Requires developers?

Publish everything?

Publish exclusive content?

Advertising

Analytics

Apple News

Launched with iOS 9 on September 16, 2015

News collects all the stories you want to read, from top news sources, based on topics you’re most interested in. It's designed to be a rich and immersive experience, letting you enjoy stunningly crafted articles that reflect the style of the publications they come from. (Apple)

It tailors the experience to all Apple devices and allows for exploration and discovery of content. At it's heart, it's a news reader with an Apple user experience and a footprint on every device.

The more you read, the better News gets at understanding your interests, refining the selection of stories delivered to your screen so they are relevant to you. Easily share articles with others and save them to read offline. It has a footprint on all of your user's Apple devices. (Apple)

iCloud News Publisher

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

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.

Hands On

Summary

Required: No

Requires developers? No for iCloud or RSS, yes for Apple News Format

Publish everything? Probably

Publish exclusive content? Yes

Advertising: iAd only

Analytics: Reports provided by Apple

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.

15% of mobile search traffic

(and growing)

Examples of Google AMP from the NYPost.

Hands On

Summary

Required: Yes

Requires developers? Yes

Publish everything? Yes

Publish exclusive content? No

Advertising: Use your own

Analytics: Use your own

Facebook Instant

Launching on April 12, 2016

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

Photos

Maps

Video

Design

Publish using:

API

Custom RSS feed

Unlike Apple News, Facebook Instant requires a custom RSS feed format that does require development.

Summary

Required: Probably

Requires developers? Yes

Publish everything? No

Publish exclusive content? Yes

Advertising: Use your own or Facebook ads

Analytics: Use 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/

Beyond Responsive – Hands-on with AMP, Instant Articles, and Apple News –

bcampeau

Beyond Responsive – Hands-on with AMP, Instant Articles, and Apple News –

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();