Design for Safari 15

♪ ♪ Hi, I’m Jen Simmons. And I’m here to talk about how the new Safari impacts web design and development. If you’re a web designer, a web developer, or have any role involved in making a website or a web app, this session is for you. This is a huge year for Safari. In this session, we’re going to focus on the visual or interaction design impact of the changes in Safari. Safari has an all-new design. By default, your website’s gonna look great, but if you wanna go the extra mile, this session will empower you to make your work really shine in the new Safari. We’ll talk about a few of the great new features in macOS, iOS, and iPadOS and how they’ll impact the web. We’ll cover what’s new in CSS, including my favorite, the new aspect-ratio property. And we’ll take a look at form controls, controls we’ve newly implemented and a whole new look for forms on iOS and iPadOS. Let’s start with the design of the browser itself. Since very early in the evolution of the web browser, most of the browsers we’ve used have had a few fundamental things in common. There’s a very tall toolbar at the top with a slot for the URL that’s on its own line. And the website stays inside this space, this portal to the web, the viewport. Of course, as users, we’ve trained ourselves to put all of our focus on the website that we’re using, but for years, the browser itself has maintained a strong visual presence. No, matter how a website is designed to look and feel, the browser interface framed that design and dominated it. What if we could get rid of that frame and extend the design of the website to every edge of the window? Well, that’s what we’ve done in Safari 15. This year, we’ve reimagined the browsing experience as we know it. We’re putting all the focus on the web content. The new Safari blends the tab bar into each website by changing its background color. The entire interface is on one line, and things naturally appear when needed. This makes your content feel more expansive. Each web page or web app takes over, extending to all four edges of the window. The browser interface yields to the content. So what determines which color is used for the background of the toolbar? As a web designer or developer, you can choose the color and code that choice into your HTML. For sites that don’t provide a color, Safari will figure out a color to use. Sometimes Safari matches the background color of the web page. Other times, it matches the header background. To provide your choice for the toolbar color, put it in the HTML head using a meta tag with name=“theme-color,” and use the content attribute to specify the color. By providing this information in the HTML head, Safari will get it immediately on page load. It’s also declarative code. It’s very simple to use. You can support both Light and Dark Mode by setting two colors. Yes, now you can add media attributes to meta tags. In this case, media=“(prefers-color-scheme: light)” in the first meta tag and “(prefers-color-scheme: dark)” in the second. This is a new addition to the HTML specification that we proposed this spring. It gives us a simple, robust way to hook into which color scheme the user has asked for. In browsers that do support name=“theme-color” but don’t yet support using the media attribute on meta tags, those browsers will use the first theme-color declaration and ignore the rest. So put your fallback first, not last, the way you do in CSS. Even if your site doesn’t have a whole design for Dark Mode, you might want to set your own color for the tab bar when the device is in Dark Mode. If the one color you’ve specified is too light, Safari will make adjustments in order to give the user the Dark Mode experience that they’ve asked for. Instead of defining the theme color on the HTML head, you can define it in a web manifest file. If you specify it in both places, the color in the HTML head is the one that’s used. And right now in June of 2021, there’s not yet a way to define multiple colors for Light and Dark Modes in a web manifest file. There’s discussion happening in the working group right now to figure that out. There’s also a very narrow range of colors that Safari isn’t going to apply - colors, really, that would totally get in the way of the user’s experience, maybe making it inaccessible. For these, Safari will do something else, like here, changing this site’s tab bar to white. If the color that you’ve chosen doesn’t seem to be working, just try adjusting it a bit. If you’d like, you can set the theme color to be different on different parts of your website. Each separate HTML page has its own head. Or you can use JavaScript to swap out the theme color dynamically in reaction to a user’s behavior. Think through ways that your design can blend the tab bar seamlessly into your site.

That’s how you can create a feeling of your website or web app filling the whole window in Safari 15 on macOS and Safari for iPadOS and iOS 15. Next, let’s look at two other small adjustments that you can do to really take your website to the next level. Many of us have a lot of tabs open in our web browsers as we work. The new Safari provides an intuitive way to organize those tabs into groups. I really like this. I’ve organized my work projects into separate groups and named each whatever I want, and then I can put them away. Put way the things that I’m not working on, knowing that I can reload those tabs later on any device, since Tab Groups are synced across macOS, iOS and iPadOS. While Tab Groups give us the ability to declutter the tab bar, it still is possible to have a lot of tabs open in any one window. When there are a lot of tabs, the favicon becomes pretty important for easily identifying which tab is which. You’ll want to make sure you provide a great icon for your site, one that supports high-resolution devices. A favicon with a transparent background can look especially great.

By the way, a lot of teams use automated tooling to generate the different sizes and formats of icons to support a wide range of devices. Often, such tooling generates code that specifies a theme color along with the icon code for the HTML head. Or perhaps your CMS or your front-end framework is defining a theme color, and you didn’t realize it. Check and see. Test that color and see if it’s a good one for the design of your site, perhaps changing it to a better one. When most people look at the new tab bar, they’ll just see all their tabs on one line. As someone who makes websites, you’ll probably notice that when the site is loaded into a browser window, the tab for that site shows its domain name. And when a site is in a background tab, the web page title is what’s displayed, the text in the title tag in the HTML head. The space for the page title can be limited, so crafting a thoughtful pattern for your web page title is important. The quicker the title gets to the point, the easier it is for users to find the tab that they want. Some sites put the name of the website first and the name of the page second. Instead, put the content title first. That way, if someone has your site open in multiple tabs, it’s easier to tell which tab is which. The color of the tab bar, the favicon, and the page title are all parts of a site to design with intention. They don’t show up on the web page itself, but they deeply impact someone’s experience of your website or web app. To show you more on how to leverage the power of the theme-color meta tag, here’s Myles. Hi, I’m Myles. And I’m working on Dog Dog DC, which is a website where people can stream videos of their dogs during WWDC. Here, you can see Maggie’s stream in Safari. She looks so happy! I’ve started the stream out paused for now, but I’ll unpause it for just a little.

Good catch. And on the right side of Dog Dog DC, you can comment in real time to express just how good Maggie is.

Now, at the top of the Safari window, Safari 15 colors the tab bar black, which is actually the background color of my page. You can see the black color is used as the background of the center content area at the bottom. And that black color looks good up there in the tab bar. The whole window looks like it has a holistic, coherent design. You can also see in the tab bar that Safari is mentioning my page is Not Secure, which I expect because this is my development environment. Now, we’ve also got a floating blue bar at the top of the website that would look really great extended up into the tab bar. So if I go into my source code in the Editor over here...

I can override the black color that Safari automatically discovered to match this beautiful blue color.

I’ll add this one meta tag, which will extend that blue color up into the tab bar. Then I’ll reload and see what it looks like.

That looks pretty good, but we’ve designed Dog Dog DC to contain a gray newsletter bar at the top that’s horizontal, which actually interrupts the flow of color a little bit into the top tab bar. In order to get an uninterrupted canvas, let’s denote the newsletter bar another way rather than background color.

Hmm. I’ll keep playing around with it later. For now, I’ll just remove the newsletter bar.

Wow, that now looks great. The color is uninterrupted and really shines in Safari 15. And of course, the same effect works great on iPadOS too. All right. Now, I could sit here and watch Maggie all day, but what I really want to do is bring her front and center and dim out everything except her and the chat area, because I take those doggo comments seriously. So of course, I’m going to tap this Theater Mode button.

But wait. When I enter Theater Mode, the tab bar is still colorful. Theater Mode would be a little bit better if we updated the theme color when entering Theater Mode. Well, we can fix that over here in my JavaScript. Earlier, Jen showed you how to use a media query in the meta element itself to automatically react to changes in the environment, like Dark Mode. However, for changes initiated by my page itself, I can do this in a more proactive way using JavaScript to simply modify the meta element itself using standard JavaScript when entering Theater Mode.

And, of course, I can’t forget to reset the element when exiting Theater Mode.

Let’s see what it looks like now.

Perfect. And there we go. That looks so much better. Now I can really focus on Maggie. Back to you, Jen. Dog Dog DC. I’m gonna make sure to visit that site once it’s online, Myles. Thanks. I really love how this opens up another way for web designers to impact people’s visceral experience of the web. Now let’s dive a bit deeper into what’s happening on iOS. You’ll notice the theme color is used here, too, at the top, wrapping around the sensor housing so the web page or web app fills the whole screen. You’ll also notice that we’ve moved the tab bar to the bottom of the screen. This puts it directly under the user’s thumb, making it easier for them to reach, especially if they’re using their phone one-handed. Swipe sideways on the tab bar to switch between the tabs. And swipe up to see a grid of all the tabs and to access Tab Groups. When a user scrolls the web page, the tab bar minimizes down to just the domain name at the very bottom to ensure people know where they are. When they pull the page back down, the expanded tab bar reappears. All of this means that the websites and web apps that you make are the shining star of the show. But what if you’ve built something important at the bottom of the page and now that gets covered up by the new tab bar? This is where you want to use environment variables in your CSS to ensure there’s enough padding or margin or a grid track or however you write your layout code. You can use an environment variable to make sure any UI or content that would be affected by the tab bar scoots out of the way. So what is an environment variable? It’s a dynamic measurement that’s provided by the browser. You can see here, the green is what’s called the safe area. When the tab bar is expanded at the bottom, the safe area starts above it. As the tab bar minimizes, the dimensions of the safe area change. env(safe-area-inset-bottom) is a measurement of however many pixels it is from the safe area to the bottom of the viewport. It’s a lot like the var function in CSS custom properties. Maybe you’ve used custom properties to turn all your colors into variables, for instance. Only instead of you defining this variable, the browser defines it. It’s providing information about the environment. And you can use that length measurement any place in your code, including inside a calc. Here, my footer is position: sticky with some padding to push my two links away from the edges of the footer. I defined a padding bottom of 1rem + env(safe-area-inset-bottom). In many contexts, that’ll be 1rem + 0. On iOS, it will be 1rem plus the distance that’s needed to clear the tab bar. There are four environment variables that provide a measurement from the edge of the safe area to the edge of the viewport: env(safe-area-inset-top), -right, -bottom, and -left. These environment variables don’t just work in Safari. They’re defined in a CSS specification and work across different browsers, devices, and operating systems. If you want to make vertical adjustments, you do need to take the action of using an environment variable. Safari won’t try to move content around by default. When an iPhone is rotated sideways, however, it works a bit differently. There’s also a safe area defined to avoid the sensor housing and the round edges of the screen. By default, Safari will automatically move web content in from the left and right edge and put it into the safe area. You might wonder why. Well, if instead, Safari extended every site to the left and right edge, content could be lost. Here, the text is covered up. And that’s--that’s bad for usability. To prevent data loss, Safari will scoot content into the safe area, including when a site is using a meta viewport tag with width=device-width, which is the meta tag that’s commonly used in responsive web design. But of course I’d like this design to look better. I’d like for my purple header and the photo to extend to the edges of the screen. I can signal to Safari that I want the browser to extend the content to the left and right edges by changing the meta viewport tag to viewport-fit=cover. Now I’m responsible to make sure that the layout works. I’ll use environment variables to ensure the content is fully visible. I can define a left margin of env(safe-area-inset-left) on the header text and on the paragraph text. For more information about safe area insets and environment variables, check out the article “Designing Websites for iPhone X” on the WebKit Blog, linked in the notes for this session. Let’s go out to Myles and see how environment variables work in action. Now let’s see what Dog Dog DC looks like in Safari on iPhone. Over here on my iPhone, we can see Maggie the same way we were seeing her before, but this time on a smaller device. But wait. It looks like there’s a problem. When the user scrolls the chat area, the input area overlaps the tab bar. Dog Dog DC is explicitly using vh units to size itself from top to bottom, explicitly taking exactly the size of the whole viewport, which it’s now sharing with the tab bar. As a user, I can scroll to minimize the tab bar, and that’s pretty easy. But as a developer, I want to make sure that my users have the best experience possible even when they scroll. Luckily, I can use safe area insets to move the input area up by the appropriate amount. All I have to do is add bottom padding and set it to safe-area-inset-bottom.

Then I just reload my web page.

I actually just used one of my favorite new features of Safari 15: pull to refresh. Hmm. That’s pretty close to what I want, but it looks like now it’s a little too high. Oh, I see the problem. I’ve given the input area bottom padding when it already has a bottom margin, and those two things stack vertically. So it looks like I should just update the existing margin to use the safe area inset instead. Let’s adjust these styles again and see what it looks like now.

Perfect. This actually shows the power of environment variables. They can be applied to any length in your style. You can use them in borders, margin, padding, line-height, anything. As the tab bar is minimized and expanded, the value of the environment variable will automatically update, and Safari will automatically re-layout the page with the new value when they do. You can also see in Dog Dog DC how the chat area is the area that resizes when the tab bar is expanded. Everything above it stays the same size, while everything below it hugs the tab bar. This is because we’re using Flexbox layout, where this kind of behavior is very natural and straightforward to create. If you haven’t already started using these more modern layout modes like Flexbox or grid, now would be a great time to give them another look. Next, let’s hear from Jen about some more great features in Safari 15. Thanks, Myles. Environment variables are another powerful tool for creating layouts that dynamically respond to whichever device someone is using. Let’s also see how a website looks when someone saves it as a Home screen app. I can save this site to my Home screen with a tap. Now my site’s icon is on my Home screen. If I tap on it, I can see the site opened as a Home screen app. It looks fantastic. The theme color fills the top of the screen, just like in Safari. I get an app-like experience. You’ll notice there’s no tab bar at the bottom. We aren’t in the Safari app. We are in the Resilient web design app. So that’s the new Safari and how you can make sure your website looks fantastic. Next, let’s talk about several of the amazing new features of macOS, iOS, and iPadOS and how they’ll impact the web. Often, the very first experience people will have of your website is when someone else tells them about it, like when one person sends a link to another in Messages. Anytime this happens, the site appears as a simple rich link. The way these rich links work is consistent across iOS, iPad OS, and macOS. And this year, with Shared with You, we’ve added many new places and many new ways for people to share web content with each other. These are just two. You’ll want to take the time to ensure your site looks fantastic when it’s presented in rich links. By default, if nothing else, rich links will pick up the web page title, the site URL, and the favicon and display them in a simple fashion. We can improve on this by adding to our metadata in our HTML head through meta tags with names defined in the open graph protocol. Let’s specify a title that’s a bit better for this context than the web page title. And we’ll specify a graphic to display. We want this image to be something for this particular web page, like the hero image from the content of this page. If we’d like, we can also provide a video. The video will autoplay silently if the user allows, and they can tap on it to hear the sound. You can learn more about the details in “Ensuring beautiful rich links,” a short video on developer.apple.com. Customizing your rich links is another detail that ensures people have a fantastic experience with your website or web app. Next up, let’s take a look at visual intelligence and the web. So much text on the web is stuck inside images. Starting in Safari 15, we’re using visual intelligence to free that text. Now people can interact with it directly, just as they would with any other text on a web page. Here’s an image on Twitter that’s full of text. When we hover over it, see the mouse pointer change into a cursor? Now we can drag over this text and copy it, just like any other text. Anytime you hover over an image on macOS Monterey or touch the image on iOS or iPadOS 15, visual intelligence quickly finds and recognizes all the text in that image. Once visual intelligence finds text, not only can you select and copy it, you can look it up it, translate it, search the web with that phrase, share the text, listen to it, just like any other text. The text that visual intelligence finds, it sort of becomes part of the web page, and it sort of doesn’t become part of the web page. The text is injected into the Shadow DOM inside the image, which means it’s not affected by JavaScript. But it is affected by z-order. So, if there’s something overlaying your image, like a transparent box, visual intelligence won’t be able to find any text in the image underneath. The layer on top gets in the way. We’ve integrated visual intelligence into assistive technologies like VoiceOver to make text that’s been trapped in images available to many more people. But that does not mean that this feature changes current accessibility best practices. Of course, content on the web that consists mostly of text really should be put on the web as text in HTML, styled with a web font to give it the look and feel if you want, but as text content. This is still the best practice. For content that is a photo, an illustration, or other image, the best practice is still to include alt text as an attribute on the image element. Great alt text provides the kind of meaning and context that only a human can explain. Plus, not all browsers have visual intelligence, so continue to make sure that the images on your website have useful alt text. That said, it is pretty great to be able to access text that, until now, you had to be able to see to read or to retype in order to quote somewhere else. Next, let’s take a look at the CSS that’s been implemented in WebKit over the last year. First up, aspect ratio. Aspect ratio is a new CSS property that allows you to set a preferred aspect ratio for any element. But what does that mean, “set a preferred aspect ratio”? Well, let’s first look at the kinds of content on the web that has a natural aspect ratio. Images are a good example. Let’s say we have an image of Maggie that’s twice as wide as it is high. That image has a 2:1 aspect ratio. We’ll put this image on a web page and make it flexible by adding width: 100% and height: auto, a classic responsive web design technique. Because images have a natural aspect ratio, the height automatically changes in direct relationship with the width. This photo is always twice as wide as it is tall, and Maggie always looks really good. This kind of behavior is so expected, we almost don’t even see it anymore. This is just how images work. Video works the same way when you put it in your page’s HTML by using a video element. Video files also have a natural aspect ratio. And the video element conveys that aspect ratio to the browser as it’s calculating the page layout. But not all content has a natural aspect ratio. Here, I’ve got an article element. Inside, there’s a headline and a paragraph. By default, the article element has a width of auto and a height of auto. In this writing mode, width of auto means please stretch the article out so it takes up 100% of the space that’s available. Height auto means be tall enough to fit all of the content that’s inside a view and don’t be any taller. We can see how when the column of text gets narrower, the text wraps more often and takes up more and more vertical space. When the column gets wider, the text reflows and takes up less and less vertical space. The height of my box is adjusting to fit the text content - not too short and not too tall - without any regard for any sort of aspect ratio. For most of the history of the web, this is just how layout has worked. Any graphic design ideas about using squares or making boxes be a consistent shape, those design ideas, well, they were tossed into the bucket of “Nope! The web doesn’t work that way!” Until now. Now we can write CSS to define a preferred aspect ratio on elements that otherwise wouldn’t have one. Let’s add aspect-ratio: 1 / 1 to our code, which says whatever width this ends up with, think of that as one unit, and then make the height also be one unit, which translates to please make this a square. The height grows bigger than it did before in order to maintain that square. But what happens when there’s too much content to fit inside that square? By default, the box will automatically grow to be taller. With one line of code, we can create a set of squares or any shape box with any certain aspect ratio, knowing that if the content is longer in one of the boxes, that box will grow to prevent overflow. If we want the aspect ratio to always be obeyed, even if that does cause overflow, we can add min-height of 0 to our code. Perhaps we want to handle overflow another way, like by adding overflow: scroll. Now, I’ve been writing the value to make this square as 1 / 1. But I can instead just write this as aspect-ratio: 1. If there’s only one number, the browser will assume that it’s “over one.” In fact, there are a lot of ways I can express the same aspect ratio, including by using decimal numbers. This gives us the freedom to write aspect ratios in ways that you might be familiar with from other industries like film and television or art and design. For the last decade, it’s been pretty impossible to use these ratios on the web, even though they’ve had a deep and meaningful place throughout human culture in architecture, painting, book design, modern print design. Now we can build our layouts using these ratios. Especially when you combine aspect-ratio with CSS grid, all kinds of new design possibilities open up. Speaking of film and video, one very common use case for aspect ratio will be embedded video from third-party services. If you use YouTube, Vimeo, Wistia, or any of the many video hosting providers, those give you an iFrame to embed your video. The iFrame element is not an element that has a natural aspect ratio. When responsive web design came along, we wanted to make our embedded videos flexible, but we ran into trouble. We’ve been stuck either using a confusing padding hack in CSS or using JavaScript to resize the video. Now we can add one line of CSS to give that iFrame a preferred aspect ratio. It’s a very elegant solution to a very common problem. Aspect ratio: it gives us another powerful tool to create the layout that we want. Next up, flex gaps. This year in Safari 14.1, we shipped support for gaps in Flexbox containers. Flex gaps gives you a way to define a minimum space between items to make sure that there’s always a gap. Here, I’ve got a navigation bar that I’ve laid out in Flexbox. I don’t want these menu bar items to ever touch each other. If I add a gap property, with a 1rem value, now there’s always a space between the items. No left or right margins are needed. I don’t have to figure out how to remove those margins on the outside edge. This is much simpler. There are many other features in CSS that were implemented in WebKit this year, including additional logical properties, so important for supporting international audiences. The individual transform properties: rotate, translate, and scale. Updates and improvements to scroll margin and scroll snap. Support for new color spaces. And the animation of pseudo elements and discrete properties. Many of these features shipped this past spring in Safari 14.1 on macOS and Safari for iOS and iPadOS 14.5. And the rest will ship this fall in Safari 15. Next, let’s take a look at form controls. In Safari 14.1, we shipped support for the Date and Time inputs on macOS. Now on Mac, users can fill out Date fields by interacting with a Calendar control or fill out the time with a Time control. And client-side validation is built right in. For iOS and iPadOS 15, we’ve completely redesigned the form controls. They’ll better match the overall experience and fit in much better with UIKit. And they look great in Dark Mode too. These are the new defaults for form controls. If you’ve overridden any of these styles, then of course, your styles will be applied. We’ve also implemented a new color picker for input type=“color” on iOS and iPadOS with three panels for choosing or adjusting a color, plus an eyedropper. That’s our tour of Safari 15 and some of the highlights of what landed in WebKit this year. But before I go, I want to make sure that you know where to find important resources for learning more about Safari and WebKit and where you can submit feedback on what you’d like to see next. The links to all these resources are in the notes for this session. If you’re interested in learning about new JavaScript, DOM APIs, and media format support, check out “Develop advanced web content” here at WWDC21. Definitely watch “Discover Web inspector improvements,” and learn about the new web developer tools coming to Safari, including our own CSS Grid inspector. To keep up with what’s coming in the future, download Safari Technology Preview, the one with the purple logo. It updates about every two weeks. It’s an especially great way to test against the latest bug fixes and to use the most recent advancements in Web inspector. Webkit.org is the place for WebKit release notes, articles detailing new web technologies, and the documentation for Web inspector. And we want to hear from you. If you have a suggestion for the Web inspector or for the interface of Safari, file feedback in Apple’s Feedback Assistant. If you come across a bug in WebKit, something about HTML, CSS, JavaScript, or DOM APIs that seems broken or missing, please file a ticket at bugs.webkit.org. And you can find and follow us on Twitter @webkit. I hope you’re as excited about the new design of Safari 15 as we are, the way the new tab bar gives you a new dimension for your design, new possibilities for layout with aspect ratio, all-new form controls on iOS and iPad OS, and so much more. I can’t wait to see what innovations in web design this brings. Thanks for joining me and enjoy WWDC. [upbeat music]