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…

• #sxswLAM = Librar* + Archiv* + Museum* facebook group
• Librarians Swarm Austin! A Handy SXSW Interactive Primer – Naomi House
• Temporary autonomous librarian zone – SXSWLAM recap – Jessamyn West
• Rowdy Librarians at SxSWi Days One Two Three Four – Paul Vinelli
• Photos by Mona T. Brooks Photography (on facebook, sorry if it requires login)
• SXSW: The Fate of Libraries – Article on Carson Block’s presentation at time.com

I am afraid I am not a very good rowdy librarian. Or a rowdy anything, really. But I did really enjoy seeing and talking with fellow librarians, all of whom had fascinating job titles.

In terms of the talks and discussions, there was more of an emphasis on the librarian or archivist than the library or archive at SXSW. Some of the librarians were free agents, freelancing for libraries or corporations. Some of them were the sole tech person at their library. All of them were smart and passionate about technology. I thought of my fellow librarians when listening to Jennifer Pahlka’s keynote “Coding the Next Chapter of American History”. She implored all of us to be good citizens, and I think librarians already do this, and are always eager to do more – either inside or outside a library.

SXSW has a lot of social justice/social good sessions, but I think they can tend to get lost in the constant talk of monetization. The librarian/archivist presence at SXSW helps to remind people that there are other important things besides finding investors.

Sessions:

LIS Meetup

This wasn’t an actual session that was on the schedule, and I only heard about it on twitter. There was a SXSWLam (librar* + archiv* + museum*) facebook group, but since I am seldom on facebook, I missed it. The meetup was great, and was a fantastic way to kick off the conference. The talk was lead by Lisa Carlucci Thomas, and was mostly about why we were at SXSW, what we hoped to get out of it, and what we could do to make the conference successful.

I’m just going to list some of the responses I found interesting, and sorry I wasn’t great about noting who said what. This session was recorded, though, and will be the basis of a future article by Lisa Carlucci Thomas.

Librarians come to SXSW to:

• Try and branch out.
• To develop a brand strategy, and to learn about best practices for doing so.
  • Parts of our brand: content/access, curating information. Not necessarily books.
• To keep up with what we should be doing to support entrepreneurs by talking to them. They are important parts of our communities.
  • Some entrepreneurs may rightly ask what we can do, and one of them is to assist in the upward mobility of the community, which will enable more people to buy their product. We are in it for the long game.
  • A core message talked about was “We care about your success.” That goes for everyone in the community.
• To ask everyone: How would you like to use your local library?

Making Stories: Libraries & Community Publishing #libstory

Nate Hill, Char Booth, Amy Buckland, and Michael Porter

This is a particularly interesting topic for me, since what I am mostly involved in is publishing content. The idea of libraries as publisher seems to be gaining traction, and it will be exciting to see what new directions librarians take it.

You can view the slides for this presentation on slideshare (ps, all the presenters had awesome slides, highly recommended. Also the audio is already up @ the SXSW site, so you can follow along).

Again, some brief notes, because I am not the best note taker:

Nate Hill presented on a fascinating use case of helping local authors find an audience by not only adding their books to the library catalog, but adding them while they are in progress and enabling the community at large to participate in the creation. I love this idea, but wonder if smaller communities would have the critical mass to allow this kind of matchup between content creator/consumer.

He also talked about a concept library lab, which would enable community to publish multimedia works in the library.

MIchael Porter at libraryrenewal.org talked about the need for libraries to create new, practical solutions for their patrons’ increasingly digital lifestyles.

Char Booth talked about how student publications tend to get lost, and remain invisible – leading students to create work they don’t really care about. “Scholarship is public, but student work isn’t.” She laid out efforts to get student work published so that they can point to and be proud of their work.

The first way to do that is to encourage students to deposit their work in an institutional repository, and to help them get their work ready to publish. The goal is to get them to create work good enough that they are excited about sharing it. Another way was to teach them how to write for wikipedia.

Amy Buckland showed some examples of how libraries are taking over the functions newspapers provided in small communities by providing community workshops on writing, photography, and publishing. Ideally, libraries can finish this off by having an espresso book machine to publish community member’s work, but that may be out of reach of some libraries. (One of the questions from the audience addressed this by saying there are businesses that can do printing on a case by case basis, lowering the initial cost to the library.)

Another example Amy gave was libraries helping community members publish histories of their communities, and partnering with local design students to make it look professional.

The Great Library Swindle: Your Rights Are at Risk #libswin

Carson Block

A presentation on the continuing importance of libraries.

Libraries are in trouble because their old brand – books – isn’t going to work as well anymore. An ebook is not a book, and in the world of the digital, libraries lose the first sale rights that have enabled them to provide this kind of content. They are left to take what content aggregators give them, or to try to negotiate their own deals with publishers.

Meanwhile, the content superstores (amazon, apple) are squeezing us out. They don’t consider the library a worthwhile market.

Brian pointed to what smart people say about libraries:

Brian Cooley from Cnet saying “Libraries are for the very old and the very unemployed.” (I was left wondering, what’s so bad about that? Should these people just get ignored… more than they already are?)

Bill Maher saying “We have the Internet. We don’t need a library at all.”

We obviously have a problem with public perception.

Carson then went over some of the things that are at stake:

• Libraries hold on to information that would be lost otherwise, like beer recipes.
• Public good! This is the big one for me. I don’t mind my taxes paying for food stamps for people who can’t afford food, or the library to meet the information needs of those that can’t afford constant amazon/apple purchases.
• “The public library is the great equalizer.” -Keith Richards

Why are libraries important?

• They care about your confidentiality.
• Librarians are trusted
• Librarians like to help people
• Libraries are a community anchor and a quality of life indicator.
• Librarians care about your success.

What is our brand? (Hint: not books)

• Access
• Physical and virtual connection

Preserving the Creative Culture of the Web #digiprsrv

Jason Scott, Kari Kraus, Nick Hasty

Nick Hasty presented about how Rhizome Art Base, hosted in the New Museum, preserves internet works of art. A couple of examples:

• Lev Manovich, Little Movies
• Petra Cortright VVEBCAM

Rhizome seeks artists’ permission to include their work. Some artists have said no, citing that impermanence is a part of the work.

Can only preserve things to a point, the medium (in VVEBCAM’s case, youtube) and even the deletion is part of the artwork.

Kari Kraus talked about her work on researching how to preserve virtual worlds.

Kari, like Nick, stressed that everything cannot be preserved. We don’t for instance, have access to the source code in most cases. The purpose of her research is to determine the salient interactions in games and save these.

Check out the Preserving Virtual Worlds Final Report for more.

Jason Scott describes himself as a “rogue archivist” and champions what he calls “Curatorial Activists,” people who archive first and ask questions later. You can find many of them at archiveteam.org

One project was a massive effort to archive Geocities once yahoo announced it was shutting it down. We should save it because it is a 15 year anthropological study. They archived as much as they could and released it as a torrent on the pirate bay.

Jason implored webapp creators to add an export function as soon as you add an import function – if your service is good, it won’t matter. Think about shut down.

As for users, think of where you put your data and what will happen if that company goes away or decides to deny you access. “Facebook is a very sociopathic company.”

Questions

? – What about the right to be forgotten?

Answer from panelist – We often think of archivists as saving everything, but part of their job is deaccessioning.

My thoughts on this is that we live in a society, and in so living we create things and converse with others. If you want to keep things totally out of the hands of others, you will have to burn everything you create and not talk to other people. But we are human, and what we say, do, and create becomes part of the whole. You can’t ever fully control what becomes of your past self.

I had a great time at SXSW. I learned a lot. I got to visit family while in Austin, and I didn’t really party much at all – a fact I appreciated when I got back. Instead of feeling sleep deprived and zombie like, I came back full of ideas an inspiration.

I’ve finally given in to the fact that I just can’t get by on no sleep and still be a functioning human being.

I am dividing the presentations I attended into the following categories for my blog posts, and am going to be more selective about what I post. SXSW posts the audio of all the sessions online, so if it is not up yet, look for it later.

Libraries and Archives (4 sessions):

• LIS Meetup (informal, no schedule entry)
• Making Stories: Libraries & Community Publishing – Nate Hill, Char Booth, Amy Buckland, and Michael Porter
• The Great Library Swindle: Your Rights Are at Risk – Carson Block
• Preserving the Creative Culture of the Web – Jason Scott, Kari Kraus, Nick Hasty

Design (3 sessions):

• Design from the Gut: Dangerous or Differentiator? – Jane Leibrock, Laurel Hechanova, Naz Hamid, Phil Coffman, William Couch
• Getting Good: Practical Tips for New Designers – Allison Wagner, Yesenia Perez-Cruz
• Making eBooks Smarter: Responsive Page Design – Peter Meyers

Technology (4 sessions):

• The State of Browser Developer Tools – Brandon Satrom, Garann Means, Joe Stagner, Mike Taylor, Paul Irish
• CSS for Grown Ups: Maturing Best Practices – Andy Hume
• Creating Responsive HTML5 Touch Interfaces – Stephen Woods
• The Right Tool for the Job: Native or Mobile Web? – Buzz Andersen, Jacob Bijani, Majd Taby, Matthew Delaney, Tom Dale

Storytelling/Art (4 sessions):

• Mother Goose Got Punked: Next Gen Visual Stories – Aaron Bramley, Ben Henretig, Cara Jones, Kivi Leroux Miller, Nancy Farese
• Maps of Time: Data As Narrative – Alex Graul, Burt Herman, Drew Harry, Jenn Thom, Nicola Hughes
• Performance and Technology: Keeping Arts Alive – Alyce Myatt, Asa Kalama, Beth Burns, Conor Roche, Robert Matney
• Birth of Interactive Entertainment: Avatar to Björk – Scott Snibbe

Other (3 sessions):

• Big Data: Privacy Threat or Business Model? – Declan Mccullagh, Jay Stanley, Lillie Coney, Molly Wood, Will DeVries
• Juggalos: Rabid Branding, a Case Study – Jenny Benevento
• Coding the Next Chapter of American History – Jennifer Pahlka

More to come soon!

CSSEdit 2, though, has been feeling a little old and tired lately.  Though the backbone of the rendering engine in CSSEdit is recent enough (webkit code) that it displays CSS3, the visual editors don’t support CSS3. Visual editors for some CSS3 features (like gradients) would be super helpful. So, I decided to take a look at Espresso 2, MacRabbit’s new offering, which they claim has “CSSEdit 3″ built right in.

For reference, here are some pictures of the CSSEdit 2 and Espresso. Notice I don’t have both the code inspector and the color picker open in Espresso – because you literally con’t have both open at the same time!

CSSEdit 2:

Espresso:

If you are used to CSSEdit 2, there will be a few frustrations:

Now you HAVE to override the CSS file if you want to edit it in a separate window (unless I am missing something?). This kind of negates the “wow, I can see my changes as I type!” functionality that made CSSEdit such a revolution for me. This is easily solved by pasting the CSS into your main file when you are done, but slightly annoying.

Some of the buttons have moved around, which slows down the workflow at first.

The inspector disappears when you click in to edit the CSS. It appears that now you are supposed to double click the element to get the inspector?

Some things are maddeningly missing:

There’s a new, low powered color picker rather than the default OSX one, and you can’t switch back to the OSX color picker! This is a deal breaker for me, since most of what I use CSSEdit for is playing with colors and I have a bunch of plug ins that make that easier in the OSX color picker. There’s not even a color wheel in the espresso color picker. And, it always appears in the same part of the screen, you can’t reposition it somewhere more convenient. All in all, a big lose.

Old color picker (4 of the screens, anyway):

new color picker:

They took out the handy code cleanup feature. Why?

Some basic CSS3 things just are not there in the visual editor – like rounded corners.

Some things, however, are great

The CSS3 features that are not missing are elegantly implemented. Creating a multi step gradient is easy peasy, except for the horrible color picker getting in the way.

The layout changes to the visual editor make a lot of sense, and there’s a lot less clicking between palettes. Most of the stuff I need the visual editor for happen to be in the same tab.

Final thoughts

I have not evaluated Espresso for coding much. I currently use oXygen, because most of my code is XML/XSL and oXygen handles formatting far better than anything else I have tried.

CSSEdit 2 was one of those perfect mac apps that did one thing and did it well. I’m happy I purchased a copy before they stopped selling it. At $80, Espresso would be totally worth buying for just the CSS editing capabilities – IF they can fix a few minor annoyances, like the color picker. For people that code in more popular frameworks/languages, Espresso might be just fine as an editor, but in my experience, the text editor itch has already been scratched by most OSX coders.

I’ll be sticking with CSSEdit 2 for now, but keeping an eye on developments, and I will buy Espresso if they decide to fix the color picker/missing CSS3 attributes/ disappearing inspector issues. I continue to be disappointed that I can’t just buy a copy of CSSEdit 3.

I did my first shift yesterday, what follows are some brief observations on the types of questions I answered:

• I helped a community user scan a bunch of stuff into PDF. Luckily, I attended a session on this just the week before, since every scanner and associated software is different.
• I tried to help a user print a PDF 6 per sheet. I didn’t really succeed here, because although I did figure out the 6 per sheet and duplexing functions, I couldn’t get it oriented the way the patron wanted. Frustratingly, there was no way to preview your print, so the only way to test it was to actually print out the pages, which the user had to pay for. I need to check out the printer functions a bit more in depth.
• I directed a girl to the public library (and told her what she’d need for a card) to find some audio books to listen to during an evening job. Learned that our library doesn’t carry audio books. Also, used Tina Fey’s “Bossy Pants” as my illustrative audio book when demonstrating the pub lib’s search, and explained that she could place a hold on items to get them transferred to the downtown branch. I may have nerded out a bit here.
• Helped a woman over the phone who was mistakenly told by a department secretary that she should have access to our online resources when she didn’t. Had to ask my desk partner about this one, who knew all the ins and outs of who would have access and who would not.
• Helped a woman use worldcat to find the correct edition of a book she was looking for, which she then submitted as an ILL order.
• Helped two students look up their textbooks in the catalog. In general, we don’t carry them, but I did find one. I told them to check the public library too. (A side note, I was able to get away with this a lot in library school, but only because the books I needed weren’t your traditional change every two year text books, but rather specific books written once on a topic.)
• I answered a few questions that, looking back, I should have done more explanation of how I did it (go to this page, click here, etc) rather than just handing them the information. Something to work on next time.
• Learned not to schedule a meeting for directly after my reference shift. I was in the middle of helping someone when the shift ended, and was late for the meeting.

All in all, I had a pretty good time, despite being pretty nervous (“what if I don’t know the answer to any of the questions???”). It brought to mind the best of my retail days, when I felt I was helping people out, with the added bonus of not being chastised for not “upselling” a product.

This week was a weird one- I had very few meetings and could concentrate mostly on one project. Of course, I could do that because I’ve spent the last two weeks squaring other things away so that I could concentrate on one thing this week. It has taken me a while to realize it, but I get so much more done when I can work on the same thing from hour to hour and from day to day. Interruptions happen, but I have begun to minimize them as best I can.

Monday I spent a bit of time working on email and doing hours. Since I have to report my time for various grants I am written into and I’m often not all that clear on which projects I’ll end up having to report my time on, I just go ahead and try to keep track of my time for everything. This has the advantage of being able to generate neat graphs about where I spent my time. The disadvantage is, it takes a lot of time. I met with the director of the Center, who updated me on what was discussed at the on site meeting in Cody, Wyoming she and a few co-workers went to the previous week. We set another meeting for the next day to talk about it in more detail.

Then I got started on my main task for the week: designing the search for the Cody Archive (the aforementioned BIG PROJECT). Designing the search consists of: deciding what will be searched (this has been determined over several weeks of back and forth with the rest of the team) making sure the TEI encoding can support the search they want (which is why I like being in on the TEI early in the development of the project), actually designing the form people will use, designing the results people will see, and doing a bunch of XSL work to get the indexing in SOLR correct. Also some other things. It’s a big time commitment, but a beautiful search is a joy to behold.

I was pretty sure I understood what they wanted to be able to search, so I hustled and redesigned my existing try into one that would: have a basic and advanced search, include more categories, and be more thoughtfully laid out. Most of the work I did Monday was scribbling ideas on pieces of paper and doing research in the form of looking at other digital libraries/archives and using their advanced search. I do this pretty much every time I do a search, because things change, and different features look good in different contexts.

Tuesday, I first wrote the new HTML for the form, as well as a bit of javascript so the basic and advanced forms would be accessible via tabs and we can have nifty auto completing forms for the people and places (thanks to the magic of jQuery UI, this was a snap). Then, I did the CSS. When I get to spend a day or two doing pure HTML/CSS/Javascript work, I am a happy camper. (Note: I have not begun cross browser testing yet.)

I got the form mostly designed by our meeting at two, where I clarified a few details with other team members and asked their advice on a couple of things. After the meeting I consulted with our Metadata Encoding Specialist about the TEI, and met with the programmer. I’ll be handing off the search implementation off to the programmer, so I wanted to make sure it was all understandable. I may have also bugged the project manager a few times for his opinion.

I finished up the CSS for the search form Tuesday afternoon. I still might have a kink or two to work out, but I think it is pretty elegant and usable.

Wednesday, I worked on designing the search results page. First, I mocked up the page in HTML using dummy data. I knew they wanted to include thumbnails of images associated with items (covers of books, scans of newspaper articles, pics of letters), but some items won’t have any images associated with them. I worked on a few versions that showed the images when they were there and nothing when they weren’t, and didn’t like it because the results, to me at least, were hard to scan. So, I created some placeholder icons to be used when the item doesn’t have an image. I only created 5 as a sample, but it took a little bit (2 ish hours) because I was hunting down images and then making the icons so they didn’t just look like another item image. If that even makes sense. Oh, I also created the thumbnails themselves. Anyway, I’m pretty happy with the finished result, but will wait until I hear what the rest of the group thinks before I become too attached.

After writing the HTML I got to – wheeeee – write more CSS! There’s some back and forth in this process… write some base CSS to hold things in place, adjust the HTML as needed, write some more CSS, adjust the HTML as needed, etc. This is why I like doing mockups in CSS/HTML rather than either asking the programmer to do the HTML first and then I style it, or mocking something up in photoshop, which is just… ick to me anymore. When I do the HTML and CSS upfront, it’s a pretty quick job. This way, I know exactly the form the HTML should take, and therefore the programmer will know too. Hopefully.

This process takes most of the day Wed, but I also have a meeting about another project of ours where we try to figure out the quickest way to get around a problem we have been having, and answer a bunch of email.

Thursday I finish up the search form and the results page (just small details) and then get them all working, commit my changes to the SVN repo, update the working site to reflect the changes, send an email for people to take a look. I make printouts of the search and results pages, and my original idea is to hand the programmer notes as to which part of the TEI or Dublin Core should power each of the search fields and the bits and pieces of the results, then I realize it will take much less time if I just write the XSL that will write the XML for the SOLR indexer myself. So I do. This is quite enjoyable as well – it’s the easy part of XSLT, where I can just kind of examine documents and pluck bits and pieces to be indexed. Examples of things we’re pulling out – people, places, keywords, topics, author, type, category, date, figure ID (to show the thumbnail) and a bunch of other stuff I am forgetting. I consult with the metadata person again a few times to make sure I’ll be pulling the correct parts of the TEI. The images are encoded in Dublin Core XML, exported for the most part from content DM, so I write the part to grab that metadata too.

I commit my new XSL, and write up an email explaining what I did to the programmer, and I hope it made sense.

Whew. That was a lot of acronyms.

Friday (today) I planned to work on typography for the site (it needs some polish) but then I was hit with death pains of doom Thursday night and stayed home Friday, mostly curled on the couch. Called my Dr., who said to go to urgent care if it continued. Around three I felt a little better, so decided to write this thing up. Since I still feel crappy, won’t be going out, so I might just work on typography tonight. Wild Friday Night!

Anyway, don’t expect too much of this post, it’s mostly a list of unorganized notes.

Wibbly-Wobbly

Project management is outside the scope of what I am talking about here, this is just an impression of what it’s like inside the project.

I like things to have structure. I like knowing a project’s beginning, middle, and end. I like knowing the objectives. I like being involved from the beginning if I’m going to be involved. I like the person responsible for content to be able to articulate their expectations in regards to design. I like knowing who the audience of a project.

The reality for some of the projects we do is: none of this applies. Sometimes, with research, what you start with is not what you end up with, and the design may have to change dramatically from the beginning to the end to accommodate the changes. Sometimes everything is really well planned out, but something (a new team member, a new funding source, revelations which come up during research) changes it. These conditions are sometimes a little stressful for me, but truthfully, they’re also what make me love my job. How boring would it be if people just handed me specs and I handed them back a design, fully formed?

The main thing to keep in mind about the beginning, and indeed the whole process is: it is iterative, not linear. Once you figure this out, it’s a lot easier to accept the changes that inevitably come up. “Designing a site” doesn’t mean creating a design, it’s creating a series of designs and constantly making revisions. Design is a consensus building activity. That does not mean that it is the designer’s job to passively accept any design requests everyone makes. That way lies madness and really boring or inconsistent design. The designer’s job is to listen to ideas and the try to reach a compromise while arguing against bad ideas (in a gracious, collaborative way) where necessary.

Jeremy Boggs advises:

“Before you even write a line of code or color a pixel, the project team should define the information architecture of a site. A lot of people fail to realize that the organization of content greatly affects the design and development of a site.”

I think this is absolutely true, and at the same time, it never seems to work out this way for me. The reason I start designing sometimes before logic says I should is because it gets people talking.

Designs enable conversations

I used to always try and get a bunch of information up front before I started on a design. Sometimes my part still comes at the end, when all the materials are together. But I prefer when I am involved in the beginning. I can take a crack at a design, show it to the group, we can talk about the relative merits of the design. Through these conversations I not only get an idea of what people have in mind for the design, but what they have in mind for the site itself. The act of viewing what a completed website could look like gets people to start seeing the project in more concrete terms, and I start hearing about what features they’d like. This is especially true, I think, of scholars who are working on their first digital project.

Designing this way is scary. You run a much greater chance of getting shot down, because you are making wild guesses about what the design should be. At this point, if I am not sure what the site should look like, I keep the elements purposefully “sketchy” or just stick with wireframing and make sure people know that this is a first stab and they are completely free to hate it. Telling myself that it’s a first draft is even more important, because it lets me take criticism with a very large grain of salt.

Sometimes you need a design early on for publicity purposes. Sometimes you need it to get people talking. Sometimes it does not make sense to work on a design in the beginning, and you can leave it to the end. This is part of the variability of working on Digital Humanities projects.

HTML First

The main recent change in the way I design websites is that I no longer start with Photoshop or Illustrator or any other graphics program. I start by writing the HTML and then the CSS. This has many pretty obvious advantages, but it is really only possible once you can write CSS pretty consistently without wanting to pull your hair out. It took me years to get to that point. So this process may not work for beginners, but I would still recommend by starting with the HTML even if you then move on to mocking up the site in a graphics application. In fact, creating the HTML is one of the first things I start on now, because it forces me to start formulating questions – and it is in my asking questions that much of the actual work of designing is done.

When I first get involved in a project, if I am writing the HTML I copy my trusty HTML starter framework (based on HTML5 Boilerplate) and get writing. At this point I usually make a lot of wild guesses as to content, navigation, etc. Sometimes I can fill it in more completely, sometimes not. As I get more information as the project progresses, I fill in more of the HTML5 skeleton, choosing a few representative pages.

As mentioned above, when I make a design can vary depending on the project. I usually try to get a jump start when I can (not always possible) by working on the structure, the navigation, color schemes, etc. This usually gives me useful questions to ask in meetings, and if I’m told that the group would really like a design for a national presentation next week (surprise!), I have a head start.

If I know from the beginning we will be using some kind of CMS, I will install the CMS on my localhost and use that as my basis.

HTML + some basic CSS = Wireframes. I usually just work from the same code and build on it from content creation through wireframe through final design.

The HTML I use is based on HTML5 Boilerplate, but I change the (for instance) <header> tag to <div id=”header”>. I want to follow the HTML5 format as much as possible, but for now don’t want to have to use javascript to make it work on IE8. I may change my mind on this, but it’s working for now.

One other note on my HTML – I add classes or ID’s to everything. I try not to have a bunch of extra div’s and span’s (though I am practical enough that if throwing in one more div will solve my problem easier than other solutions, I will do it), but I put classes everywhere. Variables that get passed through in the CMS get attached to the opening html or body tag. (i.e. <html class=”about”>) and I put classes on navigational elements, etc. Anything, really. The goal is to be able to have plenty to grab on to when it comes to working with CSS.

Design

There are several steps to the design process, the culmination of which is writing the CSS. Much of this first part is done away from the computer. I really like getting away for this part, especially working from home where I can surround myself with art materials, art and design books, and loud music.

Source images

Many times the scholar(s) will have a very specific idea of the imagery they want for the site. Sometimes not. I’m lucky that many of our projects are visual in nature, with lots of interesting old images or illustrations, which I can mine for ideas. If there are no images to pull from the project, sometimes I will mine creative commons photos, create something, or not have a “source” image. If I have images I know I will use I might print them out to use away from the computer (even though I am generally averse to printing things out).

Color scheme

Sometimes the source image will suggest a color scheme, more often not. I look to a lot of sources- saved images of websites I like, color scheme websites I like (color lovers, kuler), photographs, paintings. I’ll often break out the art materials to play with color – pencils, oils, acrylics, markers, etc.

Layout

Layout begins in sketchbooks for me. I make a list of the parts I want (identified by the HTML) and make lots of thumbnails of possible layouts.

Paper Wireframing

This is where I really think about the functionality. The layout may not be the same as the thumbnails, but I make paper “screenshots” of all the main pages indicating all the functionality I would like to see. This points out design elements I need to think about and helps me envision the feel of the site as the user clicks through it. There are lots of technological tools to accomplish this stage, but it just seems to click better with me on paper.

CSS

When we start talking about design, I start in on the CSS to create the design. I work in a program called CSSEdit*, which allows me to see changes I make to the CSS immediately on screen – i.e. I don’t have to refresh whenever I want to see a change. (There are other ways to accomplish this, but none I have tried are quite as slick as CSSEdit.)

*MacRabbit is no longer making CSSEdit, they folded the functionality into another program called “Espresso.” See my review.

Designing with CSS is a lot of fun, given flexible HTML, a good editor, and a little bit of patience. Building on the work done above, I start taking the best of the thumbnail layouts I’ve created, combining them with color schemes, and incorporating any source images I want to use. Depending on how things will work out, I end up with 1-3 designs to present to the group.

I use plenty of CSS 3 in my mockups. I just tell people they have to use such and such browser to view the site, for now. Once a design is chosen, I will do the cross compatibility check. Some CSS 3 elements will stay as CSS 3, some will be recreated in photoshop. For the most part, I try to progressively enhance web sites – it should look good in all browsers, but it does not have to look the same in all browsers.

At this point all the groundwork I laid with the HTML comes in handy. For instance, I said how I add a class name that describes the part of the site to the html tag like so:

<html class="about">

In the navigation, I might have some code that looks like this:

<ul> <li class="home">Home</li> <li class="about">About</li> <li class="content"></li> </ul>

in the CSS file, I can can then have some code like this:

.home .home, .about .about, .content .content { background-color: yellow; }

(obviously I left a lot out of the code here and wouldn’t use “yellow”, but you get the idea.)

So when you are on the page with the html class=”about” the li with the class=”about” will highlight yellow. This is why I put classes on everything, it makes the process of designing will CSS much more enjoyable if I don’t have to go and adjust my HTML too often.

During the CSS process I may go to photoshop to create a particular graphic, but usually not more than a few per page. This helps keep page sizes down and makes the page a lot easier to maintain. As a general rule, I try to never make text an image. Sometimes it is unavoidable, but it causes maintenance headaches later on. Since we maintain all our old sites, it’s always on my mind as I design.

Though I wrote about Less CSS previously, I don’t use it anymore. It was fun to play with, but I felt like I was trying to rewire my brain using it. It also didn’t quite fit into my workflow. In the end, while many of the ideas were convenient and probably very useful for very large sites, it’s a bit overkill for the size and style of sites I usually make.

That’s it!

Except it’s not, of course. After I show my mockups and one is picked, I will change things until the site launches. And beyond. I can’t emphasize enough that the process is iterative, and all the steps might not occur in the same order. For instance, a scholar might really want to nail down the color scheme early in the process, so I work on that before the rest of the design.

If the site is TEI based, I will go on to write the XSLT (which is where writing my own HTML comes in handy!) to turn it into a website. We currently use cocoon for this, but are investigating other tools. If the site is database based, I will work closely with the developer to create the HTML, usually issuing instructions like: “could you put another class on that element?” My sample HTML is used as a basis for the HTML that will end up in the final site. If we decide on a CMS, I will reconfigure my design to work with the CMS generated HTML.

Tech

You may have noticed I mostly ignored the discussion of what tech to use. This is in part because it could be a whole separate post, but mostly because often this is decided for me.

All the stuff I left out

I’m sure I left a bunch out. If you have questions, ask in the comments or on twitter.

Bruce Lawson was a great presenter, and is the author of Introducing HTML5

Much of the world is not using smart browsers, they are using browsers for their feature phones. Opera mini is a popular browser on feature phones around the world.

Radically different places access the same information.

People say mobile users are task focused- this is half true. Everyone is task focused. You don’t need a separate mobile site, just consider your content.

Three ways to handle mobile users:

1. Special mobile site
   • Almost always not the right way, but sometimes the quickest cheapest way.
   • You do not know what the user wants. If you do provide a separate mobile site, provide a way to get out!
   • No browser sniffing! – you can’t detect everything, browsers can lie.
2. Do nothing, serve up the same site to mobile and desktop
   • Use web standards
   • You can use new javascript methods, touchstart, touchmove, listen to touch events in addition to click.
   • CSS3/ graceful degradation
   • HTML5 – useful for webapps
   • Canvas/SVG – consider carefully, use SVG when possible. Canvas obscures information, SVG is more accessible. Don’t use canvas for UI elements. SVG can keep a DOM, so you can query/undo if necessary.
   • Geolocation – use for progressive enhancement, you won’t always have it available
   • HTML5 forms – < input type=”email” > other types, url, tel. These will give a different keyboard for input on the iphone, and they gracefully degrade.
   • Offline support – detect state, save the day by using local/session storage. Way easier than storing in cookies.
   • Web socket communication – sending information this way saves battery life
3. Optimise for Mobile
   • CSS Media queries – making sites that respond. “Can you do this?” “What’s your DPI?” “Landscape or portrait?” Responsive web development. See mediaqueri.es.
   • If you are using media queries, set the viewport.
   • Content should take center stage!
   • Give dimensions of images in HTMl. This makes sure the content doesn’t move after the images are downloaded, which can be annoying – especially for mobile users, because the content they were reading may get pushed off the screen.
   • Consider < a href=”tel:555.555.5555″ > because this will let phone users dial easily.
   • Make accessibility a priority. Follow accessibility guidelines.
   • Minimise HTTP requests. Combine CSS and javascript whenever possible. Use SVG or canvas for images if possible.
   • ems rather than pixels – pixels can fail on high resolution screens
   • fluid layouts
   • use CSS background-size property
   • turn off fancy backgrounds, shadows, etc. for mobile devices (using media queries) – they require processing power and are battery killers
   • Occasional use of data URL’s can be useful
   • Put javascript at the bottom of the page, or, if it must be in the head, put it after CSS so you don’t get a page flash
   • Use feature detection js like Modernizr

No web apps! laziness is wise

Widgets – zip file containing web standard goodness – uses the browser platform. Gives you a downloadable app, uses the browser widget engine, but has no chrome – installation through the start menu.

Of course, you can only get certain things through a native app. Access to the camera and mic, for instance. Soon, though, you will be able to do things comparable to what you can do with a native app – access things like: contacts, calendar, media, messaging, accelerometer. HTML5 < device > – access to camera and microphone in a specific device.

Lawson demonstrated an experimental app which detects where you are, your direction, and your speed, all in the browser.