Episode 508: Website Design for Total Newbies

Welcome back to Season Five of Linking Our Libraries!

We are the Central Minnesota Libraries Exchange. Our members are libraries of all sorts. This season we are working through some skills that people in any kind of library will need to be successful in their work.

In this episode we will talk about another  important part of good library service: website design. Your website, or your webpage on someone else’s site, is your online branch. The world has moved online, and every single library, no matter how large or small, needs to be there. It’s an important way to share information and your resources – so let’s work on making it pretty good!

The Basics:

We are going to start by saying that none of us are website experts. None of us code. None of us have certifications or training. And you know what? We still built our website ourselves!

It’s not perfect – in fact this summer we are doing a pretty big overhaul of it, so keep an eye on things changing. And when things break, we sometimes panic and go to Starbucks for emergency coffee infusions to make it all feel better. In fact, as we were putting together the information for this episode, some unexplained glitch hit our site and we working on resolving it.

But here we are. We have a site. It’s imperfect, but it’s fine. Problems will always happen, with any kind of program or service – and it is not the end of the world. The goal is just to keep building it and making it better.

You can do this too! And really – you need to do this.

Today we are talking to everyone who doesn’t have a website for your library. Or to the people whose website is one out of date, messy, very blah-looking page. We are talking to the people who may panic a little bit at the idea of putting together a website – but know that it’s possible.

We know that a lot of our members, and a lot of libraries in general, are pretty small and pretty under-funded. Especially for our people in school libraries, we know you may be the only one there – or maybe one of only a staff of two or three people. And you already have a ton of things to do each day.

No problem. You can build a website! It doesn’t matter whether you know how, whether computers scare you, or even if you have good typing skills! (Mary misspelled SIX WORDS typing that sentence. Then misspelled “misspelled.” It doesn’t even matter – it still turned out okay, as most tech issues eventually will.) There are very few completely insurmountable website problems -and very few things you can do to completely destroy everything.

We are going to walk you through the basics of setting up a website, and making it work for your community of users.

We aren’t going to be perfect. We aren’t going to look like high-priced professionals created the site.. But we are going to have websites we can use to provide good library service. And that’s all we need here!

Vocabulary

Let’s get some of the vocabulary down. When we started our odyssey of website design, we spent a lot of time on Google looking up words to figure out what everything single thing meant. Now that we’ve been doing this a while – we spend a lot of time on Google looking up words. That’s never going to change, and that’s fine. Google is going to be here for us, and it’s your tech friend. Check out our shownotes for this episode (just click the link on your app!), and we will give you a variety of  basic vocabulary and links for more information about it all.

Here are a few basic concepts we will define for you, gathered in one place, to be sure you are started on the right foot with your website.

  • Website: this is your library’s home online, it’s probably at least a couple of pages, and holds all your online material for your patrons
  • Domain name: this is your website’s online name – the words people will type into their browser to get to your online home/website
  • Website host: this is the company (possibly your own parent organization – a city, a university; but usually someone else) that will rent you web space for your website; we talk about our host in this episode – it’s Bluehost. (There are lots of hosts out there, so browse around for someone with good reviews!)
  • Website builder: this is how you build your website – and you will probably use WordPress (our vendor), SquareSpace, or some similar company, to get their templates
  • HTML: Hyper-Text Markup Language: these are the commands (or language) you could use to make edits to your website; everything you see on your site is how the HTML is showing up online – usually you will not use a lot of it it, because we will use drag-and-drop design templates
    • Right click on a website – any site. Click on “view page source.” You will see the HTML code. Scan through it to get some ideas about what’s going on with that page. Then click a few more pages. You will start to see some patterns you recognize!
  • Usability : there is a lot of information about this, but the basic idea is that your website needs to be easy for someone to use; we have some tips in this episode
  • Adaptive design: your site will adjust to look good on a phone, a tablet, or a desktop. Have you noticed websites you see on your phone sometimes start with the letter m? That means the site is adapting to your mobile device. Thank the designer for this, because it’s so very annoying when this isn’t present!
  • RSS: this lets your site be easily shared
  • SSL/TLS: Transport Layer Security : security for your site and for your users. (See that https:// at the start of some websites? You want that.)
  • WYSIWYG: What You See Is What You Get – this means you can see what is happening on your page as you put it together. (It’s an older term now, but it’s fun to say!)
    • Back in the olden days this was Microsoft Front Page

Okay, we have vocabulary and confidence. Let’s start working on some website building!

Before you do anything else: if you have a parent organization with a website (your school, college, hospital, foundation, or whoever), talk to them. You should be able to get a page (or a few pages!) on their website, if you aren’t there yet. That may be enough for you – but you will almost certainly need more than one page, so also talk about getting your own site set up. That can always link back to a parent’s site, if you do have just the one page there.

You want to check on this before you start anything, because there may be rules they need you to follow for addresses, formatting, or other issues. It may not be a big problem to set up your webpage, and have to take it all down again – but let’s avoid problems whenever we can.

We are going to proceed as if you are planning your very own site – not a page on someone else’s site.

Quick note: we are going to give you some product names, generally things we use. We aren’t necessarily recommending them to you, they don’t advertise with us, and we will get no kickback whether you use them or not. These products will strictly be mentioned as examples, so you have something specific to look at as we talk, and to give you a starting point.

First Step:

The first thing you want to decide is: where is this site going to live? Yes, “on the internet” is a correct answer, but you need to have a home with an address.  Use your tech friend, Google, to poke around for website hosts – there are tons of them. We use Bluehost, and it’s generally been fine. Look at reviews for a host before you get into any big financial transactions with them. (Mary once set up a site on HostGator, and it got shockingly expensive really fast.)

Before you pay them money, you will need to come up with a URL that nobody else in the entire planet already has, and hopefully one that doesn’t sound too close to something horrible. (Avoid sounding like the local white supremacist website, for example.) There will be a place on your future host’s website to try out different variations of your proposed web address. A few basics on this:

  • Keep it short
  • Use your organization’s name
  • Think about your extension: .com, .org, or .edu are very common, but there are a lot of new extensions you can use. Our favorite site using a good extension is Kitten.Academy – no www at the beginning, no .com at the end. (Check it out for 24/7 streaming of their foster kittens! Their slogan: Where kittens learn to cat!)

Okay, now you have a great name! Your preferred URL is available. You are ready to lay down some money! Yay! Go ahead and buy that URL and sign up for the hosting for the next few years. Most sites will sell it to you for at least two or three years; and buying access now will save you problems later. Stick that renewal date on your calendar, so you don’t forget to pay that bill. Once you have a site, you don’t want to lose it; if you forget to pay for the next round of ownership, you could come to your LovelyElementarySchoolLibary.edu to find that it’s now a very specialized fetish porn site. That’s possibly also interesting, but will not speak to your usual audience.

Yay! You have a website address! Now you need to build a house on that site.

Second Step:

Here, you could go a couple of ways. One choice – that none of us will ever make – is to code it all by hand. If you have a good HTML and CSS coding background, possibly this is a great choice for you. For the 99% of the rest of us, you are going to go to WordPress or SquareSpace, or some other template website. We use WordPress here, and it works fine for us. We’ve heard good things about SquareSpace too. You aren’t going to go wrong with either.

Why do we suggest this? Because these sites have templates that look pretty. You can spend hours (or days!) browsing thru all the different templates – dreaming of your site’s final look. We’ll talk in a minute about some specifics you want to see in good website design – but for now, just look at the pretty pictures. Unless you do something tragic, your site will indeed look pretty much like the pictures – fantastic! Pick one, and apply that on your site. Don’t feel the need to be trendy – just a basic template is fine.

This is the really exciting part – suddenly your website looks kind of like a real website! There are words and blocks, and possibly an image or two. It’s terrible still, of course – there is nothing to see or do yet; but you are definitely on your way!

Third Step:

Add your content.

This step is both so thrilling – and so incredibly horrible.

It’s great to see your content come to life! All the things you think are important share are there! Your photos appear! It’s the inside of your brain come to life!

And then you have to keep adjusting things, adding other ideas, changing links. It gets tiresome very quickly, and you will long to be finished. It’s fun to dream about your site, it’s fun to have a finished site; it’s less fun to actually do the work to make that happen.

This is the stage of adding furniture to your house. You know it’s going to work out, but when you have that screaming argument over the carpet in the bedroom, and angrily choose the quartz countertop over the granite, it can all seem so hard to think about the good future that will happen here.

Some good planning before you start this will make your life so much easier. When we rebuilt our site, doing a massive overhaul of the entire thing, we started with index cards. We spread them out all over the floor, moving things around to see how the final product would look. Menus were created, items were moved from category to category.  Things were added and deleted. So when it was time to actually start typing things into site, we had a good sense of what it would look like when we were done.

It was still hard, took forever, and some things didn’t actually get finished. It happens – don’t worry about it!  Just keep moving, and be sure you get the most crucial points added. You can always make adjustments later, and you will. Get the bones of your site up and moving, and the rest is just details.

Look at some other websites during this process. See what works, and what looks horrible. You can browse libraries, but look at other kinds of websites. (It’s kind of sad to say – but most library websites are not great. Browse around to find websites you really like, and then take their information to add to your site.

Fourth Step:

You have some content, things are taking shape, and you are ready to do some editing. Think about design. How will someone look for information? You can’t put everything on the front page – make some decisions about the things your patrons will need.

Library researchers are very interested in usability. We want your website to look good AND to be easy for your community to use. Remember your purpose: this is the electronic branch of your library. How would you make a branch library appealing to people, so they will use it? We have a few tips:

  • Figure out what people are really interested in. The catalog! Hours! Address! You will need other information, but these things need to be there, and to be easy to find.
  • Nothing more than three clicks from the front page. You may have searched other websites that are just jammed with content. Avoid that. A user who does not know where anything lives in your website should never be more than three clicks away from something else. Don’t make it complicated.
  • Stay with one, maybe two fonts. Stay with one or two colors. Don’t have flashing things all over the place. You don’t want people to look at your site itself but to see the content. In every single decision you make, be consistent and as simple as possible.
  • Don’t clutter the site. Less complicated is always the way to go.
    • If you are old enough to remember the early days of the Web, you may remember what Yahoo used to look like. It was a directory site. They hired people, including librarians, to hand-curate websites into dozens of categories all over the front page. If you wanted to look at school libraries, you found the topic Education, then clicked on Libraries, then clicked on School libraries, then you browsed the sites they showed you.
    • When Google arrived, it was a huge revolution, for having just the search box and being so plain. The rest is web design history! Be Google, not Yahoo.
  • Use good spelling and grammar – people will notice, and again will be distracted from the content you want to share by the glitches in your site.
  • Use images, but not too many. You want to make things look good, and to draw people’s eyes to different things on your site. But too many images will make the page slow to load and hard to read – especially on a tablet or phone.

Things are looking really good now! We just need to do some polishing, and we will be ready to go!

Step Five:

Now we have an address, a house, and even the furniture added. We just need to do the website equivalent of adding some pictures on the walls, and an occasional throw pillow for a pop of color, and the whole thing is done!

  • Test it with users who haven’t seen the site, and have them try to find information; also ask them how the site looks and if they find it appealing. If you have done any editing work, you know it’s so hard to find your own mistakes. Let someone else do the heavy lifting here for you.
  • Add in links to your social media. We talked about setting up different social media accounts a few weeks ago. Now you want your website information, especially if you are doing a regular blog or other updates, to be easy to share. Our WordPress template automatically shares all our blog updates to our Twitter account and to our Facebook page. Three times the information sharing, for only doing the work once!
  • Update it. Make changes to update out of date material, or new material people need. We promise you that you will have forgotten to add something everyone wants, or there will be something great that happens in the world.
  • Learn a little coding – it will help! (And really: it’s pretty easy. I mean – little kids do this now! You can do it too.) If you need to go into your site and add a banner, make a new heading, or some other small thing – it may be trivially easy to just adjust the code, instead of trying to figure out how the template needs to be adjusted.

Step Six: The Alternative to all of this

You’ve been listening to us talk about website design for a while now, and we hope you are inspired to try setting up a site for yourself! But if you now feel pretty sure you don’t want to do this: hire a pro. There are lots of people out there who will set up a website for you, and it won’t be too expensive.

You haven’t wasted this time though, because a pro can do the formatting and make the tech side happen – but you will still need to come up with the content, and you will need to approve color and design choices, and you will need to tell the professional what you will need and what you can live without. Some basic design ideas, as we walked through today, will help you to do your end of the work and give you the best outcome with a partner.

In Conclusion:

Our final piece of advice:  Just try things. It’s pretty unlikely you will irretrievably destroy anything, so dive in and see what you can do! People say this in other areas, but literally we promise you: if we can build a website, anyone can do it.

CMLE members – if you want a website, or you want to update your current website, send us an email or give us a call! We will help you to do all these things we just discussed. We really believe very strongly that every single library – every school, every history center, every building with books in it – needs to have a website. We will be delighted to help you achieve this!

Additional Resources:

Books Read

As always, all the book information we are sharing here is from Amazon.com. If you click on a link, and happen to buy a book – or anything else – Amazon will give us a small share of their profits on your sale. Yay! Thanks in advance for your support!

Courting Her Secret Heart (Prodigal Daughters) , by Mary Davis

Deborah Miller lives a double life as an Amish woman—and a fashion model! All photography is forbidden in her Plain community, so she must keep her job a secret. But when Amos Burkholder starts helping at her family’s farm, hiding the truth from him is impossible. And soon she must choose between the Englischer world of modeling and the Amish man she’s come to love.

On The Come Up, by Angie Thomas

Sixteen-year-old Bri wants to be one of the greatest rappers of all time. Or at least get some streams on her mixtape.

As the daughter of an underground rap legend who died right before he hit big, Bri’s got massive shoes to fill. But when her mom unexpectedly loses her job, food banks and shut-off notices become as much a part of Bri’s life as beats and rhymes.

With bills piling up and homelessness staring her family down, Bri no longer just wants to make it – she has to make it.

Neon Prey, by John Sandford

Clayton Deese looks like a small-time criminal, muscle for hire when his loan shark boss needs to teach someone a lesson. Now, seven months after a job that went south and landed him in jail, Deese has skipped out on bail, and the U.S. Marshals come looking for him. They don’t much care about a low-level guy–it’s his boss they want–but Deese might be their best chance to bring down the whole operation.

Then, they step onto a dirt trail behind Deese’s rural Louisiana cabin and find a jungle full of graves.

Now Lucas Davenport is on the trail of a serial killer who has been operating for years without notice. His quarry is ruthless, and–as Davenport will come to find–full of surprises . . .

Conclusion

Thanks for working through this topic with us! Be sure you are subscribed to this podcast to get all the library skills directly to your favorite app each week. And you can check out our shownotes for each episode to get all the info we discussed, along with the links to more resources. Every episode we have created is on our website: cmle.org.

If you want to enjoy our book group podcast, subscribe to Reading With Libraries to get a new book, or a whole new genre, each week.

Thank you listening today for joining us! Check back in with us next week for another library competency – we are looking forward to more chatting about library work.

Partnering with libraries for visioning, advocating, and educating