Welcome

- [Voiceover] Hello and welcome to, Designing for Web Performance. My name is Brian Wood. In this course we're going to take a look at what you as a designer can do right now in your designs to help web performance later on. What does that mean when I say performance? Well, we're trying to make our sites as small as possible and download as fast as they can because there are so many devices out there, and internet speeds, and networks to go across, that these days, performance is the key. Think about this: According to one study 40% of people abandon a website that takes more than 3 seconds to load. Now that might seem crazy but I'm sure you've found yourself sitting there, waiting for a site, and eventually if it doesn't load fast enough you might move on. Well, they've just lost a customer or at least someone to look at their content, right? If your pages load too slowly and performance isn't optimal, it really could spell the difference between success and failure. If you're just putting a site out there about your cats, how you measure success might be different from say, an e-commerce site where you're trying to sell a product or a service and it's your livelihood. When we build websites, we are constantly testing and tweaking to see how fast we can get them to download. There's a lot of different methods to do this. I have the Chrome browser open here, I'm going to go to Lynda.com and I also have something called the "Web Developer Tools" open. This is just one way of many methods or many ways to be able to see how long things take to load. And that's kind of simplifying it a bit because there's a lot going on here as far as performance, load time, all sorts of things. Optimizing our websites is definitely one of the top concerns we have as designers and developers. So as a designer, what are some things I can do to help with site performance? I'm glad you asked. When designing your site, be it starting wireframing, starting in UI UX prototyping, or going straight to Photoshop, or however you intend to do it, there are certain things that we are going to keep in mind to design for performance. The first thing are gonna be fonts. We'll talk about some of the best practices for working with fonts. Icon fonts, something else that we have today to make things load faster because they're actually icons that are fonts. Designing with vector artwork, specifically thinking about SVG and what we can do to help ourselves to create that type of content. Some of the best formats to use as far as images are concerned, when and where. Something that we could all do more of, optimizing our images further. And just wrap up with a few general web design tips that I always like to share with people. The last thing that I'll mention here, is that if you are working with a developer, make sure to involve them early in your process. Whether you are wireframing, UI UX prototyping, wireframe prototyping, designing straight in Photoshop. However you decide to do it, make sure you involve them early because they can call out potential performance concerns. If you decide to have an animation that runs on the first page and the animation is super complex, they might tell you, "Well we need to simplify a bit here and here just because of download concerns. It's above the fold, it's the first thing people see, we might not be able to have that on mobile just because of the networks people are viewing these across and download performance." So it's definitely something to think about. This is one of the things where people come to and say, "Well should a designer know code?" I am not opening that can of worms. In my opinion, I believe that a designer should know about code, should know what code can do, the different technology like jQuery, what they can do, what they're about. You know how things work generally. Maybe not coding them per se but that way as a designer you have an idea of what goes into a lot of this. And the fact that if we are going to make an animation do we need a JavaScript library? Is it a widely used one that somebody might already have cached? These are all things to consider. So let's jump in and we're going to take a look at our first thing: fonts.