Session 508WWDC 2016

Apple News beautifully introduces new readers to your stories. Learn about Apple News Format and how it can be used to author rich, responsive stories that intelligently adapt to all screen sizes. Discover the many features of Apple News including interactive galleries, video, audio, and animations which help to make your content more engaging than ever.

[ Music ]

[ Applause ]

Hello. Welcome to the Apple News Format Session.

My name's Casey and today my colleague Dan and I are goingto show you how you can create some beautifuland engaging articles for news using the Apple News Format.

By the end of today's session,you will have a detailed understandingof all the design capabilities of the Apple News Format,as well as an understanding of all the code usedto construct those stories.

Believe it or not, we're even goingto identify some efficienciesbetween your design and your markup.

Dan's going to cover a variety of features that will allow youto create some beautiful layouts that are reminiscentof magazine-type style, including featureslike drop caps, side bars, galleries, and animations.

With the Apple News Format, your articles are goingto look amazing on the iPadand they will effortlessly adapt to every screen size.

That's because the Apple News Format is inherently responsive.

It ensures that your stories are always going to look their best.

So, obviously there's a lot of features to diveinto here today, but first it's really importantthat I give you a bit of contextaround the News Application itself.

And that's because news is the foundationfor how users are going to discoverand experience your stories.

News is a news aggregator application,it comes preinstalled on the iOS in the US, UK, and Australia.

Okay. That's really stuffy though, right?

News aggregator.

I prefer to think of news as a kind of matchmaker service.

News helps readers find stories that they're going to love.

And that's really great news for publishers, because that meansthat they get to find new fans.

News makes its recommendations based on channels and topicsthat a reader chooses to follow.

And then it places relevant storiesinto the readers For You feed.

And that For You feed is the key to content discoveryfor users, and publishers alike.

As a reader, I can find anything that interests me there,from CNN to craft beer.

Oh, this is Eddy's For You Feed,so Formula 1 racing and super cars.

At any case, the point is, is that there'ssuch a breadth of content in news.

And that breadth, it speaks to the factthat anybody can publish to the News app.

You can publish today and begin to connect with readersand begin earning revenue.

If you haven't checked it out already, you should checkout the Getting Started in Apple News Session,it was earlier this week.

It's available on video now.

That session reviews all three of these methods.

This section focuses just on the Apple News Format.

And that's because the Apple News Format is superhelpfulfor any number of things you're going to want to do,including HAN authoring articles,maybe creating a translation layer on top of your CMSso that you can programmatically deliver content, and articles,and stories from your CMS to the Apple News Application.

Or, even for contributing to some of the plugins out therefor platforms, like WordPress or Drupal.

Knowing the Apple News Format is going to prove really helpful.

And, it's just JSON.

The Apple News Format uses JSON to create powerful designsthat are both performant and responsive.

JSON is also really great for converting between formats,and it allows us to have an extensible format.

And that extensible natureof the Apple News Format is superimportantbecause it allows us to develop features at a quick pacewithout any additional dependencies.

So I feel like we've given you a pretty good background herearound News.

So now we can really jump into the nuts and boltsof the Apple News Format.

Here's Dan to take it away.

Thank you Casey.

So now that you have a sense of the worldin which these articles live, let's dig into the nutsand bolts of how you actually make an articlewith Apple News Format.

So what we're going to do today is we're goingto take this sample article and we're goingto tear it down to the skeleton.

And then we're going to build it backup so we understand the fundamentals.

We're going to make it responsive.

And then finally we're going to add some animations.

So here's our article skeleton.

Let's dig into some of the properties here.

Our first property is title.

And this is a title as it will appear to userswho are browsing the feed.

Next, we have excerpt, our first piece of metadata.

And this is the snippet of text that appearswith the title also in the feed.

And finally, you get to define the thumbnail image,using a thumbnail URL.

Now let's step back for a second and talkabout a few thumbnail image tips.

So first of all, the accepted formatsfor thumbnails are JPEG and PNG.

Second, definitely send us high resolution art.

We'll take care of down-sampling on our backend.

The pizel size is 300 by 300 pixels.

If you go smaller than that your image isn't going to show up.

So definitely sent us your best.

And we do have a few moderate requirements in termsof width height ratios.

So for thumbnail images, you need to beat least as wide as 1 to 2.

But no wider than 3 to 1.

Moving on.

Our last piece on metadata that we're going to talkabout today is cannonicalURL.

And this is simply a web version of your article.

And if you have one, definitely include this metadata.

It's going to be really important if a user say,shares your article to a friendwho doesn't have access to Apple News.

Having that one version to fall backon will make a much better experience.

And we don't want you to get caught up in media queries,and breakpoints because the app is inherently designed to handlethat kind of scaling for you.

So how does it work?

Well, it starts with an iPad in landscape orientation.

Then what we're goingto as content creators is divide the screen into columns.

Now, here I've divided it into 10, but as a content creator,you get to choose how many columns you want to use.

There's no hard and fast mind on how many,just keep in mind the more columns you add,the more complexity you're adding to your design.

So, once we've decided how many columns in total we wantfor our article, next we haveto assign some columns spans to the content.

So, in this example here, our main blockof body content is consuming the first 7 of our 10 columns.

And the caption on the right is consuming the last.

So then when we take that design, and we start lookingat it on different orientations, different devices,what we see is that the app automatically collapses thenumber of available columns to fit the screen size.

And then likewise, where the real magic is,is how intelligently decides, figure that howto adapt the components to that new amount of real estate.

So as you can see like when you go to the iPad in portrait,things get narrower, but then on the phonewhere that wouldn't be appropriate,everything falls back into a stacking order.

So at this point, you could be temptedto start doing some arithmetic.

Figuring out for such and such screen width, with suchand such layout, what would the column spans be?

That can get very complicated and kind of annoying.

That's really not in the spirit of Apple News Format.

Because we want you to focuson the visual effects of your designs.

To help you do that, we made a great OS X app calledNews Preview.

So as a designer, or developer, or both, you need to be ableto iterate quickly in your designs, and competentlyand know they're going to look great.

And that's where News Preview comes in.

Because it allows you to see, get a visual updateon how your articles are going to look,while you're messing around with the code.

And best of all it leverages the Xcode simulatorso you can see multiple devices,multiple orientations all updating live,simultaneously while you work.

And it's available for all Apple developersat developer.apple.com.

So, returning to our JSON, we talked about the conceptsof the column system, now let's put how we actually make thesehappen, in the article JSON.

So now we're going to go back to our article skeleton,we're going to lookat a top-level property called layout.

And this is your document layout.

It's got four properties.

And with these properties, what you're saying isfor a given width, say 1024, for an iPad in landscape,I want to divide the screen into 10 columnswith a 20-point gutter in between.

And then to the left and to the right,I'm going to have an 85-point margin.

And of course these numbers are configurable,this is what was chosen for this demo.

Next, once we have our document layout,now we need to start applying some column spansto our individual components.

And, because of the very obvious line length legibility problemwe had with our body components, I'm going to focus on those.

So, we see here on our first body component,we're using a layout named noMarginLayout.

So let's take a look at that definition.

And let's add two new properties.

Our first new property is columnStart.

And this simply says, going from left to right on the screen,what's the first column that this content should occupy.

I've chosen zero my first column.

Then we have columnSpan, which unsurprisingly is where you getto say how many columns in total this content should span.

And I've set it to 10, which is also the total numberof columns in our document.

And you probably won't be surprised to seethat nothing changed in our article.

The default is for all components to expandto the full-width of their containers.

So let's make it more interesting.

Let's implement a centered layout for our 10-column layout.

That looks a lot better already.

So, what's going on here?

I've set it so that the first columnthat our body content occupies is the third columnin our 10-column layout.

And of course if you startfrom zero the third column has an index of two.

And then I've reduced the width of the contentso it only occupies six out of our 10 columns.

And that looks pretty good.

But personally, I like a more asymmetric design, so I'm goingto go ahead and kick it over to left and switch itto occupy the first seven columns.

Now, if we take this and we start applying itto our other components,starting to see our design really come together.

We switch the orientation it still looks great.

And we've retained that awesome level of experiencethat we had from the start.

So our one designed scaled seamlessly across devices.

A piece of cake.

And now let's take that foundation, let's build on it.

So before we were talking about the fact that we had kindof a long block of text, a little boring.

We can use some visual variety.

And of course the classic solutionto that problem is to add a pullquote.

So let's extract some text from one of our body componentsand let's drop a pullquote in.

Next, let's use our component layout and take that pullquoteand just like push it over into the margin.

So I chose a column start and a column span valueto allow the pullquote to clear all the body components.

And what you can see is it successfully did thatand then it sort of floated up until it hit and obstacle,which isn't quite the look we were going for.

So what we need is we need to make a visual relationshipbetween our pullquote and something.

And fortunately, we have an inherent semantic relationshipbetween the pullquote and the textfrom which it was extracted.

So, what we're going to do is we're goingto use something called anchoring in Apple New Format,and we're going to anchor our pullquote to the body componentthat contains the text that we've pulledout for the pullquote.

Step one in doing this is we're going to add an identifierto our body component so we can call it out.

Then we're going to add an anchor propertyto our pullquote component.

And inside of there, that's where we're going to callout the identifier we just made.

And then we get to define how do we wantto align these two things.

So in this case what we're saying is we wantto align the top of our origin, the pullquote,to the top of our target, the body component.

And once we do that, we get a pretty cool effect.

We've got the pullquote hanging out in the margin,right next to it the most relevant piece of contentthat it could be near.

We have much more interesting use of white space.

But because we have an inherent textual relationshipbetween the pullquote and the textfrom which it was extracted,we can actually take this another step furtherand actually anchor to the text itself.

So this is going to be a two-step process.

First what we're going to do is go back to our pullquote layout,and we're going to update itso that it overlaps the body components by one column.

And then we're going to call out the range of textfrom which the pullquote was extracted.

And once we do that, we get this really cool sort of embeddedinto the text pullquote look.

And then of course when we take that and put iton other orientationsand devices it always does the right thing,whether it's reducing the width, or in the case of the phone,falling back into a logical stacking order.

So, at this point, things are really coming together.

We could probably call it quits and start using thisas a template for our content.

But if we look at the experience of scrolling through our articleso far, it's kind of missing something.

For instance, check out this cool article from Harper's.

Now, watch how the body content sort of slidesup over the lead image.

And how as you get to each photo the fades in justas it gets to the view port.

It's a really cool effect,so I think we can take some inspiration from them.

So let's add some motion to our article.

What we're going to do today is we're going to take advantageof a really cool Apple News Format feature called ascene animation.

So, step one in doing this, we're going to take our photoand we're going to move itso that it's the first component in our article.

Now, next what we're going to do is we're goingto do a little transformation.

We're going to take this photo.

We're going to change it from being a photo componentto being a background fill on a container.

So to do that first, we're going to add a container.

And we're using a semantic container componentcalled header.

Now, nothing actually changedbecause we just have an empty container there.

So for debugging purposes, I'm going to go aheadand add some height and add a background colorso we can see our container.

There. Now we've got a lovely gray box.

A few things to note in the JSON here.

First of all, I added the background colorwith a new property called style.

The last thing I want to do before I call our topof article experience done is I wantto add some inline text styles.

So we're going to go one more time to your article skeleton.

And we're going to add a new top-level dictionarycalled textStyles.

And textStyles is similar to componentTextStyles,except that instead of styling all the text in a component,textStyles allows you to do style to just a rangeof text and make two styles.

One for gray text, and one for bold text.

And to apply these I'm going to take advantageof a really cool markdown extension we havein Apple News Format.

So here's the two components that I want to effect.

We've got our title component and our first body component.

And to apply my stiles, all I do is a wrap the text I wantto effect in square brackets and I followthat with the style I want to apply in curly braces.

And once you do that, as you can see in the case of the title,I've given some gray text color to a few of the words.

And then I've got a nice run in bold lookfor our first body component.

So, now I'm satisfied.

Ready to call our top of article experience done.

There's just one more tweak I'dlike to make before I call the whole article done.

I want to add some motion to a few elementsthat are further down in the article.

So, for instance the pullquote there on the right.

It'd be cool if that slid in from the right.

And it would also be cool if the galleries slide in.

But as for the mosaic and the captions,I think it would be cool as if those faded in as you gotto them in the viewport.

So implementing this is really, really easy.

Here's our pullquote.

And all I have to do to add the animation is add ananimation property.

Inside I declare what kind I want.

I want a move in animation this time.

With move in, I get to say from which direction it comes in.

I'm going to have it slide in from the right.

Now, I'm going to take that same thingand apply it to our gallery.

Then I'm going to add a fade in animationto the mosaic, and our two captions.

And let's see it all come together.

So we've got our scene animation,here comes the pullquote.

Slide in. You can put the gallery mosaic,caption, fade, fade.

Looks a whole lot better.

With just a few animations we made the act of scrollingthrough the article more fun and more dynamic.

And that seems like a pretty appropriate placeto end our crash courseon the finer points of Apple News Format.

So, we covered a lot.

We added some text and graphical content.

We saw how to make layouts that work across all devices.

We used anchoring to make visual relationships.

And with just a few linesof code we added some really cool animations.

Of course this is just the tip of the iceberg, I encourage youto download the tools, check out the docs,and play around with it yourself.

We love to see what our content creators come up with.

Back to Casey.

[ Applause ]

Hey, Dan gave you a great introductionto the Apple News Formatand showed you how you can use the News Preview Toolto create stories that are going to look great on every device.

I hope we've inspired you today to sign up with news publisher.

Check out the documentation, publish your stories,earn revenue, help writers get exposure, and contributeto plugins for the platform.

This link will take you to everywhere you need to goin order to have those materials to get started,including your documentation and some of the example codethat Dan showed you today.

Be sure you check out that other News Session that covered allof our different ways that you can get published.

And thank you for coming here this week.

It's been great having you here, and that's a wrap.

[ Applause ]

Apple, Inc.AAPL1 Infinite LoopCupertinoCA95014US

ASCIIwwdc

Searchable full-text transcripts of WWDC sessions.

An NSHipster Project

Created by normalizing and indexing video transcript files provided for WWDC videos. Check out the app's source code on GitHub for additional implementation details, as well as information about the webservice APIs made available.