 All right, good morning and welcome to this week's edition of Encompass Live. I am your host, Krista Porter, here at the Nebraska Library Commission. Encompass Live is the commission's weekly webinar series, where we cover a variety of topics that may be of interest to libraries. We broadcast the show live at 10 a.m. central time every Wednesday morning. But if you're unable to join us on Wednesdays, that's fine. We do record the show and then post the recording to our website so you can watch it at your convenience. And I'll show you at the end of today's show, let's get rid of this here, where you will be able to go to watch the recordings. Both of the live show and our archive recordings are free and open to anyone to watch. So please do share with your friends, family, neighbors, colleagues, anyone you think may be interested in any of the topics we have on Encompass Live. For those of you not in Nebraska, the Nebraska Library Commission is the state agency for libraries in Nebraska, and that's officially for all libraries, all types. So we will have things on our show that are for public libraries, K-12, universities, museums, correction facilities, archives, anything and everything. Our only real criteria is that it's something about libraries, something libraries are doing, something we think they could be doing, services and products. We think that may be of interest to them, other libraries showing off what they're doing at their libraries in their institutions. We do bring in guest speakers sometimes from around the country to talk about what's going on in their libraries, but we also have Nebraska Library Commission staff that do presentations as well, sometimes about things that we specifically are offering through the Library Commission, services, programs, products with that. Then today, that's what we sort of have with me here today is Amanda Sweet. Good morning, Amanda. And she is our technology innovation librarian here at the Nebraska Library Commission, and she has a new monthly series. This is the third one, the second one. I can't remember that. I want to say three. Yeah. We're doing, she's going to be monthly on Encompass Live. Pretty sweet tech, yes, which is actually taken from a blog post she's been doing for a little over a year or so, a series with a branded as pretty sweet tech. So once a month, you always find Amanda with us talking about something definitely techy related more or so than the other things. And so the topics will range for anything about anything, but definitely at tech. And today, we're talking about your websites. This is how you can have good websites. And we've got a document here that will be available afterwards. We'll include a link to this document she has here in her Google. There aren't any slides for today's show. It's just a document and we're going to actually look at some websites. She told me before. So I will just hand it over to you, Amanda, to go ahead and tell us how we can have the best website on the Internet. No pressure. Full claim. Full claim. A good website, a useful website. So we're going to veer away from the traditional PowerPoint thing today, because if we want to learn about clean website design and what a good website is, we're going to look at websites. Sure. And then we're also going to take a closer look at some different website resources that you can refer to as you're planning and putting together a website or revamping one. And so basically my background with websites is I work with the Nebraska Libraries on the Web, and that is a project that goes to the Nebraska Library Commission. And we host and help maintain over a hundred different library websites. I think we're up to about, don't quote me on this, but a little under 120. Yeah, sounds right. Yeah. And so if you are in Nebraska Library and you want a new website to score updating something from what you've had previously, Amanda is the person to talk to here in Nebraska. And if you and if you're outside in Nebraska, I can also kind of answer a few questions about how our system works. If you want to try to do it in your state, too. I have had a few questions about that. Yeah, I guess I know there are other states that do have similar programs where they will in some way host and help libraries actually have the websites. Yeah. And the best way that I found to help people with their website is to actually walk them through the different elements of the website and kind of the main things that you should put on to it and some current up to date clean formats that people are using. So what we're going to do today is I'm just going to scroll down through this document to give you a preview here. So we're going to go over what exactly clean website design is and the place to go for color schemes. And unfortunately, we're going to have to look at a few bad websites to find out what you shouldn't do. That's how you'll learn. And then we'll go over some different menu structure, which is that little navigation menu across the top of the page, which is how people find everything on your site. And some common information that library patrons have been known to look for. And that's based on previous survey data and what other people that are involved in the Brassica Library Commission project have done and what's worked for them. And then we'll go over everybody's favorite topic, accessibility. I used to work for the Talking Book and Braille Department. So I work with screen readers and blind visually impaired. So it's a lot about making sure your website is accessible to everyone and not just the sighted. Or you can also magnify text for older patrons as well, or people with less vision. So why do we actually want to ramp up how our website looks? And that's actually mostly because we are competing with a lot of different websites. There are one billion, seven hundred and seven thousand, two hundred and fifty nine thousand, five hundred and thirty forty websites right now. And the increasing as you watch. Yeah. And this is just going to grow. So you can tell yourself all you want that people are just going to go to the library website because it's the library. That's not quite true anymore. Yes. People are going to be comparing your website to shops like Amazon or Etsy or half price books or Barnes and Noble. And libraries have been struggling with getting patrons to know what we actually do for a very long time. And that's actually one of the main things that you want to put on your library website. What does our library do? Why do we do it? What's our story and why should you care? And that is the primary thing that other websites are doing right now. So, for example, we have Etsy. Your first question is probably what is Etsy? Look at their website's homepage and tell me what is Etsy? It is handcrafted vintage or unique. Yeah. And that's right out there. Yeah. That's what you want your library website to do. If you are more than books, tell them that. If you are providing services beyond just circulation counter, tell them that. If you are going beyond reference, if you have a maker space, if you have, if it exists in your library, it should exist on your website. Otherwise, people won't know to walk through the door. And in a lot of cases, your library website is the first and might be the only thing that people in your community see about your library. And when I moved here from Milwaukee to Lincoln over here, the first thing I did was look at Bennett Martin Library's website to see what I wanted to do. Lincoln City Library, yep, our Lincoln Library, yep. And that's how I knew where to go into the library. It's how I knew what I wanted to do. It's how I knew why to walk through the door. And if your library is kind of lacking in that department, might be time to add just a few things on there. But it's not too late. So it's all well and good if I tell you what exactly to put on your website. But it also helps as I've been training people and as I've been showing people how to build a website, I found out that people actually want to have an image in their head of what a website will look like and how to actually start placing all of this stuff and start to get an idea of what a website is. You want something to, if you don't know, you need something to borrow. For I was not copying inspiration, that's better. Like like a Pinterest inspiration board or whatever. Yeah. So the first thing that librarians have generally done when we do a training session is they call me up and say, I had no idea what I was doing. So I searched, I did a quick Google search for a clean website design or for a website design inspiration. And I was like, cool, good start, good thinking. Yeah. And then they'd say, OK, I found about 50 different website designs. What actually works for a library? So that's what we're going to do now. I basically all I did was Google Clean Website Design and that's the first step. Now we're going to go through these and we'll pick a few examples. Sorry, my mouse is jumping around here. And as you look as we sift through these, you're going to find that they fall into some major categories. This is a big one about where you put your menu. So in this one, a lot of the navigation and what's on here is down at the bottom. A problem that we found with that is screen size. If people are looking at a tablet or a phone and their screen shrinks stuff down and then it shifts out layout, they may never see your menu. Yeah, it does not come through. No. And then across the top here, you see a really faint menu here that's against a really bright color. Some people can see that really well. Some people can. It doesn't jump out at you as much. It was a darker text, though. Yeah, against the bright background, the light background. Yeah, and that's kind of your first litmus test. If you can see a layout and you can read everything really clearly, it's blocked off into clear and distinct sections. You can understand if it if the site uses icons, you know on site what that icon means. And you know that your patrons looking at that site will know exactly what that icon means, whether it's labeled or not. A really good example is that little magnifying glass for a search engine. Pretty much everybody knows this. I always look for that. Where is the search? But what I found out, not everyone knows what a hamburger menu is. And a hamburger menu are the three little lines. Yeah. So I know that's become very common on websites. And more often, actually. And I think it's because of the size when I'm on my phone or on something smaller tablet, because this kind of big layout of being perfect and a big screen doesn't all fit nicely. So you have a different design when you're on a smaller one and you've got those three lines. And that's the other thing that we want to look for is responsive layout. So this would be about what you'd see on a mobile screen. This would be about what you'd see on a tablet. And you can see the images shifting and changing. And those are the breakpoints in the website that show it tells the system when to adjust your layout so that the user can see it more clearly. And you can see that one key phrase of theirs stays visible as small as you made that they made it. They made the websites with that one, their motto, whatever is always will be there, even if everything else has to move around and be adjusted. Yeah. And that is one of the key things that you want to find when you're choosing any pre-made layout or making your own layout or anything, which is how this changes when people are looking and see as you got as it got smaller about halfway that hamburger that menu thing that you're talking about appeared. It wasn't there before right next to the Etsy logo. Those three lines, that's more their menu. But if you notice when it got bigger, that disappeared because the other menu items were able to be seen. And that's a JavaScript function. So it will automatically change your navigation menu and it uses JavaScript to shift it over into an icon. So that but now people don't always necessarily know to click on it. Yeah, I've noticed that that it's it's not it's become more common, but it's still not known. Yeah. Yes, we are. And that's why the theory is that people could just call the library and find out. But if people have to call the library to find out people are lazy, usually. I like to look for stuff myself. Yeah, I'm I'm you know, if I can find it, I'll just look it up. But yeah, yeah, that's why a lot of those information packed websites, which a lot of libraries are, there's usually a pretty good search option in here. And then the other hurdle is what are you calling things and do patrons know to call it that library jargon is always a problem. Yeah. So now we have these generic examples, and now we reviewed how you can change your screen size to make sure that it passes the responsive layout test to make sure that people using mobile devices and tablets and desktops would all be able to see your content and that it's actually accessible when you change it to different sizes. And what's great is because I know some people I'm sure I know I've heard of some libraries that they are specifically separate from their website, getting a purchasing or having to design a separate app for the phone. But you don't really have it. It can be expensive and it's a whole other thing to maintain and figure out, but you don't have to. If you just make this make this decision that whatever you're using and what your JavaScript does will automatically readjust it for different sizes and different devices. And a lot of responsive layouts will have about three different breakpoints. So when you're kind of looking into the nitty gritty of it, I'd probably glance at that when you're going through it or even just test it on your own devices. Oh, yeah. And across different browsers, too. Yes, that is something we've been told here at the Commission, too, because we serve, I guess, at so many different libraries and organizations and everybody's going to do something different. We have kind of a standard if you create something new, make sure you test it on Firefox and Chrome and IE and Edge. Safari, still too. Yep, Safari. Everything we can get our hands on to just make sure everything is working. Viewing websites, generally, it's OK. It's not as difficult. Things may look a little different, but everything will be there. Web forms. We do a lot of submitting things via web forms. And we have to make sure that every browser will use them correctly and send us the information correctly. That is something that can sometimes... So if you're accepting these sort of like reservations or applications for things or signing up for events or something, that's something to make sure that it works. The actual transmission of all that information to you works in every web browser that someone might look at and use. And animations and load times are another thing in a lot of different areas of a lot of different states. There is lower internet connectivity. So if you have a whole lot of images or if you have a lot of animations, it can take a little longer for that to load and people are not always willing to wait around for that. And another thing is this style of layout is really popular right now, the full screen image. But what I found is that some libraries are having troubles getting a good enough clarity image to be able to put it up on the site. And because it needs to be decently large and it also you don't want to distort it so that it looks like you have a really skinny or really fat person on the or that thing on the front of the page. And you also aren't able to feature as much content as you might be able to with other layouts. This is great for product design. And this is actually what it's used for now. Boxwater is better. You know exactly what they want. They're pointing you directly into there into that direction. It's similar to what you want to do for a library website, but you're also featuring other different resources, current events, hours and location. And that's something you can't do as easily with this whole page layout. And that's why we've had a few libraries that tried it and veered away from it. And this is actually an example of how a blog homepage could actually look. So these would be little images that represent each different blog listing. And the blog homepage is a really good example of how a lot of WordPress pages works work. They are a lot of them are defaulted to use a blog as your default homepage. And then it has the static sidebar on the side. And that static sidebar is a really good way to put your hours and location because that's one of the primary things. And people actually go on your library website to find. If people can't find your library, they won't usually dig around to try to find the information and go visit. And this, again, is that full scale image and uses the same. If your library has a logo, cool. Otherwise, you can also just put your library name up here and. Product page. There is one specific one that I'm looking for here. So I'm just going to scroll here. So this is actually a decent layout, too. And this is actually from Mailchimp. Some of you may have seen this already. But this actually is an easier navigation cut out for people to be able to. See easily. And it also uses the responsive layout. So you can just kind of find what you actually like. And then mimic it, it's the best way to learn. So moving right along, because we have a lot of ground to cover and I spent a little too long on that. That's OK. So we found a lot of different styles of websites that we might want to use. And personally, I would actually recommend using the static side, like a sidebar that has the option to disappear when you have more content that you need to feature on a page. And using a top navigation menu that has clear and easily read text. And what I mean by clear and easily read text will go to this color contrast checker. So this is a tool that I use a lot. Make the website, the one on the browser full screen. Yeah. There is OK, so let's see everything there. So this will actually let you put in a specific color. This is a hex color here, and this is just six digits that represent an actual color. And then down here. It'll show this front color. As opposed to a background color. And you can see it looks below. Yeah. Yeah. And it'll also tell you whether you pass or fail the contrast test based on. Oh, nice. Web recommendation. And this is a really good way of knowing whether people can actually read your site. And then when you're trying to find actual colors to test out on here, there are a ton of website color schemes. Popular one is Canva is a graphic design website. And they basically chose a whole ton of different common color schemes, and they also put the hex code over here. So you can actually grab this hex code, pop it into the color contrast and find out if that combination actually works for you. And this is a great way to find out what graphic artists and what common websites are actually doing right now. And oh, this is a new one. And I'm going to inspire you ready. You just miss that thing at the top there, too. Yeah. Yeah. That's good to know, too. I know lots of websites, not lots. Sometimes I've got a websites where they pick colors that really clash, even. I mean, that was showing, well, they can't read the text very well because it's too close, but things that are just like glaring to your eyes, like red text on a blue background or something like that. Bright red. And it's just hard to read, hard on the eyes. Definitely recommend testing out and using that. If you have a particular color, like if your library does have a logo and certain required colors that are in your, you know, like in Nebraska, we use Husker Red, the, you know, UNL, the University of Nebraska has to use red on certain things, of course, to figure out how to use that nicely and that sort of looks good. You may have colors that you may have someone design something for your library or that is, you know, for your town or something and start with that, but then see what can look good with it. And there's also W3Schools has a color picker so that you can put in that hex color and then it'll pop out the triadic and complementary colors so that they'll actually give you a better idea with other hex color codes that you can test out there, too. And if you just Google W3Schools color picker, believe it, it's called. It'll just pop up. I know I'm not a graphic designer. So I always wonder, does this look good together? I don't know. I think it's OK. Yeah. And that's why I just use these tools because I'm like, it's way easier than trying to test out 40 different shades of blue that to just grab some, you know, works. So now, why do we actually want to do this? Was it actually called that? Yes, it is. I just Google W3Schools as one kind of swooshed in thing. W3WWW web color picker. And, yeah, it is what it's called. Yeah, score. And so now, why do we actually want to do this? I'm just going to go over a couple of these to show you how font can go wrong. Oh, why? This is an example of why we really, really need to check that contrast and why we want to choose colors that are complementary to one another because no one wants to look at this for very long. That's very bright. Yeah. And this is. Oh, no, too much. And this is actually more contrast against here. And they used almost neon colors, which is I've seen it done well. But for people that are just starting out, I think if you scroll up just to touch it, talked about this is 90s website. Yes, that does look very retro. It was like when before we had a lot of resources and how to make our web websites look prettier. This is what we were what was available to us to make things stand out, to make things, you know, highlighted or, you know, yeah, it is highlighted. It's what we had to work with at the time. But you've got better things available now. This is probably why the color picker exists. And so I'm going to go down here. This is actually what Amazon used to look like. Oh, wow. It's changed a lot. So, like I said, it's what was available at the time. Yeah. So and they I mean, Amazon has changed a lot and web design has changed a lot. So if you've taken a web design class like 10, 20 years ago, cool, like it's a really great start. And it's also things have shifted and scuttled around quite a bit. And this used to be Apple. Yeah. So it's also another reminder that no matter where you start to start and it'll. You basically have to test around and try around with a lot of things and screw a lot of stuff up before you start to get better. That's pretty much the basis of web design. And nothing's in stone. You can always change it. Yeah. I mean, you can put something out there. And then as thing too, are you going to talk about usability testing? Yeah. Yeah. OK. Yes. That's important. Very important. Always do that. Yeah. Actually, we can do that user friendly design. So. My link is did I not grab you X? I could have. Oh, here it is. Oh, yeah. It is. So this is a great guide to testing user experience on your website, which is basically you designed this awesome thing. And now how are people actually using it? And basically a lot of there's a lot more tools out now to find out what people actually clicked on, how long they stayed on that site. If they actually because if you track just clicks and find out that someone clicked on something, they might have accidentally clicked on it and clicked right off. Right. Happens a lot. I mean, I do it every like every day. And but if people go, click on something and stay on it for about four minutes, you know, that they actually probably interacted and found what they were looking for, found something they wanted to read more about. And yeah. Yeah. And you can also learn a lot more about cookies, too. So cookies are basically different ways that the owners of websites can track what the user is doing. And people use cookies in different ways that some are a little more invasive than others. But I mean, it's kind of just it's part of the course, really. It's how you can build a better product. The cookies that have actually been billified are third party cookies. And those cookies are the ones that get sold to marketers and data brokers. And those are the ones that make those ads like chase you across the web everywhere you go. But a lot of library websites don't use that. No, I mean, it's not really something we need. Yeah, funded differently. And it's just like ads are not the hugest part of the library web world. Luckily. And, oh, lo and behold. And this is also an example of an animation that is not over the top, but it's still eye catching. Because if you go up to the top, the second you start scrolling down to the main listing here, you know, right? I'm saying, hey, here's something special. Yeah. And that is an animation that's subtle, but it's still eye catching and draws your focus downward. And when you draw the focus downward, you encourage people to continue scrolling even further down and actually interact with your content. And that's what I mean by. Animations that are not overbearing, but still functional. And again, this is something that can just be played around with a little bit, too, because a lot of this also takes time to set up. It takes it can take time and resources. So the other thing is what you've got. If you only have an hour or two here or there to maintain a library website, what you've got. And it's better to have a website that has functional content and has a blog posting that's updated and refreshed than to not have one at all. Yes. So this user design or user experience that you said there's places on you can put your website into your habit check for you or to figure out what people are using. How does that so? Because I know sometimes usability testing has been getting the focus group of people together and like people who are not you because you you're so ingrained into what's in the website, you know where everything is. You want to bring in someone who's never been seeing it before, maybe who has never tried to go to the library website or has gone to it before and now he's to look for what they want and have them try and just watch and see what they do. And focus groups are ridiculously hard to put together. Exactly. Yes. That's the problem. Because it's hard to get feedback from non-library users because they don't care. They're not coming already. Yeah. And a lot of likely you'd actually have to go where non-library users are and market yourself where they where you already aren't. There's a better way to phrase that. Yeah. Here I go where they are and where you're not. Yeah. Like if you were to go out to a local fairground or if you go out to school events or go out to farmers market, if you have a table at your farmers market, yeah, anywhere where you can have a table set, you can say, hey, here, try out our website, local coffee shops are a good way to go and try to reach people outside the library walls because if they haven't been in the library for a while, they don't know what you do, they need you and what new stuff you have to offer. And yeah, the problem I've known too many people who have designed a website or put together a website for their library or their institution or university. And just they knew what was best because they knew what we want people to look at and we know how we wanted to look and never did any usability testing with actual people trying to use it. Yeah. And then took their input before making it a permanent thing or sometimes you can have if you have the capabilities, a test site, like you're making all these changes and updates on a second installation of your site. That's not the main ones out there publicly and have people look at that and give you feedback on it. I think it's so important to get someone from outside of your institution to look at it and not necessarily just non-users, but library users that are not you working at the library creating the website. Which are way easier. Yes. So some of your some of your super users are people who come into the library, say, hey, we're thinking of redesigning the site and we'd like you to just take a look at it, you know, play around with it and see, you know, what do you like? What do you don't like? What can you find? What can't you find? And, you know, use their input before you finalize what you're going with. Yeah. So too many times I've, you know, seen libraries read their sites and I chat with them. I said, so how do you usability testing go? And I get a blank look of, what? No, it may look like what we know they need. No, no, no. That's great, sir. You've got to have someone really use it to really decide if it's, if you didn't. And if you use a test site, use neutral gray colors in your color scheme. So people focus on content instead of color. Otherwise you're going to start off that way. Yeah. Otherwise you're going to get 20 comments about. I don't like that blue. Yeah. Why is it green? You know, it's not what you're trying to get, find out from them. Yeah. And you want people to zero in on content and layout and not on that shade of purple. Right. That'll come late. Yeah. And so let's see here. What is my time? 10, 41? Yep. Cool. So now what do we actually need on our website? We have a general idea of what the website actually is. And we know that, oh, let's see here, here. Since I'm not sure exactly what kind of background you have with website design, we're actually just going to do a quick little overview of the different segments of a website. So this is our navigation menu across the top here. This would be, it's how people interact with your website. It goes through all the different pages of your website content. And the page would be when you click on this, it'll open up a new screen that actually contains the corresponding information. And then on a lot of websites, I'm going to find one here that has a sidebar. Seriously, does no one have a sidebar anymore? So since I don't actually have a full example, yeah, pretty well. That should be the one on there. So the sidebar here, and in WordPress, you'll probably see this listed as widgets. And widgets work a little differently than a sidebar. This is actually a sidebar navigation menu, which is different than a regular sidebar. This is one example of a navigation menu across the top here, but this is another version of a navigation menu. A sidebar is just like little blocks of content. Like this? Yeah. OK, so we can just Google Big Talk. We can go to, oh here, I'll go to my default Nebraska libraries on the website. Oh, there you go. Yeah. So the sidebar here is, and my default actually uses the hours and contact info, and then jumps down into the events. Because those are the two most common things that library users have been surveying to be looking for. And oh, that reminds me on user experience, look at pure research surveys, because they've done a lot of research about interaction websites. Oh, yes. The Pew Institute, yeah, they do all sorts of series, but they have lots of great ones about where they've specifically interviewed library related. Yeah, yeah. And they also did some research into the order of your top navigation menu. Oh, which order it should be, that's right, oh wow. So on the top here, there's an order that people are used to finding things. So the home icon or the home link is usually on the left. Contact is usually clear off to the right. Fewer people actually look at the links that are in the dead center of the menu than they do in this top third or the bottom third. So that's why if you have a library catalog, people usually put it on the outside, because that is one of the top three things that people go onto the library to hop into. And they just want to go in, click an icon, click a link, get into their account, search for whatever they need, put their hold on, and get out. And another one is drop down menus. People don't always know that a drop down menu exists if you don't tell them. So when you're looking for, when you're formatting a layout, make sure there's like a little carrot or something that says, hey, there's more here. Yeah. And even then, some people don't know, but we can just do the best we can. And so down here, this is where our main content is. And in this case, this is a sample listing of our main Nebraska resources that you can pop into a Nebraska website. And then down below is your footer. And this would be another place to put your library location, any different departments that your library may have, or any different featured collections or categories that you want to put up here. And you can also toss in contact information. And that's actually another usability testing survey that was done by Pew Research, showed that there are more people that are starting to scroll clear down to the footer just to find that contact information, which is interesting. I do that a lot when I'm looking for hours or a dress. I've learned that sometimes they've got to bar across the bottom, which depending on how big your site is, can be very frustrating for me to scroll down. I prefer it as a separate thing right there at the top. Or if you like to have it at the bottom, that top thing pops you down to the bottom automatically, so you don't have to scroll, scroll, scroll past things. But it is a good thing to include in there just because people look for it. Yeah. And you can have stuff in more than one location too. You don't have to just have something in one place. Like you can have the contact link up there that goes to a page with email or a web form and have stuff at the bottom as well. There's also here's our hours in our address as well as being on the side. And that's why when you're looking for a WordPress theme, should you choose to be using WordPress or Drupal, you'd actually want to find a heavily customizable system so that in this footer down here, you're able to add multiple columns and sections. And if your layout that you're looking at is not able to do that, you might want to look at a different one. You want to have as much flexibility and personalization to what your library needs as possible. Yeah. And the social media links is another huge thing to look at. If you want to be able to direct people to your libraries, Pinterest or Facebook or anything like that, it's easier to have built in pre-supported icons that shoot people directly over to your social media or allow you to embed social media likes and icons into your main site rather than try to have to manually add them because it's a hassle to maintain. And Facebook also changes their policy forever, always. Daily. That's extreme. Yeah, and a lot of these products, things like WordPress, they have somewhere in there built in a, do you want to add a link? Just use this little widget. Click here. Put in whatever your library's, Facebook or Pinterest or whatever is. And Poof will make it be part of your website for you. It's not even something you have to really look very far to find what you can use. Like the WordPress plugin, it is one setting to change all of this. It's all located in the same place. You select your social media from a drop-down menu, put it copy and paste in the actual link, and save it. It's basically just inserting a link into a web page. And what's my time here? You could turn off this way. I sometimes run over, so I always like to check. All right. So now we kind of know people really like the hours and location information. And another really great thing to put onto your library website is clear and distinct different services that your library provides. So I would actually recommend a drop-down menu for this because people, I found like it was surveyed and found out that people don't like to read a massive list of different resources you have. They actually want to see it in separate smaller blocks of information. So people started using color blocking to distinctly layer out the different services that are available. Different shape between different things, yeah. Otherwise, people tend to go cross-eyed, and they see the top page things that you do, and then they're done. And another good way to do it is to have a top main menu that will just link out to more information about each different category. And having a color-coded card system across the top that people can just click on, and then it shoots you down using an anchor point down to the main content section. And then a way that it'll shoot you back up to the top so that you can keep cycling through the different resources. And that's also finding how people want to interact with your website is probably one of the most difficult things that you would actually want to try to do. And it's because finding out the natural flow that most users use in trying to interact with your website, and if they're trying to find a specific resource, or if they want to cycle through every resource, is mind-boggling. Yeah, there's so many different. Yeah, that's the thing. There's no one way that they're going to all use your sites. You're going to have to have options. Yeah. And if you find out that more of your users are accessing your website from a mobile device, that's also another. People interact differently with mobile devices than they do with desktops just because you have to scroll through more information, and it makes the user work harder to find the content. So you need to have a cleaner layout that scrunches in as much content as you can with having enough white space so that people's eyes don't start crossing. Go mobile first design. Yeah. And the layout of the events calendar is one thing that I want to touch on. Everyone wants to have. They seem to want to have a full format calendar on their page because it's what everyone's used to. But when you try to scrunch that full format calendar down into a mobile design, you cannot read that. It is super hard. And if people can't read your calendar, they can't know what you're doing, and they can't go to your library. So they started using more of a list format. And the list format will basically just have a little heading that has the date, what the event title is, a mini description that's maybe a sentence long, and then date time location. All that should fit into a 3 by 5 screen or less. And then you should have a little bit of the next event being able to poke through so that people know to keep scrolling because you have more information. If you have that single event filling up your entire screen, people tend to stop there. They don't know that there's anything else. And a lot of them don't care. I found the one thing. Yeah, I'm done. Yeah, it's like, you know, I call close enough. And being able to get a full event listing that is categorized is also helpful. So people know this is for adults. This is for kids. This is for teens. This is what I need. And this is a quick way to access it. And your library blog is also a really big one. If your library blog never changes or is only updated maybe once a month, people don't look at it consistently. They have no reason to come back and check and see what new thing have they announced, what new program are they talking about? Yeah. And the library blog in a lot of ways is the library's version of the push notification. And because you can ask people to sign up for your blog so that they can get an email or a text whenever something new comes out. And then that is their constant reminder, hey, the library exists. And then they will start looking at your library in addition to all the other things that are being advertised to them. Because there's a lot of different things fighting for people's attention. And you want to be able to have a visually appealing way to draw people into the library instead of Barnes and Noble or a bookstore or the $20 billion other things that people could be doing. And also having a library presence in there are a few bookstores that will allow library presence. There are some bookstores that work at the library. I mean, if you can get library presence in the bookstore, cool. They're not our competition necessarily, no? And when you're trying to find out what to put on your library website, also look at the peer research that shows why adults and teens already go to the library and then find out survey results of what people in your area are looking for that you don't already have or that they don't know you have, which is actually probably more often the case. And then once you get a better idea of that, you'll know how to revamp your library website and get more people through the door. And also making sure that people know you revamped your website is another huge thing. Promote the fact that you, yeah, made these changes and updates, yeah. And if your library website has been static for several years, people don't have a reason to, they can't see what they don't know exists. I know there are many town and village libraries that the library's website is a page on the city or village web page website, which has all the different departments and everything. And sometimes it is just a static page with the basic information. Yes, we have a library here the hours. Maybe here's a list of the things somebody told us they have addressed. Not a lot of interactive anything. And it may be your requirement, you have to have that and that's fine, but see if you can get into doing something more dynamic that will get people using your resources, yeah. A lot of libraries are not going to have the time or resources to do perfect usability testing on every website and every aspect of their website. So if you can, yeah, I mean, that's cool. But if you can prioritize anything, do the blog posting, navigation menu, and find the top three things to put onto your sidebar. And if you can do that, then cool, you're in pretty good shape. When I get into the accessibility before we have to wrap up today, yeah. So if you have anyone with accessibility issues in your community, actually, this is pretty much good for every community because... You never know. Yeah. I actually used to work with Blind Visually Impaired and one of the biggest things, borrowing them from using library resources was not being able to access the catalog or website because for the Blind Visually Impaired and for anyone with lower vision, it's really hard to find what exists that can help them. And libraries have a lot of things that can help, like a lot, but you can't use what you don't know of this. So screen readers, one of the biggest things is using a proper hierarchy structure. So my hierarchy structure, I mean, this would be labeled as a heading. In code, this would probably say H1, and then it would be nested H1, H2, H3, H4. And then under here, it would be like a little p-tag that says, hey, I'm a paragraph. And actually this is a list. So it'll, well, it doesn't matter. But so screen readers access library websites by pulling up a list of the major headings on here. If you just choose a heading that is the size and look of what you want, screen readers are lost. They have no idea how to navigate your website. So you want this to be labeled H1, H2, H3, H4 in order so that screen readers will know the order that stuff physically appears on your page and the order of stuff that is most important for them to look at. And then the navigation menu will usually show up as a list of links on their site, on their screen reader. So you hit like the insert F7, it pulls up like a massive list of links that are available on your website. And a lot of times that will include your navigation menu. So if you have a the million drop down menu options, they will have a the million different links. So there are different tips and tricks to bypass that so that they see different things first. And this is why I pulled up this W3 schools and accessibility is actually one of the biggest things that people overlook because it's not the widest user group. And people say, we only have a 1% population that actually uses this, but they're also, they're also the population that might be able to use it most. And this accessibility is not just for screen readers too. Some people have color blindness issues. So there are some color schemes that if people see things only as a shade of gray, their eye will convert that color contrast and see it much differently. So there are also different color categories and different. That's where people don't like neon is because the neon against a screen magnifier like zoom text is like little blind you. Because in zoom text, we see that accessibility as like a little word in the middle of a screen, zoom text might only see access at one time. And they would see like a giant flash of neon green in their eye, it would hurt the eye and then they would navigate away from the website. And there's also screen readers and zoom text are actually my area of accessibility. There's other areas. So I would probably recommend looking at this too. Definitely add it to your list of things after you've gotten the website. When you're in the midst of doing it, keep this in mind, because you may say there's only a few people that need this but you don't know who's not your users who might come upon your page. I mean, if you look at like the stats from Talking Book and Braille. Yeah, more and more. Everywhere. And even as people age, they start using the magnifier just to access anything. And our population is aging, as you know, baby boomers are getting there now, 70s. Yeah. And so right now, a lot of people are putting up instructions for how to magnify the text but they're putting it up on their website. If people already can't read the website because they don't know to magnify the text, they won't know to look at your website to find out how to do that. There's things you can do right off the bat to make it easier. Yeah. It's basically what we're saying, yeah. And choosing a font size that is a little bit bigger already would probably help. And finding a in-responsive layout, a lot of times the font size will also change and shift as you change screen sizes. Yeah. So making sure that the overall font size doesn't shrink down too much so that people can't read it or access it. Actually that goes for me too, because like the number of times that I have to like... On the phone, yeah. Yeah. And if people have to... So frustrating. Yeah. And on a phone or like a tablet, if people have to zoom in and zoom out of your screen all the time to be able to interact with it, it gets dizzying and they just click away. They'll give up, yeah. Yeah. And again, we have so much web competition out there that it is the time to step up the library website game. Mm-hmm. And there's lots of resources that can help you do that. You know, that we have here, yeah. Wait, we're at about 11.04. Yep. So... Maybe you have any questions or comments or anything else you wanted to know about. Nobody typed in anything while we were talking. I should remind the people. But if you did, you know, you can ask. If you don't have anything you're thinking of right now, anything you're trying to do on your website, you can always reach out to Amanda here at the library commission. We're all listed on our website. Yeah. Yeah. Contact info and everything. And they said the recording will be available to you to watch later too. And the document, the Google Doc with all the links and everything. It won't be this exact one. This is my... This is basically my presentation overview. The actual handout is a little more detail. Okay, cool. All right, so we'll have something even better that we'll include with the recording afterwards. You have references that you can look at when you finally do get into updating or checking on your website and seeing how it's doing and what it might need. It basically frames the specific planes that you should actually look at as like a little litmus test for what you're looking for in an actual layout. And then it'll send you over a link that will remind you and refresh you of the different elements on a webpage. And that'll take you over to W3 schools, which will tell you this is an application, this is a sidebar, this is my content, this is my footer. Because even though I said it once here... It's okay. Yeah. Refresher and reminder when you get down into doing it. Yeah, absolutely. You sit down and do it, yeah. And it's just a little walkthrough, kind of a checklist to go through as you're putting together the website, planning it and planning out user testing. And... Aiding. And debating, adjusting it, so it has different levels of user experience testing, because not everyone has the time to do all that jazz. To do everything, but you can do some more quick things, at least to do something, get a quick overview, or a quick look at it. Yeah. Because if I tell people, oh, here's a list of 40 things you can do, they'll be like, why are you doing this to me? And I was like, here's the top five. Yeah, much better. And then look at the other ones when you have the time. Yeah. Yeah. Doesn't look like any of me had any questions right now while you're sitting here, that's fine. You get a lot of good information here. Anything else you wanna say? You wrapped up. All right. It's a little short of it. It is, yes. So that was awesome. Thank you so much, Amanda, for today's, this month's, pretty sweet tech. Talk to us about the website design. I'm gonna pop over to the library admissions page here. So, as I said, we will be on, we are recording, we'll be on the website by the end of the day today, as long as everything cooperates. Let's fill it correctly. If you use your, you can search on our library commission website, but if you're just elsewhere, if you search, use your search engine of choice to look up Encompass Live so far, we're the only thing called that on the internet. Nobody else can use this right now. So you'll find our webpage here. This is the main page from Encompass Live, where we have our upcoming shows, but the recordings will be right here in the link underneath. Archived Encompass Live shows. Today's show will be at the top of this list. It's the most recent ones at the top. So there'll be a link here that will have the link for today's show that we're recording, and then the link to the document that, I mean, it's gonna give me a link to later, will be added there as well for all your resources. While we're here, I'll show you this is all of our archives for Encompass Live. This is 2019, we're in our 11th year of Encompass Live for shows in January, 2009. And we do have all of our recorded shows here, everything going back to the beginning of the show. So you'll notice here, we have a search feature here at the top to search the entire archives, going all the way back to 2009, or just most recent 12 months if you want just current info. But everything does have a date on it. You can see here, date and year. So do pay attention when you are looking and watching things here. Like here's one October, 2017, when this one was done. There will be information in here that it's old or outdated or a linked up might not work anymore, a website might have changed, a service might not exist anymore, or has changed totally since we originally had the show. But we are librarians and this is what we do, we archive things and many things we do. And we'll always have all of our archives up there going all the way back to the beginning. So just pay attention when you are watching something of what the original broadcast date of the show was. So that will be for days. Everyone who attended today and everyone who registered for today's show will get an email from me before the end of the day today. As long as everything cooperates with letting you know when the recording is ready. So you'll be able to go there and re-watch it or share it with anybody else. You might think might want to watch it. Encompass Live is also on Facebook. We have a Facebook page. So if you're a big Facebook user, you can give us a like over there. And we do reminders. Here's the one for pretty sweet text today show. Reminders of when, no, I'm going to look in right now. Thank you. When the recording is available for a previous show. There's one from last week reminding people to log in to today's show. Anything new that we have going on. So if you do like to use Facebook, give us a like over there. We do a few posts a week on what's going on in the show. So I hope you join us for next week when our topic is research. The key to library design. Today we're talking about website design. Next week we're going to be talking about building, library building design. Yeah, so a nice little segway. Crete, Nebraska, their public library there in the midst of building a new one. And the director there, Joyce Stevens, and it'll be here with us. Crete is just West of Lincoln. So she'll be coming into town. Talk about how they went through designing the design process for their new building. This is just an artist rendering, of course, architects rendering because it's a work in progress at the moment. They are in the midst of construction. But she wants to share with everyone how they went through the design process of how to come up with a brand new building. So if you're looking to do that in your library and register for that for next week's show or any of our other shows we have coming up, we've got all our schedule up here for the next couple of months. So thank you everyone for attending. Thanks for being here with Amanda again. We'll see you next month and it's on there. Pretty sweet tech. The next show that Amanda will be with us is September 25th, topic to be announced. To be determined. So keep an eye on that when we know exactly when Amanda knows what she's gonna be doing. We'll have it added up there on the other session. I'm trying to pick some by the end of the week. Sure, there you go. That wraps it up for today's show. Thank you everybody for attending and hopefully we'll see you another time and then come to us live. Bye-bye.