 So welcome to designing and implementing beautiful, flexible interfaces. I'm going to talk today about ways you can improve your process and make it more efficient and effective at creating beautiful, flexible, and usable designs. I'm Ken Woodworth. I'm the art director and a partner at Atten Design Group. And you should follow me on Twitter. And it's just at Ken Woodworth. Or you can check out my website at kenwoodworth.com. It's in need of an update, though, so don't get too excited. Atten Design Group is a web design and development shop specializing in three areas of service. Design and build, support, and hosting. And we're located in Denver, Colorado. And we create websites for organizations doing good work all around the world. We've done work for the Smithsonian. Some of that's getting cut off, but that's okay. The United Nations, the Knight Foundation, the Center for Investigative Reporting. And we also did all of the design work for DrupalCon Denver. Who made it to Denver? Three people. Yes. All right. So the Internet. Let's talk about it. It's an awesome time to be a designer working on the web, isn't it? How many people here are designers, by the way? Let's do that first. All right. How about, like, front-end developers? And who calls themselves a femur? Okay. All right. So a bit of each. That's good. Yeah. So the Internet is really awesome. There are new technologies and techniques that become available every day that change the way we design and the way we implement those designs on the web. It's a really exciting time. But it's important with all of these new technologies and techniques to not get carried away and to make sure that we're still focusing on the fundamentals. That's kind of what I want to talk about today. And I want to start with this interesting quote. A curious property of great design is that it usually goes unnoticed by the people who use it. And this is by Joshua Porter from his Principles of User Interface Design article. You should definitely read through all of that. It's really awesome. And the way I like to describe this is if you invite a guest over to your house and your house is a mess, that leaves a really strong negative lasting impression with that person. But if they come over and your house is perfectly clean, they don't think twice about it because that's what they expect. Well, that same thing can be applied to websites. If a user comes to your website and has a terrible experience, then that will leave a long lasting impression with them. However, if it does what they expect and it looks good, then it instead leaves a positive impression. And then another similar quote, which sums it up much more succinctly, is good design is invisible. And this is from theverge.com. You should... Oh, man. You actually can't see any of the URLs from this. But I'll put my slides online right after this. Sorry about that. So let's talk a little bit about the history of designing for the web. So where did we begin? I think we all know this, right? GeoCities and Angel Fire and all of those terrible websites with green text on purple backgrounds and everything's rotating and spinning. It was a dark time for design on the web. Really, really glad we're past that now. But from there, we took a great step forward to static designs that you could then implement with table-based layouts. So someone figured out that if you used a table, you could have pixel-perfect control over your design, which was fantastic. I mean, obviously, you saw the previous thing. This is terrible, and then, all of a sudden, you have control over this. However, if you've ever worked with a table-based design, you know that it's not all roses. It has terrible markup. It's really hard to maintain. It's not semantic. And it just wasn't the answer. It was a necessary step, but, again, not the answer. And then along came Flash, and Flash was kind of like the clouds parted and sun shone through, and you had complete control over typography, animation, interactions, color, layout, everything. All you had to have was a plug-in. So as we now know, that isn't exactly the solution. And thankfully, Apple has done a good job of kind of killing Flash, and we're probably seeing the last of it now. Along the same time that Flash was coming around, CSS2 became sort of the standard for creating websites and laying out websites. And with CSS2, we have new layout techniques, and also that sort of brought with it the push for web standards. So we now have semantic markup, and it's much easier to maintain and control our websites. From there, we moved on to creating two different versions of our websites, and not everyone was doing this. Obviously, it's expensive to do this sort of thing, but large corporations usually would have a desktop and a mobile version. And then this takes us to where we are today with responsive design. So how do we approach responsive design? Well, design is hard. There's no easy answer. If you think about it, it's impossible to create a static design for every page of a website. So now, factor into that all the different possible resolutions you should be targeting, and that takes it to a whole new level. So it's virtually impossible to do this. So what is the best approach to designing responsibly? And there's sort of this ongoing argument between people who design in Photoshop and people who design in the browser. And they each have very good points against the other. So if you're designing in Photoshop, you're designing a static design that's only targeted at one resolution. And it's not taking into account all of these other different resolutions you might need to target. However, if you're designing in the browser, you could be caught up in semantics and markup, which may not be what you should be focusing on while you're creating that initial design. So with these two different kind of sides, I actually have the answer. It doesn't matter. It really doesn't matter which direction you take on this. What matters is what comes out of your process. So as long as the end product is successful for your client and for their users, then the steps that you take to get to that product aren't as important. So I would encourage you to find your own process and perfect it and constantly work to evolve that process to streamline it and make it better. And that's kind of what I want to talk about today. So at Atten, we have this sort of three-tiered process. We have a discovery process to start things off where we're doing information architecture. And then that leads into design and implementation sort of happening at the same time. There's a lot of crossover, but it's a very iterative process. So at every step, we're asking the client for feedback and we're gathering feedback on how things are working and looking, and it's constantly evolving. The important thing about our design process is that we're actually still doing Photoshop comps, but we're not using them to say, this is what the site will look like. We're using Photoshop comps to establish an art direction for the site, a very important distinction. You have to educate your clients and say, it's impossible for us to show you what the site will look like unless we're working with actual markup on every device. So this is what we're using to give you an idea for what it could look like, and that's what you're getting signed off on. So traditionally, our process has been to establish that art direction and get approval from the client and then move right into creating the theme based on that static comp. But as the front-end developer, you have to make a lot of assumptions from that initial design. You don't get to see any kind of interactions. You don't get to see what other pages are looking like. So there's a lot that you aren't being told just from this one static design. So we felt like there was a step missing. Anybody have any ideas what that step might be? Sorry, what was that? Prototyping? Okay, that's something. But I guess in our process, we're trying to stay away from getting too far into the browser at this point. Well, our answer to this is a style guide. How many people are using style guides right now? Okay, great. So what is a style guide? Well, we used a style guide to define the look and feel of individual elements of the site. And it contains everything from colors and typography to UI elements like buttons, tabs, tags, pagers, that sort of thing. And it's also a great place to show different interactive states like hover and active and that sort of thing. And the style guide is really, it's really beneficial to eliminate the guesswork that comes in implementing a design. So now a front-end developer can look at a style guide and see, oh, I know what this button should look like in its many different states, or I know how this input field should react to user input. And the added bonus of creating the style guide is that you set yourself up for more modular, flexible HTML and CSS. And then finally, you get to see how all of these elements relate to each other and help support that visual brand that you're trying to establish while you're designing. So it's very effective at establishing that design direction even further. So how many of you are familiar with Dribble? If you could see the top of this, you'd see that there's a logo called Giffel. Dribble is a website where designers can showcase their work and they only get 400 by 300 pixels to show a segment of their design. Well, in this example I created, it's just to showcase animated Gifs from Dribble. And I just wanted to use this to illustrate how you can take a design concept and create a style guide from that. And so in this case, this is the style guide, and this is a very simplified style guide. Usually a final product of a style guide will be much more complex than this, but for this example, this should give you an idea. So let's take a closer look. We start with colors, and colors are very important to establish up front, especially as you're writing CSS to make sure that you have a good handle on what all of the colors that will be used in the site are. In our process we use SAS, so we can create variables that are set to each of these colors. And so we've established sort of a naming convention, so that middle column is the base color, and then you have lighter and darker versions of that color that you can use in your design. From there, we move on to typography, and here we're outlining which fonts you can use, and also setting up some default styles for fonts. And this is something that can definitely change as you're implementing the site. None of this needs to be set in stone. Again, it's just to establish some more guidance as you're implementing the design. We also outlined some image sizes to make sure that the images that are being created on the site are aligning to the grid. And with responsive design there's a little flexibility here, so that's just something to keep in mind. This section for UI elements, it can actually grow to be very complex, so in this case I've kept it simple and just touched on some buttons. But you can see I've got a primary button with a normal hover and an active state, and then some secondary and tertiary button styles. And if you set that all up in advance, then it's much faster to implement the design. We break forms out into their own section because forms will sometimes have sort of a different visual style from other elements of the site and different interactions. So in this case you can see the input field there for a username has an icon and the inline label, and that is different from how the text area is being handled with the label being above the element. And then finally we have sort of a catch-all section for miscellaneous elements. In this case this is an image holder that you can see a different state for when someone has actually liked an image. And then we're also showing a date style that could be used. You could move that to the typography section if that makes sense, but here if you've got it down here you can expand that so if you've got other date styles you're using throughout the site you can add them in this one central area. So this is just a dummy style guide I put together for this, but there are others out there. This is one called Pairs, and I will read you the URL, P-E-A dot R-S. And this is one created by Dan Cederholm, SimpleBits. This may be more of a pattern library that's a little bit different from a style guide, but they're kind of in the same family. But it's definitely worth checking out for inspiration. Vigit just relaunched their new design, Vigit.com. And to go along with that they had a nice blog post about how they created the design and part of that was the style guide that they created. And so this is another good example that you can use for inspiration for style guides. This style guide is actually from Starbucks and it's a very simple style guide. Maybe more of a pattern library, I'm not sure. It's just very simple, but it gets into things like borders and arrangements of blocks and different ad layouts and that sort of thing. And then if you really want some guidance there's a nice post. Again, I'll put all these slides online so you can get the URLs later. There's a nice post called a style guide guide by Alice Holliday, which gets into things you may want to add into your style guide and some guidance for that. So it's definitely worth reading. So I've talked in general about how you can adjust your process to include a style guide. But now I want to talk about some very specific things and I'm going to go over some of the tools that I use as a designer every day. So I'm going to start with Photoshop. So who here uses Photoshop, first of all? All right, how about fireworks? You all can leave. It's important with any of the tools you use to really master them and to constantly be looking for ways to improve your workflow with them. And Photoshop I think is a really effective tool that I think some people are really down on. But I think once you really learn it and master it it can be really effective for creating designs. And part of that is knowing how to navigate. There are different ways you can navigate in Photoshop and I'm going to cover like two different ways here. But the layers panel and all of the visual UI that you can click through having a good understanding of that is really key, especially the layers panel, because this is where you're getting into organizing your document and having a really well structured layer. Layers panel is really important. So you have things like layer groups and patterns, clipping masks, shape layers, layer styles. I mean it keeps going, there are adjustment layers and all sorts of other things you can be doing in this panel. So there's a lot of content getting packed into this one element. You can adjust opacity and fill. You can actually edit. Now with CS6 you can edit layer names and tab to the next name. So that's a much faster way to interact with the layers panel if you're renaming things. So getting a good handle on the ways you can interact with the interface is key. On top of that knowing keyboard shortcuts, these are some of the, I would say, some of the more important ones. In this case, selecting layers. So if you have a layer selected in the layers panel, if you press option and then open or close bracket, you can move up and down in your selection. Command plus open and close bracket will actually move the layer in that layer order. Copy Merged is kind of a unique one that if you have a marquee selection on part of your image and you press Command Shift C, it will copy all of the visible elements within that marquee. So that can be useful if you want to, say, send a quick section of a design to someone in an email or something like that. Copy Color as hex. This is a new one I just picked up a little while ago, but what this does is it'll copy the foreground color in Photoshop as a hex value. So this is really awesome if you're implementing a design in CSS. Instead of having to open the color panel every time you want it to get a hex value, you just hit this key command. And this, I've actually set up a custom one for myself here, and you can do that yourself in the keyboard settings, keyboard shortcut settings. You can also change blend modes all with a keyboard shortcut. So this is a really quick way to adjust blend modes for layers. And then finally, moving through the history, this is something that I do all the time. So if you just hit Command Z, it'll toggle between the previous state and the current one. And that doesn't really get you very far. But moving back with Command Option Z, you can actually go much further into the history, depending on how many history states you've set up in Photoshop. The only caveat with this is that if you make any changes after you've moved back, you can't go back forward. So it's like the butterfly effect. But I don't know. Anyway. Another key principle in designing in Photoshop is non-destructive design. So if you're creating, say, rasterized graphics and you need to adjust those, you can find yourself in a place where you can't go back and you've basically destroyed those elements. But with a few changes to how you approach things, you can make your process much more flexible for editing things. So in this case, vector and shape layers are a good example. So we've got just a rectangle with rounded corners. Really simple. Say it's a button on your site and you decide I want to pair this button with an input field, like it's a search field with a go button next to it. So using a vector shape, you can actually knock out half of that shape. And that does not destroy the layer. So if later you decide, oh, I want to unpair that button, you just delete that mask and all of a sudden you have the full button again. This is a very simple example, but if you're working with icons, if you've created icons in a vector format, you can scale them all you want. If you create them in a bitmap format, you're limited. So definitely something to keep in mind. Also smart objects. Smart objects are really useful in Photoshop. So if you have a logo that you want to import, say you don't have a vector version of a logo, you just have a PNG. So if you import that PNG into your Photoshop document, scale it down, and then later you find out that you need to enlarge it because clients always want you to make the logo bigger. Well, in this case, you've destroyed that image. You don't have that data anymore to make that logo bigger. But if you bring that PNG in and convert it to a smart object, you can adjust that size as much as you want and that won't destroy the original content. Another benefit to smart objects is that if you have a repeating element, so let's say you're designing a form and you have a section of the form with 30 checkboxes on it. Don't ever do that, by the way. That would be terrible. But if you needed to change the design of those checkboxes, you could easily do that in one place with a smart object and that would update all of those other checkboxes. So that's definitely something to keep in mind. And then finally, you can apply filters to smart objects that are nondestructive. So if you apply a blur to a bitmap, you can't unblur it later. But if you apply a blur to a smart object, you can adjust that blur and remove it if you need to later on. Also, having a really good grasp of color styles and patterns in Photoshop. Photoshop, of course, gives you a lot of control over all of these things. And I want to first talk about blend modes. So I typically use four blend modes. Normal, multiply, screen, and overlay. And I think if I'm ever using a blend mode beside normal, usually it's overlay. And I want to go through a quick example of what overlay does for colors. In this example, I have a blue stripe that I've applied black and white on top. I've set it 50%. So you can see the black makes the blue darker and the white makes it lighter. But it's also getting a little bit desaturated. Now if you do that same thing but set them to overlay, it keeps the saturation and just brightens or darkens the color itself. So I think this is something that if you're doing anything with layer styles, which I'll talk about in just a sec, overlay using black and white is really useful. So layer styles, this is another one of those panels in Photoshop that's just chock full of interface. There's a lot you can do here. But the thing to keep in mind is that all these layer styles relate to things you can do in CSS. And if you're thinking about that as you're designing, it helps to make sure that you're actually creating things that can be implemented and that's really important. One thing I want to mention is the global light setting in Photoshop. So if you have this checked, if you apply a layer style using global light, it'll all use the same angle. And then later, if you needed to change that, you could and it would apply across the board in your document. The only problem with this is that if you move those elements to a new document that has a different global light, it'll inherit the new global light and so they won't look the same. So I would advise you to uncheck it if you can and just not do that. Also, patterns are really handy to use in Photoshop. In this case, you can use patterns for texture. And these are all patterns from a website called subtlepatterns.com. And they actually have a .pat file. You can import into Photoshop and it has over 250 different patterns that you can use. So it's a really great resource. But you can also use patterns for different things. In this case, I'm using it for a baseline grid. So in every Photoshop document I create, I establish a baseline grid. In this case, it's a six point baseline grid. And usually it's not this dark. I usually have it at about 5% opacity so it's like a subtle guide for laying out your type. But this is a great way to kind of maintain your vertical rhythm in your document. And this is a really easy thing to create. You just draw a line and draw a rectangle with how much space you want as the line height. And then you create a pattern and it's all set. All right, so now I want to talk about a real quick example. These two buttons on the left here are all using the same layer style and the two buttons on the right are using the same layer style. So this may be a simple question. Which buttons look better? What's wrong with the buttons on the right? There you go, okay? So desaturated, they're blurred. Okay, there are a number of things, obviously. This is a no-brainer, basically. So you can see the border radius on the buttons on the right, they've got different border radii on each side. So that looks terrible. The colors that are being applied for the layer styles are just being applied using multiply or screen. And that's desaturating the colors. They're actually, the buttons on either side are using the same base color, but you can see how much that can mess up what your colors look like. So in this case, this orange is now turning into a muddy brown, and it just doesn't look great. There's also a drop shadow that's too strong, so the buttons look like, instead of being three-dimensional, it looks like they're just kind of hovering off of the page. So this is a real simple example of how you can screw up layer styles and take them to the extreme. So I've talked about Photoshop and how this is setting you up for your CSS. So let's talk about the CSS now. And to start, I want to mention a couple of books. This one's called Scalable and Modular Architecture for CSS, otherwise known as SMACS. And you can go to smacss.com, and you can buy this book. It's pretty inexpensive, but basically this is an approach to CSS that sort of modularizes your CSS. So instead of writing the traditional Drupal style of id field dash field dash field underscore node field, you know, kind of a mess, this approach simplifies your selectors and how you're structuring your HTML and your markup. So I recommend this book. And then these are the book apart books, just some of them. A book apart has a number of books now. I think they're up to seven, but all of them are great. So, and they're really quick reads, definitely worth checking out. I want to talk quickly about preprocessors. I'm going to give some CSS examples in a bit, and they're all going to be in SAS. But there are a couple of different preprocessors that are at the forefront right now, and they are SAS, less, and stylus. So SAS is really the one you should use. All right, let's do it again. Who uses SAS? Who uses less? And who uses stylus? I don't even know what stylus is. Any others that I didn't name? Okay. What was that? More. More? I've never heard of that. Oh, okay. So I will say to anyone using less, I used less for probably a year and a half, and then when SAS came out with the SCSS syntax, so it mirrors CSS better, I made the switch, and I haven't looked back. It's a game changer. You should totally switch to SAS. There were like three buffs on SAS today in a session yesterday, so I think there's a buff right now if you want to leave and go to that. Please don't. But with SAS, you get Compass, and Compass is a library for SAS that adds in a number of CSS features. It adds in a number of different ways to handle typography, browser support. It's a really great tool for writing your CSS and definitely simplifies things. So instead of having to write out all the browser prefixes and that sort of thing, this handles it for you. And then on top of that, there are other extensions, like Breakpoint is one of the more recent ones. It handles nested media queries. So you can write a selector, and then inside that you can say, in this element I want it to adjust on this media query and change this property. I recommend checking that out. It's Breakpoint. That's what it's called. It should be easy to find. So now I want to talk about some specific CSS things. And I'm going to start with box sizing. So years ago, IE did this really weird thing where if you set a width on an element and then applied padding, that padding would get applied inside the element. And everybody looked at that and was like, what are you doing? This is totally different from how everybody else does padding. Padding goes on the outside. So in a normal case, if you have two elements and you want them to be, say, half of the width of the page, you want them to sit side by side, 50%, 50%. If you were to add padding to those elements, all of a sudden they don't fit anymore. But with box sizing, border box, that makes it so the padding is applied inside the element. So you can keep those elements side by side. So this totally changes how you handle responsive designs. So now you no longer have to factor in that math for padding. You just have to handle the widths. And also with this, it also makes sure that the borders are inside at the same time. So IE actually had something right. It's amazing. But anyway, now everybody's getting on board. With CSS3, we now have RGBA. So now all of a sudden, all those alpha values from Photoshop can come over into your CSS. In this case, I'm using a variable with SAS. They let you do a shorthand version. Normally you would have to write out the RGB and A values. But with SAS you can pass in a variable for the color. Set the alpha, and it'll figure the rest out for you. We also have multiple backgrounds. So if you're working with different layers that are all applied to the same element, you can do that now in CSS. It's a little trickier, but you definitely have more flexibility than you did in the past. So in this case, I have the bottom layer is an image with just a textured background. And then on top of that, I've done a gradient where I'm using RGBA values to apply white on top of it. And I'm going to talk a little bit more about this and why this isn't a great example, but that'll be in just a second. So I think one of the biggest things, and you probably all know this by now, but box shadow and text shadow have definitely changed the way we approach designing for the web. So now all of those layer styles that you create in Photoshop, Drop Shadow, Outer Glow, Inner Glow, Inner Shadow, those can all be applied as box shadows in CSS. And with CSS, you even have more flexibility than Photoshop because in Photoshop, you're limited to only a set number of those. But in CSS, you can go crazy and have 100 different box shadows or text shadows and you have complete control over them. You have a number of different options, too. So you can have an inset shadow like on the second line here. You can also have a spread for the value, which will mean that, say, you have a spread of five pixels. It'll apply that shadow in its full value out to five pixels, then start blurring it. So you have a lot of flexibility there. With text shadow, you're a little more limited, but again, you still have more flexibility than you did before we even had that. I also want to talk about Pseudo elements. Pseudo elements are a really great tool for designing now. So in the past, if you wanted to include an icon on, say, a button, you would have to apply that as a background image or include some presentational markup in your HTML to get that icon to show up. Well, now with Pseudo elements, you can actually inject that element with CSS. So in this case, this is a somewhat advanced example, but it's injecting the text right after a button. And in this case, it's using symbol set, and I'll talk about that in just a second. If you were to look at this in HTML, you would see that there's now the text, R-I-D-H-T, after the text of the button. And you can style that. You have complete control of that separate from the rest of that element. So I mentioned symbol set. It's just symbolset.com. And you can see here that they've written out, works on a desktop and mobile device. If you go to the website, you can actually see they type this out. And as they're typing out desktop, as soon as they finish typing that word, it converts it to the icon. So symbol set is using ligatures to take combinations of characters and create icons. So now we have semantic icons on the web, which is really exciting. The benefit to this is that they're also scalable. So they're vector-based. With symbol set, you set a point size. So if you set it at, say, 20 pixels, it'll be a 20-pixel tall icon. So you have complete control over that. This is a really exciting advancement. And I think that there's going to be a lot more of this in the future. This one costs 30 bucks. And there's a social version that costs a buck. And that gives you, like, Twitter and Facebook and, I think, 30 different icons. But I think they're definitely worth it. There's another library called Font Awesome. And this one's free. This one's used by Bootstrap, Twitter Bootstrap. In this case, the characters are not done with ligatures. They're done to Unicode characters. So it's not semantic markup, but it's still better than including presentational markup in your HTML. And then this one, this is a pretty funky one called Chartwell. And this is a font. And you wouldn't even know it. But the way this works is it takes values and creates graphs or charts out of those values. This does not have a web version yet, but they are working on it. And I'm really excited to see what happens when they release this. But it's pretty cool. And then finally, just this morning, this blog post came out, joshemerson.co.uk. And this blog post is about how to create your own vector icon fonts. So if you have a logo that's, say, a one-color logo and you want to include that in your site as a vector version, and then that will work on, you know, retina displays and not be pixelated, this walks you through how to actually do that. And it's a Mac tutorial, but there may be similar things you can do on a Windows machine. So I talked a lot about blend modes. And unfortunately, blend modes on the web, they're not quite there yet. They're not there at all, in fact, which is really sad. But luckily, Adobe has actually released a version of WebKit. It's like a beta release that you can download from their site that includes blend modes. So you have ways to stack elements on top of each other and apply them as blend modes and also apply layer styles as blend modes or box shadows as blend modes. So that's exciting. That'll be a while before that's available in every browser, so don't get too excited. But this last one I want to talk about, you can't see the URL. It's scss-blend-modes. Just do a search for that. This is a SAS library that lets you use blend mode functions to get the colors that you want based on an initial color. You say I want this orange with 15% white applied on top of it, and it'll give you that correct blend mode if you use blend overlay or blend multiply, as all of that built in. So it's really exciting. I want to walk you through an example. So in this case, this is a sign-up button that's all using the same markup, and the only difference here is that they're each getting passed in one color value. So it's all very flexible markup that you can adjust. I'm going to quickly walk you through that. So in this case, we're just going to create a really simple button. So the markup is a class equals button, a trap equals whatever. It's a sign-up button. I've set a button color, so that's the base color for the button, and that'll get used in a number of different places. So this is SAS syntax. I have variables. I'm doing things like including a just font size, too. That's something you can use to align your text to your baseline grid. I've set a border radius, so that's handling all the browser prefixes for me. And then down here, I actually... So I'm doing something kind of funny here. This is a silent extend, and with that, I don't want to get it too far into the details of this, but it simplifies the way your CSS is written. So instead of taking all this code and including it 100 different times throughout your document, it rewrites all your selectors to just appear at that one place. So every time you extend this, it just adds another selector to that area. So I'm extending that button base and setting the background color to the button color, and that gives us this. Okay, so that's our start. Not bad. Okay, so now we want the gradient, so we want to add the gradient to this element. So in this case, I'm doing a linear gradient from top to bottom that's starting with that base button color, and then here I'm using blend overlay. So with the overlay, you want to pass in the color you want to be applied to the base color. So here I'm passing in black at 25% on top of the base color, and that's going to darken that color. It may be a little hard to see on the screen, but there you go. So now we've got a gradient that's still in the same color family. But there are also some layer styles I want to apply, so there's an inner shadow and an inner glow on this button. So the inner shadow, again, I'm using blend overlay and RGBA combined to apply these layer styles. And you can see it has a somewhat darker line of shadow on the bottom, and then there's a brighter glow coming in. But in the design, we also have an icon that we want to add. So in this case, I've changed the markup slightly by adding a few more classes. So the first class I've added is button icon right. So that's a presentational class that I'm adding to control how that icon is displayed. And then the second that I've added is ss-navigate right. So that's the symbol set icon class that will automatically add the icon for me. So it writes the pseudo class to it, the pseudo element to add the icon, which is really exciting. So it greatly simplifies adding icons to your markup. But I have this presentational class built in so I can control where that markup is showing up. Normally, it would just be in line. I think they typically do a before pseudo element. So here I'm taking that before element, and I'm absolutely positioning it within that button. And you can see, so now I've got this icon that's off to the right. Well, that's not quite how we want it to look. There was also like a darker color behind that icon. So how do we add that? This is getting kind of complex. There are many layers to this button element that's all starting with some really simple markup. So to do that, all we do is write this CSS. So now I'm adding another pseudo element. This is an after element. And basically, this is just a square that gets applied to the right side of that button that has darker versions of that orange. So it's, again, using the blend modes in SAS to get the colors that we want. And then adding that element into the design. So here you can see it now has that darker color. So we've got this button created, and the only color we're using is that one color value, that button color that we started with. So this means that we can pass in a different button color, so blue or green, and that's really flexible. And this isn't like a library or something. This is something that you can write yourself. There are button libraries out there, but I strongly encourage you to avoid them and do your own thing, because you'll end up with a site that looks just like everybody else's site. Anyway, I'm a bit of a snob in that respect, I guess, but you can do this. It's really not that complex. But now what happens if we pass in a light color? So we've got this white text and this white icon. If we pass in a lighter color, those aren't going to show up. Well, with SAS, ta-da, we've got some logic. So we can actually detect the lightness of that base color. So in this case, I'm saying if it's lighter than 60, 60, which is on a scale of 1 to 100. So it's in that lighter end of the spectrum. Do something else. So in this case, it's changing how the box shadow is applied and it's changing the colors of the element, or of the text and of the icon, and it's also changing the text shadow. So this is an example of just some of the different buttons that are all using the same markup, same CSS with only one different variable getting passed in. And if you want to check this out, I made a gist of it on GitHub. So you can play around with this and definitely let me know if you end up using it somewhere and see ways to improve it. I'm sure it's something I threw together for this presentation, so I'm sure there are ways to make it better. It's definitely worth checking out. So thanks, everybody. I would encourage you to rate this session. I created a bit.ly link there so you can get there easily. And definitely follow me on Twitter and check out my website. It might be updated in a couple of years or something. I don't know. So do we have any questions? Yes. Yes, and that's something I should have mentioned. So you create the initial Photoshop version of it, which is just an editable Photoshop document, but then you also have to implement that in CSS. And the benefit of that is that, I'm sorry, the question was, do you create an HTML and CSS version of the style guide? But the benefit of doing that is that you're looking at your markup and your CSS in a more modular way, so you're taking it out of the context of your site and creating these base styles that will be much more flexible as you're implementing the site. So then later, if you need to change how they look in a certain context, you can do that without changing it across the board. So yeah, you definitely should also implement it in CSS and HTML. Any other questions? Yes. The question was, does it work with an older version of Explorer? No. It does not. There are polyfills that you can use to get some of these things working with Explorer, but you should be writing your CSS to degrade in certain browsers. Eventually we're going to have to stop supporting Explorer and just start writing good HTML and CSS, so unfortunately that's the answer. The question was, yeah, so if you're not using blend modes in SAS, so in a case where you may not even be using SAS, which a lot of people aren't, and that's understandable, the question is how do you get that same effect and how do you get overlay blend modes in CSS because typically if you're just applying white on top of a color, you're not going to get the right effect. I guess what I would do is in Photoshop, I would take that overlay effect, however that is being applied, set it to 100% opacity, and I drop it that color and then use that color with an RGBA value set at the alpha you had originally. Does that make sense? I can demo it for you if you want. You want to come up afterwards. Any other questions? Yeah, so the question was, am I saying that you're declaring one color value and then that's getting used everywhere? Okay, so I guess really the question is, right, so if you're in Photoshop, what you need to do is start with how you have your button designed in this case and just set that one layer style to 100% opacity and then I dropper it wherever it's at its strongest version, wherever that layer style. So say you have an inner glow and on this orange button it may look really yellow, so it becomes a very bright yellow color. So you want to I dropper that yellow and then use the RGBA values there or the RGB values but the alpha values set to what you had initially. So if you had that inner glow set to 15%, you want to do RGBA, the yellow color, 0.15. Any other questions? Well, thank you all very much.