Hello. Welcome to the Apple News Format Session. My name's Casey and today my colleague Dan and I are going to show you how you can create some beautiful and engaging articles for news using the Apple News Format. By the end of today's session, you will have a detailed understanding of all the design capabilities of the Apple News Format, as well as an understanding of all the code used to construct those stories. Believe it or not, we're even going to identify some efficiencies between your design and your markup.

Dan's going to cover a variety of features that will allow you to create some beautiful layouts that are reminiscent of magazine-type style, including features like drop caps, side bars, galleries, and animations. With the Apple News Format, your articles are going to look amazing on the iPad and 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 dive into here today, but first it's really important that I give you a bit of context around the News Application itself. And that's because news is the foundation for how users are going to discover and 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 means that they get to find new fans. News makes its recommendations based on channels and topics that a reader chooses to follow. And then it places relevant stories into the readers For You feed.

And that For You feed is the key to content discovery for 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's such a breadth of content in news. And that breadth, it speaks to the fact that anybody can publish to the News app.

You can publish today and begin to connect with readers and begin earning revenue. And you can do that using several different methods. Including RSS, the News Publisher Authoring Tool, and the Apple News Format. If you haven't checked it out already, you should check out 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 superhelpful for any number of things you're going to want to do, including HAN authoring articles, maybe creating a translation layer on top of your CMS so 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 there for 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 designs that 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 nature of the Apple News Format is superimportant because it allows us to develop features at a quick pace without any additional dependencies. So I feel like we've given you a pretty good background here around News. So now we can really jump into the nuts and bolts of the Apple News Format. Here's Dan to take it away.

Thank you Casey. So now that you have a sense of the world in which these articles live, let's dig into the nuts and bolts of how you actually make an article with Apple News Format. So what we're going to do today is we're going to take this sample article and we're going to tear it down to the skeleton.

And then we're going to build it back up 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 users who are browsing the feed.

Next, we have excerpt, our first piece of metadata. And this is the snippet of text that appears with 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 talk about a few thumbnail image tips. So first of all, the accepted formats for 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 terms of width height ratios. So for thumbnail images, you need to be at 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 talk about 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 friend who doesn't have access to Apple News. Having that one version to fall back on will make a much better experience.

So we talked about metadata. Let's dive into the content. So, content lives in a top-level array in your article, called components. And, each of your pieces of content is represented by a JSON object which is the component. Each one has a semantic rule, like heading1, title, intro, byline, and body.

Choosing the most appropriate role for your content is critical for accessibility. So we touched on semantics, but what if you want to style your text? So this is where component textiles come in. And component textiles is a top-level dictionary. And we're going to make our styles in three different layers.

So the first one we're going to do is we're going to make a default style, that's going to lay the baseline styles for all of our text components. Then, we're going to define a number of rule-specific styles that are going to build on default. And finally we're going to make it a non-default style. And this is for when you need an exception for the rule.

Okay, so here's our default style. And let's take a look at the properties inside. First we have font name. And one thing to keep in mind is that font name is not, declare your font is not quite the same as in say CSS. So keep two things in mind.

First of all, when referencing fonts, you need to call them by their postscript name, not by their family name. And two, the fonts that you use need to be available on iOS. So, if you wanted to channel those sweet nineties design skills, you could make the real use of the Chalkboard family, using these postscript names.

Next we have text color. Text color takes a hex value. You can use the shorter form if you want. Or if you need alpha, you can use the 8-character version. Then we have font size. And font size is declared in points. But we shorthand that to an integer.

Now, just because it's in points, don't think of this as an absolute value. The app's going to take your font size and when users look at it on different devices, it's going to make some adjustments to optimize legibility. And that said, a good rule of thumb is try not to go below 16 points for your body copy.

On a similar note, line height's also declared in points. And you want to define your line height relative to the font size you've chosen, we'll maintain that ratio across devices. And finally we have length style. So this is where you get to define some overrides for any links that appear in the text in your component. Here [inaudible] find a text color, but there's certainly nothing stopping me from adding an underline. So now that we have our default style, let's add our first role specific default.

So this one has a special name, just like default. It's called default body. And this is going to lay down the baseline styles for any body component, with two new properties here. We have ParagraphSpacingBefore and ParagraphSpacingAfter. And as you would hope, they affect paragraph spacing. But what does it mean to have paragraphs in a component based system.

So let's take a look at our first body component. And this one component actually has two paragraphs inside of it. That's our first one. And that's our second one. And we divide them with two new lines, markdown style. And speaking of which, you may have noticed this format declaration.

In Apple News Format, you get to choose between plain text and markdown for your text formatting. And in this case, we're taking advantage of that right now with this markdown style, links and text. Whether you choose plain text or markdown though, you can use these paragraph spacing properties to effect the spacing between the paragraphs inside your component.

So now that we've seen how to make a role specific default, let's just quickly hammer out the rest of them. So for our heading up top, I've added some tracking, so to give some breathing room to letters. Kicked up the size of the title, added some color, lightened up the intro. So, subtle changes for our byline, as well as for our subheading, further down. So now that we got that out of the way, let's move onto something more interesting. Let's make our first non-default style. And we're going to take this opportunity to add a drop cap.

So, one thing to keep in mind is because we're doing this in three tiers, we've already covered most of the styles that we want for our body components in default and default body. So with this third layer, with this custom style, all we're going to do is define how the drop cap should look. And we're going to do that in a special drop cap property.

And inside of that you get to define some style overrides for the first character in the first paragraph of that component. And the interesting thing here, is this number of lines property. This is where you get to define how many lines of text your drop cap should span. And as you can see here, I'm just going with a very simple two-line drop cap.

So we made our style, but because there's no semantic relationships between this component textile and any particular component, we need to call it out. We do that by adding a textile property to our component. And naming the name of the style that is made. In this case it's called body first drop cap. And once you do that, on the right you can see we get our two-line drop cap.

So, stepping back, compared to our raw text dump at the beginning, now that we have some textiles, things are looking a lot better. But it's a bit jumbled. We definitely need some margins here. And this is where component layouts come in. So, component layout is our next top-level dictionary we're adding. And inside we can set define layouts, which gives us the ability to add top and bottom margins to our components. We also do a few more things, which we'll touch on layer. And we have flag component layouts to a component by adding a layout property.

Once we do that, we've got some breathing room in our article, and topography, things are looking a lot better. But, let's take advantage of another simple and cool way to add more control over our vertical spacing. Let's add a divider. And let's put it between our heading, up top, and the title of the article. So, there's our divider. And you can see we have some control over the stroke. We can change the width and the color. But, personally what I think is really cool, here is what's happening in the layout.

So take a look at the divider and see how it extends all the way to the right side of the screen. This is nothing that's inherent to divider. It's something that we're doing inside the component layout. We're using a special property called ignoreDocumentMargin. And you can see I've given it a value of right, which means just ignore the margin and go all the way to the edge.

So now we've got component textiles, we've got component layouts, we have a divider. Things are looking pretty good from, you know, a text perspective. Now it's time to add some fun stuff. And, the best way to start that is with a photo. So, got my photo component. Below that I added a caption component. But, inside the footer component, you might see this caption property, which appears to be sort of replicating the caption component.

And what's really happening here is we're defining a caption as it will appear if the user taps the photo, goes into full screen view, as you can see on the right. This is also a critical thing to include for reasons of accessibility, as the caption here is what will be read to VoiceOver users.

Next, returning to our layout, you can see that this photo is full bleed, it's going all the way from the left side of the screen to the right side of the screen. And again, this is not something that's inherent to the photo component, we're making use of the ignoreDocumentMargin property again. This time though, instead of a value of right, I've given a value of true, which just means ignore both margins.

And then finally, we have our URL, which points to the image asset. And I'll step back and talk about some requirements for images that appear inside the article view. So images can be referenced both locally or remote, just use the correct scheme. Again, just like with thumbnail URL, definitely send us high resolution art. We'll take care of down sampling on a per device basis. For images inside the article view, you can use JPEG, PNG, as well as GIF, and we definitely support anime GIFs.

So, that's photo. But what if you have a number of photos that all go together thematically? This is where the gallery component comes in. And implementation is a piece of cake. You simply specify a role of gallery. You feed it an array of images. And what you get is a great user experience where the user can engage with the slide show in the article view. They can tap, go to full screen view, see the image specific captions. And when they're done, the swipe out and continue reading.

Now, building on that we have an alternative to standard gallery, called the mosaic gallery. And this has the same implementation, except you switch the roll from gallery to mosaic, and what you get is this really cool composite image of your images that you can see on the right.

And best of all, users retain the ability to tap into the gallery and get this same full screen experience. Next, we have social media embeds. Apple New Format has support for a number of these including Facebook, Vine, and as you can see here Twitter. And implementation is really as simple as knowing the URL of the thing that you want to embed.

Next, getting into more involved embeds, we have support for Apple Maps. And here's a really good example from Travel making cool use of the Apple Maps feature. Including one of these is a great when you want to show your user a location but give them the opportunity to get some context on their own terms. So if you're adding all of these great features and interesting content, you might be looking for a way to monetize your efforts and that's where ads come in.

So let's just touch real quickly on the two ways that you can add ads into your Apple News Format Article. So first if you need control, ad components are the way to go. So you literally place these in your content, at opportunities where you think it would be appropriate to have an ad appear.

If you don't need that much control, though, the easier option is to use the Dynamic ads feature. And with this, all you really have to do is specify the frequency with which you'd like ads to appear, and the app will handle placement for you. And so far what we have is a really good mobile experience for the phone, but what happens when we put this on the iPad? So our mobile first approach, at this point, has left us with a few design opportunities.

We could be definitely making better use of white space. And this is kind of like a big, boring block of text. It would be nice to add some visual variety to keep our readers engaged. And, we have a really bad line length problem, especially when you put the iPad into landscape orientation.

So the solution to all these problems lies in the Apple News Format column system. And this is really our take on the classic problem of the digital age, which is how do you design for many screens. And of course there are some existing methodologies. Notably, responsive design, which you react to your screen size. There's mobile first design, in which you enhance the experience as you gain more real estate.

And these are both tried and true approaches, but making them actually work is tough. It's not easy. And sometimes you end up basically redesigning your article, or your content for different situations. And with Apple News Format, we really want you to design your article once. But more than that, we want you to design for the richest experience. We want you to focus on the big, beautiful version of it. And we don't want you to get caught up in media queries, and breakpoints because the app is inherently designed to handle that kind of scaling for you.

So how does it work? Well, it starts with an iPad in landscape orientation. Then what we're going to 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 want for our article, next we have to assign some columns spans to the content. So, in this example here, our main block of 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 looking at it on different orientations, different devices, what we see is that the app automatically collapses the number of available columns to fit the screen size.

And then likewise, where the real magic is, is how intelligently decides, figure that how to 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 phone where that wouldn't be appropriate, everything falls back into a stacking order.

So at this point, you could be tempted to start doing some arithmetic. Figuring out for such and such screen width, with such and 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 focus on the visual effects of your designs. To help you do that, we made a great OS X app called News Preview.

So as a designer, or developer, or both, you need to be able to iterate quickly in your designs, and competently and know they're going to look great. And that's where News Preview comes in. Because it allows you to see, get a visual update on how your articles are going to look, while you're messing around with the code. And best of all it leverages the Xcode simulator so you can see multiple devices, multiple orientations all updating live, simultaneously while you work. And it's available for all Apple developers at developer.apple.com.

So, returning to our JSON, we talked about the concepts of the column system, now let's put how we actually make these happen, in the article JSON. So now we're going to go back to our article skeleton, we're going to look at 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 is for a given width, say 1024, for an iPad in landscape, I want to divide the screen into 10 columns with 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 spans to our individual components. And, because of the very obvious line length legibility problem we 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 get to say how many columns in total this content should span.

And I've set it to 10, which is also the total number of columns in our document. And you probably won't be surprised to see that nothing changed in our article. The default is for all components to expand to 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 column that our body content occupies is the third column in our 10-column layout. And of course if you start from zero the third column has an index of two. And then I've reduced the width of the content so 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 going to go ahead and kick it over to left and switch it to occupy the first seven columns. Now, if we take this and we start applying it to 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 experience that 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 kind of a long block of text, a little boring. We can use some visual variety. And of course the classic solution to that problem is to add a pullquote. So let's extract some text from one of our body components and let's drop a pullquote in.

Next, let's use our component layout and take that pullquote and just like push it over into the margin. So I chose a column start and a column span value to allow the pullquote to clear all the body components. And what you can see is it successfully did that and 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 relationship between our pullquote and something. And fortunately, we have an inherent semantic relationship between the pullquote and the text from which it was extracted. So, what we're going to do is we're going to use something called anchoring in Apple New Format, and we're going to anchor our pullquote to the body component that contains the text that we've pulled out for the pullquote. Step one in doing this is we're going to add an identifier to our body component so we can call it out.

Then we're going to add an anchor property to our pullquote component. And inside of there, that's where we're going to call out the identifier we just made. And then we get to define how do we want to align these two things. So in this case what we're saying is we want to 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 content that it could be near. We have much more interesting use of white space. But because we have an inherent textual relationship between the pullquote and the text from which it was extracted, we can actually take this another step further and 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 it so that it overlaps the body components by one column. And then we're going to call out the range of text from which the pullquote was extracted. And once we do that, we get this really cool sort of embedded into the text pullquote look.

And then of course when we take that and put it on other orientations and 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 this as a template for our content.

But if we look at the experience of scrolling through our article so 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 slides up over the lead image. And how as you get to each photo the fades in just as 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 advantage of a really cool Apple News Format feature called a scene animation. So, step one in doing this, we're going to take our photo and we're going to move it so that it's the first component in our article. Now, next what we're going to do is we're going to do a little transformation. We're going to take this photo. We're going to change it from being a photo component to 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 component called header. Now, nothing actually changed because we just have an empty container there. So for debugging purposes, I'm going to go ahead and add some height and add a background color so 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 color with a new property called style. This allows us to find a component style. And component styles give you access to some higher level design elements like background fills and borders.

The next interesting thing here is the fact that it actually defined our style inline, which is something I haven't done before. On a technical level, there's really no difference between defining things inline, versus calling them out elsewhere as a main reference. It's really just a matter of organization and convenience.

And then we have our height. So I've manipulated the height on the container with a property called minimumHeight inside our component layout. And I gave it a value of 44vmax. And what that means is we want this container to be at least 44 percent of the longest viewport side. And this vmax unit is one of several special sizing units that are available in Apple News Format.

So, now that we have our lovely size gray box, let's go ahead and switch it from being a background color to being an image fill. And doing this is a piece of cake. We just add a fill property to our style. And now that we have that, we can get rid of our photo. And we've completed our transformation, we're a little be closer to our scene animation.

Next step, we need to actually establish a scene. And the way we're going to do that is by actually dividing our entire article into two containers, semantic containers called sections. So our first section is going to be our scene, where the animation is going to happen. So I'm going to put our header container in there. And then everything else in the article, I'm going to dump into our second section.

Now to make our scene actually happen. So, again, this is pretty easy. You simply add a scene property to the first section. And then you define what kind of animation you want. And here, I'm using one called fading sticky header. And what that means is it's going to take our header container, and as the user scrolls, it's going to stick to the top of the viewport, the rest of the article is going to slide up over it. And then the background fill on the header is going to fade. Let's see it in action.

So here's our article. User scrolls, and the text slides up over the image and starts to fade away. That's the gist of the effect, but it's not quite what I was going for. We have that naked text is sort of sliding up over and becoming illegible. Not the effect I want. Fortunately, the solution is really, really easy. All we need to do is add a background color to our second section. We're just going to let the rest of the content retain that white background and slide up over neatly. So again, let's see it in action.

So we still get our animation with a fading background but it's still legible. Much better experience. So now that we've dialed in our animation, we need to pay a little more attention to some design elements. In our top of article experience just to make it look nice. And the first issue I'd like to tackle is the fact that when we moved our photo, suddenly the captions got this awkwardness and a bunch of things between it and the thing it describes. And there are a few different approaches to this problem.

The one I'm going to use today is to take our anchoring skills and sort of kick it out into the margin. So this has the effect of making the association clearer with a clean vertical line. But also, it makes our white space a bit more interesting up top.

And then the next thing I want to do is I want to take advantage of the fact that we're using a container with an image fill up top now instead of a photo. And one of the coolest things about that is you get to put things inside of containers. Mainly text. Meaning we can layer some text on top of the image, and add a much more interesting look to our top of article.

So, I've taken our title and the caption, the heading above it, and I've put them into our header container, which looks pretty cool, except that now they're sort of awkwardly floating up top. It'd be nice if I could align them to the bottom of that. And I can, using another ability of the anchor property.

So if you use an anchor on an object that's inside of a container, you get to adjust the alignment of it relative to its container. So in this case I'm using a target anchor position at bottom. And as you can see, my text sticks to the bottom of the header container. And it looks a heck of a lot better.

So, we're really, really close. We've got some interesting layering of text over images, we've got nice white space usage, we've got good topography. The last thing I want to do before I call our top of article experience done is I want to 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 dictionary called 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 range of text and make two styles. One for gray text, and one for bold text.

And to apply these I'm going to take advantage of a really cool markdown extension we have in 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 want to effect in square brackets and I follow that 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 look for 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'd like to make before I call the whole article done. I want to add some motion to a few elements that 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 got to 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 an animation 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 thing and apply it to our gallery. Then I'm going to add a fade in animation to 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 scrolling through the article more fun and more dynamic. And that seems like a pretty appropriate place to end our crash course on 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 lines of code we added some really cool animations. Of course this is just the tip of the iceberg, I encourage you to 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.

Hey, Dan gave you a great introduction to the Apple News Format and showed you how you can use the News Preview Tool to 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 contribute to plugins for the platform.

This link will take you to everywhere you need to go in order to have those materials to get started, including your documentation and some of the example code that Dan showed you today. Be sure you check out that other News Session that covered all of 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.