Different views of the Digital Humanities 2013 conference site.

Why?

Responsive Design is based on the idea that content, if well thought out, shouldn’t change, it should just reflow for different screen sizes. It does away with the idea that mobile users are looking for different content than desktop users - everyone gets the same content, just reformatted for their screen size. For the websites I work on, this is a much better solution than a separate mobile site, because it simplifies things and it forces me to think beyond the fixed width layout.

How?

Responsive design works by setting a rule in your CSS. For example, “when the browser is 400 pixels wide or less, make the font size smaller.”

That rule looks like this:
@media only screen and (min-width: 400px) {
body {
font-size:.9em;
}
}
With great power comes great responsibility- please don’t make the font teeny tiny on mobile devices, my eyes will thank you.

Wait, I hear you thinking, 400px on one screen is different from 400px on another! What about retina displays?

There are a couple of ways to handle this:

1: A meta tag in the header that basically says “hey high resolution device, pretend you have normal pixels, OK?”
<meta name="viewport" content="width=device-width, initial-scale=1.0">
By the way, don’t add “user-scalable=no” to that meta viewport tag. It makes puppies cry, and it makes your sites less accessible.

2: Or, you can ignore pixels all together and use em’s instead:
@media only screen and (min-width: 35em) {
blah blah blah
}
That’s basically it. So if a user makes their bowser window bigger or smaller, the site will change when it reaches the desired size. There are lots of sites out there that will walk you through creating a responsive website step by step. In addition, many CMS’s now come loaded with responsive templates by default (like WordPress’s pretty Twenty Twelve theme).

Mobile first?

There are two ways to use responsive design: design for small screens and then add conditional rules for larger screens, or design for large screens and scale down for smaller ones. Or, you can do both. Which you choose depends one what you’re aiming for,  the main screen size of your users, and what percentage of your users use incompatible browsers. Here’s a handy chart of which browsers support media queries (spoiler alert- basically everything except IE 8 and below).

Sometimes I’ll serve up the mobile version of something to IE8 and below, because it’s easier than dealing with the other rendering bugs that come with the more complex version for larger screens. All the information is there, it’s just not quite as pretty.

Awesome! How do I start?

Besides reading a tutorial or two, I’d start with a HTML5 boilerplate template  which includes a sample media query, and start writing HTML and CSS. Or, take an existing responsive theme and make some changes. Or, download a responsive HTML/CSS framework and make something. There’s also a bunch of books on the topic, including a $9 ebook called Responsive Web Design, written by Ethan Marcotte, whose article I mentioned at the beginning of this post.

That’s it! I think responsive design is a lot of fun, and a breath of fresh air after years of having people ask me “what about the mobile version?” Now, my sites only have one version, and work on almost all screens.

One of the biggest changes in the way I work over the last year and a half is I’ve pushed design farther and farther back in the process; after I build the site, usually. This really lets me focus on content and how it will be presented before getting into the often messy design details.

Determine Content

If you are working on your own project, content is easy. If you are designing for someone else, you need to get them to give you the content, or at least tell you about it. Either way, you need to get a firm grip on not only what the content is, but how you will organise it.

Collect and Create Design Ideas

• Pore over project materials
• Browse other websites
• Research other photos, artwork, etc
• Find color palettes
• Collect fonts
• Create sketches – of layouts, colors, design elements, anything.
• Save everything
• Create collages (optional). These can help guide the design process later, and serve as something to talk about with the group in the meantime.

Pick a place to build site

• Can start on your computer
  • Use virtual box (google “set up a web server with virtualbox”)
  • Or use MAMP or WAMP
  • Or skip straight to:
• Get web host + domain name
  • Popular options: namecheap, bluehost, dreamhost

Start to Build Site

• Plain HTML or
• PHP or
• XML/XSLT/Cocoon or
• CMS (WordPress, Drupal) or
• One of hundreds of other possibilities or a PHP/Ruby/other language framework
• Dependent on where you will be hosting
• Google for books/tutorials on chosen technologies

Work on Architecture

• Use flowcharts to determine content flow
• Draw up wireframes (on paper or computer)
• Determine navigation, including wording. Avoid jargon.
• Think about both casual and specialist audiences
• Aim for clarity

Design

• Read a lot about design, if it interests you, take a design or art history class or two.
• Find some designs you like (perhaps open source) and figure out why you like them.
• When in doubt, keep it simple.
• When possible, start with bare bones version of site, and build up from there.

Basic Design Principles: Simplicity

• In the beginning, may be best to use KISS design principles.
• Try an image search for “minimalist web design.”
• Simpler is often better than cluttered, let your content shine.
• Start with inside pages, then move to “splash page” if there is time.

With content as complex as this, who needs a cluttered design?

A splash page does not have to be complicated to be beautiful.

Basic Principles: Alignment

• Line things up.  This is pretty easy vertically when designing webpages.
• Pay attention to margins, padding, and borders.
• Read about how the CSS box model works to help with alignment.
• Look into grid based CSS frameworks (Like the 960 framework or twitter bootstrap) and try them out. Even if you don’t use them it is a good foundation.

The header is center aligned, while in the body boxes and text are aligned to the same margin.

Basic Principles: Color & Contrast

• Find inspiration in project materials if possible, and look at other sources.
• Look at color websites and save palettes that make you think of your project.
• Pay attention to context – colors will look different depending on where they are.
• Keep in mind colorblindness and contrast sensitivities.
• When in doubt, it’s hard to go wrong with black text and a white background and a splash of one or two other colors.

It can be fun to create palettes from images you are inspired by.

The same gray looks different on a red or blue background.

Red/Green colorblind users won’t be able to distinguish between the two colors on the left.

Basic Principles: Typography

• Choose 2-3 fonts, and use decorative fonts sparingly.
• Use open source fonts that are free to embed. (check out Google Web Fonts and Font Squirrel)
• Choose body fonts for readability, test them at varying sizes and on different computers.
• Check to make sure the fonts support the character sets you need them to – ligatures, foreign languages, etc.
• Don’t put text in images.

Questions?

I might update this post later if I get questions I forgot to address. If you have any questions, feel free to leave a comment.

I’ve been conducting some custom white balance color tests with my camera. I have been making it up as I go, and now want to reshoot al the tests with new color cards, but I thought I would go ahead and link up what I have done so far in case anyone is interested.

Here’s what I have done so far:

First, I painted up some random color cards for custom white balance tests. I didn’t really have a set idea of what colors I would paint here, except that I would do some warm (redish or yellowish) and some cool (blueish). I also used a few color cards I had inherited. My first test shots came out interesting (to me at least):

After I shot all the pictures, I used opened the raw images in lightroom and looked at the temp for each of them. As I noted in a previous post, I was surprised when I learned that two of them had the same temp (k value) but were different colors. this is because the camera also sets the tint of the photo.

So, I decided to repeat my experiment, but with some different color cards. At this point, I made a mistake – I painted up some color cards that were based on what I’d learned to be the color wheel: Red, Orange, Yellow, Green, Blue, Purple. I didn’t even do that good a job painting them – I’d have failed this assignment if it was art school. Besides each of the 6 colors, I painted a light version and a dark version of each.

I then shot a still life using the cards to set a custom white balance, under 4 different types of light:

• Cloudy Daylight: This was next to a large open window with cloudy, 3pm daylight outside.
• Alzo Daylight Bulbs: Main lighting was two 100 watt equiv bulbs (4 in room total).
• Cheap daylight lamp: I didn’t set this op up correctly, so I consider it a failure. oops.
• Incandescent: A single 60w incandescent bulb in a desk lamp.

After I shot each of these, I used lightroom to find the temp and k values of each of the photos. I also white balanced the color cards according to a white card. (I sure hope this is making sense to someone else.)

I also shot a set of photos color shifted using my camera’s white balance bracket / color shift feature, and took a photo of the screen of each of the settings. The camera was set to daylight for each of the shots, and I used the K and tint values to fake a shot for each of them by applying the camera’s readouts to a color balanced still life shot.

SO, after all that, I put together some test pages for each of the types of light where I can sort by temp or k values:

• Cloudy Daylight
• Alzo Daylight Bulbs
• Cheap Daylight Lamp
• Incandescent
• Camera Color shift
• All still lifes compared
• All color cards compared

I plan to reshoot the photos based on color cards pulled from the color shift shots, but am not sure when that will be since my free trial of lightroom ran out and I’m not going to buy it right away. (If anyone knows of a free program which will tell me the temp/tint values, let me know – The Canon camera raw software won’t, and my copy of photoshop is too old to open my camera’s raw files.)

What have I learned? Nothing definitive, but a few things I find interesting.

• The color shift pictures from the camera follow a pattern when sorted by temp and tint (this may make more sense if you look at the Camera Color shift experiment):

• I really need to rethink color if I am going to work digitally. It’s hard to unlearn/relearn everything you know about something, but I need to find a way.
• Temp seems to be a bit more consistently applied by the camera than tint, which can vary wildly.
• Using color cards seems like a quicker method of getting a desired color shift than setting a color shift in the camera, provided you already have some cards made up.
• I’m probably doing these experiments as a way to procrastinate applying principles, i.e. actually getting out there and taking photos.
• I am not really sure what to make of this all, but I am fascinated with the results.

My next step is to build a spectrograph and go back and create a graph for each of the light sources I tried (I won’t be able to get exact on the sunlight, but I hope to get close.) I am hoping this graph in addition to the photos will give me a better picture of the effect of different lights on photos. But, I fear I need to reshoot the photos with a better set of color cards first.

After a long time of not using this blog very regularly, I want to start using it again. If you have been a long time follower of my blog, my recent posts on photography may seem a little out of place compared to some of my older content. I have a couple of other blogs — space.nirak.net and art.nirak.net and I sometimes have trouble deciding what to put where.

I decided on the following basic breakdown:

nirak.net: computer/research. This is why the photography experiments have ended up here, they are sorta researchy. Anything work/digital humanities/library related will stay here, but I’m hoping to have a place at work to write about those things at some point.

art.nirak.net: Individual artworks, shown in a large format. I have not featured photographs here very often, but I plan to start if any of my shots get good enough.

space.nirak.net: Everything else, including gardening, cooking, photo dumps, and art process things (although that could be considered research, categories are hard). I may eventually collapse this blog into nirak.net, but I want to keep it as a separate experimental space for now. I’m guessing this blog will be of interest to those who know me personally, if anyone.

Feeds

I have switched all my feeds to the native feed rather than the feedburner feed. If you subscribe to the feedburner feed, you will probably keep getting posts for a while, but if you want to make sure you are getting the correct feed, it’s probably best to resubscribe. (I’m not all that sure about feedburner’s longevity.) If you are using feedburner for an email subscription, let me know and I will figure something else out.

Here they are so you don’t have to go hunting:

• nirak.net: http://nirak.net/feed/
• art.nirak.net: http://art.nirak.net/feed/
• space.nirak.net: http://space.nirak.net/feed/

I’m told all the time that no one uses feeds anymore, but I use them every day.

Design shake up

Finally, I am going to be changing up the design around here. Hopefully I won’t break things too bad.

Peter’s post got me reading my old post on  Why every Library Science student should learn programming from 2008, which is still one of my most popular. I thought it might be a nice time to reflect on whether I still think it’s true (spoiler alert: I do.)

Many of my original reasons hold true (especially being able to migrate data formats oneself) but some of them are a little… optimistic, shall we say. I don’t think that librarians should be handling the ILS backend necessarily, and I think libraries should be hiring trained programmers for much of this stuff when they can — not that there will never be any overlap. I still think programming should be written into the library school curriculum, though.

In the last 4 years, I have served on a lot of project teams with a lot of different types of people with a lot of different digital projects. Some of my favorite people to work with are the semi programmers, the ones that know enough to have done some initial exploring, but also know that to build something ready for prime time, it’s best to call in help. These people know how hard programming is, and so they tend not to be the ones who expect a turnaround time of a few hours for complicated requests. They also tend to be the ones who are best at explaining what it is they want: not only the ideal version, but the good enough version (we usually end up somewhere in the middle.)

This is one of the reasons I think librarians should take a programming class: there’s nothing like beating your head against that wall to make you realize how complex this stuff is. Add to that that it increases the chance the librarian will be able to explain things when he or she needs help: what exactly went wrong, what they think might be the problem.

The other reason I still agree with past me has little to do with whether the librarian will actually use programming in their job. I have been approached by several people over the last few years who ask me, hopefully, about library school. One of the common threads I see is some of them want a place where they can stay away from technology. Some (still!) see libraries as a last refuge for luddites. It’s not that luddites can’t have a place in libraries, but I think those places are few and getting rarer. Requiring a programming class is like requiring cataloging even of those who are positive they’ll never be catalogers: it’s a minimum standard to reach, a proof that you’re willing to at least try other ways of thinking about data and information.

To be honest, I’d like to see library school in general get harder. I would have liked it to be harder. I have a friend in library school now who is shocked and dismayed at how easy it is. For the brightest, at least in some programs, there’s very little challenge and few opportunities for growth. Programming is challenging. It forces one to see computers, and information, in a new way. Whether or not one ends up using this for a career, it shifts how one thinks about things. That, to me, is the benefit.

For instance, the color experiments from the last post were all shot in raw, and it would have been impossible to see the information on color temperature and tint without the right format. Also, it was much quicker to shoot because I didn’t have to re-set the white balance to the color of the light source before I shot every color card.

These are the images straight out of the camera. The color cards aren’t correct because they have the white balance of the card that came before.

These are the images once I adjusted the color cards to match the color of the light source. The colors now seem to be properly “opposite” one another.

Besides white balance, raw format allows you to make other changes after the fact: sharpening, saturation, and contrast. It’s fun messing with these changes to give photos a whole new look.

(The picture on the left is shot with the same white balance as the garden picture in my last post, on the right, I let Adobe Lightroom select a white balance, which looks pretty correct.)

I work in a digital humanities center in a library, so I know all about lossless image formats and why archives use them. I also really like the control raw gives me. But, for the most part, I won’t be shooting in raw for the foreseeable future, for the following reasons:

1: It’s slow. Using raw adds a lot of time to the process. Downloading, processing, everything takes a little longer. That might be because my two year old computer is somewhat old in computer years, but I’m not ready to buy something newer and faster yet.

2: I don’t actually want to spend a lot of time fiddling with my images on the computer. I spend all day at work on the computer, so I’m always looking for ways to minimise my screen time at home. What started this whole process was that I wanted to figure out to make images closer to perfect in the camera, so shooting raw so I have a safety net kind of takes away from that.

3: They take up a lot of room. A jpeg right out of the camera is 5 mp compared to 25 megs for raw. I know space is cheap, but I already have 115 GB of images and have a hard time getting everything stored and backed up. If space is an issue and you like shooting in raw and fiddling with images, you can always save to jpeg and only save the raw images that are really spectacular.

4: The software costs more. At least with canon, I don’t really like the software that comes with the camera, and lightroom, aperture, etc cost a lot. (I’m using a 30 day free trial of aperture right now.) I also find the software clunky after years of using picasa but again, slow computer. My older version of photoshop won’t even open my camera’s native raw photos (yes, even with the latest plugin.) This kind of incompatibility makes me wonder if I’d be able to open these photos in the future, as well.

5: Honestly, I just can’t tell the difference. I compare this to the fact that I can’t tell the difference between FLAC and MP3′s. I’m just not very discerning, I guess. I’ve printed jpegs out at 13×19, I’ve imported jpegs into photoshop’s raw editing program, I’ve made repeated changes, and only when zooming waaaay in on my screen do I see a difference. With 18mp pictures, you would have to print or view a picture very large to see the degradation, and given that I’m a) not a professional and b) still learning, I don’t think I will have any shots that really necessitate that.

I still might shoot in raw when I’m experimenting, need a really wide dynamic range, or shooting something really important, but chances are for now I’ll just save them right out to jpeg once I’m done processing and delete the raw images.

I was also driven by the desire to spend less time on the computer fixing things I should have gotten right when taking the picture. I may have been a little naive.

This will hopefully be a series of blog posts about what I have learned about digital photo making.

So, first up: White balance!

In film photography, white balance as such wasn’t such a big deal. You picked a film for a type of light, and then you might use a slightly warm or cool filter if the light you were shooting under didn’t match the type of film. In general, the mismatch is one of the things that gives film it’s “look.” The instagram app has a bunch of filters you can apply that are meant to mimic different camera and film pairings, and usually one of the most noticeable changes is the photo will get warmer or cooler.

I knew the basics of white balance when I started: where “daylight” was on the continuum, what was considered warm, what was considered cool. I knew the basics of color theory from art school. My first idea was I would start using the auto white balance feature of my camera for aesthetically pleasing effects. But how did it work? What was changing when I set the white balance?

My first little experiment was to take a few pictures of my garden with the reddish cedar mulch as the “white balance.”

I liked the result, so I took some more test pictures. I then hit upon the idea to make some ready made cards so I could set a custom white balance of my choice – making images look warm or cool even when the light wasn’t obliging. (This concept isn’t new, as I found out when I searched and hit upon warm cards, meant for digital filmmaking.)

So, I (badly) painted up some cards with different colors, and used them to set the white balance on a still life. At this point, I was wishing I had one of those fancy cameras that let me set the white balance by Kelvin number. (I found out later I can download a firmware called Magic Lantern to do this, but I have not been brave enough to try it on my camera yet.)

Then, I arranged all the resulting pictures by kelvin number, thinking I would get a nice gradient:

I was surprised when some of the pictures with the same kelvin numbers were completely different:

This is because the camera sets the tint as well as the temp, and there doesn’t seem to be any way to change this. A little research led me to this page where I learned that the temperature is a blue/yellow setting and the tint is a green/magenta setting. I can alter the tint in camera by using the white balance shift setting, but that just shifts it from where the camera decides it should be. So, my dreams of getting reproducible results based on setting the kelvin number were somewhat dashed.

At this point, I also started to wonder about the different types of light on my pictures. The above pictures were taken with some cheap “daylight” bulbs, but the effect wasn’t really all that close to any daylight I’d ever experienced. That research is for another post, though, as I’m waiting for some supplies to come in for my experiments.

I didn’t go to as many tech meetings this year as last, which was good and bad. I’m glad I got to go to a variety of sessions, but the few tech sessions I attended left me wanting more. This may point out that I need to go to a more tech heavy conference sometime in the future.

The State of Browser Developer Tools

Brandon Satrom, Garann Means, Joe Stagner, Mike Taylor, Paul Irish

The gist of this session was: browser developer tools have come a long way in a short while, and it is worth checking out what each browser has to offer.

Chrome: Offers a new color picker, and some subtle but nice UI changes that makes the dev tools much more useful. You can also save the CSS out to a new file. Both Firefox and chrome have very nice CSS tools in this regard, and if they come just a bit further (some auto completion, better color coding) they could make it so I don’t need to find a replacement for my long in the tooth and no longer made CSS Edit 2.

Chrome for android: Plug in via USB, run the dev tools from the device.

Firefox: When viewing a page, go to Tools -> Web Developer (different from the web developer toolbar) -> Inspect and then click on “3D” in the bottom right. It’s called “Tilt” and it made the room collectively gasp.

Opera: Offers remote device debugging and great emulators.

IE 9 & 10: let you emulate older versions of IE. (I have found this to be a tad off- I’ll use the IE7 emulator and then view the page in IE7 and they’ll be different- but it is pretty close.)

What’s coming:

Adobe Shadow: Multi device checking (Here now, will get better)

Usability for styles. HTML tidy-like features.

CSS for Grown Ups: Maturing Best Practices

Andy Hume

Web standards can become an obsession. We get ridiculous code to keep content and session separate, but managing complexity is important too. Complexity raises the barrier to entry.

We need to optimize for change. Most of all, we need to let go of the idea that we will write HTML which we will never touch again, and do everything on the CSS side. We will ALWAYS have to revamp the HTML along with the CSS.

Bullet points:

• Check out stuff like: OOCSS, SMACSS, CSS Lint – advocating a new set of best practices.
• Should have layers of CSS: Layout styles – Module styles – base styles on top of the HTML
• Come up with classes that describe the presentation. headline, subheadline, byline, etc.
• The important thing is to do what is best for your local situation, and not to hold to outdated dogma for the sake of dogma. You have to strike a balance between performance, maintainability, and readability.
• Use presentational class names and surgical layout helpers.
• Document your code in code, NOT a PDF! Twitter bootstrap is a good example of this.
• Write a complete style guide. Use it consistently for your organization. Include interaction.
• Think in terms of modules, not pages. Have a style module library.

Creating Responsive HTML5 Touch Interfaces

Stephen Woods

Switching to thinking about devices rather than interfaces is hard. Interfaces should feel good in addition to looking good.

Some advice:

• Prioritize user feedback.
• Use hardware acceleration
• manage memory – devices are always low on memory
• Do not load during gestures – hold it till the end
• Treat the DOM as write only, do your own math. “If you just do the math, you’ll be happier in the long run.”
• Use matrix transforms.
• Use CSS transitions. Use transitions with easing to snap back, good enough in most cases.
• Feature detect and add as devices support. Disable things per user agent.
• Simulators and emulators are basically useless.
• Div’s with background images load quicker than embedded images. It’s not semantically correct, but it’s OK.

Frustrating limitations:

• The retina screen is huge, device memory is small
• Hardware acceleration is a crash festival.
• You are always finding devices that want to “optimize” your carefully designed sites.

The Right Tool for the Job: Native or Mobile Web?

Buzz Andersen, Jacob Bijani, Majd Taby, Matthew Delaney, Tom Dale

Software, a brief history: Web browsers ushered in a dramatic abstraction in computing. “The web browser is one of humanities’ greatest achievements.” Javascript is the word’s most popular programming language.

The age of apps: A return to the native, device centric programming we had before. For the first time since netscape, native dev is leading the way. Foursquare/square/instagram -> native first!

Native Cons:

• Networking
• Linking/ cross platform distribution
• Rich text – browsers handle it much better
• Layout
• Caching
• Fast is difficult
• You lose all the “free stuff” you get with browser abstraction
• When dealing with ios, have to deal with apple: “Apple has started asking ‘What’s better for apple’ instead of ‘what’s better for the user.’”
• Multi device is hard
• App stores are horrible places to actually find anything

Native Pros:

• More direct influence
• More primitives are available to you
• Monetization (maybe)
• Access to hardware – may be necessary, depending on app
• Faster when done right
• Good Documentation (sometimes)

Stuff to keep in mind

• Got to rng.io to see your devices capabilities.
• Check out the Financial Times (on your device) for a web HTML5 app that does it right. (Or switch user agent to fake it)
• If you build a hybrid native/mobile app, you have to work extra hard to make sure they stay in sync/don’t contradict each other
• Avoid creating an app just so you can say “we have an iPhone app!”
• Avoid “The uncanny valley of web apps” – don’t try to emulate the native look on mobile apps. Emulating native UI is a moving target and rarely worth it.

In the US, when someone creates something in fixed form it is copyrighted. You don’t have to apply for a copyright or add the copyright symbol. So pretty much anything you see that anyone has created is copyrighted. This can make it hard to find things to use for educational purposes – as we are often on low to no budgets.

Fair use is one way to use things, and a good one, but it can be complicated and still risks getting slapped with a cease and desist order. Creative Commons is another way.

What is Creative Commons?

Creative Commons is a way for people to license their work for use that is in between full copyright (which is completely restricted) and public domain (where anyone can use the work for anything with no limitations.)

Owning the copyright gives you full right to display, perform, or duplicate a work in any form, or to grant others those rights. Creative Commons gives the owner of the copyright a way to preemptively transfer some of those rights to others, while maintaining full copyright for themselves.

There are several options when it comes to Creative Commons:

Attribution

“This license lets others distribute, remix, tweak, and build upon your work, even commercially, as long as they credit you for the original creation.”

Attribution is found in all the Creative Commons licenses.

ShareAlike

“This license lets others remix, tweak, and build upon your work even for commercial purposes, as long as they credit you and license their new creations under the identical terms.”

No Derivatives

“This license allows for redistribution, commercial and non-commercial, as long as it is passed along unchanged and in whole, with credit to you.”

Non Commercial

“This license lets others remix, tweak, and build upon your work non-commercially.”

The licenses

By mixing the options mentions, you get these licenses, from the most lenient, attribution, to the most strict, Attribution-NonCommercial-NoDerivitives.

What about Public Domain?

You can also assign your work to the public domain on the creative commons website, which means you relinquish all claim of copyright to it. This is called CC0.

Can I take it back?

Creative commons licenses are irrevocable. You may later take the work down if hosted on the web, but anyone who has already downloaded it has the rights you granted them.

Why Creative Commons?

Copyright is now set at life of the creator plus 70 years, which means we will never see most things created today come into the public domain. Creative Commons gives an option to creators to share their work before that time, and for users to find, use, and remix more recent work.

Fair use can be a little hard to interpret and apply, and you could always run into a situation where you and the creator of the work don’t agree on what’s “fair” and end up in court. Creative Commons is a bit more straightforward, provided you follow the rules of the license.

Creative Commons is also useful for work that might get redistributed outside an educational setting. As long as you are careful about what license you pick, you can go ahead and reuse that presentation image in a book, without having to renegotiate rights or rethink fair use because the use is now commercial (Assuming you stick to licenses that allow commercial use.)

Creative Commons is also a great way to teach about copyright – by looking over each license and understanding what one is giving away, one can more fully understand the reach of copyright. Creative Commons is a great way to work multimedia in the classroom without having to skirt around the copyright issue or have students produce material they won’t be able to use later.

How to use it?

To find creative commons media, just head to http://search.creativecommons.org/ and search. This will give you several options to get started.

Many other sites incorporate creative commons into their search as well:

• Comp Fight, a flickr search engine, lets you search hundreds of Creative Commons Licensed images in seconds.
• Vimeo just introduced a creative commons licensing scheme and search for their redesigned website.
• CC Mixter is a great place to find Creative Commons licensed music.
• You can find a pretty extensive list on The Creative Commons Wiki.
• Google’s advanced search lets you search Creative Commons licensed content in addition to public domain content.

After you have found the media, you just have to follow the license terms. So if the work is No Derivatives, you can’t chop it up and make something new out of it. If you stuck to an attribution only license, all you have to do is slap a URL or name on there (Some people tell you how they want to be cited on the photo page or their profile page – if not, a URL is usually sufficient.)

Huh?

Here are some examples of how I have used creative commons work at work and home.

Video

Having soundtracks for videos are nice, but it’s a big no no to use a copyrighted work. Luckily, you can find lots of free music. I backed this video with a track from CC Mixter.

Presentations

Creative Commons photos are great for illustrating points in presentations. When you are giving the presentation it may not seem too important, after all, you are just going to give the presentation to a set group of people one time. But by using creative commons photos, you can reuse your presentation in different contexts, or you could post your slides online.

Pictures are way more fun to look at than words.

Website Illustrations

For our Quills and Feathers website, we needed some pictures and sounds of birds. Luckily, there are websites that could provide both.

License your own stuff!

The CDRH has used Creative Commons licenses on at least three of our websites: The Whitman Archive, The William F. Cody Archive, and Civil War Washington. This license covers the content we created (the essays and such), but not always the content, as much of that is already public domain, or is owned by other institutions. We make sure to note when the content is from somewhere else. We license our content as Creative Commons because the public helped fund the resources

As for myself, I try to license much of what I do under creative commons. I scan my artwork at high resolutions and put it on Flickr Under a CC By: license, I license my videos under Creative commons on Vimeo and allow downloading.

Two of my most popular Creative Commons licensed images are: a picture of an empty podium I created when I could not find a similar picture, and a picture of some clouds, which is usually used for “cloud computing” articles.

I license my pictures as creative commons because I think it’s neat that people find and use my images for things. Besides illustrating blog posts, people have told me they’ve put my images in books, videos, used them in presentations, and used them for school projects.

Challenges

Finding Creative Commons material used to be my biggest challenge, but that isn’t very hard anymore. Pictures of almost anything are easy to find, and sound and video are increasingly easier to find as well.

I find the biggest problems now are keeping track of the licenses of all the creative commons work you have used, along with the contact information, URL’s, etc. I usually stick to including the web address where I found the work, because it’s easy and fairly straightforward. But I have come across images I know are creative commons and want to use again, but can’t find the source. As with a lot of things, good record keeping is essential. A page of credits at the end of works, a spreadsheet, however you need to track it.

I have not come across any significant challenges in licensing my own work. My images have been used a few times for blog posts I definitely do not agree with, but I can live with that. I have come across a few examples of people taking my images without attributing me, but that would happen with or without creative commons.

One final problem I have come across is the Share alike creative commons license may clash in certain educational contexts. See Noncommercial Isn’t the Problem, ShareAlike Is for more information.

The design sessions, along with the tech sessions, energized me as to the possibilities of design and made me excited to try new things in this area.

Design from the Gut: Dangerous or Differentiator?

Jane Leibrock, Laurel Hechanova, Naz Hamid, Phil Coffman, William Couch

The bulk of this session was summed up in the very first question tweet that came in:

“Is “intuition” in fact a result of accumulated life experience, which is essentially both intentional and unintentional research?” -@justinc

In short: yup.

It was interesting hearing that designers at big startups with a lot of money still do a lot of gut designing. It would have been interesting to get someone from, say, Google on the panel, since they are known for testing every choice rather than doing much “gut” designing. I think this is changing, though, as Google Plus launched with some features that don’t seem so obsessively tested as many Google products (like the drag and drop circle organization.)

From the session:

• “gut” is a weird term. An experienced designer’s gut is different, and going to make different (presumably better) decisions than a newbie.
• You could also call this experienced based design.
• While usability testing is great, it is not always economically feasible. A support network is invaluable.
• Networks are great, but “don’t get feedback from the choir.” Find people outside your usual circle, outside your company.
• The client doesn’t really care about research or gut designing – you have to make the best decisions and then sell your design, whatever way you do it.

Getting Good: Practical Tips for New Designers

Allison Wagner, Yesenia Perez-Cruz

The advice:

• Write it down
• Keep inspirations
  • Use a tagging system. Pinterest can be good for this, or any system that can tag/organize pictures into albums (like Picasa desktop).
  • Diversify your inspiration. Find things everywhere, record it.
• Streamline your workflow
  • Use text expansion, keyboard shortcuts
  • Be efficient
  • Streamline with apps – find ones that work well with each other, your OS, and your process.
  • Check out The Setup to see what other professionals use.
  • I didn’t hear this mentioned in the session, but I think it is important to walk a line between streamlining your process and actually working on things. It is easy to get stuck in a loop where all you are doing is consuming productivity porn and not doing any actual work. Also: It is worth paying for good tools that will save you time.
• Be aware of the creative gap. “For the first couple years you make stuff, and it’s just not that good. It’s trying to be good, it has potential, but it’s not. … But your taste, the thing that got you into the game, is still killer. And your taste is why your work disappoints you.” -Ira Glass
  • Keep the stuff you make so you can track your improvement.
  • Or delete and focus on the future.
  • Sometimes stuff isn’t as good as you would like: you’re just not there yet in terms of skill, you have to make compromises due to client demand. You don’t have to put this stuff in your portfolio, just finish it and move on.
• Work rough in the beginning.
• Ask for feedback
  • Find people who will give honest feedback, and foster it in your organization.
  • I think it is important to let people know your feelings won’t be hurt if they don’t like something. This seems to be a design specific problem, people just don’t like giving honest feedback on design.
• Use style tiles to present design elements separate from the structure, especially in web/interactive design. This can be a way to get feedback from reluctant clients.
• Find the time and motivation to keep learning.
  • Techniques like timeboxing may help.
  • Find resources to help your keep up on tech, such as Think Vitamin’s Treehouse.
  • Teach your skills to someone else, it helps you internalize.
  • Find places with good articles, or follow trusted content aggregators.
  • View source!
  • Partner with someone and give each other assignments

Making eBooks Smarter: Responsive Page Design

Peter Meyers

Like the above, this session was a “core conversation,” Which means the presenters acted as moderators to spark discussion and gather advice from the audience. The moderator was especially good, and the discussion was energetic and inspiring. I classified this session under design because of the thoughts it inspired in me: we work with a lot of book like content at work (including many actual books) and this session made me think of ways to present that content in new ways. I hope to start a project or two soon that will make use of these ideas.

The moderator, Peter Meyers, started off with three scenarios to think about – I think of them as personas:

1. User is reading The Great Gatsby and wants to go back to where Daisy’s character is first introduced. Not where she was first mentioned, but where she is first described.
2. User wants to browse the book The Power of Habit in a half hour.
3. User has a travel book on Brazil, but is not going during Carnival, so doesn’t need that part.

Paper books don’t handle these things well, but right now ebooks are only marginally better. If we can solve these problems, the digital book becomes more valuable than the paper book.

Ways to make ebooks better:

Comprehension: Help the user, include dictionaries, but go beyond. There may be some things specific to a book not available in a generic dictionary.

Memory: Help the user answer the question “Who is Edith?” Especially useful when a work is not consumed all at once.

Interpretation: Some users might need help with interpretation. Cliff notes were designed, at least in part, with comprehension in mind. Example: Bret Victor’s design for Al Gore’s Our Choice ebook. Examples could be interacted with, values changed, which helped interpretation. Also see Bret Victor’s website, worrydream.org.

Time constraints: (mostly for non-fiction) Could we have accordion like content, small, medium and large versions for the user dependent on time and interest?

Relevance: (mostly for non-fiction) Example: How to Cook Everything app, could the user constrain entries to only options that reflect what they have in the cupboard, or exclude certain ingredients?

Discovery: How to help users discover new media and new things about the media they are using? This is where the social element could come in.

At his point, Peter opened up the discussion to the group at large.

We talked about social integration in ebooks and imagined how it might be integrated into a book. There was no consensus, but some of the ideas were to include existing networks as the basis, to include emotional annotation, to change the “lens” the social content the content could be seen through depending on the type of user. Examples included:

• Wreck This Book app – the app becomes a personal object, no longer only by the author. Social in this case means including the reader as well as the author.
• BOLD – how to be brave in business and win ipad app – the user answers a quiz, and the book adjusts itself.

Managing user content continues to be a problem. Adding a social layer could help by only showing content by trusted sources, or giving preference to that content. Moderation will still probably be needed for public content, which can slow down this implementation with orgs (like us!) that don’t have a person to handle ongoing moderation. In the end, the best way to handle might be to allow others to have conversations elsewhere, which is enabled by linking. (More on that when I type up my tech notes).

Extra content should have a way to toggle off, so as not to distract the reader. Ebooks are different from the web, and it is important to keep a pure reading experience. One way to do this is to layer content, and make the layers toggle. Epub3 with HTML5 should introduce lots of exciting opportunities to do this.

Examples of enhanced content ebooks:

• Alice in wonderland
• The Hobbit
• Inkling textbooks- include things like quizzes to test comprehension.
  • Note: When I looked this up later, I was excited to see the ebook Living with Art until I saw the price – $100 for an ipad only ebook. I would love to have content like this for art, why is it always so expensive?

One of the questions was: how much extra content is too much? My feeling is that if the design is right, you can include an almost endless amount of extra content. The question, is, how many users will access all that extra content? Enhancements for ebooks is a small market, not many people are willing to pay extra. In a non profit sector, price isn’t an object, but spending lots of time on enhanced content only of interest to a few may not be the best use of always scant resources.

One more example:

• Welcome to Pine Point – an interactive web book.

This session left me most excited with the possibilities of providing free, downloadable ebooks of scholarly content. the question now is: how? and in what format? More on that when I write up my tech notes…