Thinking about Mobile Content Yet?

Mobile devices - December 2013My library’s web developer, Nathan Pauley, shared this article with me: The Mobile Moment, by Luke Wroblewski. In the article, Luke discusses how processes, priorities, and product thinking change when the majority of your web traffic shifts from desktop to mobile devices.

Probably a good thing to start thinking about now, rather than later. Why? Well, in my library’s case, we are getting closer all the time. For example, the image included in this post shows mobile visits for my library’s website for December 2013:

  • Blue = desktop website visits (67.4%)
  • Green = mobile device visits (20.3%)
  • Red = tablet device visits (12.3%)

So … add the mobile and tablet percentages together, and you get 32.6%. Almost 33% of web traffic coming from some type of mobile device! What was that percentage a year ago? A whopping 17.6%. If that rate continues, we’ll be around 50% mobile traffic in another year. Wowser!

What should we be thinking about when we hit 50% mobile traffic? Here are some thoughts – please add yours!

  • Responsive website, or at least some form of mobile website. That’s why my library is going responsive (our redesign should be live by the end of January!).
  • Mobile-friendly content. It’s not enough to have web-friendly content. Think about making that content mobile-friendly, too.
  • Easy ways to share, like, and interact with social media sites.
  • Quick ways to connect to library staff and to library content directly from a customer’s mobile device.

What else? Let’s get this mobile thing figured out!

Web Design Trends for 2014

I recently presented this talk at Internet Librarian 2014, and wanted to share it here too! If you want to see some really good notes from my presentation, check out Sarah Houghton’s post (thanks, Sarah!).

I did some research via Google on web design trends for 2014, took the trends that reappeared a bunch, and … here they are: 15 Web design trends in 6 loose categories:

Category 1 – Mobile:

1. Mobile-first design. Start designing on the small screen, then widen out to tablets and desktops. If you can’t do it on a mobile device, you probably don’t need it on your “big” website, either.

2. Responsive. Use a responsive or adaptive design, so your website works great on all screen sizes.

Category 2 – Designy Things:

3.Simplicity. Many web designs are going for a more minimalistic, simplified look. Make sure the design doesn’t get in the way of, or overpower, your great content.

4. White Space. Goes along with simplicity. White space can help emphasize content. Use it just like they do it magazines.

5. No Flash. Websites are still working on moving away from Flash and towards more modern design languages like HTML5 and CSS3.

Category 3 – Visual:

6. Parallax. Parallax design is a way to provide design depth and almost a 3D look to your website. IT reminds me of layers in Photoshop … just done on websites.

7. Flat Design. Sorta funny. Flat design and parallax design are almost opposites (but not quite). Flat design focuses on clean design and good use of color and whitespace. Think the new iOS design, and you’ll get the idea.

8. Blocking. Blocks of content – think Pinterest. I think it works great on sites like Pinterest or Flickr, where there’s a ton of content and the content is all on equal footing. On library websites like New York Public Library’s main page? Not so much. I’d guess their content is NOT equal in terms of importance, and the bottom of the page looks like an afterthought, like they forgot to “finish” the website.

9. Big Images. Use of large images on websites is a trend at the moment – even having a large image in the background of a website.

10. Colors. Using colors is big, apparently. Depending on what “hot web trends for 2014” you read, you’ll get a variety of answers as to what colors are trending – subtle and calm colors, retro colors, even neon colors! But know that web design is “colorful” these days. So think about using a tool like Adobe Kuler to help choose popular colors for a website. Or just go to Home Depot and get some matching paint swatches, and use those as a color base for your website.

Category 4 – Typography:

11. Web Fonts. We’re no longer limited to a couple of web-safe fonts. Think about using new web fonts like Google Fonts or Typekit.

Category 5 – Content:

12. Video. Video is still growing in importance.  A recent Pew report on online video says that 78% of online adults now watch or download video content. It’s an easy way to provide viewable content on your website.

13. Social Media. Social media integration is important for all types of websites and organizations. It’s a great way to share content out to customers in all the online “places” they hang out at.

Category 6 – Navigation:

14. Large Buttons. Websites are starting to use large, easily seen buttons. Make them big and bold!

15. Vertical Scrolling. Think about using “sticky” navigation that glues itself to the top of the page, or social media sharing plugins that glue themselves to the side of a page.

There you go! 15 web design trends for 2014. Are you redesigning your website? We are! Please share your new design ideas!

Website Redesign Time!

My library is in the beginning stages of another website redesign. Our beginning thoughts were simply that we wanted to move to a responsive site design, to help out our mobile website visitors (hitting 20% and growing).

Then we realized all that back-end re-coding work pretty much meant a complete redesign. And there are some other things we want to address and improve, so doing a redesign makes sense.

I thought I might post once in awhile about the redesign process. Could be interesting…

What have we done so far?

  • I met with a group of customers, and asked them what they wanted in a website (see the image in this post for the notes on that session – here’s the Flickr link to it)
  • held some meetings with our Creative Group and our web team
  • created some early, rough draft mockups of the site – a main page, a blog post, and a mobile version of the main page.

Today, we kicked off a series of staff brainstorming meetings. In these meetings, I introduce the concept of responsive design, give some reasons why we are redesigning, and show off our mockups. Then, we brainstorm on these questions:

  • What do you like about the current website?
  • Where do customers get stuck when using the website?
  • What’s missing on our website?
  • What do you think can be improved?

Once these meetings are done, the next step will be to summarize the brainstorming sessions, and present that to our leadership team. Assuming that goes fine, then the website coding starts in earnest.

Should be a fun time!

Design for People

I’ve been doing a lot of reading on responsive design lately (because my library is headed towards that), and that made me think. When designing websites, we tend to design for devices. That’s what responsive design is all about – it’s coding in such a way that your website “responds” appropriately to different screen sizes (i.e., desktops, tablets, smartphones). We design for things: for a desktop; for a screen; for a browser; for a tablet or smartphone.

Nothing wrong with that – a modern website has to work on all those devices, right?

But I also think we need to shift our focus a bit, to where it really counts. And that focus is not on the screen.

We need to design for people.

What’s that change?

We still need to do all the usual stuff – i.e., use great css, work on making our websites responsive, think about screensizes, readability, contrasting colors, etc.

But let’s also focus on people:

  • Put content first.
  • Ask customers what content they want … and then create that content!
  • Answer the why, what, and who questions.
  • Provide next steps and calls to action on ALL content.
  • Make asking questions and getting responses easy and seamless.
  • This works for our physical and our digital branches.
  • What else? Add to my list in the comments…

Simply put – put people first.

pic by Nicola Albertini

15 Web Design Trends for 2013

Here’s one of my presentations for Computers in Libraries 2013 – great conference! I’m posting this one separately, since there’s some good stuff here. I poked around in Google, and condensed a lot of “web design predictions” posts into this handy list of 15 web design trends for 2013. Which ones are you thinking about?

  1. Content first
  2. Design simplicity
  3. UX Centered Design
  4. App style interfaces
  5. Responsive design
  6. No skeuomorphism
  7. coding languages (as in HTML/CSS/Javascript)
  8. Fixed header bars
  9. Large photo backgrounds
  10. CSS Transparency
  11. Social media badges
  12. Infinite scrolling
  13. Homepage feature tours
  14. Sliding panels
  15. Parallax design

Enjoy! I’ll post links to my other CIL 2013 presentations in another post.