 Hey, there. I'm Sam, a developer program engineer here at Google. And today, I want to ask the question, why do sites like Gmail feel like native applications? And how can you get that same feel and experience for your websites or PWAs? Thanks for tuning in, and let's get started. The web really began as a place to share long form static content in HTML. It was plainly a place to read and explore. And when you use your browser to navigate the web today, that default user experience is really geared towards that original content-led world. But suddenly, parts of the web have moved on, and a big chunk of the sites we use today, especially the ones you might keep open all day, like Gmail, are actually app-like experiences. And the definition of sites here is pretty broad. These could be sites in a browser, or those could be loaded as a PWA, or really anything built using web technologies in a web view. So today, I'm gonna be looking at several case studies and showing how they move past that default web-like user experience to provide their users with an app-like feel, helping their users by matching the native apps that they are inspired by our model on, and moving past the classical content-based web that we as developers start with and have to wrangle with. So let me introduce the case studies. First, there's Gmail, probably the most famous app-like experience in the world. If you're like me, Gmail lives in the leftmost pin-top of my desktop all day and every day. Secondly, there's Excalidraw, a new web-based drawing application for mobile and desktop. I've got this already as a PWA for when I wanna make quick drawings or diagrams. And finally, a hypothetical note-taking application in the style of Google Keep, but something I prepared just for this talk. But before I start, it's important to ask, why is an app-like feel important at all? To be clear, if you're just serving content, whether it's Wiki content, social media posts, and so on, then maybe it's not important to have that feel, but this is definitely a nuanced topic. I'm not a UX researcher, but I am an engineer and expert on the web. So for me, building app-like experiences comes down to two things. One, going to where a user is, matching their mental model interaction, and two, what's known as the uncanny valley and avoiding it. One, when we build app-like experiences using web technologies, like the case studies I'll be getting to, we're actively trying to make them easy to understand to our users by leveraging their mental models of other similar experiences, which hopefully come from their long exposure to native applications. And two, if the experiences you build are just a little bit off, your users are actually likely to be more perturbed or irked by your design. Of course, I'm overloading the term uncanny a bit here, but you'll know this feeling. You'll feel it when, say, the back and forward buttons don't work on an e-commerce site and you'll lose your place in your flow. Or a web app shipped on an app store gets a lot of reviews saying, this is just a badly wrapped web experience. Why would I install this? And so as developers, we obviously want to use the web to build a variety of great experiences and reap the benefit of our knowledge and being out of ship to multiple platforms. Well, at the same time, avoiding these really jarring and common moments that we see a lot for our users. And the converse is also true. If I'm not building something app-like and that, you know, in line can be blurry, then it's often important to not overload built-in behavior. I don't want back and forward to do something really odd on a content-driven site. And so, you know, this is an effect you have in reverse when your users wonder why this simple document has all this extended behavior that didn't really fit their mental model or what a boring page should look like. So let's look at some app-like case studies, starting with Gmail. Gmail is ancient in terms of the web, but it's always had an app-like feel. It was really one of the first. All links inside Gmail open in a new tab and this is achieved by setting target equals blank on every external link. This is such a simple concept to begin with, but it is a great delineator of whether you're app-like. For an application, it's going to be important for users not to lose their place in what they're working on. That's disruptive and will break their app-like immersion. Next, Gmail, like many app-like experiences, prevents overscrolling and has inescrollable areas. The framing, the UI headers and sidebar and so on don't move as they navigate my inbox. This is achieved by a combination of CSS properties, including overscroll behavior and overflow. By setting overflow hidden on your body but scroll on internal content, users can just scroll internally. Gmail also provides right-click menus, although it is inconsistent. We can trigger these menus by right-clicking in the main email inbox area, however, right-clicking anywhere else gives you the default browser pop-up. You can customize the right-click action by overloading the context menu event. There's no way to add events into the native menu so you'll need to create your own to do this like Gmail does in the main area here. My opinion here is that while you should never disable right-click completely as this is usually a sign of really important attempts to stop you saving images, for serious app-like experiences, right-click can be a good place to put extended actions, although, of course, it only makes sense on desktop. Lastly, and my personal favorite gripe, Gmail is often uncanny to me as it doesn't always handle drag and drop. Gmail only handles incoming files if I drop it in exactly the right place while writing an email. Otherwise, most browsers will either open the new image in a new tab or replace Gmail completely. But Gmail is an app that can send files. So anytime I drop a file on it, I feel like it should do something sensible rather than this default behavior which breaks my emotion. I have a whole video on this, but you just need to handle a couple of events. Drag over and drop. So Gmail isn't a PWA, but it is definitely a good candidate for keeping open all day in a pinned tab and that definitely makes it app-like. Next, let's draw. Excalibur is an open-source drawing app from 2020. It loads quickly, can be added to your home, desktop or home screen as a PWA and has a slew of features. Importantly for this video though, it actually feels very app-like whether it's on mobile or desktop, phone or tablet. Excalibur totally overloads scroll behavior with a kind of infinite scroll, even using native-like scroll bars to help inform the user where they are inside the document. On mobile, it's actually had the limitation. As you can see in the side-by-side, the scroll gesture is used by the platform to hide the URL bar. Since the underlying page in Excalibur's case isn't really moving, my iPad won't hide this area. There have been a number of technical workarounds of this over the years. Your page could really scroll for a few pixels to trick the browser, but it's a really hard problem to solve. One very nice feature is that the pinched zoom gesture doesn't zoom in on a page or the UI components like it would by default on a regular page. Instead, it does exactly what you want of a drawing application. It zooms in and out. Excalibur is an editor, so on desktop, I can simply tap Control-Z to undo my last action. By default, my browser only supports this on text fields, but here I'm editing objects, shapes and text too, which also support undo and redo. On mobile, undo and redo is still surfaced, but just as buttons inside the UI. Speaking of keyboard shortcuts, I can also tap Control-A to select all. Unlike a regular page, which selects text and UI and so on, Excalibur overloads this to select the contents of your drawing, not just the text elements on your page, which would happen by default. You can make text unselectable with the user select property, and Excalibur has done this on the UI elements. As for detecting select all, there's actually two approaches. Either you look for Control-A or you add a hidden element on the top and bottom of your page and detect whether they both get selected at the same time. Like Gmail, Excalibur also provides a right-click context menu. It's more consistent than Gmail. There's only really one main editing area, unlike Gmail's many components. This too overloads the context menu handler and creates a floating div as part of the page. Finally, Excalibur also uses a number of advanced APIs. It can, for example, better interact with your clipboard and save and load from disk. I'd highly encourage you to seek out my colleague Thomas' talk on this from the same event. Excalibur is about as far from a webby experience as you can get. It is a full app that, to be fair, is largely driven by a full-screen canvas element that's drawing everything. But these gestures, especially around how you might navigate the page and perform documents-style editing, really make this application quite immersive and matches the mental model that users will expect from desktop. Lastly, let's talk about a hypothetical app-like experience, Notes. I've inspired a bit from Google Keep, something I actually built and worked on many years ago, but I've just built this for a demo. So these buttons here have the default built-in styles of the platform, including their focus styles. This is really a dead giveaway that you're on the web. And while I'm, of course, proud of the web, users using your app in an installed environment might be perturbed by this. So try to create your own visual style. It's also not a good idea to try to match native either. The operating system will change before you know it and then your buttons will look out of place. I've used built-in drag and drop support to allow these items to be reordered. Built-in drag and drop is pretty good these days and you don't need a library for it, although there's a bunch of JS and CSS here to create this drag effect. I can also undo and redo this reordering by tapping Control-Z and Control-Shift-Z. However, I've actually inserted this event into the real undo stack. What this means is that on iOS devices, I can actually shake the device to undo. This is hard to see in a video, but you have to believe me it's actually happening. This is a fairly advanced technique and you can read more about it in a post I made last year. But basically after reordering these notes, we pretend to type something which the browser then lets us undo and redo. Dragging isn't just about reordering. Also interesting is the data attached to a drag when you're leaving the site. In this case, I use the setData method to include the notes title and update date. Unlike our previous examples, I've not completely overloaded right-click menu here. However, we can still intercept right-click and do something interesting. In this case, if I right-click on the corner of a note, I intercept that action and automatically select the note's entire contents, taking advantage of the browser's content-driven goals. It wants to let me select text, so let's help it do that. So I've talked through a few different examples of app-like experiences and these are replications of classically native experiences. We've got an email client, a drawing app and a text editor. There are even some things that these apps do clearly better than native. Excalendar, for instance, has a crazy good collaborative editing mode, but it's clear that its UI is still fundamentally grounded in a native editing experience. Your sites, of course, are going to be different than these case studies. And if you're building a site that's more focused on content, then some of these tricks can still help your users feel a bit more immersed. My personal favorite is Fixing Select All so it doesn't highlight the UI around the edge of your content and just focuses on the content itself. But I wouldn't suggest randomly retrofitting your site to overload its right-click handlers and things like that. Most importantly, immersive app-like experiences can make great PWAs. These should be utilities that can live off alongside a user's native apps. I'm obviously a big proponent of the web, but as web developers, we shouldn't be kidding ourselves. Your competition, if you build app-like experiences, is going to be established high-quality native apps. So it can prove us as web developers, too, keep our users engaged, or to put it another way, not break that established mental model. And we do this with an immersive app-like experience that goes to where a user is matching their mental model and expectations. Thanks for watching. I'll see you next time.