About This Tutorial
If you already know how to use components, layouts, and styles in Apple News Format, you can use this tutorial to learn more best practices for the design and layout of an Apple News Format article.
To learn the basics of Apple News Format, see Apple News Format: Design Tutorial.
Advanced Design Features
The images below show an Apple News Format article designs like the ones you’ll build in this tutorial. These images show some of the advanced design and layout features of Apple News Format, such as inset components and inline HTML styling. Apple News is responsive, adapting the layouts to any iOS device.
Layout and positioning
Image fill that remains static during scroll
Before beginning the tutorial, make sure you have the following installed:
macOS or OS X 10.11.3 or later
iOS 10 SDK (This is part of the Xcode installation.)
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.
Text editing software of your choice. This is necessary only if you are doing the tutorial hands-on.
Options for Working Through the Tutorial
This tutorial guides you through creating three design variations on an Apple News Format article.
You have two options for completing this tutorial:
Option 1: Hands-on. (Recommended.) Use the instructions in this tutorial to revise the
article.jsonfile located in the Outcome of Apple News Format: Design Tutorial example. Preview your changes as you go, using the News Preview tool.
Option 2: Download and read as you go. Follow along by looking at the downloadable examples that represent the completion of each stage of this tutorial. Preview these articles in the News Preview tool.
Downloading the Article Bundle Examples
The example called Outcome of Apple News Format: Design Tutorial, below, contains the code and images for getting started with this tutorial. The other article bundle examples below contain the code and images for the article at the completion of each stage of this tutorial.
On your Desktop, create a folder named
Download and unzip the following examples:
Outcome of Apple News Format: Design Tutorial (
Article 1: Header Techniques (
News_Design_Tutorial_Advanced_Article_1.zip)—Header featuring a layering effect and subtle scrolling behavior.
Article 2: Layout and Positioning (
News_Design_Tutorial_Advanced_Article_2.zip)—Layout with captions, pull quotes, and photos that are placed asymmetrically in the margin and inset in the article text. This article also features component animations and a more complex layered header.
Article 3: More Effects (
News_Design_Tutorial_Advanced_Article_3.zip)—A dark theme, a
videocomponent, and an image fill that holds still while the reader scrolls. This article also features a map legend sidebar that always appears near its
Move the folders you downloaded in step 2 into
Previewing the Article Bundle Examples
See Previewing the Article Bundle Examples in the Apple News Format: Design Tutorial document.
Choosing and Opening a Text Editor
See Choosing and Opening a Text Editor in the Apple News Format: Design Tutorial document.
Updating Your Article Preview
See Updating Your Article Preview in the Apple News Format: Design Tutorial document.
Debugging Your JSON
See Debugging Your JSON in the Apple News Format: Design Tutorial document.
Apple News Format: Design Tutorial: Tutorial that covers the basics of Apple News Format.
Using Apple News Format to Create Rich and Responsive Stories: Video of a presentation with explanations of Apple News Format capabilities.
Apple News Format Reference: Technical specifics of Apple News Format JSON.
News Preview: News Preview tool and related downloadable resources.
Apple News API Reference: Technical specifics of the API that you’ll use to deliver articles.