Apple News Format Tutorials

Create a basic article and then add advanced design features.

Overview

In these tutorials, you’ll download article.json files and follow steps to add code. Preview your changes in News Preview as you go.

Requirements

Before beginning the tutorial, make sure you have the following installed:

  • macOS or OS X 10.11.3 or later

  • Java 8

  • News Preview

  • The required version of Xcode for your News Preview version, as specified on the News Preview page. After you install Xcode, launch the application and agree to all license agreements. When you see the Welcome to Xcode window, you have finished installing Xcode.

  • iOS 11 or later SDK. This is part of the Xcode installation.

  • Text editing software of your choice. This is necessary only if you are editing the tutorial files yourself. See Choose a Text Editor.

Topics

First Steps

Setting Up the Introductory Tutorial

Download the tutorial files, and learn about what you’ll create in the introductory tutorial.

Introductory Design Tutorial

Creating Your First Article

Create an article with text components and component text styles.

Positioning Text Components

Adjust the positions of the text components in your article—for example, place the article body off-center.

Adding a Divider

Create a horizontal, styled divider that extends to the right edge of the display.

Adding an Image and Captions

Create a photo that extends to both edges of the display, with captions that appear in the article layout and in full-screen view.

Adding a Pull Quote

Break an existing body component into two components, and then insert a pull quote between them.

Adding a Gallery of Images

Display three images as a a sequential gallery.

Adding a Mosaic of Images

Display five images as mosaic tiles.

Adding a Tweet

Include a tweet.

Adding a Map

Show geographic information with a map.

Advanced Design Tutorial 1: Header Techniques and Parallax Behavior

Setting Up the Advanced Tutorials

Download the tutorial files, and learn about what you’ll create in the three advanced tutorials.

Container Concepts

Learn about the basic Apple News Format container concepts required for the three advanced tutorials.

Creating a Layered Header

Create a header with a caption that's layered in front of an image.

Adding Parallax Behavior

Create an illusion of multiple flat layers by causing the article body to overlap the header as the user scrolls.

Advanced Design Tutorial 2: Layout and Positioning

Creating a Complex, Layered Header

Layer a title and heading in front of an image with their colors optimized for legibility.

Creating a Floating Caption

Position a caption in the wide right margin of your article.

Creating an Inset Pull Quote

Wrap article body text around an inset pull quote.

Creating an Inset Photo

Wrap article body text around an inset photo.

Adding Color to Text Ranges

Create colored text by using HTML to refer to text style objects.

Adding Animations

Use animations that are shown the first time components appear.

Using a Scene in the Tutorial Article

Control how the article’s opening section comes Into view.

Advanced Design Tutorial 3: More Ideas

Adding a Video to the Header

Add a video component inside the header component.

Creating a Sidebar

Create a box with an HTML bulleted list in the margin.

Adding a Fixed Image Fill

Add an image that remains stationary when the user scrolls.

More Examples

Examples

Download more Apple News Format article bundle examples.

See Also

Design and Create

Apple News Format

Get Apple News Format reference information and create signature content for Apple News.

What’s New in Apple News Format

Check out new features and enhancements.