# data[].attributes.headline
Scaffold used by Bromley students (inspired by Everyone Can Code resources)

# data[].attributes.subject
Scaffold used by Bromley students (inspired by Everyone Can Code resources)

# data[].attributes.attachment_link.title
App Design Journal Revised Bromley School.key

# data[].attributes.headline
Inclusive App Design Activity (Apple Teacher Learning Centre

# data[].attributes.subject
Inclusive App Design Activity (Apple Teacher Learning Centre

# data[].attributes.attachment_link.description
Sign in to the Apple Teacher Learning Center. Discover great learning resources and learn new skills to become an Apple Teacher.

# data[].attributes.headline
Demo video of process shown in first session (creating a simple language app prototype using Keynote)

# data[].attributes.subject
Demo video of process shown in first session (creating a simple language app prototype using Keynote)

# data[].attributes.attachment_link.readable_text
Using a consistent layout that adapts to various contexts makes your experience more approachable and helps people enjoy their favorite apps and games on all their devices.

Guides and safe areas

A layout guide defines a rectangular region that helps you position, align, and space your content on the screen. The system includes predefined layout guides that make it easy to apply standard margins around content and restrict the width of text for optimal readability. You can also define custom layout guides.

A safe area defines the area within a view that isn't covered by a navigation bar, tab bar, toolbar, or other views a window might provide. Safe areas are essential for avoiding a device's display and interactive features, like a sensor housing or Home indicator.

In iOS, iPadOS, and tvOS, the system defines a collection of traits that characterize variations in the device environment that can affect the way your app displays on the screen. Using SwiftUI or Auto Layout, you can ensure that your interface adapts dynamically to a wide range of traits, including:

Different device screen sizes, resolutions, and color spaces

Different device orientations (portrait/landscape)

Split view

Multitasking modes on iPad

Dynamic Type text-size changes

Internationalization features the system can enable based on locale (left-to-right/right-to-left layout direction, date/time/number formatting, font variation, text length)

System feature availability

Best practices

Design a consistent layout that adapts gracefully to context changes, while displaying the same content as much as possible. People expect your experience to work well and remain familiar when they rotate their device, resize a window, or switch to a different device. Ensure an adaptable interface by respecting system-defined safe areas, margins, and guides and specifying layout modifiers to fine-tune the placement of views in your hierarchy.

Respect key display and system features in each platform. Safe areas help you accommodate features like the corner radius and sensor housings on various devices, and avoid interfering with interactive system elements like the Home indicator and app switcher on iPhone and iPad. Safe areas also help you account for interactive components like bars, dynamically repositioning content if sizes change.

Use placement to convey relative importance. In general, place principal items in the upper half of the screen or window, near the leading side. People typically start in this area, whether they're looking at the screen or using a screen reader like VoiceOver.

Elevate essential information by giving it sufficient space. People want to view the most important information instantly, so you don't want to clutter the screen or window with nonessential details. People can easily access secondary information by scrolling.

Create visual groupings to help people find the information they want. For example, you might use negative space, background shapes, colors, and materials, or separator lines to display related elements and information in distinct areas.

Use alignment to ease visual scanning and to communicate organization and hierarchy. Alignment makes an app look neat and organized, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also help people visualize an information hierarchy.

Be mindful of aspect ratio. Different screen sizes may have different aspect ratios, causing artwork to appear cropped, letterboxed, or pillarboxed. When this is the case, don't change the aspect ratio of the artwork; instead, scale it to fill the screen so that important visual content remains in view on all display sizes.

Be prepared for text-size changes. People expect most apps to respond when they choose a different text size. To accommodate text-size changes, you might need to adjust the layout. For guidance on displaying text in your app, see Typography.

When possible, consider alluding to hidden content by partially displaying offscreen elements. In large collections where content doesn't fit on a single screen, you might be able to hint at the additional content by showing portions of the offscreen items.

On touch screens, provide ample touch targets for interactive components. Maintain a minimum tappable area of 44x44 points for all controls.

Preview your app on multiple devices, using different orientations, localizations, and text sizes. Although it's generally best to preview features like wide color on actual devices, you can use Xcode Simulator to check for clipping and other layout issues. For example, if your iOS app supports landscape mode, you can use Simulator to make sure your layouts look great regardless of whether the device rotates left or right.

Platform considerations

iOS, iPadOS

Aim to support both portrait and landscape orientations. People choose different orientations for a variety of reasons, and they generally expect apps to work well in every context. If it's essential that your app run in a single orientation, don't tell people to rotate their device to match; if your app doesn't rotate automatically when someone holds the device in an unsupported orientation, they'll know instinctively to rotate it. If your app is landscape-only, make sure it runs equally well whether people rotate their device to the left or the right.

If your app runs on a specific device, make sure it runs on every screen size for that device. In other words, an iPhone-only app must run on every iPhone screen size and an iPad-only app must run on every iPad screen size. For guidance, see Device screen sizes and orientations.

Inset full-width buttons. Respect the standard system-defined margins on the sides of full-width buttons. A full-width button at the bottom of the screen generally looks best when it has rounded corners and it aligns with the bottom of the safe area - which also ensures that it doesn't conflict with the Home indicator.

Extend visual content to fill the screen. Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom.

On iPad, consider placing controls on the sides of the screen in landscape orientation. When controls are on the left and right sides of the screen, people can reach them easily with both hands while they're holding the device.

Avoid placing interactive controls at the bottom edge of the screen when possible. Regardless of orientation, people use system gestures at the bottom edge of the display to access features like the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area. Also avoid placing controls in the far corners of the screen because these areas can be difficult for people to reach comfortably. If your game needs to place controls in the lower portion of the screen - below the safe area - use matching insets when placing them at the top and bottom of the screen, and leave ample space around the Home indicator so people don't accidentally target it when trying to interact with a control.

Be prepared for different status bar heights. If you display content below the status bar, you can use the safe area to help dynamically reposition the content as needed.

Hide the status bar only when it adds value or enhances your experience. The status bar displays information people find useful and it occupies an area of the screen most apps don't fully use, so it's generally a good idea to keep it visible.

iOS, iPadOS safe areas

The safe area defines the area within a view that isn't covered by a navigation bar, tab bar, toolbar, or other views a view controller might provide.

iOS keyboard layout guide

iOS 15 defines a keyboard layout guide that represents the space the keyboard currently occupies and accounts for safe area insets. Using this guide can help you make the keyboard feel like an integral part of your app, regardless of the type of keyboard people use or where they position it. For developer guidance, see UIKeyboardLayoutGuide.

macOS

Avoid placing controls or critical information at the bottom of a window. People often move windows so that the bottom edge is below the bottom of the screen.

tvOS

TVs vary widely in size. On Apple TV, app layouts don't automatically adapt to the size of the screen like they do on iPhone or iPad. Instead, apps show the same interface on every display. Take extra care in designing your layout so that it looks great in a variety of screen sizes.

Adhere to the screen's safe zone. Inset primary content 60 pixels from the top and bottom of the screen, and 80 pixels from the sides. It can be difficult for people to see content that close to the edges, and unintended cropping can occur due to overscanning on older TVs. Allow only partially displayed offscreen content and elements that deliberately flow offscreen to appear outside this zone.

Include appropriate padding between focusable elements. When you use UIKit and the focus APIs, an element gets bigger when it comes into focus. Consider how elements look when they're focused, and make sure they don't unintentionally overlap important information.

Use layout templates to build media-centered apps and use grids to provide collections of content. If the layout of your media app simply needs to present content beautifully with minimal layout customization, use a predesigned layout template. If your app needs to showcase a collection of content, use a grid to make the content easy to browse at a distance and quick to navigate with the remote.

Layout templates

Apple TV templates deliver clean, consistent layouts that make content the center of attention. These templates - based on JavaScript and the Apple TV markup language (TVML) - dynamically load and populate with content when people open your app. Templates give you flexibility to create content-rich apps with predefined layouts that look good on the TV screen and are ideal for streaming media.

Choose a template based on its purpose. You can customize a template's background, color, size, layout, and more, but if your customizations make the template jarring or unrecognizable, consider using a different one or designing a custom interface.

Customize templates tastefully. Layout templates are highly customizable; you have control over the background, tinting, size, layout, and more. As you design your app, defer to content whenever possible, avoiding customizations that appear distracting, jarring, or obtrusive.

Understand a template's purpose before using it. If your customizations make the underlying template unrecognizable, consider using a different template or building a custom interface.

For detailed information about integrating templates into your app, see TVML.

Grids

The following grid layouts provide an optimal viewing experience. Be sure to use appropriate spacing between unfocused rows and columns to prevent overlap when an item is brought into focus.

If you use the UIKit collection view flow element, the number of columns in a grid is automatically determined based on the width and spacing of your content. For developer guidance, see UICollectionViewFlowLayout.

Two-Column Grid

Attribute

Value

Unfocused content width

860pt

Horizontal spacing

40pt

Minimum vertical spacing

100pt

Three-Column Grid

Attribute

Value

Unfocused content width

560pt

Horizontal spacing

40pt

Minimum vertical spacing

100pt

Include additional vertical spacing for titled rows. If a row has a title, provide enough spacing between the bottom of the previous unfocused row and the center of the title to avoid crowding. Also provide spacing between the bottom of the title and the top of the unfocused items in the row.

Use consistent spacing. When content isn't consistently spaced, it no longer looks like a grid and it's harder for people to scan.

Make partially hidden content look symmetrical. To help direct attention to the fully visible content, keep partially hidden offscreen content the same width on each side of the screen.

watchOS

Align text with the system-defined side margins. In Apple Watch Series 4 and later, watchOS defines a one-pixel boundary at the side edges of the screen. Although you need to align text with the minimum side layout margins so that it remains legible at a glance, you can make graphic elements and button backgrounds extend beyond the margins and up to this one-pixel boundary.

Design your content to extend from one edge of the screen to the other. The Apple Watch bezel provides a natural visual padding around your content. To avoid wasting valuable space, consider minimizing the padding between elements.

Avoid placing more than two or three controls side by side in your interface. As a general rule, display no more than three buttons that contain glyphs - or two buttons that contain text - in a row. Although it's usually better to let text buttons span the full width of the screen, two side-by-side buttons with short text labels can also work well, as long as the screen doesn't scroll.

Support autorotation in views people might want to show others. When people flip their wrist away, apps typically respond to the motion by sleeping the display, but in some cases it makes sense to autorotate the content. For example, a wearer might want to show an image to a friend or display a QR code to a reader. For developer guidance, see isAutorotating.

Specifications

iOS, iPadOS

Device screen sizes and orientations

12.9" iPad Pro

1024x1366 pt (2048x2732 px @2x)

11" iPad Pro

834x1194 pt (1668x2388 px @2x)

10.5" iPad Pro

834x1194 pt (1668x2388 px @2x)

9.7" iPad Pro

768x1024 pt (1536x2048 px @2x)

7.9" iPad mini

768x1024 pt (1536x2048 px @2x)

10.5" iPad Air

834x1112 pt (1668x2224 px @2x)

9.7" iPad Air

768x1024 pt (1536x2048 px @2x)

10.2" iPad

810x1080 pt (1620x2160 px @2x)

9.7" iPad

768x1024 pt (1536x2048 px @2x)

iPhone 13 Pro Max

428x926 pt (1284x2778 px @3x)

iPhone 13 Pro

390x844 pt (1170x2532 px @3x)

iPhone 13

390x844 pt (1170x2532 px @3x)

iPhone 13 mini

375x812 pt (1125x2436 px @3x)

iPhone 12 Pro Max

428x926 pt (1284x2778 px @3x)

iPhone 12 Pro

390x844 pt (1170x2532 px @3x)

iPhone 12

390x844 pt (1170x2532 px @3x)

iPhone 12 mini

375x812 pt (1125x2436 px @3x)

iPhone 11 Pro Max

414x896 pt (1242x2688 px @3x)

iPhone 11 Pro

375x812 pt (1125x2436 px @3x)

iPhone 11

414x896 pt (828x1792 px @2x)

iPhone XS Max

414x896 pt (1242x2688 px @3x)

375x812 pt (1125x2436 px @3x)

iPhone X

375x812 pt (1125x2436 px @3x)

iPhone 8 Plus

414x736 pt (1080x1920 px @3x)

iPhone 8

375x667 pt (750x1334 px @2x)

iPhone 7 Plus

414x736 pt (1080x1920 px @3x)

iPhone 7

375x667 pt (750x1334 px @2x)

iPhone 6s Plus

414x736 pt (1080x1920 px @3x)

iPhone 6s

375x667 pt (750x1334 px @2x)

iPhone 6 Plus

414x736 pt (1080x1920 px @3x)

iPhone 6

375x667 pt (750x1334 px @2x)

4.7" iPhone SE

375x667 pt (750x1334 px @2x)

4" iPhone SE

320x568 pt (640x1136 px @2x)

iPod touch 5th generation and later

320x568 pt (640x1136 px @2x)

NOTE All scale factors in the table above are UIKit scale factors, which may differ from native scale factors. For developer guidance, see scale and nativeScale.

Device size classes

Different size class combinations apply to the full-screen experience on different devices, based on screen size.

Device

Portrait orientation

Landscape orientation

iPhone XS Max

Compact width, regular height

Regular width, compact height

Compact width, regular height

Compact width, compact height

Compact width, regular height

Regular width, compact height

On iPad, size classes also apply when your app or game runs in a multitasking configuration.

watchOS

Resources

Related

Developer documentation

Videos

# data[].attributes.attachment_link.description
Using a consistent layout that adapts to various contexts makes your experience more approachable and helps people enjoy their favorite apps and games on all their devices. A layout guide defines a rectangular region that helps you position, align, and space your content on the screen.

# data[].attributes.body
Recommend following #AppleEDUChat  on Twitter. Post from Martin Coutts (APLS) - sharing slides of shapes and icons you can easily add to your own library

# data[].attributes.wish_content.attachment_props.text
I have been updating asset kits that I’ll share over the next couple of days. 
First up is the SF symbols and system icons asset kit. 200+ slides of shapes
https://t.co/AZLDEmVqex
#AppleEDUChat #AppleTeacher #ADE2022 #DigiLearnChat #AppleRTC

# data[].attributes.wish_content.attachment_props.original_text
I have been updating asset kits that I’ll share over the next couple of days. 
First up is the SF symbols and system icons asset kit. 200+ slides of shapes
https://t.co/AZLDEmVqex
#AppleEDUChat #AppleTeacher #ADE2022 #DigiLearnChat #AppleRTC

# data[].attributes.attachment_link.embed_code
I have been updating asset kits that I’ll share over the next couple of days.
First up is the SF symbols and system icons asset kit. 200+ slides of shapeshttps://t.co/AZLDEmVqex#AppleEDUChat #AppleTeacher #ADE2022 #DigiLearnChat #AppleRTC
— Martin Coutts  (@mcoutts81) January 10, 2022

# data[].attributes.attachment_link.metadata.attachment_props_source.data.text
I have been updating asset kits that I’ll share over the next couple of days. 
First up is the SF symbols and system icons asset kit. 200+ slides of shapes
https://t.co/AZLDEmVqex
#AppleEDUChat #AppleTeacher #ADE2022 #DigiLearnChat #AppleRTC

# data[].attributes.attachment_link.metadata.attachment_props.original_text
I have been updating asset kits that I’ll share over the next couple of days. 
First up is the SF symbols and system icons asset kit. 200+ slides of shapes
https://t.co/AZLDEmVqex
#AppleEDUChat #AppleTeacher #ADE2022 #DigiLearnChat #AppleRTC

# data[].attributes.attachment_link.metadata.attachment_props.text
I have been updating asset kits that I’ll share over the next couple of days. 
First up is the SF symbols and system icons asset kit. 200+ slides of shapes
https://t.co/AZLDEmVqex
#AppleEDUChat #AppleTeacher #ADE2022 #DigiLearnChat #AppleRTC

# data[].attributes.headline
Demo video - how to trace a photo in sketches school

# data[].attributes.subject
Demo video - how to trace a photo in sketches school

# data[].attributes.headline
Lead an App Showcase - including links to the App Showcase Guide

# data[].attributes.subject
Lead an App Showcase - including links to the App Showcase Guide

# data[].attributes.attachment_link.description
Sign in to the Education Community. Discover great learning resources and learn new skills to become an Apple Teacher.

# data[].attributes.headline
Apple Teacher Learning Centre - guide to filling iMovie Storyboard Placeholders:

# data[].attributes.subject
Apple Teacher Learning Centre - guide to filling iMovie Storyboard Placeholders:

# data[].attributes.attachment_link.readable_text
The first step in filling out your storyboard project is to add video clips or photos to the placeholders in the storyboard project shot list.

1. In the iMovie app on your iPad, open a storyboard project.

2. Tap a placeholder in the shot list.

3. Tap the Add button in the top-left corner of the placeholder thumbnail, then tap Choose From Library.

4. Tap Photos to choose a video clip or photo from your Camera Roll, or tap Albums to choose a video clip or photo from an album in your Photos library.

5. Tap the video clip or photo you want to add to the placeholder.

# data[].attributes.attachment_link.title
Fill storyboard placeholders in iMovie on iPad

# data[].attributes.attachment_link.description
The first step in filling out your storyboard project is to add video clips or photos to the placeholders in the storyboard project shot list. In the iMovie app on your iPad, open a storyboard project. Tap a placeholder in the shot list.

# data[].attributes.headline
Screen Recording Demos - how to create a screen recording on iPad

# data[].attributes.subject
Screen Recording Demos - how to create a screen recording on iPad

# data[].attributes.attachment_link.readable_text
You can take a full-page, scrolling screenshot of a webpage, document, or email that exceeds the length of your iPad screen, then save it as a PDF.

1. Do one of the following:

On an iPad with a Home button: Simultaneously press and then release the top button and the Home button.

On other iPad models: Simultaneously press and then release the top button and either volume button.

2. Tap the screenshot in the lower-left corner, then tap Full Page.

3. Do any of the following:

Save the screenshot: Tap Done, choose Save PDF to Files, choose a location, then tap Save.

Share the screenshot: Tap , choose a sharing option (for example AirDrop, Messages, or Mail), enter any other requested information, then send the PDF.

# data[].attributes.attachment_link.title
Take a screenshot or screen recording on iPad

# data[].attributes.attachment_link.description
You can take a full-page, scrolling screenshot of a webpage, document, or email that exceeds the length of your iPad screen, then save it as a PDF. Do one of the following: On an iPad with a Home button: Simultaneously press and then release the top button and the Home button.

# data[].attributes.attachment_link.readable_text
The Tech Girls Movement Foundation campaigns for a future where women will lead and innovate across STEM fields, thus empowering themselves, and bringing broader social and economic benefits.

At Techgirls, we take a timely, holistic and evidence-based approach to targeting normative gender stereotypes through complementary programs. These programs provide girls aged 7-17 with STEM skills, mentoring and positive role-modelling, whilst including the community through industry partnerships, school and parent collaboration. Efficacy of the Techgirls programs is optimised by engaging girls in STEM in the formative stages of their education, before negative societal perceptions are entrenched. STEM skills such as coding and robotics are taught, thereby building girls' skills and confidence in these fields. Key interpersonal skills are also addressed as the flagship program, the Techgirls Competition, is team-based, workshops provide entrepreneurial skills, and girls build rapport with their mentors who are female industry experts.

Since its inception in 2014, nearly 11,000 schoolgirls in over 500 schools have participated in the Techgirls Competition. In 2020, we moved programs online in response to the COVID-19 epidemic, allowing us to reach 1800 girls in rural, regional and metropolitan Australia.

Our principles are reinforced by the Tech Girls are Superheroes children's books which are distributed free to schools and portray female STEM industry professionals at the vanguard of solving authentic problems. 80,000 of these have been distributed for free to school libraries.

Techgirls sustainability is further ensured by the growing support of technology industries who recognise the benefits of equity in the workforce and the need for a pipeline of young women to fill industry skills shortages into the future. Tech professionals also value the opportunity to fulfil their community and social responsibilities, with many volunteers committing to mentoring in our programs over successive years. Community partnerships and collaboration are central to the success of the program. Mentors and competition judges are leading industry volunteers, competitions are school-based and rely on teachers as coaches, and parents are inspired to understand the opportunities of the future available to their daughters.

# data[].attributes.attachment_link.description
The Tech Girls Movement Foundation campaigns for a future where women will lead and innovate across STEM fields, thus empowering themselves, and bringing broader social and economic benefits. At Techgirls, we take a timely, holistic and evidence-based approach to targeting normative gender stereotypes through complementary programs. These programs provide girls aged 7-17 with STEM skills, mentoring and positive role-modelling, whilst including the community through industry partnerships, school and parent collaboration.

# data[].attributes.headline
Local Competitions: Tahi Rua Toru Tech (NZ)

# data[].attributes.subject
Local Competitions: Tahi Rua Toru Tech (NZ)

# data[].attributes.attachment_link.readable_text
About 123Tech

123Tech is New Zealand's exciting new digital challenge for school students built around the successful TechHub Challenge. Through 123Tech, we'll help you solve problems in your local school or community using digital technologies - and have fun along the way!

Partnering with the Ministry of Education, the IT industry created the 123Tech Challenge to support the new Digital Technologies & Hangarau Matihiko curriculum in schools. Small teams complete the challenge as a whole-class activity, smaller in-class groups, or through your local Code Club.

# data[].attributes.attachment_link.description
123Tech is New Zealand's exciting new digital challenge for school students built around the successful TechHub Challenge. Through 123Tech, we'll help you solve problems in your local school or community using digital technologies - and have fun along the way!

# data[].attributes.attachment_caption
App Design - Get started with app development with a Swift Playgrounds project

# data[].attributes.headline
Get started with app development with a Swift Playgrounds project (Matt Richards)

# data[].attributes.subject
Get started with app development with a Swift Playgrounds project (Matt Richards)

# data[].attributes.attachment_link.title
App Design - Get started with app development with a Swift Playgrounds project

# data[].attributes.attachment_link.description
The Premier’s Coding Challenge is an annual statewide initiative for all Queensland students in Year 3 to Year 10.

# data[].attributes.attachment_link.readable_text
A collection of project guides that brings creative expression to every subject.

Everyone Can Create teaches students new skills to develop and communicate ideas through video, photography, music and drawing on iPad. From quick introductory activities to skill building project guides, teachers have a range of fun and meaningful ways to ignite creativity with any lesson, at any age level.

See what's new in the project guides

# data[].attributes.attachment_link.description
Everyone Can Create teaches students new skills to develop and communicate ideas through video, photography, music and drawing on iPad. From quick introductory activities to skill building project guides, teachers have a range of fun and meaningful ways to ignite creativity with any lesson, at any age level.

# data[].attributes.headline
Creating animations (eg animated splash screen)

# data[].attributes.subject
Creating animations (eg animated splash screen)

# data[].attributes.attachment_link.description
Sign in to the Education Community. Discover great learning resources and learn new skills to become an Apple Teacher.