Good morning guys, how's your conference going so far? My name is Kevin, I'm one of interface builder engineers and Brent is going to join us a little bit later. And what we want talk to you guys about today is adaptivity, which is how do I make one app that doesn't just look passable on all our devices right, but looks freaking awesome. And so that's what we're going to talk about today.

And I'm going to give away my entire presentation right now. If there's one thing that you take away it's this, when it comes to adaptivity the system is going to do most of the work for you and so we're going to unpack this. I'm going to tell you what the system is actually doing for you that would be nice to know. But also how you guys as developers will get to interact and plug into that system.

But before I do I actually want to step back and I want to give this a little bit of motivation here and I want to tell you why this statement is actually really good news. So Apple had a pretty big mouth on this last year we sold our 1 billionth iOS. I don't know about you, but this number is just like mind-boggling to me. Now you make a fair point, when it comes adaptivity volume doesn't really matter.

Fair, I'll give that to you. But we know that it's not all the same device, it's not all 1 billion original iPhones, so that would be really cool wouldn't it. Over the years Apple has introduced lots of devices of various form factors and sizes and shapes, I mean even colors.

And at Apple we also believe that regardless of what device you have you can hold it however you want whether that be in portrait or landscape. But beyond the physical devices themselves we also have software features like slide over and these multitasking features as well that just increases the number of combinations that your application can be in.

Don't forget things like dynamic type right, where the user can set a font size and all your applications are going to react and relay out right, you're all doing that? And then we also have features like the language direction whether it's left to right or right to left.

We also have the display gamut on those awesome new iPads that we released this year. And Apple TV we also have features like the interface style with its light and dark. So kind of a conservative estimate for the number of combinations that your application can be in, in iOS applications like over 300 combinations. That's a lot.

So that's why this statement of the system doing work for you is really good news. Now the keyword here is most. There are a lot of ways that you as developers can plug in and customize this experience because you want your applications to look unique. And that's what we want to talk to you guys about.

So first we're going to talk about the fundamental system of adaptivity, which we call the trait system. And then Brent's going to come up and give you guys a demo of how we've improved the tools to work with building adaptive applications. And that's what we're going to cover in part 1, which is today's session.

You're definitely going to want to come back tomorrow for part 2 because we're going to give you this like utility knife of all these additional technologies and techniques that you guys can use to make your applications adaptive. And then we're going to put it all together and we're going to give you guys some really awesome demos and examples in code.

All right, so let's start by talking about the fundamental system of adaptivity, which is called the trait system and there's three particular things I want to mention to you guys about this. The first thing is I'm just going to start by telling you what it is, it's a pretty good place to start.

And then we're going to laser in on one particular part of the trait system, which we call size classes. And I think it would be a really good idea to kind of give you guys a little background about how the system works because that will make it really clear how you are going to interact with it.

So what are traits? Traits describe the environment that your application is running in. So here's an example of a trait, the horizontalSizeClass. And this just describes what the experience should be for the available space of your application horizontally whether you have a little bit of space or a lot of space.

Now a trait by itself doesn't really have any associated value with it and that's where trait collections come into play. You can think of a trait collection as pretty much a dictionary mapping keys which are traits to values. Most of the traits have kind of an enumeration of possible values, so you know what you need to be thinking about as you're building your applications.

Now trait collections don't usually have one thing in them that would be awesome, usually they have many things in them. And even the three that you see on the screen here is even a supplication of the size of the trait collections that you guys will be interacting with and making your applications adaptive for.

Let me give you a few more examples of what some of the traits are. So we'll talk more about size classes. There's also dynamic type size, which is new this year. There's also the layout direction, so left to right, right to left. And the three up here are examples of layout traits. Traits can also describe appearance though. So what gamut is the display that you're running on or for Apple TV what is the interface style, is it light or dark.

But traits can also describe capabilities. So for example, whether or not the device that you're using supports three touch or not. If you want a full list of all the possible traits that you can make your applications adaptive over check out UITraitCollection's interface. But now I want to specifically focus in on talking about size classes.

Your application can be in a lot of different sizes. This is humorously a simplification of what some of those sizes are. And when you look at this there's kind of three axes of customization that kind of stick out. So first is the screen size, second would be the orientation, and third would be something that we call adaptation, this would be like which multitasking mode you're in. So one way to do this without any formal system would be to look for and respond to changes in any one of these things, but that's a lot of work.

And so what will you do instead is to base your layout on the available space for your application and not on any one of those three axes of customization. So what do I mean by react to available space? There's kind of two ways we react to available space given the size of the change.

So there's coarse grain changes and these will be like changes from within iPhone to an iPad, a large change in size. There's also fine grain changes, which would be examples of like going from iPhone 6s to SE smaller changes. And for each one of these changes fine or coarse you're going to use different techniques, different technologies to help you through. Let's start by talking about coarse grain changes.

I think we're pretty familiar with this quote, it's of my favorite quotes. We as engineers love to create layers of indirection to help us solve problems, to make things easier, honestly to be lazy. So size classes is a layer of indirection. Now layers of indirection always describe some sort of higher order behavior. So what's the higher order behavior that size class is describing and that's experience.

Let me give you two examples here. So first will be the canonical example we see this all the time right. On iPad we have a master detail where the information is presented side-by-side. A change in the master reflects in seeing the details on the right-hand side. However, on an iPhone where there's not as much room that way that we present information changes. We instead use a navigation controller and use more of a drill in way of presenting information.

News would be another example. On the iPad we have this awesome grid view, it's great to sit on your couch and just be able to scroll through stories. But on my iPhone it's a table view where I can just quickly scroll through with my thumb. So experience comes down to how we're presenting information and when you think about coarse grain changes in your applications think about the kinds of experiences, the ways you're presenting information to decide whether or not or how you're going to present that information.

So let's get specific for a second, I was going over kind of some higher-order things. What specifically is size classes? And this is where we bring the trait system back in. So size classes is two traits, there's a horizontalSizeClass and there's verticalSizeClass and there's two possible values, compact and regular.

Compact just simply means that you're space constrained. And so you're going to want to present information in a more compact way. Regular means that you're not as space constrained and you should totally feel free to explore at least up to the edges of your 12.9 inch iPad Pro.

Now this means that we have four combinations of traits and possible values. Now I just want to point out real quick here some of the notation that I'm using on the slide because this is notation that you're going to see in Interface Builder and in documentation and elsewhere in the system. So this is describing a size class combination and there's two things to look here.

First, it says there's a W it stands for the width class and then the value C or R, so compact or regular. And then H is for the height class or the vertical class that again, has either C or R. So you're going to see this in Interface Builder and you're going to see this in documentation and I just want you guys to be familiar with this.

So how do some of the devices fit into these combinations? Well, a compact with experience, but regular height an example of that is going to be our iPhones in portrait, iPad in contrast is going to be regular regular in both orientations for all orientations. You're going to see compact compact with iPhones in landscape with the notable exception of the 6s Plus, which is actually regular horizontally when you're in landscape, which is why you see a master detail in for example mail when you're using a 6s Plus.

How does this actually help me though? How does this make my life easier? Well, one obvious thing is that instead of thinking of 300 combinations you only have to think about 4, but wait it gets better. You really only have to think about two and that's because the width class is by far the most common class or trait that you're going to have to interact with it. If we think about all the traits that are possible, the layout traits are the most common kind of category of traits that you're going to work with.

And within the layout traits size classes is the most common layout trait that you're going to interact with. And then specifically within size classes the width class is by far the most common class that you're going to interact with. Which means that as you're designing your applications and thinking about how you want them to be different between iPad and iPhone think primarily about the differences horizontally. Now certainly guys you're going to have custom applications you're going to do special things, we understand that. But certainly that's the most common case is just thinking about the width class. Now the system gets to decide how devices, orientations, and adaptations fit into these combinations.

And what's interesting about this is that these combinations can change on the same device as the users interacting with your application right, I can bring over slide over, I can go into multitasking, I can change the orientation of my device. And so if you're using size classes and you're expressing your data more declaratively, the system can do a bunch of work for you as it transitions through all these different devices, orientations and adaptations past, present and future. And that's really, really helpful and that's going to make it much easier for you guys to make your applications adaptive.

Let me give you two examples of some of the dynamic kind of changes that can happen on the system. So here again, we're going back to our split view controller for a second here. And when I'm on an iPad in landscape we're going to have those two view controllers side-by-side, but when I go to an iPhone, you know, we collapse it into a navigation controller. If you're using UI Split View Controller you're going to get this behavior for free.

Now besides just view controller structure this also applies to presentations. So if I have an iPad and I bring up a popover it's going to be this callout style. But if I move to an iPhone it's going to be a modal presentation instead. So again, if you're using the kit controls and the kit presentations you're going to get a lot of behavior for you. The size classes are going to change and your application is going to automatically adapt, which is super neat.

So let me talk to you a second about fine grain changes. I just want to say one note about this and that's within the same size class you're going to want to use Auto Layout to react to the available space changing. Withy Auto Layout you can specify the layout relationships in a very declarative form and then the system will automatically move things and resize things for you as that available space is changing at a more fine grain level.

Now there's one more type of change besides coarse and fine and I call that medium grain changes. I'm not going to tell you what it is though I'm going to keep the suspense high and you're going to come back for part 2 and they're going to tell you all about medium grain changes.

All right, so we've talked about what size classes are, we have given you kind of an overview of the trait system. What I want to do now is just give you a little background about how the system works and how as developers you're going to plug into that.

In a nutshell or in a sentence rather, the way the trait system works is it takes a trait collection and it propagates it down through your view hierarchy giving each stop along the way a chance to react to that trait collection. So it all starts at the screen level and the screen's going to have a trait collection.

What's important to note about this is that the every device and orientation and adaptation is going to have a fully specified trait collection. And what I mean by that is that all the different traits are going to have values. Then the screen is going to pass it down to all the windows that are on that screen and then the window is going to pass it to its root view controller to its view, then down to its subview controllers and subviews and so on.

Now each stop along the way here is a class that conforms to UITraitEnvironment and the UITraitEnvironment has a key method called traitCollectionDidChange. So at each stop along the way as this trait collection is getting propagated down it's going to call traitCollectionDidChange. This is where you as developers are going to override and make your applications adaptive. So traitCollectionDidChange is the key method here. And you're almost exclusively going to override this at the view controller and the view level.

Now that was a pretty simple linear example what's a little bit more complicated example? So let's go to an iPad here in landscape. We have our screen, just going to go to the window and down to the view split view controller and so on. Now here is where we see a little bit of a change here and that's as the trait collection is getting propagated down you can actually change the trait collection as it gets propagated to child view controllers.

So the split view controller is going to do this for you. So what it's going to do is it's going to change the trait collection that it passes off to the master view controller. It's going to change that horizontalSizeClass to a compact size class and it's going to pass the regular one off to the detail. You guys can do this too as you build your own custom container view controllers, but most commonly you won't need to do that.

Here's an example of what traitCollectionDidChange might look like. I'm going to walk you through a few key things here. First, in order for the system to do a lot of the work for you, you want to make sure you call super. Next, you want to only do work if the traits that you're interested in are actually changing.

Now I hear you questioning Kevin, traitCollectionDidChange getting called doesn't that mean that traits are changing? That is absolutely true. Trait collection gets called though for any trait changing. Typically, your application is only going to be interested in a few traits and most commonly just the horizontal size class. And so you want to make sure that you're not doing any extra work if that particular trait that you're interested in is not changing.

Next, I'm going to switch over the possible values for the horizontalSizeClass. As just a side note here, I really prefer using switch statements when I'm working with enumerations in both Swift and Objective-C because it means that if the definition that enumeration changes if a new case comes in I'm going to get build time warnings if I'm using an exhaustive switch statement.

So I would just really encourage you guys to do that as well, that's really saved me a lot of times. So then for example if this value is compact, then I would go off and set my constraints. So for any view, for any view controller that I want to be adaptive I would need to override traitCollectionDidChange.

So again, this is going to get called for anything that conforms to UITraitEnvironment. And this is where you're going to do your adaptivity. Now it might seem like a lot of work to have to implement traitCollectionDidChange for every single view controller and every single view for all the possible changes in your application. A lot of things can change. So that's why there's a number of systems that will react to traitCollectionDidChange for you.

So for example, one system would be Interface Builder. If you're using Interface Builder to build your interface and you're using adaptivity and size class within Interface Builder the system knows how to automatically apply that as the trait collection changes. Another example would be asset catalogs. You can specify images for different gamuts, for different size classes, different scale factors and those will automatically be applied again in traitCollectionDidChange.

And then finally, UIAppearance can also be customized for trait collection. So you could for example set up different color schemes for light and dark mode in Apple TV and those changes will again, automatically be applied in traitCollectionDidChange for you. So you really want to take advantage of these systems that respond to this for you because it allows you to be very declarative about how you want your interface to react and to adapt. And it makes it really easy to follow and maintain.

So just to recap a couple takeaways that we've seen so far. Traits describe the environment that your application is running in and a trait collection is going to be a bunch of traits with their associated values. These could be layout traits, they could be appearance traits, they could be capabilities traits.

You want to override traitCollectionDidChange to make your application adaptive and you want take advantage of those systems that respond to traitCollectionDidChange for you. The size classes describe the experience of your application, how is your information laid out. And then just to drive it home again, the system is going to be able to do so much work for you if you're taking advantage of these tools that we're giving you.

Now I could draw on for another 20 minutes about how awesome aptivity is, but really to see how cool it is you really want to see it in action. And so I want to bring up Brent to give you guys a demo of the changes that we have been making to the tools to improve our workflows with adaptivity. So the one and only Brent Shank.

Thank you Kevin. So now that you understand the basic building blocks of adding adaptivity to your applications. So that's traits, trait collections and size classes I'm going to show you how Xcode and the Interface Builder editor make it really easy to do this. So let's go over to the demo machine. It's a long way over here man.

Okay, so I thought it would be useful to build a really simple view to really focus on the fundamentals of using the trait collection system to add a little bit of adaptivity. So here's what we're going to build. This is simple, this describes a location I chose Tenaya Lake, you should definitely put it on your bucket list it's a great place in Yosemite to see one day.

So this view shows us a label at the top and at the bottom is an image of the place. And notice that on iPad there are a couple of different changes, a couple of things that aren't present on iPhone. You see at the top the label looks a little bit different and in fact, there's a whole another view that appears just on iPad.

So we're going to build all this right now and you'll see how easy it is to do with the tools in Xcode 8. So I've already created this project and I'll switch over to this other tab where I have the storyboard loaded. So there are couple of things to look at in the Interface Builder canvas in Xcode 8. First off, is look how this view is rendered.

It looks like an iPhone 6s in portrait and that's because it actually is. We're actually using the simulator to render this content, so you now get pixel perfect rendering right in the design canvas. We think this is going to be a huge benefit to your workflow as you try to take these beautiful designs from a designer and translate it into your application. The other thing to point out is that [applause], thank you.

The other big changes is that now scenes in Interface Builder canvas are always being rendered in the dimensions of actual ethical devices or one of their configurations and that's a big change from previous versions of Xcode. Let's take another look at something else that's new. I'm going to zoom in here at the bottom bar, so you can see everything here. So this is the bottom button bar in the Interface Builder canvas, it's been around for a long time.

Over on the right-hand side you can see the controls for adding all the layout constraints, I hope you're familiar with those. And in the middle are the new zoom in controls in Xcode 8. And if you haven't yet installed the betas and played with this, it's amazing to be able to edit your scenes at any magnification level you want. So definitely check that out it's awesome.

But today I'm going to talk about this button over here. So it says View As iPhone 6s and then in parenthesis it's got this notation it says, if you can't read it back there, it says wC hR. So this is telling me the size class of the current device configuration that I'm looking at. It's an iPhone 6s in portrait, which means that it's a compact width regular height device. So it's a little bit of terminology Kevin's talked about and I'll show you how you can apply that to add adaptations.

So the scene is currently being rendered as an iPhone 6s in portrait what if I want to change this? Well, all you need to do is click the View As button and it opens the new Device Configuration bar. This is brand new in Xcode 8 and it's really cool.

So I zoomed in here so you can see exactly what's going on. So there are a couple of stacks of icons here and the leftmost stack represents all the different device sizes that Apple currently ships. So we have the largest iPad on the left and the smallest iPhone on the right.

And next to that is a stack of buttons that lets you select the orientation that you want to view the scenes in. So I'm going to do that right now. I'm going to switch to landscape. So right in the design canvas you can cycle through all of these devices and all orientations and see how your content is going to be laid out and rendered, which is really cool. Thank you.

So iPhones are interesting of course, but iPads are even more interesting. I'm going to select one right now and you can see what happened is there's actually another set of icons that appeared and this represents adaptation. So for iPhone there's just one adaptation for each orientation, that's full screen.

For iPad it's more interesting because your app -- your users can choose to run your app in slide over or split view. So that's what these adaptations are here. So if I select this one you can see that the scene now renders as the app would if your user was running it in slide over on iPad.

So think about this right in the design canvas you can cycle through all of these configurations, all these orientations, all these devices and see how your content is going to get laid out. I mean, this is a really powerful new workflow, it's going to save you a lot of time.

Okay, so those are some of the new features in Interface Builder in Xcode 8. Now let's get down to the task of actually building this view. So here's what we're going to do first. We're going to add this label and we're going to add it in such a way that it applies to all device configurations.

This is probably something you do most of the time in Interface Builder. You're usually not making customizations based on size classes a lot. So let's do this right now. So I have the Device Configuration bar and iPads selected there, it doesn't really matter what's selected because what I'm going to do is going to apply to everything.

So I found a label in the Interface Builder library, I will drag it out. And now what I'm going to do I'm going to add some Auto Layout constraints. And as Kevin said, this is one of the systems that we provide that actually makes your UIs adapt to all different device configurations. So I'm going to add some constraints. I'm going to pin this to the top as vertical spacing.

I'm going to center it horizontally in the container and I'm going to add a vertical spacing constraint between it and the image view below vertical spacing. And I've got some content I will paste in and it looks like that's right. And I had a constraint between this image view and the top layout guide, which I don't need any more because I've added a label, so I'll delete that now.

So how do I know that I did everything right and added the right constraints? Well this is where the Device Configuration bar comes in because it's really easy to see what it looks like on iPhone. And you can see that it's staying in the right place as I cycle through all these devices and even through different orientations okay. So that's an operation you do very commonly in Interface Builder every day, very easy.

So now let's start adding some adaptivity, some customizations using the free collection system. So what are we going to do now? We're going to change the label, the font of this top label up here. And you see my designer really wants it to be System Semibold 36 just for iPads. So let's go back to the storyboard.

So when you think about adding customizations for a device you really want to think about adding a customization for a particular trait collection or in this case a size class. So we're all given designs for devices for iPads and iPhones, but as developers you need to be able to translate that into size class that you're meaning to target.

We make that really easy for you. So for example, I have an iPad selected in the Device bar and the size class and I'll zoom in here so you can see that, it now says regular width, regular height. Okay, so you don't need to guess about what size class a particular device configuration is you just select that configuration in the Device bar and Interface Builder will tell you what it is. And that's another great improvement we think.

So now let's introduce, let's vary how this label looks just for that size class. So I'll select it in the canvas and let's go over to the Attributes Inspector, which I actually have selected already. And I'm going to zoom in here again so you can get a closer look at the inspector.

So you might see out there that a couple of these attributes, that is a big cursor, have a + button next to them. And so the + button means that particular attribute can be customized using the trait collection system. So let's do that right now. I want to change the font so I click it. And the menu comes up here is offering me to add a customization for regular width and regular height. Well why is it doing that? Well it's because I have a regular width, regular height device configuration selected, so that makes sense.

So we'll do that and what happens is that the Attributes Inspector now shows me another row for font. And again, it has that same notation in the Attributes Inspector as I see in the Device bar. Okay, so that's why it's so important that what's here is you understand what's going on.

Okay, so let's make the change, I'll bring up the Font Editor, I'll select Semibold and since I always do what my designers want me to do 36. There we go and I'll click Done. And you can see it rendered and updated on the canvas. If I select an iPhone what I would expect to happen happened, the font remains what it was before the change because I only targeted regular width, regular height devices for that particular edit.

Okay, so that's an example of using the Attributes Inspector to add a customization based on size class. So that's the first customization. Let's add another one and this time I want to add this label and I want to do it again just for iPad. So I'll go back to the storyboard and because I want to add this customization for iPad I should select it in the Device bar.

And let me draw your attention to this button in the Device bar that says Vary for Traits down here. So when you click this button it's going to present a popover and ask you how we want to introduce the traits, what kind of traits, the trait collection you want to target.

So what does this mean? Well I have a regular width, regular height size class device configuration and I can choose to customize for regular width, regular height if I hit click both of these checkboxes. But I also can choose to customize just for regular width and any height or for any height and regular width okay.

So I think what I want is to customize just for regular width and when I do that the bar turns this lovely shade of blue to tell me that I'm going to be making customizations based on size class. Let's take a closer look at the contents of the bar. I'll zoom in here.

So you can see it says I'm varying eight regular width devices, the device configurations. I see iPads both in portrait and in landscape and in a couple of the slide over configurations and that makes sense. But I also see an iPhone here, so what's that all about? Well if I put the mouse cursor over this I see this is an iPhone 6s Plus in landscape and as Kevin said, because this device is so big it actually uses the regular width size class in landscape.

And this is great and you'll frequently want to make and provide a different experience for that device in that configuration, but in this case I don't want to do that. I only want to make the customization for iPad. So what do I do? Well I can go back into the Vary for Traits and this time I'm going to vary for both regular width and regular height and when I do that notice that the iPhone disappears from the bar. So the edits I'm about to make will only apply to these particular configurations okay.

So let's do that now. I'm going to drag out a label, I'm going to put it right there and I'll add just a few constraints here to make sure it stays in the right place, there we go. Now I'll click Done Varying. So let's go back to the Attributes Inspector because I want to focus on a couple of checkboxes that you've maybe seen before, I want to make sure you understand what this is all about.

So I varied for traits, I selected width and height, which means I configured the bar to make a customization for regular width, regular height. And so when I did that I dragged out a view, I added it to a view hierarchy, but it only installed it for regular width and regular height.

So that's what this checkbox shows me right here. Most of the time when you add views to your scene they'll be installed for everything, so they'll appear on all device configurations regardless of the size class. But when I'm in this mode when the bar is blue when I add views or when I add Auto Layout constraints they will get installed only for the particular size class that I'm targeting for the edit okay. So that's important to understand.

So again, to prove this it can cycle through iPhones using the Device Configuration bar and the label isn't there. So I did the right thing I added this view and it only appears for regular width, regular height devices okay. So the next thing we're going to do is we're going to make a more surgical edit using the Device bar. And as you can see when I cycle through to an iPhone there's too much space between the top label here and the imagine view below. Now in fact if I go back to the design my designer wants them to be pretty tight.

So how do I do that? Well what's really cool is that you can actually customize an Auto Layout constraint constant using a variation like we've been doing by targeting a size class. So let's do that right now. So you can see if I select the image view, remember I added this vertical spacing constraint between it and there we go.

Okay, so I've clicked this constraint and I see this Auto Layout constraint and I see a bunch of its attributes here. You can see the constant value is 61. So this is the problem this value is too big. Well I can actually edit this and I can edit it only for iPhones for compact with regular height devices in portrait. Again, I can click Vary for Traits, I'll customize on width and on height and you can see the contents of the bar show me iPhones.

But what are all these iPad configurations in here? Well remember when your user is using the iPad in slide over or split view there's not that much space. Your app will be spaced constrained. So you really want to provide an iPhone experience on iPad in that case. So this actually makes sense all of these iPad configurations that you see here are also compact with regular height configurations. So this is good, this is what I want to do. Okay, so I've gone into Vary for Traits, the bar is blue and now I can select this constraint again.

There we go. Now notice I'm going to change this value to say 45 and I'm going to draw your attention back to the Attributes Inspector. So what happens when I commit this edit just like what happened when we customize for font Interface Builder added another row for constant right.

And you can see this is using the same size class that I configured in the bar. So I've changed this -- I've added a customization for this constraint constant by starting an editing session with the Device bar, but I'm making the edit directly in the canvas okay. So that's really cool. And as I cycle through these devices it looks pretty good, but it's still not quite close enough.

So how do I fix this? Well you might think that I need to go back and make the bar blue and try to make the edit that way. And that's not quite the right thing to do. So what's important to understand is when you're varying for traits you're introducing variations based on size class. But you don't use this workflow for editing them. Instead, wouldn't it be nice if you could just directly edit that customization in the canvas, well you can. So I have an iPhone selected Interface Builder knows that, it also knows that I have a customization for that.

So now when I go to edit this it's going to figure out where I want the data to go. So if I changed 45 to 30 again, notice what happens in the Attributes Inspector it's going to update it for the size class because it knows I have a customization based on that. So we think this is a really powerful new workflow. It lets you introduce variations using the Device bar, but then you can continue to edit those in the design canvas directly. And with that I want to bring it back to Kevin.

So you can do very surgical fine grain edits using the Attitudes Inspector. And the Attributes Inspector is also the where you can see all the changes that you've made. So if you're ever questioning I wonder how I set this up, you can always go to the inspector to see what the customizations you made are.

But there's also this Vary for Traits mode where you can do kind of larger broad paint stroke style changes. And as Brett mentioned, it's really important to note this mode is important for introducing new customizations. Once you've exited this mode Interface Builder will still know how to update those customizations that you've made based on the device that you're currently looking at and it works really well, it's awesome. Now these changes work not only for iOS, but these workflow changes also apply to tvOS and watchOS as well in Interface Builder.

So just in summary one more time. So I talked about the fundamentals of the trait system. We talked about how traits describe the environment, how you're going to override traitCollectionDidChange to do all your adaptivity taking advantage of the systems that do it for you. And that size classes that describe the experience how you're displaying information.

Brett gave you a demo of the new workflows and the tools and how Interface Builder now allows you to both see your interface in concrete devices while simultaneously being able to edit all the underlying data for the trait collections and the traits that you want to make your application adapt over.

So this was part 1 and again, the big takeaway with part 1 is that the system is going to do most of the work for you. There's lots of ways that you can plug into that as developers take advantage of those and we're excited to see what you guys come up with with adaptive applications.

Now come back tomorrow because we're going to give you even more. We're going to give you more technologies and techniques for making applications adaptive and then we're going to put it altogether with some awesome demos. Besides the session tomorrow there's also a session on Auto Layout that you're going to want check out to see some of the improvements we've made to Auto Layout to help you with some of those finer grain changes. And with that have a great session, a great rest of your week and a great lunch.