 Good morning, everybody. San Diego Word Campers. Good morning. We are in person. How good does that feel? Oh my goodness. Wow. It has been an absolutely amazing couple years. Lots of stuff going on. I'm so glad to see everybody here in person and we are also streaming, so there's lots of stuff going on. I am going to be talking about best design practices to create engagement on your website. So let's go ahead and we will get started. A little bio about me. I am the founder of Next Graphics. Again, my name is Lee Levy and I also call myself the Design Queen. I don't like titles like CEO or anything like that. I'm just the Design Queen. I have 25 years of industry experience. I have two teenagers who are watching right now, hi kids. And I'm a cancer survivor 2019. It was a rough year, but I'm back with a vengeance. Thank you. Thank you. Yup. I was the only person getting chemo with the laptop still in my hand. So when I'm not geeking out, I am doing Zumba belly dance photography and travel, so I do like to get out there. I definitely do not like to sit in front of a computer 24 seven. I want to start with one of my favorite quotes by Steve Jobs. Design is not just what it looks like and feels like. Design is how it works. And I really live by that because there's a lot of components that go together in building websites. Okay, let's talk about traffic. Guys like traffic. Everybody loves traffic coming to their website, right? We all want traffic. We get it from social media. We get it from referrals. Everybody gets traffic to their website. But what happens when people come to your website and they don't like what they see traffic isn't worth anything. If your website is way. Thank you. Okay, so some fun facts. I want to start with you guys. Just in case any of you did not know this. I did not know this. I just found it out. The human attention span is only eight seconds. I'm repeating that eight seconds. However, the average user will spend 10 to 20 seconds on a website maximum. So with those numbers, you really only have about four to five seconds to capture your audience's attention. So what we're going to do is we're going to discuss proper design and elements to get people to actually stay on your website. Now I'm going to throw a lot of stuff at you today and your brain will probably be fried by the time you leave here. But if you can pick up two or three or even one good tip out of all these things I'm going to throw at you. Go home and try this on your website and you guys will be in great shape. Okay, so what your website needs to show at a quick glance. Basically, who am I? What do I do? What can somebody do on my website? And why do business with me? All of those things are very, very important and they need to show up very quickly on your site. Next thing I want to discuss is your website speed. This is always a good one when I go to a client. You need to make sure that your website loads fast. If your website is loading slowly, no one's going to stay on your website. You'll be off and you'll go right to the next website. So generally it's four seconds or less and 50% of visitors will abandon websites that just take too long. We all do it. We sit there. We get the little scroll. Are you going to stay on a website that takes forever to load? No. So neither will your clients. Now I'd like to discuss what causes a website to be slow. And we do this all the time with testing. First of all and most important is a slow hosting server. It is very important that you do not go with a cheap hosting. Cheap hosting is not going to make for a good website. And guys make sure you visit our vendors. We have a lot of really great hosting companies in the vendor hall and they have really good plans for you. So make sure that you have a really good hosting server. A lot of times I see large images that have not been optimized. Always make sure when you upload images to your website that they are optimized. If they are large, if they are print size DPI, they will not cause a fast loading website. I see also too many plugins. People are very plugin happy. Plug in, plug in, plug in but when you have 30 or 40 plugins working in the back of your website that can make for a very slow website as well. So make sure that when you are not using plugins you delete them. And make sure that check your plugins carefully what you are uploading into your backend. Another thing that I see is too many elements on one page. And especially your home page which is usually the biggest page. If you have too many things loading, if you have too many things that are pulling from other areas your website is going to load very slowly. Also your theme is a big issue. So make sure that you are checking very carefully what theme you are using. And check the theme and how long it takes to load if they have it up as a demo before you even work on it. So it's very important to make sure that you have a very good theme and a very fast loading theme and a lightweight theme most important. And then the last but not least if you have a virus or malware on your website and I see that actually a lot. So how do you know if your website is slow? Well, if people tell you that your website is slow, your website is slow. Yes, that is the first thing. Now there's a couple of tools that you can actually use here to measure. And this is just a guideline because you can run these tests a couple of times. You might get four seconds or three seconds or this is a guideline but this will give you a general idea. And I will have a barcode at the end or QR code if you guys want to get my slides. So I know some of you in the back can't really see this but there are three places right there. I personally like to use GTmetrics but again it's just a snapshot and they're not always 100% accurate. So run it a couple of times and make sure that you check your website's speeds often. I wanted to call to your attention for those of you and I hear this my god so many times. When you go to GTmetrics and you do run it, don't look at the score that you get at the top. That's great that you get an A or it's not so great when you get an F but that has nothing to do with your speed. I wanted to call attention to the red circle that is the number that you want to look at. So this website happens to load in one second. You definitely want to get this to more under four seconds. So again plugins can definitely add weight to your website. Make absolutely sure that you check your plugins carefully. Choose only plugins that you must have. Some people are again very, very plugin happy and they just need a plugin for everything and they don't work well with each other sometimes. Check ratings before you download plugins. Make sure that they are four or five stars. Make sure there's a lot of people using them. Make sure they're updated frequently and again make sure that you delete any unused plugins. If you must speed up your entire website, here are a couple of tools to do that. I don't recommend this route. It's only if you have to. However, if you must speed up your whole website, these are the ways to go. I would check the other things first and make sure everything else checks out before you use a total caching plugin. Here's another one I see very often and this was the best comparison that I could find. So no one wants to see a messy garage. No one wants to see a messy website. Make sure that your websites are clean, simple and flowing, most importantly. This is a much better example. Make sure that you keep your clients eye flowing left, right and down in an orderly fashion. And I'm going to spend a little time on the color because color as also a graphic designer, people come to me for the logos as well sometimes. What mood are you trying to set on your website? Very important. This is a good guideline. And as you can see, most of the fast food companies will go with the top three colors because here's what they stand for. For those of you who can't see it in the back, yellow would be more optimism, clarity and warmth. Orange tends to be friendly, confidence, cheerful, excitement and bold for red. Creative and wise for the purple and the pinks. And blue, which obviously all the technology companies fall into that, trust, dependability and strength. The greens are left for peaceful health industries whereas brown would stand for the rugged and the strength. White and the grays are timeless and classic. And then the elite and sophisticated mysterious is reserved for the black. So there is a really good guide. This is a one hour talk I normally give. So here's the chart. I won't go into the colors in depth. And when you're choosing your color palettes, make sure that you use good combinations of colors. All too often I see ones that are too bright, too dark, too light, very boring on the eyes. So make sure that you use a good color combination. Lights with darks, a little bit of bright if you're going to use it sparingly. Combine your colors until you get something that's peaceful for the eye. And you will hear a lot of ADA compliance talks coming in. There is some rules that play into that as well, but never use a light color on a light color. Never use a dark color on a dark color. Okay. I have this mug and I love it. As a graphic designer, I judge people's fonts all the time. So make sure that you choose good font combinations because when you choose a poor font, people can't read what's on your website. So make sure that you use no more than two, sometimes three fonts. One would be made majorly for the header. Choose a font that is easy to read. And again, make sure your colors are used sparingly with your fonts. Script fonts are beautiful, but make sure that you use them sparingly. And if you do choose a script font, make sure it's one that's easy to read. Because you might be able to read it, but somebody else might not be able to read it. And sometimes I go to some of these websites where they have those super, super scripty fonts and no one can read what the titles are. So make sure you use them sparingly. Do not overuse uppercase text and ensure proper text sizing is used as well. Generally, 16 points is a good sizing guide for fonts. Now, there is a psychology behind the type choices as well. And I found this to be very, very interesting. So you have your Sarah fonts, which are tradition and respect, older school. You have your Sans Sarah fonts, which are more for stability. Your display fonts, which are very friendly and expressive. And you have your, once again, your script fonts, elegance and creativity. And the modern fonts are more progressive and stylish. So once again, it's all about what mood are you trying to set? So when you think about your colors and your fonts, make sure that you keep asking yourself that question. What do I want people to feel when they come to my website? Okay, now we're going to talk a little bit about menu navigation. How many of you have gone to a website and the menu is all over the place? Right? Don't you hate that? I can't find what I'm looking for. I'm getting right off this website. Think about your menu very, very carefully because there are some rules that come to play here. Make sure it's clear and concise. Another good comparison of a website that has the menu all over the place, just like signs that are confusing, it's the same thing with a menu. You want people to navigate quickly and immediately right to where you want them to go. So here's a couple of rules for good navigation menu design. Make sure that you, and this is totally, remember the old bubble drawings that we used to do way back in the day? This is a perfect way to do a bubble drawing before you set up your menus. Make sure that you put your important pages at the very top level because everybody just wants to put every page in the top level, but that doesn't work unfortunately. Make sure that you use colors if you have the dropdowns that shows people where they are so they're not confused with their mouse. Usually it's recommended to use two different colors for the menus. If you do need a third level, meaning top, dropdown, and over, once again make sure it's clear and concise. And keep your wording short. Some people like to use phrases and sentences, but unfortunately that does not work in menu design, especially for mobility. Does anybody here know what hero image is? Good. Okay. So for those of you who don't, the hero image is the big, large image that shows up at the top of the page. This is your prime real estate. And I can't believe how many people misuse it, both with their wording and with their image. So your hero image has to actually tell your story completely in the first sentence without anybody actually reading the text. They should be able to look at your picture and have a clear idea about what you do. It should state a clear call to action. And make sure guys that you use a good quality photo because I see people all the time, they send me cell phone pictures and those are just awful. Do not use cell phone pictures for the large image because they might look good on your phone, but they don't look good when you blow them up. If you absolutely must try to get, you know, with a good quality camera, but obviously professional photography is preferred for the main image. So here's where I tell you to take the challenge. I actually did a class on this and the results were amazing. We sat people next to each other and we turned on our laptops and I told them, you got five seconds. I want you to look at his website, I want you to look at her website and you need to tell me what they do in five seconds. And half of the room turned to their partner and they said, I don't know, I couldn't figure it out. So this is what's considered above the fold. If somebody cannot get a clue as to what you do in those first five seconds, guess what? They're probably going to go off your website. So using a generic picture like a city, beautiful picture of a city, but that really doesn't say what you do. And I'm going to follow this with a couple of examples because the slightest change on your call to action, your photo, and make a huge difference in the traffic that actually stays on your website. Anybody want to guess what this person does? Right? Could be a lot of things, right? It could be a travel agency, hotel cabins in Lake Tahoe. It's a photographer. Well, nobody could tell that this was a photographer by looking at this website. So after a couple of quick modifications, first of all, we stuck the word photography in there. That helped a lot. But obviously the call to actions were added right after, which I know you guys can't read that, but it does say Nevada photos, California photos, and Cave Rock photos. Once again, now people can tell what you do. So it's very, very important that you do this. And you know, feel free to ask a couple of people, not people that know you. Show them your website and say, can you tell what I do? If they can't answer that in five seconds, you need to rethink your hero image and your call to action. What does this person do? Cleaning, you would think so, right? It's not a cleaning company, but that's the image that she used. Burn calories while cleaning your home. She's a fitness instructor. Yeah, I said to her, I'm sorry, I would hire you to clean my home, but not have to tell me to burn calories while I'm cleaning my home. Once again, we changed the photo. A lot more people now were engaging on her website. So paired with the perfect call to action. Now, don't these guys look like they're burning some calories while they're cleaning? Again, great example of how you have to use the right photo with the right call to action. So which brings us now, we're going to go a little bit more into detail with your call to action. She's also called a CTA case you guys have ever seen. So what is a call to action? It is an invitation for a user to take a desired action on your website. They should be used throughout your site, not just on the very first image. And they can be attractive and tempting with the right offer. I will spend a little bit of time on your call to actions because there are so many of them. So while I'm going through these, please think about your business and think about what you could be doing with your call to actions. So the very first one is the free effect, which is try it free, free download, sign up for free. Everybody likes free. The word free absolutely catches people. You have your direct call to actions, which are more of your sign up now, buy now, add to cart, which you see a lot of in e-commerce. You have your visual call to actions, which are watch the tour, something visual, something that will present visually to you, view our portfolio. Those are good examples of visual call to actions. We're getting to my favorite one. So the detailed call to actions are now like a live preview. Take the demo, take the tour, something where you get to see something live. You have your contact CTAs, which are just contact us, get a quote, keep in touch, send an email, stay connected, typically used with social media too. And then the one we all know and love, which is the limited offer, click through action. So how many times have you been on a website, especially a travel site, and it says two rooms left? Guarantee you that's not true. Or three people are looking at this offer, or 2,000 people are looking at this offer. Really good marketing gimmick. But it does attract. So limited time offer ends in 24 hours, and then they run it again. Offer expires tomorrow. Order now, receive a free gift. 50% off sale to the first 50 buyers, even though 5,000 buyers later, you'll still see that same ad somewhere. But limited offer call to actions are a really good way to get people to engage on your website, because if they think they're on a timer, they'll buy. Okay, videos, again, sorely, sorely underused. Videos are... Let's put it this way. For a 60-second video, I found this quote and I absolutely loved it. So many years they said a picture is worth 1,000 words, but a video is actually worth 1.8 million words. So you can accomplish in one video what you probably can have somebody go through and retire website to try to figure out what you're trying to say. So video is very important. So why include video? They do increase your engagement by 10% to 20%. They are definitely more interesting than reading pages and pages of text. It gives a clearer picture of your product or your service. Videos also appeal to the senses, way better than reading a lot of text once again. Videos can also create a certain mood, quickly deliver your message, and they can also drive traffic to your site if you're cross-promoting with YouTube on your website. So always, if you have a YouTube channel, make sure you are cross-promoting and embedding them on your website. They also give your company a personality. So let's talk a little bit about the types of videos, once again, that represent the different companies. For those of you who do business services, consulting services, your videos will show staff interacting with clients, show how you create solutions for your clients. Those guys are a little bit harder to do videos for, but very effective. Physical or digital products, you guys have a lot more stuff to actually show. So you show people using your product, you show how amazing life is when you act and you get this product, show your product in action. That's a great way to get attraction as well. For experiences like travel and events companies, you want to create a sense of excitement because, oh my God, I want to go to this place. I want to visit this. I want to engage here. The entire storyline by showing people what you get and people having a great time running on the beach or the blue water. Visual video is very visual. For restaurants, hotels and stores, you want to create a desire for somebody to walk into your place physically. So you're going to focus heavily on your location, what you have to offer, and create a sense of enjoyment. What does somebody get when they walk into your place? My favorite type of website to do is restaurants because I not only get to sample the food, but I get to photograph the food and I get to put it on the website. But as we all know, we love food and don't commercials just make you go crazy. So for restaurants, they've got it made. The food is basically their photos and their videos. That's their intensive. Make sure. For those of you who still don't know what that is, you have to use your fingers on a phone. The website is not mobile responsive. So make sure that your website is mobile responsive. Why? It adapts to any screen, mobile, tablet, laptop, desktop. It actually will improve your SEO. And I'll talk about that in a second. Improves your bounce rate because some people just will not stay on one of those websites where they're on their phone and they have to start using their fingers to get it smaller and larger. And if that is not enough reason to make your website mobile responsive, at least do it for these guys. Yes. Come on, we all do it. Nobody says it, but we all do it. His hands look kind of busy, so that would really suck if he had to use his fingers to work on the website. But it does say that a recent survey done this year shows that 75% of Americans do bring their phones into the bathroom. So make sure you got a mobile responsive website. Give them a good experience. But seriously, Google does flag websites that are not mobile responsive. So if you want to see that ugly message over there that says your page is not mobile friendly, okay, this is a huge one. Testimonials. We get them on Yelp, we get them on Google, we get them on all sorts of websites, Facebook, LinkedIn. Make sure that you take some of those testimonials and put them on your website as well, because just a quick fact, one happy customer will tell an average of nine people about their experience with you. That is huge. Think about that math for two seconds. And now I'm going to show you another one. Negative reviews. For one negative review, you might have 26 angry customers, and we all know that negative news unfortunately travels faster. So there's a couple of things that I want to talk to you guys about reviews. There's a couple different ways of displaying them on your website. You can take one highlight a week, put it on your front page, don't plaster 50 of them. I had a real estate agent, she literally sent me 50 of her Google reviews, and I said, I'm not putting 50 Google reviews. Let's put five up there, and let's send them to Google if they want to see it. Again, opening it in a new tab, not getting it off your website. But people will give special attention to your testimonials, especially if you do video. If you can actually get a video testimonial of your clients, I mean, that is social proof like nothing else, especially if you have a product or a service. Try to see if you can get video testimonials, because people will watch a video testimonial 10 times over reading a very long paragraph. And again, never use too many. What you can do is the scrolling carousel. Take five or six of them, and just have them scroll on a carousel on your website. Cross-promoting your reviews. You can also use plugins that can embed the Yelp, I believe Yelp has it and Google has it for sure, but you can embed them into your website as well. You can pick your top reviews and make sure you encourage your users to also give you really, if they're happy with your service, of course, make sure that they're putting reviews for you guys as well. This is a very, very important one, because when, if and when, when people do go to your Google or Yelp reviews, make sure that you are responding to them, even if it's just a thank you. 10 to 20% of people will actually come to your website when they see that you have engaged or thanked somebody for their reviews, especially respond to the negative reviews. No one likes them, but every now and then you will get one. Do not take it personally. Just respond with a kind statement. We're sorry you had a bad experience. We will help you. We will fix this. What can we do to make it right? Because if someone gave you a negative review and you responded to it, that actually shows that you have amazing customer service and you want to work with people to make things right. Here's one very, very underused, but offer incentives and rewards for referrals. Who likes free stuff? Chances are if you like free stuff, you're already getting referrals, so why not let your customers make something out of it? Here's a couple of ideas that you can do for your referral programs. You can also pay for performance. You build high quality, high quality clients who will spend 25% more with you when you offer a referral or a rewards program. And it has a proven track record of success. All the big eyes are doing it. So when you're asking what kind of incentives or rewards should you offer, think about who your clients are and what type of reward would they mostly enjoy. So there's physical rewards, which could be gift cards, a branded swag item, a free product or a service. Brownies, cookies, and food do really well for lots of people, too. Non-physical rewards, that would be discounts, coupons, free upgrade to a product or service, free subscription. Think again about what your clients would enjoy most and think about offering some kind of reward. They're really easy to incorporate, really easy to incorporate in your system. I'm going to give you a quick bonus tip here, too, because I see this a lot. Signatures. What an underused way to advertise your website. Is that what your signature looks like? That's good. It says sincerely best regards, it has your name, it might have your website. But wouldn't you rather have a signature that looks like that? That makes you look really professional. And if you get a signature like that, I guarantee you people will be like, whoa, I want to see what this person does. I used to get traffic to my website as soon as I did this from my kid's friends' moms and I would just send a basic email saying, hey, what time is the meeting tonight? And they're like, oh, I didn't know you're a web designer. And I'm like, how'd you know? Oh, yeah, it's in your signature. It's there, I forget about it, but I hear it all the time. So if you create a really nice signature, you put your photo on it. You will put all the different ways they can contact you. And this is just a sample. You don't have to do all of this, but put your website, put your email, and you have a good following. So proper use of email signatures can increase interest by 25%. And most of them do work really well with Outlook, Gmail. If you want to find something like this, just email signature generator. There's tons of them out there. So closing thoughts. I know I threw a lot at you guys today, and I really hope that you learned a lot. How many of you did pick up a couple of tips? Awesome. How many of these did you know about, but you haven't applied yet? Okay. And maybe a couple of you were like, duh, why didn't I think of that? So hopefully when you leave or go back after the conference, you'll have a little bit to think about. And I just wanted to share that with you, because if you have any, I can probably, if you have time for questions. Anything? Like two minutes? Okay. There's my beautifully graphic-designed barcode, QR code. If you guys want to send me any feedback, ask me any questions, I would love to hear from you. But we do have time for one or two quick ones. Does anybody have any questions? Awesome. Then you can... Oh, I see one hand. Yes. So the color combinations? Absolutely. The color meaning? Yeah. Can you please just scan that or see me after and I'll get it to you. Okay. The whole colored thing, I have one big presentation for that, but I had to cut it short for this. So... Lily. All right. Thank you, everybody. You've been amazing and have a wonderful conference. Thank you.