“Year of the Infographic”

Lately, it seems like everyone on the internet is a graphic designer, with customized infographics hitting every news outlet, blog, and personal website. Some have even dubbed 2012 “The Year of the Infographic.” Now, thanks to an ever-growing group of online services, librarians without graphic design backgrounds can start creating their own infographics in just a matter of minutes.

WHAT ARE INFOGRAPHICS?

Loosely, infographics use pictures, words, graphs, and other visual elements to express information. Ideally, infographics are designed to uses these visual elements  to organize complex ideas and data into a more easily understood form. For a more detailed explanation, see “InfoGraphic Designs: Overview, Examples and Best Practices.” Or, check out the “What is an Infographic?” infographic.

BUT I’M NOT A DESIGNER

Infographics themselves, along with other data visualizations, are certainly not new. And here at LibraryTechTalk we have already discussed a few different tools for creating visualizations. But recently there are new online services that offer ready-made templates and themes users modify by adding their own data. This means slick, professional infographics can now be created by just about anyone in less time than it takes to learn more advanced graphic design software. While there has been some criticism of these types of tools and the products they create, they are potentially valuable options for the everyday user who is intimidated by more advanced applications.

Two examples I’ve recently explored:

Piktochart – Jumpstart your own infographics using one of their ready-made themes. Piktochart offers a free basic service, as well as two options to upgrade to a paid “Pro” account – Monthly or Yearly.  WIth the Free account, you can choose from 5 free infographic themes which allow for some limited color and font customization, as well as pre-loaded shapes and graphics. After you “load” a theme, you can add or change graphics, shapes, and text on the page. There is also a chart wizard where you can manually add data to make a simple chart, or you can import your own data in CSV files. You can also upload up to 5 of your own images. When you’re finished, completed iinfographics can be saved and downloaded as an image (.PNG), but with the free account all of your images will also include the Piktochart watermark.

Creating an infographic with Piktochart.

Upgrading to a Pro account gives you access to over 70 additional themes, more options for customization, up to 100 slots for uploading images, downloading as raw data, and watermark-free images.

(Monthly Pro pricing is currently $14.99/mo and a Yearly Pro account is currently $129. Also, it looks like account prices will be increasing at the end of August.)

Easel.ly – Use visual themes (which they call, “vhemes”) to create and share your own infographics. Signing up for a free account gives you access to 15 vhemes. In the “creation tool,” drag and drop the vheme of choice onto the canvas, or choose to start with a blank canvas. Next, customize the infographic using Easel.ly’s pre-loaded objects, adding shapes or text, and uploading your own images. Unfortunately Easel.ly does not include any chart-making capabilities. Due to this lack of feature, Easel.ly does not necessarily stay true to the “infographic” ideals, but is an easily-accessible tool for an average user to begin exploring infographic creation.

Infographic created using Easel.ly

When you are finished, Easel.ly allows  you to share your infographic in a number of ways, including downloading as a JPEG, generating a web link, or copying code to embed the image in a web page, blog, etc. You may also choose to save your infographic as “Private” (default) or “Public.”

Easel.ly is currently still in beta, which means there are likely additional tweaks and improvements ahead.

APPLICATION IN LIBRARIES

Marketing/Outreach

Librarians are thinking critically about how to translate data about our services into easily-digestible and meaningful messages. Iowa State University Library is using data visualizations (including infographics) to tell their library’s story. The American Library Association has also used an infographic to demonstrate nationwide cuts to library budgets.

Instruction

Infographics could be an additional tool in our instruction toolbox. Think about what kinds of skills might benefit from a more visual explanation. Students could create their own infographics to demonstrate what they learn in a library session. For example, Bizologie has created an infographic outlining how to research private companies.

Visual literacy

Even if we choose not to create our own infographics, we are concerned with visual literacy. As per the  ACRL’s Visual Literacy Competency Standards, “visual literacy” as “a set of abilities that enables an individual to effectively find, interpret, evaluate, use, and create images and visual media.” As infographics continue to increase in popularity, librarians will play a role in helping users effectively interact with visual information.

WHAT DO YOU THINK?

Do you have a favorite infographic or tool for creating infographics? How is your library using infographics? Tired of seeing infographics everywhere?

More information:

A more extensive rundown of infographics tools is available at Daily Tekk’s “Over 100 Incredible Infographic Tools and Resources.”

iLibrarian – 9 Data Visualization Tools for Librarians and Educators

Daily Infographic – Anatomy of a Librarian Infographic

Kathy Schrock –  Infographics as Creative Assessment

Junk Charts – The coming commodization of infographics

Creately: More Than Just a Venn Diagram

Sick of drawing circles on the board to illustrate Boolean? Lines and boxes got you down? Creately (http://creately.com/) is your one stop diagram tool. From wireframes to flow charts, Creately helps you creatively create a multitude of diagrams. While newer versions of Microsoft products have some diagram tools, Creately is substantially more robust in terms of types of diagrams, shapes, images, connectors, etc. Additionally, one really nice feature of Creately is its collaborative capabilities. Not only can diagrams be shared and developed by multiple people, but Creately also allows for notes and comments.  After a diagram is created, there are several ways to use it.  PDF, PNG, and JPG downloads are available as is code for embedding online. I could see Creately used many ways in academia, but specifically in the library it could be used for:

• Administration (organizational charts, project and workflow management)
• Instruction (venn diagrams, mind maps)
• Technology (database/ dataflow diagrams, website wireframes)
• Research (data representation, presentations)

Examples of Creately Diagrams

Creately tools are available through a variety of ways including a web based program, a downloadable program, as a Google App, or as a plugin through JIRA, FogBugz and Confluence.  I looked at the web based version.  The web based program has several pricing options including a limited free version.  The free version allows a user to have any 5 diagrams saved online with a maximum number of 3 collaborators.   The web based Creately prices are listed here: http://creately.com/plans.  When contacting the company, I was told that there was a 50% educational discount for all of their products.  To receive the discount email: edu@creately.com.

jQuery Mobile: Mobile Websites Made Easy

In case there was any doubt left in your mind, the 2011 Horizon Report declares that the time-to-adoption for mobile devices is one year or less (http://net.educause.edu/ir/library/pdf/HR2011.pdf, pg.12). I would say the time to adopt is actually already here and possibly past. While there is still quite a bit of debate over whether native apps or web apps are the way of the future, there is no doubt that your library should be doing something to address the experience of your mobile users (see this article for more on that debate).

As mobile devices become more ubiquitous, more tools are available to help you develop your mobile initiatives. For web apps (i.e. mobile websites), several mobile frameworks have emerged to ease the development process. As the phrase indicates, mobile frameworks provide the framework for building mobile websites, allowing you to focus on the content and navigation. Most mobile frameworks are built to work on a wide variety of devices and provide a similar look/feel to native apps (i.e. apps that are built for a specific device).

While there are many mobile frameworks available, I have found the jQuery Mobile Framework to be both easy to use and well-documented (very important!). Additionally, the jQuery framework is compatible with a wide variety of devices and degrades nicely for those devices that are not quite as smart (see a list of supported platforms here). One of the benefits to web apps is the ability to create one site that works for any mobile device. Thus, choosing a mobile framework that helps you accomplish this makes sense.

So what does jQuery Mobile do?

Before I get into that, it’s important to state that jQuery Mobile does not eliminate the need to know how to create a website using HTML. In fact, to use it most effectively, it helps to have a solid understanding of HTML, as well as web programming languages like PHP or Coldfusion. What it does do for you is turn your basic HTML code into a mobile-friendly user interface by providing pre-defined Javascript interactions and CSS styling. All you have to do is add a few hooks (that’s what I call them) so that jQuery Mobile knows what to do.

Unformatted hyperlink

So, by changing this line of code:

<a href=”http://www.google.com”>Google</a&gt;

into this:

<a href=”http://www.google.com&#8221; data-role=”button”>Google</a>

hyperlink with the data-role="button" code added

I turn a small unfriendly link (for a smartphone at least) into a graphical, user-friendly button that is consistent with the mobile interface experience to which your mobile users are accustomed.

Put it to the test

Using the jQuery Mobile Framework, I was able to turn my library’s basic text-based mobile website into a smartphone-friendly experience within a matter of hours: http://cooklibrary.towson.edu/m/smart.

Using jQuery Mobile I was able to turn our text-based mobile website into a smartphone-friendly site within a matter of days.

The documentation and demos that are provided on the site (http://jquerymobile.com/demos/1.0b1/) were extremely helpful for getting started.  They provide a basic template to start with, and there are plenty of tutorials and samples around the web as well. There are several different CSS themes to choose from, and, of course, you could always customize the themes to match your school colors, etc.

For anyone who relies on Dreamweaver for building web pages, it appears that the newest version of Dreamweaver (CS5.5) integrates the jQuery Mobile Framework (http://www.adobe.com/newsletters/edge/january2011/articles/article4/index.html), making it even easier to create mobile-friendly websites. (There really is no excuse not to have a mobile site now!)

If your library hasn’t yet ventured into the mobile frontier, or even if you already have a basic mobile site, save yourself some time and ensure that your mobile site is compatible with a variety of devices by using jQuery Mobile. If you’re not responsible for your mobile site or if someone else is doing the coding, suggest that they look into jQuery Mobile or one of the other mobile frameworks that are out there.

I’d be interested to hear how others are addressing their mobile presence. What frameworks are you using? Are you building native apps or web apps? Feel free to leave a comment below about what your library is doing.

---

Note: In order to make your site display correctly on an iPhone, you’ll need to add the following line of code inside the <head></head> tags of your pages:

<meta name=”viewport” content=”width=device-width,user-scalable=no” />

This takes away the ability to zoom in and out on a page, but will make your site more friendly to iPhones. (This took me awhile to figure out.)

Website Assessment with Google Analytics

Google Analytics is a hosted service for website usage analysis. It tracks how visitors find/enter your website, what pages they visit within the site, how much time they spend on each page, and where they go when they leave your site.

It’s free as long as your account does not exceed 5 million pageviews per month. All you need (like with all things Google) is a Google account. Creating a website’s profile is as simple as knowing its URL. Once you have entered your homepage URL, location, and time zone, Google sends an email confirmation including a snippet of code that should be pasted into each page of the site. The instructions explain that the code must be inserted immediately before the closing body tag.

New Website Profile

Reports can be generated based on daily, weekly, or monthly usage. Each report includes detailed information about visits, pageviews, bounce rate, and average time spent on the site. Other analytic features such as iPhone visits and trend reporting can be included/excluded based on the needs of your institution. Data can be exported as PDFs, XML, or comma-separated values (CSV) for Excel.

Report

Google Analytics is powerful, it’s big, I’m merely scratching the surface! However, getting started is easy and the potential benefits are vast. If you need to record web statistics, to assess online services, or redesign your website, you should read more, explore training options, and play around with this amazing tool.

Why let code hold you back? Websites with Google Sites.

Are you sick of asking your programmer or IT person to help you build a website?  Are you lost when students ask you about Dreamweaver?  Google Sites might be a great option for you.  Whether you don’t have the skills or simply the time, Google Sites is a great option for quickly creating subject guides, course pages, or even entire library websites.

Design
Without the need for any coding or external programs such as Dreamweaver, you can create a surprisingly robust and customized website.  While there are many built-in templates and themes to easily style your site, with a little more work, you can also customize the colors, layouts, fonts, etc.  Some of these advanced features can get a bit confusing, but the built-in themes should be adequate for the beginner user.

Web Address
Another nice feature of Google Sites is that you can also use your own web address for the page.  Google Sites however, does not supply these custom domains therefore you must buy the domain from a third party and set it up through the domain registrar.  For beginners or those not needing a custom url, Google Sites will give you an address similar to
http://sites.google.com/site/carissa_tomlinson.

Collaboration and Privacy
What would a website be these days without some interaction and collaboration?  Google Sites not only allows multiple people to collaborate on the website development, but it also can be comment enabled, allowing readers to add content much like comments on a blog.  Don’t want people to comment on your webpages?  No problem, simply don’t enable comments.  What if you don’t even want the general population to be able to see your website?   No worries, Google Sites allows you to make your website private and shared only to designated people.  A private Google Site could even be used as a sort of library intranet!

Things to Know

• Any content you create is hosted by Google which means that if Google Sites goes away, it’s possible so will your site.
• You cannot copy the source code and put it into an HTML or CSS file to host on your own server.
• You cannot import a CSS file to style your page, but you can use inline CSS and HTML tags.
• You have a limit of 100 Mb of storage per site (for uploaded images, videos, etc.)
• There are no ads, but you can choose to add targeted ads and actually get paid any revenue from the ads!
• Powered by Google Sites will appear at the bottom of your pages.

Now go and put something on the web!