Author Archive

Copyright-free image archives

You inevitably need images for something, a new design or a blog post, and while the web is full of photos, most of them aren’t for reuse or only in limited ways. This is a collection of places to find copyright-free imagery you can use however you need.

  1. The British Library’s Flickr collection

    The British Library’s Flickr collection

  2. The New York Public Library’s Digital Collections

    The New York Public Library’s Digital Collections

  3. pixabay


  4. Photos Public Domain

    Photos Public Domain

  5. SplitShire


  6. freerange


  7. PD Photo

    PD Photo

  8. free stock photography

    free stock photography

  9. Gratisography


University Websites: Top 10 Design Guidelines

In preparing a new full-day course on designing university websites, we conducted a range of user studies. In total, we tested 57 higher-education sites with users in the United States, Canada, UK, and Taiwan. We recruited prospective students, both undergraduate and graduate, as well as parents of prospective students. Users were asked to think aloud while performing exploratory tasks

Congress requires publicly funded research to be publicly available

The new Omnibus Appropriations Bill, which Congress passed yesterday, contains an important — and fantastic — provision: it requires that scientific research funded by the Departments of Labor, Health and Human Services, and Education be placed in a free online repository within 12 months of their publication in a peer-reviewed journal.

- Congress requires publicly funded research to be publicly available - Boing Boing Cory Doctorow

Cozy Cloud


Cozy Cloud is a french startup funded by the Mozilla startup accelerator. Cozy is open-source software they’ve released that let’s you host your own personal cloud-based services. You set it up on your server and have access to a calendar, photos, files, address book, RSS feeds and pretty much every type of cloud-based service that is supposed to synch with your computers and mobile devices.

The proposal is that by hosting your own information, it is more secure than using services. It also makes it easier to control your information by keeping in one place you can more easily get it out of and giving you the ability to destroy the whole installation with one command.

If you don’t want to manage your own server, they offer a hosted service  in beta.

What the Library of the Future Will Look Like –

Recently, the Pew Research Center found that 90 percent of Americans would be upset if their local library closed. But the survey also found “52% of Americans say that people do not need public libraries as much as they used to because they can find most information on their own.”

That’s why libraries need to adapt. People want them—but want them to be better. Instead of a warehouse of information, libraries need tools for use by the commons—a Netflix of things.

“We’ve been in the information business for 3,000 years,” Hill says, waxing philosophical on the role of the librarian in society. “If there’s anything we do well, it’s deliver information, and information is knowledge. I think if anybody is positioned to help build workers for this new information age, it is the library.”

America is in love with its libraries: Pew report – Boing Boing

The Pew Internet and American Life Project released a new report today entitled How Americans Value Public Libraries in Their Communities PDF, that shows a very large majority of Americans value libraries, viewing them as critical to their communities and vital to providing services that ensure equality of opportunity for people who would otherwise be at a terrible disadvantage in life.This is in contrast to a few privileged blowhards whove opined that the library is an obsolete institution in the age of the Internet — and worse, an unaffordable luxury in a time of austerity and recession. The mission of libraries is to help the public navigate information and become informed — a mission that is more important than ever. As Eleanor Crumblehulme said, “Cutting libraries in a recession is like cutting hospitals in a plague.”

- America is in love with its libraries: Pew report - Boing Boing Cory Doctorow

Net Neutrality Ruling

White outline of a head on a grey background. Often used as generic avatar image.

The Net Neutrality ruling is in and Internet service providers can discriminate however they like.

The Nuts and Bolts of Network Neutrality is good overview of what neutrality is about.
Who Killed Net Neutrality? : The New Yorker has a review of how we got to this point.
After The Open Internet Order, Reclassification! finds a silver lining in the cloud.
‘A FEMA-level fail’: The law professor who coined ‘net neutrality’ lashes out at the FCC’s legal strategy

Check Your Privacy Settings

Data Privacy Day logo

Would you like to view or change the privacy/security settings for your online device or service, but don’t know where to find them? Here’s your one-stop shop for easy instructions to update privacy settings wherever and however you go online.

Theme Process Roundup

Screenshots of the Creative Librarian website as of January 11, 2014 on various screens.

This is an index of a series of articles I wrote on the process I went through creating the third theme for this site. It was spurred on by the release of WordPress with the new Customizer feature and my desire for a responsive, retina-ready theme I could re-skin when the desire hit me. The articles are listed in the order they were published but they’re each written to be read alone.

  1. Icon
  2. Responsive, retina-ready icons
  3.  Flat Design
  4. Responsive Design
  5. WordPress wrangling

Responsive Design

The Creative Librarian website at several screensizes

The Creative Librarian website at multiple screen-sizes.

Responsive design is a method of web design that has been developed in response to the almost infinite number of screen sizes designers are faced with today. Rather than create multiple websites or relying on browser-sniffing, it uses fluid design and a CSS3 feature called Media Queries to adapt the website design depending on the size of the browser window.

Media Queries have been used for years to specify print stylesheets. They are fairly sophisticated, accepting both a range of widths and arguments such as media (screen, print, aural), orientation (portrait, landscape), and color. They are commonly used to adjust the layout, typography and size of images and icons down for mobile devices, however, I used the “Mobile First” technique of using the mobile design as the default and making modifications as the window gets larger.

One of the additional problems with mobile devices (and one of the pillars of Responsive Design) is page load time. They often don’t have the processing power to load pages as quickly as desktops and often have data limits that make the large images of desktop websites prohibitive. A number of methods of changing images based on screen size and device are being worked on but there is no easy answer yet.

I discussed the responsive icons used on this site in an earlier article. In short, I chose an icon font for the limited impact on page-weight, the ease of resizing, resolution-independence, and the ability to style them with CSS. It was easy to implement using CSS :before and :after selectors and adds to the visual appeal and usability without adding noticeably to the download time.

Mobile Navigation in Responsive Design

Mobile navigation demo

Mobile navigation demo from Navigataur

How to deal with the menu is a common problem with websites on small screens. There have been a number of solutions offered, most using javascript. I used a pure CSS method from Navigataur to switch from a menu bar to a drop down menu toggled with the “hamburger” icon of three horizontal lines. It was a little tricky to set up but since I got it working I haven’t had any more problems.

Design for Internet Explorer


Internet Explorer logo

So Responsive Design is a great idea and media queries are supported in all modern browsers… (Say it with me) except Internet Explorer. Until version 9. Unfortunately, there are people who are still stuck with earlier versions of IE for one reason or another and others who simply don’t bother to upgrade.

Respond.min.js adds basic media query support for IE versions 6-8, which combined with conditional comments allows them to get essentially the same experience as those with more advanced browsers. All you have to do is call the script.

There are a couple of more workarounds in this design for IE. For convenience, I’ve combined them all into one code block. Part of this design relies on RGBa transparency in the CSS which, again, is not supported by older versions of IE. I used a conditional comment to reset the content background to the opaque color. It’s not as pretty but it’s functional and the transparency wasn’t worth a more elaborate workaround that would increase page load time to me. I had enough javascript weighing down the page already.

The last workaround for IE was a little script to add HTML5 support for older versions. I like HTML5 for its increased semantics and accessibility as well as how easy it makes to use common techniques like form validation. This script makes versions on IE that don’t support HTML5 recognize the elements for styling.

<!--[if lt IE 9 ]>
<script src="<?php bloginfo('template_directory'); ?>/_/js/respond.min.js"></script>
<style type="text/css">#page-wrap { background:<?php echo($cbgcolor);?>; } </style> 
<script type="text/javascript"> //Make IE 7 &amp; 8 recognize html5 elements for styling (function(){ var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption| footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|'); for(var i = 0; i &lt; html5elmeents.length; i++){ document.createElement(html5elmeents[i]); }} )(); </script> <![endif]-->

Those are the highlights of the issues that popped up in the design. As we can forget the older versions of Internet Explorer, it becomes much easier over time.