Guides and Sample Code

Developer

Apple News Format: Advanced Design Tutorial

On This Page

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.

Header techniques

image: ../Art/Overview_1_2x.png

Layout and positioning

image: ../Art/Overview_2_2x.png

More effects

image: ../Art/Overview_3_2x.png

Image fill that remains static during scroll

image: ../Art/Overview_4_2x.png

System Requirements

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.)

  • 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.

  • 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:

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.

  1. On your Desktop, create a folder named News_Design_Tutorial_Advanced.

  2. Download and unzip the following examples:

    • Outcome of Apple News Format: Design Tutorial (News_Design_Tutorial_6_Embeds.zip)

    • 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 video component, and an image fill that holds still while the reader scrolls. This article also features a map legend sidebar that always appears near its map component.

  3. Move the folders you downloaded in step 2 into Desktop/News_Design_Tutorial_Advanced.

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.

More Resources