A good strategy for implementing a layout that is adaptive is to begin by setting up Auto Layout constraints that apply to all different versions of the layout. We'll call these common constraints. These are constraints that remain active for any size class. By implementing common constraints first, you typically end up with fewer and clearer constraints than you would if you take a different approach.

When you add constraints in Interface Builder, they apply to all size classes by default. You can add constraints for a specific size class by activating the Vary for Traits option by clicking on the corresponding button in the bottom-right corner of the device preview section. Before pressing this button, make sure to select a device that has the size classes you want to work with. For instance, if you want to define constraints for a regular width and regular height, you can select any iPad.

Before you start working on the contact detail page, try to get a feel for how the Vary for Traits feature works. Make sure to turn the feature off before you continue and remove the label you added earlier; you'll start from scratch to implement the new layout.

The contact detail page contains a text area where the user can add some notes. When the user taps this text area, the keyboard will appear, potentially covering the notes field itself on smaller screens. This isn't great because if the keyboard covers the text area, the user cannot see what they are typing. To fix that, you can wrap the entire detail page in a scroll view, allowing the user to scroll the page whenever the keyboard covers the notes field so they can make it visible again.

Implementing a scroll view while using Auto Layout has proven to be non-trivial. Once you understand how it works and what it takes to implement a scroll view with Auto Layout properly, it all makes sense.  However, figuring it out for the first time is tough. So the first thing you'll learn is how to implement the scroll view.

You will follow the following steps to implement the full detail page:

1. Implement the scroll view that will contain the entire layout.
2. Add the big contact image and name label.
3. Implement variation for the contact image on large screens.
4. Add the bottom section of the detail page.
5. Adjust the bottom section of the detail page for small screens.