 Welcome to Image and Everything. Our speaker for this talk is Laura Berger and Kevin. Can I say that right? Yes. Cool. Laura and their husband, Kevin, are regulars around here. Yeah. But Laura is actually pretty popular for a website that she started. Kevin is on a little book called Twilight. And the smallest bite her friend started kind of blew up. And since then, she has worked on over 20 WordPress sites, mostly in the area of education and entertainment. And I'm going to keep things brief here. Stop there and turn it over to you. Great. Thanks, Trash. All right. Hello, everybody. I've had a variety of experience over the last decade or so with a variety of WordPress websites, primarily in the areas of education and entertainment, but I've had forays into some other different areas. So what I'm going to be talking about today is Image is Everything perking up your website. I have a background aside from my web work. I started off as a teacher and eventually transitioned that into a marketing and event planning background. And again, Image is so, so important when you're dealing in those fields. You don't basically get that second chance to make a first impression. And your website is your chance to make that powerful first impression to keep people on your site, keep them interested, let them do that deep dive into your content, and then keep them coming back. So we're going to talk about a couple of ways that you can very practically keep people engaged on your website when it comes to just how you visually prepare things. There are a lot of really great people who are following me that are going to talk about some ways to attract them via your content, via SEO and keywords. I really encourage you to listen to them because their talk is going to very much dovetail with this and it's going to give you a complete package. So I really encourage you to listen to the speakers that are going to follow me. First thing I'd like to talk about is images. Just like haircuts change every five years, how many of us have taken a look at a picture and gone, I know that that photo was taken in 2010. How many people look at the haircuts of friends? Remember the Rachel haircut and everyone's like it going, aha, 2001. Everybody knows when something was taken. It's the same thing with images on websites. Things go through cycles, things change. What was popular five years ago doesn't work now. And it's always going to be that way. So we're going to talk about a couple of things that had their heyday but now it is their time to go away. First thing I want to talk about is this. Be a hero. You want an impact? Use a big image. The term for those are hero images. That's really where it is at today. Is having those big attractive splashy images. What's had their day, what they have replaced is the slider. Okay, you know, as the images scroll by, we got one. We got two. We got three. Industry expert. Anybody know who Yoast is? Okay, Yoast SEO. They're one of the leaders when it comes to SEO and here is a quote directly from Yoast of Yoast SEO. And he says, if your theme forces you to include a slider also named carousels on your homepage, please realize that it's making you use a feature that has no value for SEO, a feature that is probably slowing down your site by loading extra JavaScript and prevents your user from reading good stuff and your content immediately. And it will most probably account for less conversions as well. Very, very true. Statistically speaking, the first three sources of those are from Yoast and the bottom two are mine. This has been proved time and again. 1% of the people will actually click on a slide which is almost always the first slide. I have seen people put up sliders where they're advertising, you know, whatever their latest fundraiser gig is and that's great but do you want them to have more than just your fundraising info? I had a school that was a client that put up their Night of the Races on the slider and it was there for three months and I was like, why is it when everybody comes to the school's website the first thing they see is a dude on a jockey, you know, the jockey on the horse. You know, it just wasn't giving a good message. A hero image, much better idea. The other thing too, sliders confuse people, you're sending most multiple offers, like what's your message, what's your core, what are you all about, there's too much going on. They do slow down your site, just on the load time. The other thing too, and this is a big issue, especially as people age, there is a significant portion of the population that are using screen readers because they cannot visually see the website well. A slider is hell on earth when it comes to a screen reader because it stutters the screen reader, it just gets caught and it doesn't get down the rest of the page. You give a very unpleasant user experience to anybody using a screen reader. The other thing that I've seen happen perpetually in sliders, a slider wants a very specific image size. If you don't size it right, you are chopping off heads, it doesn't fit in there right, there's content embedded over the top that doesn't look so good. It is a perpetual problem. So avoid them. I always like showing that I have made mistakes. This is a site I designed. Here is the slider that they're still using. Four years later, I'm sorry I inflicted a slider on them. I will tell you when I was the webmaster of this site, 90% of the people either wanted to know about the curriculum, the admissions test, or where to find a school. Almost nobody cared about whatever news story it was we were putting up at the moment, be it the principals and pastors doing something together, and they sure as heck didn't care about the school that was nowhere close to where their child was going to go to school about whatever they fundraised money for. Who did get the idea right though? We're our friends in the Archdiocese of Philadelphia. That hero image really works. I get involved, I'm interested, I know it's about kids. The content up top is smart, I'm drawn in. That's where it's really at today. So what makes a good image? In brief emotional impact. That's it in brief. You need to have sort of an emotional tie to what you're doing. And in order to do that you need a really good quality image. And we'll talk about a couple of things that make a really good quality image. Right off the top here, complex idea can be conveyed with just a single still, namely making it possible to absorb large amounts of data quickly. It's that old picture is worth a thousand words. If any of you have ever heard the idea of show me, don't tell me. You know, that's very true with writers. Give me that image and I will follow along on the journey with you. So here's some things that you can do. First of all, I'd like to talk about what I call the rule of three. When you do photos, you are far more likely if it is a people-centric photo to have a photo of three or less individuals than a crowd. Less is absolutely more when it comes to this. I need to see eyes and I need to see emotion. And what I always say is people need to pass what I call the quarter test or the thumbnail test and this is true on mobile or on desktop. What that means is their face needs to be the size of my thumbnail or a quarter in order to be impactful. I need to see their eyes. I need to see those facial expressions. If I see those eyes, you've got me. Use your space. Over time, people's content containers have changed. I've certainly seen this. We started out with content containers that were maybe like 400 pixels across. And now we're talking 800 to 1,000, all sorts of different sizes. Use your space. Make sure the images, when you're putting images in your content, that they fill your space. Don't put a 400 pixel image in a 1200 pixel content container. It gets lost. Fill your space. Also, don't worry about centering it. Years ago, it was very popular to put like center tags around an image to center it. It will naturally center now with responsive websites and when you throw it into mobile experiences, it just kind of centers itself naturally. You don't need to go tossing the center tags around it. Right or left align, use it sparingly. You start to get very dizzy after a while. Somebody left aligned a image. Now, they right aligned a image. Your head starts bopping back and forth. I find that they're probably best used most of the time. If you have like a headshot of a person, it's like the person in their bio. It works great for something like that. But really think about how you're using it. And if you are using it, it's got to be super, super relevant to the exact content that is aligning alongside it. Sometimes the content drifts into another area and you can't figure out what that picture has to do with the words. Also, very, very important, optimize your images. That means make sure you save them appropriately for web. Almost any image that you have gives you the option to save high quality, medium quality, low quality. High quality images are great if you're going to print. They slow down your website. Make sure that you are picking those lower quality images because it looks fine on a computer screen versus in print media. Something 72 DPI is not going to kill you online. It will kill you in print. This is a biggie. I think just talking about this at dinner last night, just because you can do something in Photoshop doesn't mean you should. Sometimes people get Photoshop or a new graphics program and they use every bell and whistle. It's great. I get it. You want to play around. I'm all for that. It doesn't mean that you need to use 47 filters and throw that on your website. Think about it. Less is often more. Here are some ideas. This is what I was talking about with the eyes. This is the same event. It is backpacks for kids. It gives backpacks to kids in inner cities whose parents don't have a lot of money to send them off to school with a brand new backpack loaded with all kinds of school supplies. Which picture would make you want to donate to backpack for kids? The right. Can I not imagine that there is a classroom full of children having the same experience as this little adorable guy right here? Eyes, quarter test, always makes the difference. You might want to throw the other picture onto your Facebook page, but the one you're going to feature on your website, it's sure that one. The other thing too, and just throwing that up at the top, also cropping is your friend. I have taken in my life tens of thousands of photos that have been used for advertising and marketing purposes of that entire time. In the last 30 years, I've taken maybe two photos that I haven't cropped. Cropping is your friend. You can get a golden photo out of that, out of something that maybe had four other kids in it. Cropping is so on your side. Always use the cropping. Okay, so here's the next thing. I'm not a designer or a professional photographer. I dabble around just like everybody else does. I have an iPhone. Everybody plays around. You don't have to be a professional photographer or a professional designer to make yourself look good. Now I will say this, if you have money, if you are working for a larger organization that has a budget by all means, hire those professional people. They are going to give you the look that you need. But if you're just starting out, I understand you're on a budget. So here are some tools that you can use if you're just starting out and you don't have the budget to go hire those professional people. Photographs for free. Two really good sources for them. Number one, Unsplash. The photos that I've been using in my PowerPoint here have all been coming from Unsplash. The background ones that I've been using to introduce each concept on the slide. Unsplash is where I've gotten those from. That's my source. Another great source is Pixabay. I love Pixabay. I go there all the time. They have a great search engine. You literally go on site and if you want, I don't know, New York Skyline, type in New York Skyline and you'll get like 20 different photographs that are for free that you get to use. What you don't want to do is go to Google Image Search, go New York Skyline and go, that one looks great. The problem is that's probably copyrighted to somebody else. Or it may or may not be, but you have no way of knowing. What will happen is a photographer can potentially find it because there is metadata sitting in those photographs or somebody just stumbles along and goes, hey, isn't that your photograph? And if you are using something that is copyrighted without permission, you owe somebody a lot of money. I know of three instances where people were using photographs that they did not have the rights to use. They respectively cost those people $500 and $10,000. The 10K was negotiated down from a price of 30K because of the number of times they had done it. That is a very expensive payday. And if they were taken to court, they would be like, yeah, you stole it. So you don't want to steal a photograph. Go get it from a source. Like these, and you can always go back and say, here's where I got it. From Unsplash, I got it from Pixabay. They vet the photos. And if there is ever an issue, they're on the line, you're not. Another great source, and this is what I would call affordable photos, is from a source called 123RF. 123 Royalty Free. That's what the RF stands for. And they have not only photos, but vector art that is available for very reasonable pricing plans. The one that I happen to use, they have monthly charges and things like this. What I usually do is they operate on credits. I usually buy $100 worth of credits a year. For the purposes I use it for, I have the exemplars up, is a local community theater. I help them design their logos for the year. And they do eight shows a year and the $100, like, more than covers the photos and the vector art that I want to use for the images. And you can use it for web. You can use it for print. You can use just about whatever you want with it. They've got a great collection. Really great search parameters. If you're not careful, you will get lost on it for hours. I have done that. But really great sources. Here's another one that, if you have a picture, it's great, but it's like, alright, now what do I do with it? Do I want to filter? Do I want some fun design? How do I manipulate this and make it look good? I don't know my way around Photoshop. I don't even have Photoshop. What do I do? Fortunately, there are a couple of really good programs that are on the web that help you look like you were a designer who knows their way around Photoshop even if you personally don't. And two of my favorites are called Canva and Pick Monkey. I personally like Canva a little bit better, but, you know, Tomato Tomato, your mileage may vary. Whatever you like better is great. The image you see off to the side here is from Canva. I didn't do anything to it. It's for free. You could go in there and replace the words, and you could have, let's say, you have a travel blog. That's a great image to use on your website. It also lets you upload your own images. Like, I'm not good at putting four photos perfectly sized, and it has lovely little drop drag, you know, grids and all kinds of things that you can just drop and drag and throw things into, perfectly sized, perfectly shaped, not distorted, and then you just download, and it is for free. Most of what's on the site is for free. They do have options if you see a picture like, oh, I really like that one. It's not for free. They will charge you the overwhelming fee of $1 to use a photo that is not for free. So it's a huge source. What I also really, really love about it, aside from giving you the ability to make a hero image, it will also let you make images for all kinds of social media platforms, Instagram, Facebook, YouTube headers, every single one of those that you can imagine, and those platforms frequently change their sizes, and they keep right up with it, so you can go in and very quickly get whatever the new sized image is. Some of those platforms even change sizes within their platform. For example, annoyingly on Facebook, for reasons best known to them, the header size of your Facebook page is different than the event size. I don't know why they do that, but it is super annoying. However, Canva has helped me every single time on that. So here's an example of a hero image I pulled off of Canva. Free. Another one for free. I just changed the text slightly. And another one. Looks like you had a professional photographer come in. You know, you just could change that, throw your branding on it, and you're great, and it's for free. Here's another thing that I really like from those sites. They both do it, Pick Monkey and Canva, and these are great options to spice up your blog. Our infographics. People love infographics. They're visual ways of giving lists, or to-dos, or top tens. I'm not creative enough to know how to move those icons, or pick those colors, and how to do it. They have them pre-done for you, and you just swap out their text for your text. You can put in different icons. You know, stuff like this would make your sites look like a million bucks, and they have them on all sorts of different themes. Like I said, a lot of them are for free, and others, if you want to take the paid version, it will cost you a dollar. Not a bad option. The other thing that those sites have too, they have an upgrade version you can pay for, and on the upgrade version, they will let you upload fonts that you may have purchased, so you can get your exact font branding going across it, and it will also allow you to upload your website's color palette. So it will change the text to yours very specific, you know, blues, or tans, or reds. You don't have to sit there typing in the hex codes in the color wheel the whole time. So a lot of good stuff, and very helpful if you have, like, more than one person working on your site. You can share an account. It makes a huge difference. Here are some other things that are fun. I love side-by-side comparisons. They're awesome. They're great for before and after. Everybody loves a before and after shot. One of the ways you've seen it a lot on the webs are like photographs. This particular one is comparing a site that was built up with industry versus when it was not. You've seen it with, like, flood damage, with, like, tsunamis and things like that where they've taken a picture of the landscape like before and after. But you could do that with anything. You could do it with home improvement. You could do it with an art project. You could do it with, you know, the sky's the limit. Great website called Juxtapose, and I have the URL there. I'll also have my slides up afterwards so you can grab all this. You can grab my slides from online afterwards. Upload two pictures. It does the little slider for you. You can do them side-by-side. It gives you a super easy embed code. You put it right on your website. Minimal teeny, tiny branding from Juxtapose down the bottom. And gives you some great mileage. People love comparing back-and-forth images. It's a great item to use if it's suitable to the content you're putting out. Another really good one. We were just talking about this just before are maps. People love maps, depending on what you're talking about. Do you have a biking site? Do you have a site that's talking about the best restaurants in a certain area of town? Do you talk about, you know, where you can get the best supplies for in a certain name of whatever it is? Maps are a great way for people to do that. Google Maps lets you customize a map. They have little icons that you can indicate for different types of things. You can place it on that map and then you can embed it, again, right on your website. So if people are coming, say, to Word Camp Lehigh Valley next year, Word Camp Lehigh Valley could put down four restaurants in the area, where the hotel is at, all kinds of things make it easy and interactive. People know where to get those things. It makes it a little more interesting than just a list of here are things you should know about. It categorizes them. Another cool site is something called MapBox. And it also does maps but in a variety of artistic ways. There's a screen cap of one such stylistic map they have that I honed in, which is the lower portion of Manhattan Island. They do maps with different kinds of terrain, topography, all kinds of different really cool images, and all you literally do is put in an address and it zooms into wherever you tell it what you want, and then you select what kind of map it is that you like. They also let you use what are called SVG files, and you can upload and superimpose other things onto the map for different areas of interest. And then you download and embed. It's like so super easy and it does. It just perks up your website, and it looks like a designer did it, right? Gives you a lot of mileage. Here's another one. Social media images. It is more than just an icon on the top of your website. Use social media within your content. So there is no one right social media platform for everybody to be on. Afterwards, if you want to have a conversation out at the happiness bar, I can give you my two cents on what I think might work personally for your website, but it's definitely not a one size fits all. As a generality, I think most people should probably be on Facebook, Instagram, and Twitter, but that can change depending what you're doing. My favorite fun, I don't know what they were thinking when they did it, social media, what I would call faux pas of the year, was the New York Stock Exchange for reasons best known to them decided that they needed a Pinterest page. I don't know if they're making bare and bull brownie recipes. I'm not really sure what they're doing with that, but I don't think that probably that was the best bang for their buck other than somebody in a position of authority said my wife likes this Pinterest thing, we should be on it, and that's what happened. I don't know. But the good thing about the social media, and people don't think about it, I always say to people social media drives traffic to your website, but you can also use your website to drive traffic to your social media. They feed each other. It is a back and forth. Neither is a replacement for the other. So for example website that I help out is a little community theater known as studio players. We probably take about 30 some odd shots of every single show we do. Do you know how long it would take me to optimize and upload 30 shots to a WordPress website? We use three good hero images and then we upload the rest to Facebook and we embed the Facebook gallery in the post that talks about the show. People then click through the 30 photos that took me about three minutes to upload. They like my Facebook page if they haven't been there before. There's lots of great mileage. And then of course on my Facebook page if they found me that way we have links over to our website that leads that way. But so much easier to do that. That's our Christmas Carol what was it called? A susified Christmas Carol. So there you have Ebenezer Scrooge and his susat which was the great image that drew people in and then there were 20 other images that they could look at to find out if they wanted to see this show. Here's another really good one video coming off a YouTube channel it could be your own YouTube it could be a different video source what have you people love to watch video put it into content right on it everybody has an embed code it is super easy to get it onto your website I can show you how to do that later or other folks out there at the happiness bar I always say if an image paints a thousand words a video paints 10k people will stay on your site to look at a video however under three minutes nobody wants to watch for more than three minutes they really don't so keep it short Twitter is great for a number of things I like them for what I call list articles thanks to David Letterman everybody loves the top 10 list that's a great way just to like to count down things and to put in images and social media embedding is the best way to do that you can do fan reactions boosting of your own credibility or fast news so for an example here's one that was talking about the recent world cup and somebody who was recapping was talking about Argentina's upset sorry Croatia's upset over Argentina and they got a picture of soccer legend Diego Maradona reacting to what Argentina was doing on the field which wasn't good and it was perfect it was the Maradona face palm I mean it was just great to kind of spice that up with your content people loved looking at it so there's a great fan reaction boosting your writing here's one boosting your own credibility if you say something on Twitter and then somebody comments on it you can embed that tweet it shows how you have some source of credibility coming back in what you're saying or agreeing with somebody the other way another way to do things fast news one of the sites that I write for is an entertainment website if somebody passes away we very quickly write up an article about that person's career which probably came from Wikipedia or the IMDb I will tell you that that's our first two paragraphs and then after that our go to is we go to Twitter and we start looking for celebrities that worked with them and what their reaction is and we literally write like two sentences come up with two celebrities who worked with them two more sentences two more celebrities that work with them and that's how we get an article out in about 15 minutes so it's a great way if you have fast breaking news to do two fast paragraphs on what happened and then get reactions to it it's super super quick and easy and it visual gets people on your website next one is tips for wordsmiths design is also how your words are presented so here are a couple of things that have had their day marquees those are those little things that go across your website that go it's like snowstorm today school is go it's like just tell me if you're open or closed so marquees we're done with marquees hit counters nothing says my website was created in 1997 like seeing a hit counter at the bottom of it okay get rid of the hit counters dated animated gifts those are when you have a cartoon and I still can see a website that I created a couple years ago that has it on it is the republican elephant and the democratic donkey and the little donkey kicks up its hind legs and the elephant does its little trunk it looks so awful if you want an gifs now are all videos they're all video gifs use a video gif don't use the old fashion little animated gifs it's like claymation it's like gumby is on your website for those of you who know who gumby is you know what I mean sorry everybody under 30 is lost everybody over 40 is with me dark content containers they've had their day we don't do them anymore they're hell on earth with accessibility trying to read what's going on dark content containers no white content container very light color dark content container with dark print is the way to go rainbow colors judiciously highlighting something in one color is great we don't need rainbows you know a color that is in your palette is fine we don't want rainbows also overuse of stylizations if you go with more than seven words in italics I've had enough keep it short it's too rough on the eyes same thing with bold bold isn't effective if everything is bolded here are some really great slick cool things you can do to replace all of that beautifully stylized h tags the h1 the h2 the h3 that will show your content and reflect it the first one is I screen capped from word camp Philadelphia the one below that came out of word camp us three years ago another cool thing that I really like the different websites do is what's called a drop case you can see the big letter b that kind of comes down stylized that's a really cool little thing you can do different plugins some themes have it people don't even know it's sitting in their theme and it's right there thank you block quote block quotes and lists with flair take a look at your block quote does and a little CSS can make it look really cool and it just has some nice color pops within your palette look stylized even just making a list like change the bullet points to blue paint it to your color theme make it look a little more interesting you know change it to a diamond change it to something else it just it makes things look cool and there we have it so that's my two cents on what will you know perk up your website like I said there's no one size fits all those are just a variety of things that you can do and things that you want to talk people out of doing sometimes you have to listen you have to listen to a board member who's saying but I like these things if it helps you at all to say I heard this woman speak at word press at word camp and she said you shouldn't do those things I would be happy to talk to your boss I understand that sometimes you have a vested interest in like you've been saying something for five years and then somebody else says the same thing and your boss says you know what we should be doing this new thing and you smile and go happy to help anywhere I can so we have a little time for questions anybody have any questions I was just saying person right over there and then I'll come over to you the problem is is I have found that that has failed on more than one occasion so I I you know in theory you should be able to accept that sometimes I find they are mislabeled so I don't I don't like to reuse them I like using like I said I use this like I did a couple sources where you're definitely safe I would tend to go there instead of that because I have seen kind of failure with it another good source if you like is flicker just read carefully because some people will put up an image on flicker and they'll say you can reuse other people are like no it's it's copyright to me please get in touch so you gotta read carefully on that it depends you start to get into what you call fair use so it starts to you know your own if it's yours yes you're fine if it is yours you are fine but other people's you you start to get into a scenario of fair use are you reporting on the news and commenting there there's a that's a whole deep dive in another conversation you could go down it's probably a little more of advanced question but I would be happy to talk to you about that afterwards it that's that's like a very situational thing so I'll get to you in a second step but let me just get to the lady over here I just wanted to talk about about canva that I found out that they do have a four page we can talk about the colors if you're a non-profit they offer it for free oh I did not know that so just so you know I was able to get the upgrade they'll let you do the magic resize and take one thing and boy I wish I knew about that about nine months ago that would have saved me a lot of money but that's fantastic they also have an awesome color picker too so if you're trying to figure out what colors are in my my palette and you're not real good at that they have an awesome color picker that I really like