 Welcome to Designing in the Browser. In this series, we explore how to take a design, build it, and then tweak it in the browser using the latest in web technology and design systems. Today, we're going to dive into the tools that browsers give us to quite literally design in them. We'll be using Chrome DevTools and Material Design as our baseline to see where we can adjust and play. Let's dive in. Like design tools, developer tools help designers and developers build, test, and debug in the browser. Luckily, there are a ton of great tools and plugins that make this process of prototyping and iterating so much fun. There are tools from everything from color selection to finessing animation to ensuring a nice user experience on a variety of devices and even testing load at various network speeds. DevTools help us not only to see under the hood, but to also make changes in decisions and see what those decisions look like in the browser, the medium in which we're delivering the final product. That's why this series is so important. As designers, we have to work in this medium and use it to our advantage to really have the most control and power over our designs. And what's the first tool that we need? Inspect Element. This is the primary entry of DevTools. Inspect Element is often how I open up DevTools just by left-clicking an element and finding that Inspect item in the dropdown. Inspect Element lets you select an element and get information inside of it. This information includes the cascade of styles, styles on various states, computed values, classes, shape and size, and more. You can even change the text content in order of the DOM of the element within the elements panel. You do so like this. So here I'm going to left-click on this heading and hit Inspect. And now I'm opening up this information here and this is the elements panel. You can see the sizing here is 350 pixels by 32 pixels in height. We have the class name here of headline six and all of the class styles inside of that. You can see here that this Moz OSX font smoothing is not being applied in favor of the WebKit font smoothing. So it shows you which styles are being applied and which ones are not being applied. We also can see here this H1. So we're getting styles from the H1 as well as the class on top of it. And it shows you which styles are being overridden. For example, this font size of 2M is being overridden in favor of a font size of 1.25 rem with the class MDC typography headline six. There's also a variety of element classes that we can play with here. And I think that this is a really great way to prototype. So inside of this, if I started typing MDC typography, we get an autocomplete of all of the different typographic options. So you can just sort of scroll through and start to see what these would look like within here. So you can see that headline one, headline two aren't actually making a difference and that's because I still have MDC headline six selected. So you want to uncheck that and now we can see what the headline two looks like. So if you truly want to play with a baseline for the styling here, remove all the classes and then start to search the classes that are relevant to this element. So here we can see all of the typographic styles and decide which ones make sense. This also lets you separate your logic from your styling. Your logic is the data, the text content here. So this is a header one in this form field element, but you can apply a class on top of it to style it however you want. Say we want to style this headline one like a headline five or headline six, we can do that. And we can test that inside of this elements panel. I'm going to select the button now. So here I'm just going to hit inspect on the button and it's going to go right to that elements. And we can see that this button has a few classes as well. So right now we're using the MDC button raise style but here I could select this outline style as well and put that in there. You can play with density inside of buttons and these are all classes that I was just playing with earlier, applying them, seeing what they looked like, testing this in the browser. So it's a really powerful tool and there's a ton that you can do by changing some of these styles around. You can reorder things in the DOM as well. I'm going to just scroll back into my UI here. So say we want this headline maybe after the paragraph. We could do that. We'll probably want to change that to be not an H1 in that case, make sure that your DOM still makes sense but you could reorder things, you could reorder the buttons, you could reorder this, remember this device. Text there and really just start to play with your UI in the browser. So here you could even change the text of what this says. I'm finding this label here and now I can change this to always Pat Disco and now I'm checking and I'm always going to Pat Disco. This is a place where you can test different language. If you're unsure how a piece of text will fit into an element on your screen, then you can test that and you can test this at various sizes. Let's look at the color palette now. In this example, we have a custom properties based theme playground for material design. If you click to inspect the page and we're opening up that panel inside the HTML, you can see it is root here with all the custom properties and their color values. So here we can start to play with what our colors look like. So if I want to change the primary theme color, I could click on that square and I have this whole array of color here that I can start to pick and choose and play with and see what that looks like in my UI. Maybe I want like a bright pink color here. You can also change the color type. So here's the hex code. If I click on these arrows here, it changes from hex to RGBA to HSLA. And speaking of alpha, you can also use this alpha toggle to toggle the alpha, which is the amount from transparent to full color and how much will show through to the element behind it. So we have all of these capabilities. And another fun one is this color palette. So in this color palette, we get a base palette of colors, but we can also start to pick color from the page. So you see these page colors here where the initial page colors, these color variables that the dev tools have found from the page as most prevalent colors on that page. So if you're working within a design and you have a palette that you're working with, you can easily find the colors from that palette inside of the step tool here. There's also the CSS variables that are being pulled out here that we can get the color values from. And we can just start to really play with color in this way. So say I want this to be a bright pink, that sounds good. Maybe we want to change the color on that primary. Here we can also change this color value. We can change the secondary color value so we can change this to maybe a purple value. And you can start to see how this cascade start the entire application. So now if I scroll through, you can see that all of the secondary values like the checkboxes, the switches, this is all live code. And we can see that this is in the browser, transitioned and transformed all these elements to be pulling in those colors. In the drawer here, we see a background on the active elements. And that is also pulling from the primary color, but being a little bit faded behind so you can still see a contrast with the text on top of it. So by applying these color changes in the browser, you can really see what that looks like in various elements and in various states of those elements. So let's go back to the top up here and select this button. What we can also do in DevTools is figure out if something is accessible or not, which is a really great shortcut to have. So here on the button, we have a color value and a background color value. If I click on this color value, you can see that we have a contrast ratio of 8.5.1. That's great. If we made that color value a little bit more closer to the background color, that contrast ratio starts to get lower and you can see that that's no longer accessible. So we get a lot of help here when you have a color and background color within an element to help us make decisions on contrast and on colors that are accessible for our users. If we click this open, we can see where that's accessible. So we can see that's accessible for double A for larger text and not necessarily for triple A, which means that we will have to have that white value for it to be triple A contrast accessible and for this to work for our users. Make sure that you're keeping accessibility in mind at all times and you can use the color palettes inside of DevTools to help you to do that, especially when it comes to color selection and readability on various elements. Let's talk about the animations palette. In episode one where we talk about motion on the web, we recreated this ringing button. So let's inspect this element in DevTools and explore what that looks like behind the scenes. So here I'm gonna hit inspect on this button. I wanna make sure that I have the button selected here and then in the bottom here, we have this animations palette. Now, if you don't have this, you can find it in this dropdown menu, this little kebab menu, and you can hit more tools in the dropdown and then animations is the first item in that secondary dropdown. So that's what's gonna bring up this animations palette for us. So now, inside of here, we see that we have multiple animations happening and if I click open on those animations, we can find that on the button, we have this grow animation where it's growing over time and on the icon inside of that button, we have this ring and I can actually toggle back and forth between here. Like this is a key frame. I can go forwards and backwards. I can pause, I can play. I'm gonna pull this up a little bit here. So what I can also do is I can adjust the timestamps. These are percentage-based animations. So if I wanted to make this grow really long, this will break up the effect of it ringing as it grows, but just to show you, I now have it sort of off kilter. It's ringing, it's ringing, it's still sort of not changing in size. So you can start to really break these down here. I have it ringing very tightly in this section here. I could break that up too. You can move these around so I can move it back and forth. I can have this start to grow before I have the ring happening. I'm ruining this animation, but the idea is to show you that you can have animations that are separate from each other and then also test what this looks like together. So now I have it ringing off kilter from the size changes, but here if you have a lot of animations that are complex and you have to orchestrate them together, you can take a look at what that is, what that looks like. You can take a look at what the animations are happening inside of this element. So we have a box shadow change too as it's growing and changing color there. And then start to play with this, start to finesse in the browser. And this is a really great opportunity for prototyping because if things are off, it's a lot easier to see it visually than it is to try to read the code and figure out what's a little bit off when those timestamps are different too. If you want to slow this down to get a little bit more of a finesse and detail here, you can also change the speed at which you're animating. So here I set 25% and I have this very slowly now starting to grow and shake here, starting to ring very slowly. So this is another opportunity for you to adjust speeds and see where things are in a very precise way. 10% is another speed option for very complex animations. Again, you can start to really get in there in the details and intricacies of these animations. Let's talk about the device panel now. I use this tool all the time. In order to showcase it, I've opened up the material.io websites and I'm just gonna hit inspect from any part of the page to open up DevTools. And here is that device toggle toolbar. So I could also hit Command Shift M on my Mac computer, but anywhere that you're using Chrome, you could always left click into the browser screen and open up DevTools. So I've clicked this open and here I have a few options. I have a responsive option so I could see what this looks like at various screen sizes by dragging it over. You also have a dropdown here with some default devices like the Galaxy S5, the Pixel 2 XL. To see what this looks like at various screen sizes, we have the iPad Pro here. And you're also able to adjust this from horizontal to vertical. So you can see what that looks like when you flip that device. That's a little bit more dramatic on a phone here. So if you flip it, a completely different layout. You can also again use this responsive mode. You can even edit what the devices are that you want to showcase. So here in DevTools, I'm gonna pull this out and I'm going to hit edit. And I have a bunch of devices here. You can add a custom device. You can add devices that aren't currently in your dropdown by default. So if you wanna test for example on the iPhone 4 or if you wanna test on the Nexus 7, I will now have these inside of the dropdown when I next open it. So there they are, iPhone 4 and Nexus 7. Somewhere on this dropdown right here. So you can see that that phone looks completely different than the iPhone 4 and that's important for you to know as a designer. We also have various break points here that allow for you to just quickly change between common sizes, mobile medium, large, tablet sizes, laptop sizes. And you get a percentage based visualization here that's scaled down to fit inside of this browser screen. So if you want, you can make this 100% view. You can make it an even larger view if you want to sort of zoom into that. You can make it 50% or fit in this area. And then you can see really large screens, 4K screens even. And if you don't have a 4K screen, you can still test on those devices. Your design does change based on the DPI of your screen and kind of is determinate of whether you have a retina screen or non-retina screen. And that can also come into play when you're deciding what images to send to your users. So if you want to test those, I have an example here with disco where I have this high res image and now inside of my dev tools, I can actually test to see that I'm sending a lower res image with the lower resolution browsers. In my CSS, I have a media query where I'm sending a different image based on the density of the screen. So here if I have a high density retina screen, I'm sending a high resolution image. If I don't, it's gonna fall back to the slow resolution image. So I can actually test this with a medium DPI screen inside of my dev tools. And this becomes really useful if you're sending a lot of large images and you want to think about performance for your users and for their devices. And if all of those aren't enough for you, there are some tools that you can use to extend these capabilities and make designing in the browser even easier. One of those tools is called Visbug, created by Adam Argyle. We're gonna fly over to him to have him explain why it's so useful for designers right now. Hmm, this page, I like the layout. I think there's a lot going for it, but it's lacking some color, don't you think? Well, let's have fun and try it out. Let's make some color in here with Visbug. All I have to do is launch it. In fact, I'm gonna scoot it down off of here so that it's not conflicting with the header and I'm gonna start with the header. It's just asking for a nice bold color, don't you think? What do you think, like a purple? Ooh, pink, a hot pink. I'm always down with hot pink. All right, I'm actually settled, that's great. Okay, you can see our guides tool is trying to help us make some alignment checks here as we hover on other elements. You can get distance between them. All right, but I'm also interested in changing this image up here and I'm gonna drag in a new one. I have an SVG icon here, it looks like this. Oh, thanks for that, that did not work out very well. But if I drop it up here, look at that, I replaced it. That's kind of nice, all right. So what about all of these cards? I feel like they're a little tight. I wanna check out their spacing here. So if I select, I'm trying to select the card element here and I'm having a little bit of a trouble because there's so many elements in here. Look, I can actually select the elements inside of here. That's crazy town. But in order to get to these great items, I'm gonna select the parent and use keyboard navigation to help me get there. So I'm gonna hit enter, which is gonna select the first item as a child. So I selected the grid container, I hit enter and I selected the first one. I hit command shift E, which is gonna expand my selection. It's gonna find all the other elements that match. I found them there. I still have the margin tool. So if I hit shift down twice, I'm gonna add 20 pixels to the bottom and that's gonna give me a little bit of spacing between my rows, super neat. I can actually continue using this multi-selection though. If I hit enter, I'm gonna find that each of these cards had a wrapper element. I hit enter again and I'm gonna get the image container that's in the upper part. If I hit tab, I'll find the next element in the layer tree and I want to change the alignment to these. So I'm gonna grab my flex box align tool. I'm gonna hit left and right and find a nice alignment and I'm gonna pick the center and I'm gonna hit enter again and we'll find that there's a span inside of that container and I wanna change the text size to this. So I grabbed the text tool. I'm gonna hit up on the keyboard a few times here. I'm gonna hit command down to change the font weight and of course it needs some hot pink. So I'm gonna go over here to my color picker and grab that hot pink from up top, close out and see what I did. And look at that. We brought some color to that page pretty quick and we're able to just sort of express ourselves in a nice, fast manner. That was fun. I hope you enjoyed seeing a little bit of taste of what Visbug can do for you. Super cool. Thank you, Adam. I really love using DevTools. I use them every day for designing directly in the browser for prototyping, for making decisions and I find that these tools are just getting better and better and better and that's really exciting for me as somebody who likes to design and build in the browser. What are your favorite DevTools? Are there any that we missed in the show that we didn't mention tools that you use every day? I would love to hear your thoughts. Please leave a comment below and thanks for watching the show. We'll see you next time. Say bye, disco.