 We're going to talk about responsive design and how that has affected current design trends. Turn this one on too. Can you hear me better now? There you go. Let's try that. Okay. No? Hello? Just talking to you. Hello, everybody. My name is Sarah. Sinking to... Hello, everybody. Yes! Okay. Let's start over then, just in case you didn't hear me. My name is Sarah and I'm the art director of Big Boom Design, and today we're going to talk about current trends in responsive website design. You've probably noticed that Internet has evolved in a big way over the last decade. We are using phones and tablets more than ever, and with that it has changed the way we design websites. The biggest trend is responsive design. What is responsive design? Well, it is an approach to website design that allows your website to seamlessly scale to a variety of devices and screen sizes. Think of it like this. Your website should respond correctly to the device that it is being viewed on. Take a look at this video of this website in action. You'll notice how the graphics are laid out, and it's scrolling down, and then go all the way to the bottom, and then in order to show you the scaling, I've slowly bring in the website, and you see how the content starts to stack. I'm doing this in my web browser and just bringing it back and forth. It's a great way to check while you're designing how the content is going to lay out. What are some of the main elements that make a successful responsive design? Those would be user-friendly layout, consistent navigation, keep the logo in the menu at the top, make sure your contact info is clear on every device, and your graphics should scale and stack appropriately with your most important information on top. The final most important thing is to make your copy accessible on all of your devices. Now let's look at how this has changed some design trends. When mobile design first started, desktop websites were often designed first, and then simplified versions were created for mobile devices. They were built separately and can only be viewed on their designated platforms. Now most designers create one design concept that can be scaled to various platforms, hence the term responsive design. So here are some logo designs over the last decade. You've got your old on the right for you guys, new on the left. You'll notice that the new style is much more minimal. There's either one, two colors at the most. They've lost all their textures, their gradient styles. They've also limited the colors, which is helpful to, for example, if you look at Dropbox and Spotify, they use one color, and then you can change that color depending on what it's being viewed on if the background color is different. And also logos are horizontal in format and have separate elements that can be used across various devices. So this is the Domino's website back in late 2010. I just want to point out, or I can't leave because of the microphone. If you look over in the top corner, you'll see their old logo up there, and it even has gradients and patterns added to it, which I think is kind of funny because the actual style was 2D, but then during this time of website styling, they were like, no, let's add even more style to it. You'll also notice that it's all on one screen, right? There's a ton of content. We've got a whole paragraph of stuff down at the bottom. There's also a button prompting you to download the app, right? Smartphones had just become popular at this point, so this website doesn't scale. If you wanted to view it on a phone, you had to actually download that separately. This is Domino's website today. It's much cleaner. You'll notice they still have the Domino, which has been their emblem since the 50s, but it's clean. It uses 2D style. There's no gradients. The images are sparing. The text is very limited. This is on the desktop view on the furthest, and then over here is what it would look like on mobile, and it stacks nicely. You can still read all of the content, and the most important information is at the top, the menu, which scales down to the hamburger menu, the logo, and for them ordering online. Here is the Dropbox website from the late 2010 as well. That big button is just super, super heavy gradient, lots of style. You'll also notice they're using their old logo as well, and they just have a solid page. It doesn't scale. This is what their website looks like today. It's much more colorful. They're using their new logo at the top. It's very clear where the sign-in information is, and depending on if you're on mobile or on your desktop, you can find that easily and the content stacks. I also like using this example because while limiting colors is important, you can still use big sections of color with limited text, and it still is very clear and easily readable for the viewer. To recap, there are the reasons and benefits for these current design trends as already discussed, mobile devices. Also, the simple graphics create a smaller file size which makes it easier for the website to load, depending on any device that it's being used on, and also accessibility and all-around user-friendly design. We are relying on technology more and more, and with that, we need to make information easily accessible to everybody. So, with these trends in mind, let's review the basics for managing graphic elements on a responsive design. So WordPress is not responsive out of the box, but most templates today are built to be responsive. You can create a theme using the free templates from WordPress, various online marketplaces, or hiring a company to create a custom template like BigBun Design. And let's see. So, but whatever you choose, when designing a responsive template, you need to keep in mind that what you create will scale down to a smaller screen and the information will stack left to right. Sorry. So, why is this important? It's because it changes the layout of your website and the way your content is viewed. So, more sections on a desktop computer mean even more on your phone. So, something that seems like it's very important and prominent on the desktop will be even lower when it's viewed on a mobile phone. Okay? So, is everybody doing okay out there? Yeah? Can we hold off on questions until the end? Is that okay? Great. So, now we're going to talk about content for a little bit. Without content, there would be nothing to design. It would just be colors and pictures, which is appealing, sure, but not helpful when you're trying to get information across. Your content should influence your design. You should ask yourself, what are the three to five most important items on my website? And then design your site around that information. Sorry there. A little technical difficulty. So, sorry guys, my mouse stopped showing up. There we go. Okay. So, ask yourself the three to five most important pieces of information on your website and design around that. And the most important thing that I'm going to talk about today and what you already saw on the screen is limit your content. You should be direct and clear with your information. Our attention spans are getting smaller and smaller and we read less copy. And I know it's sad, but what you need to focus on is creating a design with clear content that will engage your viewer. So, let's take a look at some examples of responsive design. This is a website that I found that I really liked because it showed an example of how you don't have to have a full-width image, necessarily in your hero section, which stacks very nicely on mobile and obviously this slows down the speed. Also, you can't see it in this, but this is a video and when it scales down it turns into an image, which is helpful. Some other things to keep in mind are does the menu scale well? Is the content clear at the top? Are you getting across your most important piece of information? And our next example I thought was appropriate for today, it's the WordPress.com website. And they also use the small image and it's nice because they were able to incorporate that into mobile, which I thought was nice to show because while we have some limitations in responsive design, it doesn't necessarily curb our creativity. And so now, I'm going to show you this website in action. And so they've used big sections of color and then a lot of their content is still very legible. I also like it because the desktop does have mobile, so you'll see as it starts to scale, the content gets more simplified and more direct. The content also is readable. It all stacks very nicely. They've minimized the graphics on mobile. We've already talked about the videos. So we've covered the basics for creating responsive theme. Let's recap some of the best practices for design and media management on WordPress. Colors, you want to use simple and consistent color patterns. Use more cool colors and limit bright colors. Also limit your patterns and gradients as well. Use 2D shapes, as you'll see in this example here. The one on the left is obviously much more legible to read while with these gradients and these patterns, it makes the copy harder. With logos, you'll want to use 2D style. Remove gradients, textures and patterns. Limit the colors. Keep horizontal in format if possible or create different styles for different needs. For fonts, you want to use WebSafe fonts or GoogleSafe fonts. Sandsurf is better for small copy. Also, you do not want to use text in images. You want to keep all of your text sweepable, is the term here, so that that copy could be copied out of your website and is not in an image where it can't be read. You want to have large sections of copy unlike backgrounds and use dark text and white space is okay. Here's another example. As you can see, the one on the right is very clear and this one is harder to read. And also on the one on the black background, you'll notice that the copy is not WebSafe and it's also hard to read, so it's just all around not a good idea to go with that. So images, you want to make full-width images your main focus, then use the focus of it be the center. So here in this example, you see that their heads, since they're so far at different sections when it starts to scale down, you might just get his nose and maybe an eye or the top of her forehead and the bottom of her chin and it's just not a good idea. But this lovely picture of Asheville, once it scales, it still is pretty good at catching like those clouds in that center section of the frame. Also use your images sparingly, keep them boxed in when possible. Use PNGs for logos and graphics and JPEGs for images. So last thing I want to talk about is SVGs, scalable vector graphics. If you guys haven't heard, scalable vector graphics allow graphics to scale to whatever screen size they are without losing image quality, which is especially helpful with the use of so many devices. So, yeah. We've covered a lot of information today and I want to remind you of some key points to take away. Remember to limit your content. Consistency is key when developing your responsive theme. Strive for simplicity when creating your design and have fun. So if there's any questions, now would be the time. I'm going to go for it. You back there. I mean, sometimes it is hard to find the balance, especially if you have a very content heavy website as well. I would definitely recommend that for your homepage and your top level pages, if you can try to limit the content and be more direct on that and then lead into more content for SEO further down, that's a better way to probably deal with that solution. And it doesn't always work. I mean, obviously when you talk about design purely, it's an idealistic world. And then when you apply that to working in the real world, it's not always the catch-all solution. I think one of the best ways to deal with that is actually to put in some tracking on the website and you can actually track, like Crazy Egg would be a really good example and they give you heat maps of desktop as well as mobile and so then you can see what people are clicking on the most on your mobile phone and then that can actually inform you what sections are not necessary. Yes. And I realize I forgot for the first few questions to talk it back into the mic. I apologize for that. So your question is what is the process of working with design and content when you're dealing with a client? So I would always stress which is why I had a big section about content. Like I try to make my clients focus on content first because it's really hard to start talking about design when you don't have the actual base of what you're trying to design and it can be hard. I get it. Like when we create our own personal websites, we actually hit those same walls that we do with our clients where it's like, well, I don't know what I want to talk to you about myself but there's a lot of great content out there but definitely using website tools and Google searches to see how people are using wireframes and site mapping in order to help bring focus in and then also sometimes if the client just doesn't know sometimes you can propose a set of client and then use that basically like in a testing phase to see if it works and then like go back and edit. So there's a handful of ways to deal with it. Janine. Like having done things those two different ways like frustration and depression. So Janine mentioned that while it's not usually singular in a company you're working with a team in order to come up with this and there's handoff at different points and what do you do in order to help with that? I mean a lot of communication is very important and a ton of back and forth. I mean we must do a ton of revisions and then we'll have these group discussions where we'll talk about well based off of our previous experiences with similar sites how does this elevate your content by doing it this way instead of another way. Another note which I always hesitate to put out there is sometimes you have to be pushy like a client may come in and they're like I really want this specific way but you know based off of current trends or what's the better way to get your information across this would actually be a better way. So if you can talk to them openly and be like I want to give you the best possible option and this is what I think that it is you can actually help push people in the right direction. I don't know if that answered your question Janine. There in the back. So the question was do we use homepage sliders anymore? And yes we do sometimes homepage sliders can be tricky. As we talked about you have to worry about the layout the more slides you have it will slow down the load time on devices. If you choose to use a slider I would recommend only having it on your desktop and then transitioning to a static image. But I mean there's plenty of websites out there that use sliders and also background videos which are very nice too. So it's not a bad idea to have animation I just think it's important to limit it and think about how much of it is really helpful to the viewer. There in the... This view over there you had Braceha had earlier. The question was if we use reliability acorn and I do yeah we do not use that personally but I'm not really the one to ask that that's more of a developer team question. Boomer in the back. So as far as the big sliders there's been a shift towards more of a hero image concept which you can still do a slider and so when you say typical slider you're thinking rectangular, fixed width, fixed height that's kind of a lot more of a big hero image but you can still have multiple slides. And then on the testing side the great tool is which the domain would be easier but it's Brad Frost-ish if you Google name Brad Frost and then ISH it's a really good breakpoint checker and a possible design checker where you can plug in a website and click through all the different screen sizes and there's hopefully a disco mode that will just go in and out and let you just sit and watch what happens to your design at different breakpoints and then you can kind of make notes about you can pause and make notes about how to let this breakpoint this is completely off the screen Yeah, Brad Frost I guess that's the guy's name and then ish, ISH is the tool and if you just search like ish responsive design you can probably just site probably any more questions? Awesome. My name is Sarah thank you guys so much I will be at the happiness bar after lunch if you want to talk I hope you have a great rest of your day.