Recommended
Recommended
More Related Content
What's hot
What's hot (18)
Similar to Your Library Website: Keep It Fresh
Similar to Your Library Website: Keep It Fresh (20)
More from Cindy Leonard
More from Cindy Leonard (20)
Recently uploaded
Recently uploaded (20)
Your Library Website: Keep It Fresh
- 1. Your Library Website: Keep It Fresh Cindy Leonard Bayer Center for Nonprofit Management at Robert Morris University Allegheny Co. Library Association Workshop October 2015
- 2. Cindy Leonard Consulting Team Leader Bayer Center for Nonprofit Management leonard@rmu.edu @cindy_leonard
- 4. Functionality Responsive Design More Scrolling / Less Clicking Sticky Navigation Menus Social Media Integration Fast Loading Sites
- 5. Functionality > Responsive Design
- 7. Functionality > Responsive Design
- 8. Functionality > Responsive Design
- 9. Functionality > More Scrolling
- 10. Functionality > More Scrolling
- 11. Functionality > More Scrolling
- 12. Functionality > Sticky Nav Menus
- 13. Functionality > Sticky Nav Menus
- 14. Functionality > Social Media Integ.
- 15. Functionality > Social Media Integ.
- 16. Functionality > Social Media Integ.
- 17. Functionality > Social Media Integ.
- 18. Functionality > Fast Loading
- 19. Functionality > Fast Loading
- 20. Content Visual Storytelling Simpler Content Hero Areas Increased Use of Video Dynamic Backgrounds
- 21. Content > Visual Storytelling
- 22. Content > Visual Storytelling
- 23. Content > Simpler Content
- 24. Content > Simpler Content
- 25. Content > Simpler Content
- 26. Content > Hero Areas
- 27. Content > Hero Areas
- 28. Content > Increased Use of Video
- 29. Content > Dynamic Backgrounds
- 30. Content > Dynamic Backgrounds
- 31. Design Flat Design Focus on Typography Simplified Color Schemes Grid-style Layouts Mega Navigation Menus
- 32. Design > Flat Design
- 33. Design > Flat Design
- 34. Design > Flat Design
- 35. Design > Flat Design
- 36. Design > Focus on Typography
- 37. Design > Focus on Typography
- 38. Design > Focus on Typography
- 39. Design > Focus on Typography
- 40. Design > Focus on Typography
- 41. Design > Simplified Color Schemes
- 42. Design > Simplified Color Schemes
- 43. Design > Grid-style Layouts
- 44. Design > Grid-style Layouts
- 45. Design > Mega Navigation Menus
- 46. Design > Mega Navigation Menus
- 47. Future Trends RESPONSIVE DESIGN FLAT DESIGN FOCUS ON TYPOGRAPHY MORE IMAGES / LESSTEXT MORE SCROLLING / LESS CLICKING
- 48. Q&A
- 49. Get In Touch Anytime! Cindy Leonard Consulting Team Leader Bayer Center for Nonprofit Management leonard@rmu.edu @cindy_leonard
Editor's Notes
- Welcome to the workshop. This part is called Your Library Website: Keep it Fresh.
- Here’s a little bit about me Cindy Leonard, Consulting Team Leader at the Bayer Center for Nonprofit Management at Robert Morris University. Among other things, manage the technology program for nonprofits there. Web developer for 17 years and running, current preference is the WordPress platform. Why I wanted to do this session: I’ve worked with over a dozen libraries in the ACLA system in the past 9 years, either with direct website development or assistance or in my classes and clinics. Most nonprofits have websites these days, but we tend to run behind the times in technology due to funding and lack of internal expertise. Want to show you the current trends and their implications for your current websites. Also want to inspire you to think about the possibilities that these trends present for engaging with your stakeholders!
- Agenda: Going to discuss current website trends in three areas: Website Functionality – how a website gets used and how it performs Content – the “stuff” that people read and view on a website Design – the look and feel of a website I’ve tried to find and use library examples whenever possible in this presentation, but otherwise have used nonprofit websites throughout. Keep in mind that there’s naturally going to be some bleed over between these three items and I’m simply categorizing things this way to organize the session. Finally, I’m going to talk a little about the trends I predict will continue in upcoming years.
- Trends I’m going to cover in this area: Responsive design More scrolling / less clicking Sticky navigation menus Social media integration Fast loading sites
- Cleveland Public Library - http://cpl.org/ Explain responsive design vs. mobile switching (grid layouts, flexible layouts and images, media queries)
- Can get an idea of what your site looks like in various browsers through online tool – www.studiopress.com/responsive Here we see how the website would look on a variety of devices and screen sizes
- That last screen was a little hard to see, so here’s a close up of the site on an iPhone
- And here’s the site on an iPad, in both Portrait and Landscape viewing modes Note how the boxes and photos are automatically re-sizing themselves to fit nearly on the screen, regardless of size or orientation
- http://projectfms.co.uk/project/blood/ Here’s the site for the Be a Hero, Save a Life blood donation campaign by a British org called Project FMS. When the site first loads, this is what you see.
- When I clicked the Did You Know button in the top navigation menu, it didn’t load a new page, it jumped down the home page.
- The entire site is housed on a single page and the navigation menu serves to move you around on the site (it sticks at the top, a feature we’ll discuss later). I wanted to show you the entire length of the single web page that is this site, so I took three screenshots and added them to this slide to give you the general idea. If you were to stack these three images on top of each other, this is what the site looks like in its entirety.
- http://technowconference.org/ A sticky navigation menu is a nav menu that stays fixed to the top of the browser viewing window when you scroll down the web page. Here, we see the website for the Bayer Center’s annual nonprofit technology conference on Oct. 29. I organize this conference as part of my job duties, so it felt natural that I should just create the site myself. I have a lot of sponsors to put on the home page, so it becomes a longer page than I’d normally prefer to use. Note the navigation menu along the top…
- Finally, scrolling to the bottom, the menu still doesn’t move. You can see that it does become a touch transparent when scrolling down.
- Img source: http://www.wtmlondon.com/g/2013/logos/socialmediabar.jpg Img source: http://blog.acumium.com/wp-content/uploads/2013/04/social-sharing.jpg Img source: http://www.buzzshift.com/wp-content/uploads/2012/06/shareaholic-1024x186.png There are a number of ways to incorporate social media into your organization’s website. Two of the most common are to put social media buttons that link to your various channels somewhere on your web page (usually the header or footer). You can also add Social Sharing bars like the second two items you see on this slide. There are a variety of social sharing bars available and how you add them generally depends on the website development tool you are using.
- Here’s the Gates Foundation website. I like how they’ve added a section for social media on their home page. They have the usual buttons, but after those – they have boxes that contain the latest content from their various social media channels – there’s a post from Facebook, two Tweets and a YouTube video featured here.
- I love how Heifer International has combined all their social media choices into a single box here. Note: At the top, hashtags to use on Twitter Next, latest blog posts with compelling photos Call to sign up for email updates Like and Follow buttons for Twitter and Facebook Share and Tweet buttons so people can help spread the word
- When you click on the Share or Tweet buttons…
- Our final trend in this section is fast loading sites. In the days of dial up Internet, people were more patient if a page took 20 seconds to load. Today, with broadband being so common (and mobile phone Internet tending to be just a bit slower than regular Internet), the maximum time a page can take to load is 3 seconds. If a page takes longer than three seconds, you risk people giving up and going elsewhere.
- http://www.webpagetest.org/ If you’d like to see how your own website performs, you can test it at www.webpagetest.org. Just type in your website’s full address, including the http:// and click start test.
- Trends I’m going to cover in this area: Visual storytelling Simpler content Hero areas Increased use of video Dynamic backgrounds
- Des Moines Public Library - http://www.dmpl.org/ These days, digital cameras are everywhere it seems and you no longer have to own fancy equipment to take a good photo. Photo editing software can be found inexpensively or for free too. Between this fact, the “storytelling” craze that has hit America in recent years and the fact that our attention spans are no longer what they used to be (thanks to on-demand content), it makes sense that websites would begin to shift to heavy use of images and would tell their stories visually. Images can have a great impact than words. I could tell you that Des Moines’ library has an expansive, inviting and clean space, but isn’t it better to see it like this? Doesn’t it make you want to visit this library?
- Multnomah County Library - https://multcolib.org/ Here’s another organization doing a nice job with visual storytelling. I like the background hero area showing a young person engaged at the library and the photos and graphics associated with the library’s upcoming events.
- http://www.co.davidson.nc.us/library/ The simplification of content on a website is another growing trend. I believe this is growing because 1) there is so much content everywhere these days – we are absolutely bombarded constantly by it and 2) it’s a proven fact that people don’t read web pages – they scan them. Simple content includes things such as: White space - allowing the content (and your visitors’ eyes) room to breathe Boxes, borders & graphical planes - Segmenting the information into visual categories An intuitive search method - Letting your users jump straight to the info they need Grids - Although not always necessary for comprehension, keeping content within a rigid, consistent structure helps reduce the effort required to process it Strong information hierarchy - Establishing a consistent design language using content types (blurbs, excerpts, call to actions) Visual hierarchy - The relative importance of different content areas and elements can be visually implied in many ways, ranging from typographic treatments (headlines, sub-headings, pull-quotes, etc.), to image sizes and saturation, placement, etc. Source: http://www.dtelepathy.com/blog/inspiration/14-beautiful-content-heavy-websites-for-inspiration So we’re looking at the entire home page (so long I had to chop it up and squeeze it in there. This is an example of non-simpler content. Not only is this content overwhelm, it’s poorly organized.
- Northlandlibrary.org Here’s an example of a local library, Northland Public Library, which has enough content, but hasn’t thrown quite everything on its home page. What is there, is well organized using visual devices – headers, columns, etc.
- Here’s the rest of the page. It’s fairly easy to scan the columns and sections to find what you want.
- Once again here is Multnomah County Library’s website. One of the few I could find that used a full hero area. Hero Areas seem to slowly be replacing the popular (and sometimes annoying) photo sliders that have become the norm on a lot of web pages. Hero areas feature one dramatic photo and a little bit of text. Many times they link to additional content too.
- And finally, here’s another on the home page of the San Diego Zoo. Think for a moment of pages with Hero Areas that I’ve just shown you. Did one or more of them evoke an emotional response? Did you want to help? Find out more? Visit the zoo? Hero Areas are designed to capture attention, sort of like a billboard along the highway.
- http://www.charitywater.org/whywater/ Now that so many people have smart phones with built in video cameras, video capturing and editing has become easier than ever. And watching a short video can make more of an impact and convey more information in a few minutes than asking someone to read a web page of text. I like how Charity Water has embedded this video at the top of their Why Water? page. Note that it’s an embedded YouTube video, so I also have the option to go watch other Charity Water videos on their YouTube channel directly from this page.
- http://www.dadaabstories.org/ Dynamic backgrounds are slowly growing in popularity. For this presentation, I’m not able to show you a dynamic background properly, so I’m going to try to explain it. A dynamic background looks like a large photo, like you see here on the home page for Dadaab Stories. But while I was looking at this page, the people in the photo were moving around. Kind of like the photos move in the Daily Prophet newspaper, if you happen to be a fan of the Harry Potter books.
- This is a screenshot of the same page a few seconds later. Pretty neat! (Check it out when you get a chance dadaabstories,org.)
- Trends I’m going to cover in this area: Flat design Focus on typography Simplified color schemes Grid-style layouts Mega navigation menus
- Apple corporation and Steve Jobs are generally considered one of the pioneers of the flat design trend. You can see the difference here between the icon sets for Apple iOS6 and 7 operating systems. Most flat design schemes have five characteristics – no added effects (like gradients, drop shadows or any 3-D effects), simple/clean design elements, a focus on typography, a focus on color and an overall minimalist approach. Img source: http://images.naldzgraphics.net/2013/07/7-icons.jpg
- If Apply helped to get it started, Microsoft is pushing it even farther. This is a screenshot of the new Windows 8 operating system. Flat design focuses on streamlined, simple elegance. Img source: http://news.softpedia.com/images/news2/How-to-Take-a-Screenshot-in-Windows-8-2.png
- Salt Lake City Public Library - http://www.slcpl.org/ As you can see, this has a flat design. No gradients, backgrounds, nothing fancy added. All elements have a flat design effect to them, even where it looks like there is shadowing.
- Here’s some elements pulled up close. Note the lack of gradients and anything 3-D looking. They’ve used layering (still all flat design layers) to give the search and ask a librarian a little pizazz.
- Typography on the web has come a long way from the early days of web design. Originally, web designers had a handful of fonts that were considered “web safe” meaning that they would retain a consistent appearance regardless of browser type or screen size. Img source (web-safe fonts): http://images.sixrevisions.com/2010/03/20-03_websafe.jpg
- http://www.fontsquirrel.com/ Now that fonts can be embedded into websites, there’s almost no limit to what fonts you can use. A great place to find interesting fonts for your website is FontSquirrel.com.
- https://www.google.com/fonts Google also launched its popular Google Fonts site a few years ago. Fonts from this site can be embedded directly through a website’s codes (it’s pretty much a copy/paste in the right place kind of deal) and some content management systems like WordPress have plugins to make it even easier – no coding needed.
- https://www.google.com/fonts This is another screenshot of a different preview mode available in Google Fonts.
- http://oppl.org/ This is the Oak Park Public Library’s home page. I think this site does a beautiful job with its typography. The fonts are modern, attractive and combined well.
- Lawrence Public Library - http://www.lawrence.lib.ks.us/ As you browse the web, you may have noticed that some of the bigger sites like Facebook, CNN and popular retail stores have simplified their color schemes. This is a shift that is starting to show up in nonprofit sites too. Here is the home page for the organization One. Note that they essentially use black, white and a shade or two of gray. The color on the site comes from the photography.
- http://www.northlandlocalhistory.org/ This is the essence of a simplified color scheme – black/white/gray with perhaps one other color. This is the home page of Northland Public Library’s local history website. I did this site for them, launched a month ago. We wanted to focus on the images and give a historic feel to the site without making it boring so we went with simple colors.
- When I talked about responsive design earlier, I mentioned grid-style layouts. These are becoming popular because they facilitate responsive design (the boxes can be easily rearranged to cascade down a web page if viewing on a mobile phone). They are also becoming popular because they facilitate easy scanning of content. This is the New York Public Library’s website. Any time you visit their home page, you can scan all the different things happening or items of interest. These small chunks of content are easier to digest than a lot of text.
- http://leonardodicaprio.com/index.php?option=com_webcontent&view=article&layout=item&cid=3&Itemid=138 This is currently one of my favorite website in terms of appearance and functionality – the home page of the Leonardo DiCaprio Foundation. I love the vertical grid and the beautiful imagery here. I also like the left sidebar, which can be expanded into a grid of clickable images if you hit the arrow button there.
- Princeton Library - http://princetonlibrary.org/ Finally, we come to the last trend in our list – mega navigation menus. Navigation menus have been pretty straightforward for years. You generally get a primary navigation menu like you see here. Pop-down or fly-out sub-navigation menus have been the norm for many years too. Typically, you’d expect to hover over a menu item and get a sub-menu that looks like a list of pages. However, on this site they are using a mega navigation menu. So, when I hover over Get to Know Us…
- I get a mega-navigation menu rather than a simple dropdown.
- For 2015 and beyond, I believe mobile device usage will increase and this will continue to drive web design trends. Based on everything I’ve seen, these are the trends I think will stick and increase, moving forward: Responsive design Flat design Focus on typography More images / less text More scrolling / less clicking Since there’s no way to really predict the future, these are my best guesses. It will be interested to watch the trends in upcoming years as technology usage evolves.
- Please feel free to get touch with me any time if you have any questions.