Using Apple News Format to Create Rich and Responsive Stories
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 ]
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?
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
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.
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
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
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
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
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
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
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
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
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
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.
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
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
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
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.
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.