Internet Librarian 2013 – Web Trends to Watch in 2014
David Lee King
1) Mobile-First Design – Everybody’s website is mobile now, whether or not you designed it to be so. You want things you can touch, big obvious buttons, no weird navigation menus that only work well on a desktop. If you can’t do it on mobile, maybe you don’t need it on the big website either. Why are we so focused on mobile first? 56% of American adults have smart phones. David’s library website sees 20% of people coming to it on a smart phone and 10% on a tablet.
2) Responsive Design – The code base shrinks and stretches to different screens. Content and buttons that rearrange themselves and optimize themselves for the device.
1) Simplicity – Simple design that lets text and images speak for themselves. David highlighted the Oak Park Public Library’s website as a good example of this.
2) White Space – This helps emphasize important content on a page. Lawrence Public Library is a good example of this. (Sarah’s note: This library is doing Nerd Nite apparently, which is awesome! That’s something I’m trying to bring to my library too! Anyone who works for Lawrence, talk to me!)
3) No Flash – Apple dumped it and websites are dumping it fast. Instead use HTML5.
1) Parallax Design – 3D-ish, cool wow factor that’s fun and gives depth to the page. The iOS7 update’s motion thing utilizes this, as does the Spotify website.
2) Flat Design – Clean visual design and use of color. He cites Princeton Library and Des Moines Public Library (new design that isn’t live yet) as examples. Color makes things pop instead of fancy design elements like shadows or gradients.
3) Blocking – Pinterest, Facebook’s new timeline, Flickr’s photo display. NYPL’s recent redesign is using this also. David doesn’t think it works well on a library site because content gets lost. (Sarah’s note: I totally agree…come on NYPL, you’re a huge urban library with resources…get your design chops together for the sake of the rest of us. Your last few web designs have been rather bad…a victim of design by committee perhaps?).
4) Big Images – Centering a website is popular right now. Using visual cues for something important and useful. Multonomah County Library does this with a background image. David says to be sure that the background image isn’t the focal point of your website though.
5) Colors – Color is huge right now, but designers are disagreeing on what color combinations are popular. A couple of ideas – Ask people what colors they like, or use Adobe Kuler (color scheme generator).
1) Web Fonts – We’re no longer limited to 2-4 web safe fonts. We can use Typekit or Google Fonts to choose interesting fonts that will actually display on users’ devices through CSS grabbing the font off of Google or Typekit instead of the user’s device’s fonts. The Really Simple website is an example of this. This is better for SEO because we can have more of our words be text instead of images. Check out webtypography.net and practicaltypeography.com.
1) Video – There’s a continued increased presence of video on websites of all types. CNN’s main page has 25 videos (someone from the audience guessed “too many”—yup). 78% of online adults have watched online videos—how-to videos, music videos, comedy, etc. What should libraries do? Learn to make videos. Dump that video to YouTube and Facebook. People like to watch things. Don’t be afraid of a camera.
2) Social Media – It’s still big…go figure (says David). It’s a great way to push out your content. It makes the library known. David’s Library had a Painted Piano around and recorded people playing it and posted it on social media. People respond well to pictures and video, not just text. Make sure you have pointers on your website to social media, and from social media back to your website.
1) Large Buttons – Firefox’s website is a good example of this. David recommends using buttons for a call to action—“Ask Now” or “Download.”
2) Vertical Scrolling – You want easy access to a navigation menu at the top, which stays put, but you can still scroll down (called a sticky navigation bar). Happy Cog’s website is a good example of this. Same with the vertical share menus that you see on many sites.
Start working on these things, incorporate a few of them into what you’re doing now.