Responsive web design and libraries

Brad Frost's This is Responsive Website
Brad Frost’s This is Responsive Website via desktop browser

Responsive web design is not really a new concept, yet libraries and many websites in general, still have a way to go in adopting this method of web design. ACRL’s Tech Connect has covered various web design topics, including mobile applications, hybrid mobile applications, design basics, and website readability. Consider the responsive web design approach and its benefits another tool in your toolbelt and yet another option for libraries to present themselves online to their users.

So what is it?

As the number of devices in which we are able to view and interact with websites grow, it becomes more cumbersome to keep up with the plethora of laptops, desktops, mobile devices, and potentially devices or platforms that don’t yet exist. As our users view our websites and online resources in these various ways, we must ask the simple question- what does this look like and what is the user’s experience? If you have a smart phone or tablet, you may recall viewing a website and being annoyed that it is merely a shrunken teeny version of the site you’re used to seeing rather than adjusting nicely to accommodate the device you’re using. In many cases it requires you, the user, to do something to make it work on your device rather than accomodate you; a rather unappealing way to treat users I think. Here’s an examples from the New York Times website:

New York Times displayed on a desktop browser
New York Times displayed on a desktop browser
New York Times displayed on the iphone
New York Times displayed on the iphone aka the Barbie sized website

To avoid these awful Barbie-sized websites on our devices, the solutions we often see are: develop a mobile website, develop a mobile app, or create a website that is responsive and can handle most anything that comes it’s way. All of these are great solutions to developing a mobile presence however the responsive approach is fast emerging as a winning solution.

What makes it great?

The very basic benefit to creating a responsive website design is that you have one site for all devices- it’s intended to be inclusive for desktop machines and a variety of devices. A responsive site does not require anything of the user; no downloading or additional buttons to click, the result is immediate. That’s it. Rather than separate approaches for mobile through either a mobile site or mobile applications and then another approach for desktop machines- this method is flexible and covers it all under one design.

Responsive websites in the wild

The best way to experience responsive web design is to try out some websites that are designed in this way. Here are a few great examples with screenshots included- I recommend checking them out in your browser and then shrinking your browser window down to get the full effect or how this technology works. If you’re even more invested in the experience, bring the site up on any number of devices to see the benefits of responsive design done well.

Graphic designer, John Boilard, showcases his portfolio website using responsive design:
http://jpboneyard.com/ As you can see the images are flexible and each project displays very well on many devices. The images adjust accordingly and the performance of the site is easy to use and easy to view.

JP Boneyard Design viewed on a desktop browser
JP Boneyard Design viewed on a desktop browser
JP Boneyard design viewed on an iphone
JP Boneyard design viewed on an iphone

Web designer and the founder of responsive design, Ethan Marcotte, http://ethanmarcotte.com/ showcases not only his design but also his publications. There is a variety of content on his website and the responsive design works extremely well. For a quick article on responsive design from the graphic design perspective, see his article on A List Apart.

Ethan Marcotte website via desktop browser
Ethan Marcotte website via desktop browser
Ethan Marcotte website via the iphone
Ethan Marcotte website via the iphone

Matthew Reidsma, web services librarian at Grand Valley State University, also has a fantastic flexible site where even videos are responsive: http://matthew.reidsrow.com/ He is a web librarian to watch as he often writes and presents on responsive design (more on that below) and he is always creating really awesome and interesting web projects. The Grand Valley State University Libraries have a fantastic responsive site: http://gvsu.edu/library/

Matthew Reidsma's website via desktop browser
Matthew Reidsma’s website via desktop browser

 

Matthew Reidsma's website via iphone
Matthew Reidsma’s website via iphone
Grand Valley State University Libraries website via desktop browser
Grand Valley State University Libraries website via desktop browser
Grand Valley State University Libraries website via iphone
Grand Valley State University Libraries website via iphone

The website TitleCase, co-founded by designers and type experts, Jessica Hische and Erik Marinovich; this is an elegant example of showcasing this side project with a focus on type while all giving users a pleasant experience through responsive design.

TitleCase website via desktop browser
Title Case website via desktop browser
TitleCase website via iphone
Title Case website via iphone

Scribble Tone, the Portland, OR based design studio, created this responsive website for Design Week Portland: http://www.designweekportland.com/#footer With the gorgeous flexible images, the bold colors, and clear typefaces- all created and designed responsively- this website is pleasant and fun to use.

Portland Design Week website via desktop browser
Portland Design Week website via desktop browser
Portland Design Week website via iphone
Portland Design Week website via iphone

Resources

If you were like me and did not attend ALA Annual this year and get to see Matthew Reidma’s fantastic talk on Responsive Web Design for Libraries: Get Beyond the Myth of the Mobile Web, you are still in luck because he posted the talk and slides on his website here. He covers quite a lot and he provides a fantastic list of resources within that post. It’s a great presentation and truly worth watching all the way through.

To delve in more deeply into the details of designing with responsive web methods, I highly recommend Responsive Web Design by Ethan Marcotte. He not only provides good examples and techniques for designing this way, but he also explains the flexible grid and flexible images as well and displays his balanced approach between good design and good functionality. His website is also responsive and he’s designed complex websites: http://ethanmarcotte.com/

Another option, particularly for those who use WordPress as a CMS, there are a number of free responsive themes available that are already designed. Simply selecting the theme or taking a further step by creating a child theme that you could then customize would be a fairly simple way to make your website design responsive and more enjoyable.

The website, This is Responsive has a wide variety of tools to develop your own responsive website as does Bootstrap. So even if you don’t think of yourself as a designer, there are a lot of ways to get started in creating good design that is also responsive.

Whether you are interested in responsive design, mobile websites, or creating mobile apps, it is critical for libraries to be aware of the user experience as our customers use our websites and online resources on a variety of devices. The bar is being raised with responsive designed websites and users will come to expect this kind of experience. As the web, platforms, and devices evolve, it will be crucial for libraries to be already poised to offer a positive experience through good thoughtful design.

Brad Frost's This is Responsive Website via iphone
Brad Frost’s This is Responsive Website via iphone

What exactly does a fiber-based gigabit speed library app look like?

Mozilla and the National Science Foundation are sponsoring an open round of submissions for developers/app designers to create fiber-based gigabit apps. The detailed contest information is available over at Mozilla Ignite (https://mozillaignite.org/about/). Cash prizes to fund promising start up ideas are being award for a total of $500,000 over three rounds of submissions. Note: this is just the start, and these are seed projects to garner interest and momentum in the area. A recent hackathon in Chattanooga lists out what some coders are envisioning for this space:  http://colab.is/2012/hackers-think-big-at-hackanooga/

The video for the Mozilla Ignite Challenge 2012 on Vimeo is slightly helpful for examples of gigabit speed affordances.

If you’re still puzzled after the video, you are not alone. One of the reasons for the contest is that network designers are not quite sure what immense levels of processing in the network and next generation transfer speeds will really mean.

Consider that best case transfer speeds on a network are somewhere along the lines of 10 megabits per second. There are of course variances of this speed across your home line (it may hover closer to 5 mb/s), but this is pretty much the standard that average subscribers can expect. A gigabit speed rate transfers data at 100 times that speed, 1,000 megabits per second. When a whole community is able to achieve 1,000 megabits upstream and downstream, you basically have no need for things like “streaming” video – the data pipes are that massive.

One theory is that gigabit apps could provide public benefit, solve societal issues and usher in the next generation of the Internet. Think of gigabit speed as the difference between getting water (Internet) through a straw, and getting water (Internet) through a fire-hose. The practicality of this contest is to seed startups with ideas that will in some way impact healthcare (realtime health monitoring), the environment and energy challenges. The local Champaign Urbana municipal gigabit speed fiber cause is noble, as it will provide those in areas without access to broadband an awesome pipeline to the Internet. It is a intergovernmental partnership that aims to serve municipal needs, as well as pave the way for research and industry start-ups.

Here are some attributes that Mozilla Ignite Challenge lists as the possible affordances of fiber based gigabit speed apps:

  • Speed
  • Video
  • Big Data
  • Programmable networks

As I read about the Mozilla Ignite open challenge, I wondered about the possibilities for libraries and as a thought experiment I list out here some ideas for library services that live on gigabit speed networks:

* Consider the video data you could provide access to – in libraries that are stewarding any kind of video gigabit speeds would allow you to provide in-library viewing that has few bottlenecks. A fiber-based gigabit speed video viewing app of all library video content available at once. Think about viewing every video in your collection simultaneously. You could have them playing to multiple clusters (grid videos) in the library at multiple stations. Without streaming.

* Consider Sensors and sensor arrays and fiber. One idea that is promulgated for the use of fiber-based gigabit speed networks are the affordances to monitor large amounts of data in real time. The sensor networks that could be installed around the library facility could help to throttle energy consumption in real time, making the building more energy efficient and less costly to maintain. Such a facilities based app would impact savings on the facilities budgets.

* Consider collaborations among libraries with fiber affordances. Libraries that are linked by fiber-based gigabit speeds would be able to transfer large amounts of data in fractions of what it takes now. There are implications here for data curation infrastructure (http://smartech.gatech.edu/handle/1853/28513).

Another way to approach this problem is by asking: “What problem does gigabit speed networking solve?” One of the problems with the current web is the de facto  latency. Your browser needs to request a page from a server which is then sent back to your client. We’ve gotten so accustomed to this latency that we expect it, but what if pages didn’t have to be requested? What if servers didn’t have to send pages? What if a zero latency web meant we needed a new architecture to take advantage of data possibilities?

Is your library poised to take advantage of increased data transfer? What apps do you want to get funding for?

 

2012 Eyeo Festival

Tuesday June 5th through Friday June 8th 2012, 500 creatives from numerous fields such as, computer science, art, design, data visualization, gathered together to listen, converse, and participate in the second Eyeo Festival. Held in Minneapolis, MN at the Walker Art Center, the event organizers created an environment of learning, exchange, exploration, and fun. There were various workshops with some top names leading the way. Thoughtfully curated presentations throughout the day complemented keynotes held nightly in party-like atmospheres: Eyeo was an event not to be missed. Ranging from independent artists to the highest levels of innovative companies, Eyeo offered inspiration on many levels.

Why the Eyeo Festival?
As I began to think about what I experienced at the Eyeo Festival, I struggled to express exactly how impactful this event was for me and those I connected with. In a way, Eyeo is like TED and in fact, many presenters have given TED talks. Eyeo has a more targeted focus on art, design, data, and creative code but it is also so much more than that. With an interactive art and sound installation, Zygotes, by Tangible Interaction kicking off the festival, though the video is a poor substitute to actually being there, it still evokes a sense of wonder and possibility. I strongly encourage anyone who is drawn to design, data, art, interaction or to express their creativity through code to attend this outstanding creative event and follow the incredible people that make up the impressive speaker list.

I went to the Eyeo Festival because I like to seek out what professionals in other fields are doing. I like staying curious and stretching outside my comfort zone in big ways, surrounding myself with people doing things I don’t understand, and then trying to understand them. Over the years I’ve been to many library conferences and there are some amazing events with excellent programming but they are, understandably, very library-centric. So, to challenge myself, I decided to go to a conference where there would be some content related to libraries but that was not a library conference. There are many individuals and professions outside of libraries that care about many of the same values and initiatives we do, that work on similar kinds of problems, and have the same drive to make the world a better place. So why not talk to them, ask questions, learn, and see what their perspective is? How do they approach and solve problems? What is their process in creating? What is their perspective and attitude? What kind of communities are they part of and work with?

I was greatly inspired by the group of librarians who have attended the SXSWi Festival which has grown further over the years. There are a now a rather large number of librarians speaking about and advocating for libraries in such an innovative and elevated platform. There is even a Facebook Group where professionals working in libraries, archives, and museums can connect with each other for encouragement, support, and collaborations in relation to SXSWi. Andrea Davis, Reference & Instruction Librarian at the Dudley Knox Library, Naval Postgraduate School in Monterey, CA, has been heavily involved in offering leadership in getting librarians to collaborate at SXSW. She states, “I’ve found it absolutely invigorating to get outside of library circles to learn from others, and to test the waters on what changes and effects are having on those not so intimately involved in libraries. Getting outside of library conferences keeps the blood flowing across tech, publishing, education. Insularity doesn’t do much for growth and learning.”

I’ve also been inspired by librarians who have been involved in the TED community, such as Janie Herman and her leadership with Princeton Public Library’s local TEDx in addition to her participation in the TEDxSummit in Doha, Qatar. Additionally, Chrystie Hill, the Community Relations Director at OCLC, has given more than one TedX talk about libraries. Seeing our library colleagues represent our profession in arenas broader than libraries is energizing and infectious.

Librarians having a seat at the table and a voice at two of the premier innovative gatherings in the world is powerful. This concept of librarians embedding themselves in communities outside of librarianship has been discussed in a number of articles including The Undergraduate Science Librarian and In the Library With the Lead Pipe.

Highlights
Rather than giving detailed comprehensive coverage of Eyeo, you’ll see a glimpse of a few presentations plus a number of resources so that you can see for yourself some of the amazing, collaborative work being done. Presenter’s names link to the full talk that you can watch for yourself. Because a lot of the work being done is interactive and participatory in some way, I encourage you to seek these projects out and interact with them. The organizers are in the midst of processing a lot of videos and putting them up on the Eyeo Festival Vimeo channel; I highly recommend watching them and checking back for more.

Ben Fry
Principal of Fathom, a Boston based design and data visualization firm, and co-initiator of the programming language Processing, Ben Fry’s work in data visualization and design is worth delving into. In his Eyeo presentation, 3 Things, the project that most stood out was the digitization project Fathom produced for GE: http://fathom.info/latest/category/ge. Years of annual reports were beautifully digitized and incorporated into an interactive web application they built from scratch. When faced with scanning issues, they built a tool that improved the scanned results.

Jer Thorp
Data artist in residence for the New York Times, and former geneticist, Jer Thorp’s range in working with data, art, and design is far and wide. Thorp is one of the few founders of the Eyeo Festival and in his presentation Near/Far he discussed several data visualization projects with the focus on storytelling. The two main pieces that stood out from Jer’s talk was his encouragement to dive into data visualization. He even included 10 year old, Theodore Zaballos’ handmade visualization of The Illiad which was rather impressive. The other piece that stood out was his focus on data visualization in context to location and people owning their own data versus a third party. This lead into the Open Paths project he showcased. He has also presented to librarians at the Canadian library conference, Access 2011.

Jen Lowe
Jen Lowe was by far the standout from all of the amazing Ignite Eyeo talks. She spoke about how people are intrinsically inspired by storytelling and the need for those working with data to focus on storytelling through the use of visualizing data and the story it tells. She works for the Open Knowledge Foundation in addition to running Datatelling and she has her library degree (she’s one of us!).

Jonathan Harris
Jonathan Harris gave one of the most personal and poignant presentations at Eyeo. In a retrospective of his work, Jonathan covered years of work interwoven with personal stories from his life. Jonathan is an artist and designer and his work life and personal life are rarely separated. Each project began with the initial intention and ended with a more critical inward examination from the artist. The presentation led to his most recent endeavor, the Cowbird project, where storytelling once again emerges strongly. In describing this project he focused on the idea that technology and software could be used for good, in a more human way, created by “social engineers” to build a community of storytellers. He describes Cowbird as “a community of storytellers working to build a public library of human experience.”

Additional people + projects to delve into:

Fernanda Viegas and Martin Wattenberg of the Google Big Picture data visualization group. Wind Map: http://hint.fm/wind/

Kyle McDonald: http://kylemcdonald.net/

Tahir Temphill: http://tahirhemphill.com/ and his latest work, Hip Hop Word Count: http://staplecrops.com/index.php/hiphop_wordcount/

Julian Oliver: http://julianoliver.com/

Nicholas Felton of Facebook: http://feltron.com/

Aaron Koblin of the Google Data Arts Group: http://www.aaronkoblin.com/ and their latest project with the Tate Modern: http://www.exquisiteforest.com/

Local Projects: http://localprojects.net/

Oblong Industries: http://oblong.com/

Eyebeam Art + Technology Center: http://eyebeam.org/

What can libraries get from the Eyeo Festival?

Libraries and library work are everywhere at this conference. That this eclectic group of creative people were often thinking about and producing work similar to librarians is thrilling. There is incredible potential for libraries to embrace some of the concepts and problems in many of the presentations I saw and conversations I was part of. There are multiple ways that libraries could learn from and perhaps participate in this broader community and work across fields.

People love libraries and these attendees were no exception. There were attendees from numerous private/corporate companies, newspapers, museums, government, libraries, and more. I was not the only library professional in attendance so I suspect those individuals might see the potential I see, which I also find really exciting. The drive behind every presenter and attendee was by far creativity in some form, the desire to make something, and communicate. The breadth of creativity and imagination that I saw reminded me of a quote from David Lankes in his keynote from the New England Library Association Annual Conference:

“What might kill our profession is not ebooks, Amazon or Google, but a lack of imagination. We must envision a bright future for librarians and the communities they serve, then fight to make that vision a reality. We need a new activist librarianship focused on solving the grand challenges of our communities. Without action we will kill librarianship.”

If librarianship is in need of more imagination and perhaps creativity too, there is a world of wonder out there in terms of resources to help us achieve this vision.

The Eyeo Festival is but one place where we can become inspired, learn, and dream and then bring that experience back to our libraries and inject our own imagination, ideas, experimentation, and creativity into the work we do. By doing the most creative, imaginative library work we can do will inspire our communities; I have seen it first hand. Eyeo personally taught me that I need to fail more, focus more, make more, and have more fun doing it all.

Tips for Making Your First Mobile App a Success

About a year ago we launched the Gimme Engine (gimme.scottsdalelibrary.org) – a mobile web book recommendation engine.  Choose one of the categories – Gimme a Clue, Gimme Something Good to Eat, etc – and the Engine will offer you a staff-recommended book from the Scottsdale Public Library collection, complete with summary, staff review, and a quick link to the mobile catalog to check availability or reserve.

Since launch, our app and the Gimme Engine Brain Trust that created it have won a number of awards – including a 2012 OITP Cutting Edge Technology in Library Services award.  What’s our secret?  We are happy to share what we learned in our process with the hope it will help you in your next technology process.

Find out what your users (and future users) want

When our team got together for the first time we had more ideas than we knew what to do with – everything from a mobile formatted version of our web site to a Dewey-caching in library scavenger hunt. We soon realized that in order for us to create a successful, and more importantly, sustainable mobile app, we needed to poll our customers and find out what exactly they want out of a mobile app. Though we had done some basic surveys of staff in the past, we didn’t feel that we were the experts best suited to properly create & distribute a survey that would ultimately drive our entire project.

We hired a local experience design agency called Forty to craft a survey to get the information we so desperately needed. Forty also helped distribute the survey via their social media, email lists and other outlets. This meant that in addition to our customer we would get responses from non-customers as well. This would help us understand if there was a difference in need between customers and future-customers (at least that is how we like to think of our ‘non customers’.)

What they want might be what you already have

There was in fact no real difference between customers and non customer need in the survey results but one thing was clear:  current and future customers had no idea that we already had a mobile catalog with most of the standard functionality that they wanted.  Great, we thought, just get the word out about the mobile catalog and our job is done!  Then we realized no, we still have all this LSTA money that the Arizona State Library was nice enough to give us . . . we should probably spend that out.

Maximize your resources

So we looked at the highest items on the list that we didn’t have in mobile – book reviews and staff recommendations.  That’s when we decided to make the book recommendation app.  As it turned out we already had a lot of the raw materials for the project.  Staff was already doing book reviews and posting them on GoodReads.  We had content enrichment services for bib data and book jackets(Syndetics).  And we had the mobile catalog and the ability to generate RSS feeds of items in the collection (AirPAC and FeedBuilder from Innovative Interfaces).  All we needed was someone with enough experience to put that together.

Back to Forty for the design work and to hire a programmer.  We had so little money to work with that I thought for sure the end result would use a rubber band.  But when we sat down with the programmer not only was he able to do the project he actually saved us $3,000 in expected software costs by putting together the feeds, mobile catalog, content enrichment with some JavaScript and the GoodReads API.  The end result is a very simple, easy to care for web-based app that keeps working as long as we keep feeding it the raw materials – staff book reviews.

Maximize your expertise

From the outset of this project, we engaged all levels of staff. This was critical to ensuring that whatever product we created would be supported throughout the organization, as well as vetted to ensure that we didn’t leave out any crucial elements.  One of those elements was the encoding that allowed FeedBuilder to pick up the items for Gimme.  A quick chat with the catalogers solved that problem – they created a series statement utilizing controlled vocabulary that would identify the item as belonging to a particular Gimme category and pasted the review into the MARC record. By adding Library staff review_[gimmeCategory] in the 830 field of each record and indexing it, not only were we able to create a constant flow of records for the Gimme feeds we were able to give all library staff easy access to these reviews when searching in the catalog.

The other process we had to create was a standardized way for people to submit reviews.  Here we called on the cataloging group, the folks who where posting to GoodReads, and our IT department to create a book review form on SharePoint.  The form itself was easy – staff at any level go to SharePoint (which functions as our intranet), type in their name, info about the book and their review and submit.   The catalogers and GoodReads group developed a process to “hand off” reviews that ensure that it gets encoded, posted in both the catalog and GoodReads,  and at all times is associated with the ISBN of the same edition so that everything seems to magically link together.  Having staff who don’t normally interact working together on the share outcome certainly fostered a sense of ownership and respect in the group.

Don’t just build it . . . make it fun

Once the Gimme engine design was complete, and we had the back end programming to make it work, we were ready to unleash Gimme out into the world. Our biggest concern was that Gimme would get lost amongst all of the other products and services the library offered. One evening while cooking a delicious shepherd’s pie, a light bulb went off over Ann’s head. Since we were using our library staff book recommendations to fuel Gimme, why not turn our Staff in marketing vehicles? The next day a call went out to staff asking whoever wished to help to come forward. The end result was 15 life-sized cardboard cut outs of library staffers, highlighting their personalities. Attached to each was a ‘speech bubble’ that directed customers to go to http://gimme.scottsdalelibrary.org to see what books that staff member recommended.

The next phase was to create floor decals to put in various spots in our five library branches, so as customers walked through the library they would gain exposure to Gimme. We created corresponding buttons for staff to wear, which helped spur conversions and questions from customers, “What is Gimme?” This marketing plan engaged all level of staff, which helped make the launch of Gimme a success.

One year later the Gimme Engine is continuing to grow with new categories and increasing stats.  Not only was the project a success but it by integrating the various workflows we’ve been able to make it, as well as doing fun reviews by staff, part of our culture.  We hope that our experience can help you in some way make your next project as successful as the Gimme Engine.

 

About Our Guest Authors:

Aimee Fifarek is the Library Technologies and Content Senior Manager for the Scottsdale Public Library in Arizona.  She has an MLIS and an MA in English from University of Wisconsin-Milwaukee and spent 6 years as the Systems Librarian at Louisiana State University in Baton Rouge before going to Scottsdale.  Her professional interests include ebook platforms & development, self-publishing, and mobile technologies.  She can be found on Twitter @aimeelee.

Ann Porter is the Community Relations Coordinator at the Scottsdale Public Library. She has over 11 years of marketing, PR and media relations experience, working for organizations such as a major cosmetics company, an online retargeting agency that was recently purchased by Ebay and for a major NFL team.

 

Design 101: design elements, part 2 Typography

Previously I wrote about the importance of design in libraries, the design process and discussed three core elements of design: color, composition, and size. In this post, I’d like to focus on typography. Though not traditionally a design element, typography is more a tool or a language to use within your design to convey the message you are trying to achieve.

As mentioned previously, design elements work together to create a successful design that communicates to your audience if used well, and typography is no exception.

Type is rather complex and has a rich history. There are abundant options available with free and for-a-fee font files available. There are even resources available to have beautifully designed type on your website. Designers still create typefaces from scratch if needed, particularly for decorative uses. But it is perfectly acceptable to use already available font files and most designers do this. To create thoughtful designs using type well does not have to be difficult; with some basic knowledge, you can successfully choose the right type for the job and develop a successful design.

About fonts versus typefaces

As you work in design, it’s good practice to use the correct terminology. When most people talk about letterforms, they use the term, “fonts.” However what most people really mean is “typeface.” Fonts are really the format in which the typeface is available- librarians can understand this distinction easily. As Ellen Lupton states in Thinking With Type, “A typeface is the design of the letterforms; a font is the delivery mechanism…In digital systems, the typeface is the visual design, while the font is the software that allows you to install, access, and output the design.” Lupton’s book is a resource I highly recommend by the way. If you read nothing else about design and type, please read her book. I’ve provided the citation toward the end of the post.

Typography versus design

Typography within design should never be an afterthought. In fact, in many cases the typeface you choose can make or break a design. Every design should be a fluid creation, balancing between the various design elements and type. A designs are being created, it is best to bring the elements up together, tweaking and adjusting each piece as you go while also taking that step back to see the whole picture. As in writing, it can be more beneficial to keep the overall theme and outline in mind as you work on various details and sections of a piece; being too focused in on one small detail may be detrimental to the overall design piece.

Basics

There is a lot to learn and geek out over design and typography but rather than overwhelm, I’m going to give some good basics about type that will get you started right away. There are several main type classifications and the main three groupings are humanist, transitional, and modern or geometric.

Ellen Lupton defines each as the following: “Humanist letterforms are closely connected to calligraphy and the movement of the hand. Transitional and modern typefaces are more abstract and less organic.”

For the purpose of this post and for what you really need to know, I’m going to lump them into four categories based on the look of the typeface: Serif, Slab Serif, Sans Serif, and Decorative. There are examples of each one below.

Serif

Serif typefaces essentially have feet. Serif typefaces are essentially more organic and derive from various periods in history. You see these typefaces traditionally used in novels and blocks of text. Their use is not limited to that, however. There are many new Serif typefaces being developed that are contemporary based on their more historic predecessors.

Baskerville
Baskerville
Garamond
Garamond
Typographic Anatomy Lesson print: http://www.ligatureloopandstem.com/product/lesson-plan-print

Slab Serif
Slab Serif typefaces also have feet but their feet are blockier and slab-like, hence the name. These typefaces were developed for advertising and are more contemporary than traditional Serifs. These are used in a variety of ways but are popular for titles, posters, flyers, websites, and logos.

Museo Slab
Museo Slab
archer
Archer from the H&FJ foundry: http://www.typography.com/fonts/font_overview.php?productLineID=100033&path=head

Sans serif

As the name implies, these typefaces do not have Serifs or “feet”. They are generally more contemporary and less organic than Serif typefaces. These are very popular for text within websites, logos, and posters.

Helvetica
Helvetica
Gill Sans
Gill Sans
Keep Calm by K-Type: http://www.k-type.com/?p=2199

Decorative
Decorative or ornamental typefaces are self explanatory. These are typefaces that can stand alone as an image or illustration. They are highly decorative and should be used very carefully as they can overpower a design or clash more easily with other elements. Not all decorative typefaces are equal and many designers who are really good with decorative type do the lettering by hand and specialize in this area specifically. When done well and with skill, decorative typefaces are a true art form and when done poorly, they can quickly highlight an amateurish design. Decorative type is gaining in popularity as people, designers and non-designers alike, are embracing retro styles again and these typefaces are seeing a resurgence in use.

Rosewood STD
Rosewood STD
Decorative type from Louise Fili
Decorative type from Louise Fili: http://www.louisefili.com/

 

Bold, Italic, Underlined, Caps, and, and, and….

There is nothing wrong with using these elements. However it’s a good rule of thumb to use them sparingly and not all at once. By using them judiciously, they will have more impact and continue to maintain readability, which is key to design. Use them with caution.

Use

As you design and use type, be aware of what your type may be conveying to your audience and the medium in which you are designing in. Some typefaces are more successful on screen than others and some typefaces are specifically designed for print, screen, etc. A good resource for typefaces on the web is the 3rd edition of The Web Style Guide. There is a section specifically on typography that is helpful and gives insite into where typefaces are today.

Like all design elements and design in general, you are communicating with others. What is the type you are using saying? Does it fit with the message you want to send? Are you going for a modern and sleek look? Do you want to give your design a tactile/print feel or maybe you want it to be an homage to a specific period in design history? How does the typeface fit in with the rest of your design? What kind of mood might you be setting with the type and design elements you’ve put together? Type has a personality so be sure to choose a typeface that assists and hopefully conveys the message you want to give.

The end

At this point, you have the type basics and I hope that this gets you thinking more about the typefaces you see and perhaps use in your designs. I highly encourage reading Ellen Lupton’s book, Thinking With Type: a critical guide for designers, writers, editors, and students. She goes over a good deal of design basics and some design history and it’s a quick, enjoyable, informative read.

A couple of other good resources are: The FontFeed and The Elements of Typographic Style.

The best way to learn type and design is to just start. Things change so quickly and what was once right can become wrong or out of style very quickly. In design, you learn much more quickly by designing and making work. So pick a project and begin!

The Middle Way of Mobile App Design

We’ve heard this conversation on mobile app design before, where well meaning coders will say to you: “don’t design native mobile apps, it isn’t worth your time, ” followed by the common refrain/rebuttal : “native apps take advantage of the hardware, like camera, and WiFi components of the phone…”

I’m not very interested in the debate, since it isn’t a very informed or intelligent discussion when one argues of developing native apps over mobile web apps, or the binary opposite. The common misconception is that there are only two approaches to design of mobile apps: native or web-based. The native approach includes developing in compiled languages like Java in the Android platform, and Objective C in the iOS platform. Web based mobile apps make use of HTML5 and CSS and Javascript to achieve an app-like interface and experience. A popular template used in the web based approach is the JQuery mobile framework: http://jquerymobile.com/

But there is a middle way.  You can design and build a mobile app utilizing compiled languages as well as HTML, CSS and Javascript. The hybrid approach is HTML with native app elements. These rely on using cross platform mobile frameworks, like the PhoneGap framework (http://phonegap.com/).

You might wonder — why make an app using the PhoneGap framework? Using this HTML5 + native tools approach allows you to get into the hardware of the phone; like camera data, to incorporate things like a barcode scanner into your hybrid app. A full list of API elements is available here: http://docs.phonegap.com/en/1.9.0/index.html.  If you want a more basic rundown of how PhoneGap itself works in a library context, check out a past ALA presentation I did for the Mobile Computing Interest Group back in 2010: http://www.ideals.illinois.edu/handle/2142/16542

Mobile app stores like Google Play and the Apple iTunes App Store help to drive traffic to your services and sites, and they will result in increased use of your library services and collections –and make possible new services, by their sheer existence.

Here are a few examples of apps I’ve built this way:

UGL4EVA

video tour of the undergrad library
–video tour app of the undergrad library, code available here: https://github.com/jimfhahn/ugl4eva

New LIS Books

new book app
— recently added Library and Information Science books at the University of Illinois Urbana-Champaign, code available here: https://github.com/jimfhahn/newbooks

What your users and library will need is, of course, entirely up to you, but to know the options available such as hybrid approaches is a way to make informed and intelligent decisions about your library’s mobile presence.

 

Full disclosure: I researched and wrote an iPhone development book unpacking a hybrid approach to mobile application design that advances ways for web developers to make their apps available from the iTunes app store (goo.gl/n3LUB). But you could also make your apps available from Google Play, using the Hybrid approach as well.

Big Type and Readability

The Big Type

Jeffrey Zeldman published a post that explains his choice of big type in his website/blog last week. If you are curious about how huge the type is in his site, see below my screenshot (or visit his site: http://zeldman.com). It is pretty big. Compare it to any Web site or this current site of mine. Yea, the type is huge.

zeldman.com

He says people either hate or love the big type and the simplistic/minimalist layout of his site or just spends time processing them. I found myself loving it because hey, it was so fr**king easy to read without any other distraction in the site. As Zeldman himself says, It’s over the top but not unusable nor, in my opinion, unbeautiful.” And in my opinion, being fully functional counts to a great degree in favor of beauty.

Readability

The strange satisfaction that I felt while reading the articles in his site set in the big type has led me to realize how hard it is to read the main content of any common web page. It is usually so hard that the first thing I do before reading any Web page is to increase the font size inside a Web browser (thereby also removing the top navigation and all other things on both sides except the main content out of my sight). Sometimes, I also use the ‘Print’ preview, just to read, not to print anything (since this removes all ads and images etc.). Also handy is a plugin like Readability. Zeldman’s site was the first site where none of these actions was necessary.

The Web design convention with must-have items such as a top navigation, header image, navigation on the left, ads and numerous links on the right forces us to take out those very items by manually manipulating the browser in order to make the main content simply readable! This is an irony that is more than fully appreciated by those who build and manage Web sites in particular. We (the universal we as Web workers) follow the convention as something canonical because we want to build a Web site that is usable and pleasant to interact with. But while interacting with any such conventional site, our own behavior reveals that we try to eliminate those very canonical elements.

It’s not that we can or should eliminate right away all those conventional items. They are useful for various purposes. But the point is that no matter how useful they are, those things are also great distractions in reading. In a Web site or a page where reading is the primary activity, the readability of its content is a greater problem than other sites or pages. Zeldman’s Big Type experiment would be simply bizarre if it is applied without any modification to, say, the WSJ homepage. But it probably is not a bad idea to apply it to an individual article page in the WSJ Web site.

Zeldman’s experimental design with the big type reminds me of what the application, Flipboard, does. (See below the demo video if you are not familiar with the Flipboard app.) It strips off elements that are distracting to reading and re-formats the page in a way that is attractive and functional. Where the design fails to help one to read a Web page, an app comes to rescue.

Now you may ask how all these relate to libraries. My question is: (a) how much of the main function of a library Web site is reading, and how much is not, (b) what parts of a library Web site is to be read and not, and (c) how we can balance and facilitate those different uses of a library Web site. Rarely a Web site is designed solely for reading, but reading is an important part of almost always a certain section of any Web site. So this is an issue that is worth thinking about and matters to not only library Web sites but also any other Web site. Just asking these questions could be a good step towards making your Web pages more usable.

In the next post, I will discuss how we read on the Web and how to design and serve the content for the Web in a user-friendly manner.

Design 101: design elements, part 1

Previously, I wrote about the importance of design in libraries and the design process.  Next I’d like to delve in deeper and talk about the elements of design. These elements, or components, are the pieces that make up a whole design. Design elements work together to create a successful design that communicates to your audience if used well.

Most designers would agree, the elements of design are essentially the following:

  • color
  • shape
  • line
  • space or composition
  • value
  • size
  • texture

I am also going to add typography. Though not traditionally an element, choosing type carefully and in some cases even showcasing it within your design, can transform something that meets the status quo into a higher quality design. In carefully crafting your design with an understanding of the elements, your design may be considered not only professional, but memorable.

Rather than talk about all of the elements in this post. I’m going to focus on three to get you started and then I’ll come back to typography and perhaps others in future posts.

With color, composition, and size down, you can create a strong design whether you are making a flyer, sign, promotional materials, or webpage. To create a design considered high quality, nuanced, or sophisticated by design standards, you will need to push further and understand all of the elements. This post is just to get yourself started and able to make something professional that will add to your credibility as a professional organization.

http://frankandjan.com/WIT/?tag=comic-sans

Some have asked me in the past, what credibility has to do with design and libraries and it’s a good question. Without delving too deeply, you can see the above photo where someone has made a simple sign using the typeface comic sans and in response someone calls them out for being unprofessional in using it. Honestly, I have mixed feelings about this image but it still illustrates a valid point: in creating bad design or making poor design choices, you may look unprofessional to your audience. Good design will build trust and credibility with your users. I’ll be including examples throughout this post to show different elements and where they work.

Color

Starting with color, there is an enormous amount of resources on color theory and designing with color. There are scholars who have made a living on researching color alone. To have a successful design, you don’t need to be a color expert but it helps if you have some basics down to understand how color works and doesn’t. It’s a choice to include color in your design- plenty of successful designs are black and white or have minimal color and it’s part of the aesthetic and the message they want to convey.

Sometimes one color is enough; this is called a monochromatic color scheme.

Employing the use of opposite colors on the spectrum together is complementary.

There are numerous ways of combining colors and using them effectively in design. When using color the most important piece to keep in mind is using color consciously, thoughtfully and being aware of individuals who may have vision impairments. You can use many colors in a design, but if not done so with care, it may not achieve the look or convey the message intended. In some cases, misuse of color may not be readable. There are a number of resources available that can assist in putting together a good color palette as well ensuring your colors are accessible.

The designer Luke Beard applies color well on his website. While Beard uses color minimally, as you stay on his website, the color rotates revealing various color combinations in a fun and eye-catching way. The selected colors compliment his website and overall design. If you don’t stay on the page long enough to experience the change in color, you don’t lose much value since the colors work well and the design itself is successful and strong. The change in color is an additional feature intended to delight his audience.

Composition

Composition is where the pieces lay on the page in relation to the page sides, edges and other pieces. Composition may include: an illustration or a logo, title text, headlines, or a call to action, and smaller elements such as a block of text or links. There is a decision to be made about what the most important elements are. Not every element should have the same amount of weight in importance.

In laying out the composition, you’ll want to pay attention to what is referred to as alignment. Often in design you’ll see a strong left alignment where several elements begin at the same starting point on a page; this is fairly conventional and a good choice. Left alignment is certainly not the only successful way to create a composition, but it rarely fails. As the design is being formed it’s good to think of the elements and pieces you are working with abstractly. Imagine them as puzzle pieces or building blocks. Many designers use methods such as the grid, wireframing, or abstract sketching to get a rough sense of the composition. The grid is a good place to start and is a current design trend. My best advice is as you build together the pieces, keeps things somewhat loose and flexible so that you think of the overall page and the pieces in relation to each other, rather than get bogged down by one piece.

http://www.jessicahische.is/designing

On Jessica Hische’s website, she balances a lot of information on each page without losing the quality of the overall design. She showcases portfolio pieces and allows those designs to shine while the composition, typography, and color compliment her efforts and don’t compete for attention. To the right of the large image, Hische aligns the subheading and links to the left, along with the various elements below the link list. Organizing the site in this way creates order and contributes positively to the overall design. Hische devotes a good deal of the composition to white space. Doing so allows the viewer’s eye to rest and directs them back toward the focus, in this case the photo and information on the portfolio piece she is showcasing.

Size

Size is related to composition in that the size of one shape or block of text will relate to others around it.

So, for example, if you have a title, subtitle, author, and publisher and you want to emphasize the title above everything else, then the title will naturally be larger in size. Next, you may want the subtitle to be less than the title but larger than the author or publisher. In some cases, you may want to make the author name the largest element- these are all design decisions relating to size that will convey different things to the audience who sees it.

http://trentwalton.com/2011/05/10/fit-to-scale/

On Trent Walton’s website, he’s making a point about responsive web design (a topic I hope to delve into in a future post). To communicate his message, he’s using size and color. The bold color and size of the title, Fit to Scale, captures viewer’s attention. There is also variation in size within the text block, drawing out the first sentence for emphasis. The navigation is also a different size, easy to see when it’s needed but not in the way of the message of the page.

Putting design into practice

Now that we’ve gone over some basics, I recommend exploring what designs out there speak to you. Develop a collection of designs you like; whether they are websites, flyers, posters, etc., if there is something you like about the design then study it. Much like writers who read a lot to become better writers, designers will study good design and analyze what makes it good in order to become a better designer.

Get feedback from other designers or others who understand design. There are a number of excellent portfolio websites out there that have extremely rich communities willing to offer a critique in exchange for a critique. These are excellent resources that are invaluable to designers, as meaningful feedback is very difficult to find:

Look more deeply into what elements the designer has employed to make the design successful and ask yourself some questions: what colors did they use? what is the balance between the different colors used? is there whitespace? how is the composition set up? can you identify alignments? how did the designer break apart size?

If there is a design you don’t like it is worth exploring why you don’t like it. Ask the same kinds of questions. What makes it fail to you? Figure out what it is that makes you react strongly

This is a way to get yourself to really think in a design way, observe, and subsequently learn about design. In seeing, you will be a step closer to designing well.

If you can recognize, study and thoughtfully employ these elements and make them work together harmoniously you can make a good design. Keep things simple- better to err on the side of restraint than give too much.

Don’t forget that in designing, you are communicating. Think about the message. What do you want to say and how can you attempt to convince your users to believe you? Are you earning credibility? Trust? What kind of atmosphere are you creating?

Design is an opportunity to give our users a positive experience and perhaps even to delight them.

What is a Graphic Design Development Process?

Previously, I wrote about the value of design in libraries, and others, including Stephen Bell and Aaron Schmidt, have written and presented on the topic of design in libraries as well. Now I’d like to focus on and delve specifically into what graphic design process may entail. For librarians who design regularly, I hope this helps to articulate what you may be doing already or perhaps add a bit to your tools and tips. For those that don’t design, I hope that this might give you insight into a process that is more complex than it may seem and that you might give designing a try yourself. For some ideas, try any of these are great library design projects: signs, webpages, posters, flyers, bookmarks, banners, etc.

What Is It Like to Design?

People might wonder why design needs to be a process. The very basic process of design, like many processes, is to solve a problem and then create a solution. Jason Fried, founder of 37signals and co-author of Rework, tweeted recently, “Your first design may be the best, but you won’t know until you can’t find a better one.” He later added this image from The Intercom blog as an illustration to make this important point. Striving for an elegant or best solution is something librarians and designers have in common. Librarians often share best practices and examining this process may not only assist us in terms of design, but perhaps we can apply these concepts to other areas of librarianship as we create programs, outreach, marketing, and more.

Design is a process.
Designers work hard to develop a successful design and it doesn’t always come easy. Here are some of the basic steps designers take in the development phase of their work. Every designer is a bit different, and not all designers follow the exact same process. However, this is a pretty good foundation for beginner designers and once you get good, you can incorporate or modify pieces of the process to make it work for you and the project at hand. Design is subjective and there are few hard and fast rules to follow, however, in future posts I’ll be talking more about design elements and details to help you create stronger designs that will speak to your users.

Design has constraints.
Before you start laying things out and jumping into a design, you want to understand what the “specs”  or specifications are. These are the details of the final piece you need up front before you begin any design. For example, is the piece going to be printed or is it an online piece? What’s the budget? Is it black and white, color, how many colors? What size? If printed, what paper will it be printed on? Will color bleed to the edge or is there a border? Is there folding or cutting involved?

All of these considerations are going to be the rules you must work under. But most designers like to think of them as challenges; many times if the specs aren’t too restrictive they can actually empower the designer to drive harder to make it more creative. You really don’t want to start designing before you get this all worked out because once you’ve jumped in it can mean starting over if a critical spec is missed. If you have designed for a set of specs and then try to modify it to fit all new specs later, it almost always compromises the strength of the design to work this way. Better to know those specs up front.

Design requires an open mind.
Sketch like crazy. You may think you have the best, most original idea ever once you get your assignment or have your specs, but please do yourself a huge favor and sketch some ideas out first. Do at least a page of sketches if not much more. Take notes, do some research on the topic, do word associations and mind maps and draw stick figures and doodle. Keep an open mind to new possibilities. Observe the world around you, daydream, and collect inspiration. You might still stick with that first idea but chances are you come up with something even better and usually more original if you push yourself to think in new ways and explore.

Design step by step.
Depending on the complexity of the piece, whether it’s print or web, I might do more or less of each step below. If you’re designing or reworking a website, this is a good method to get a powerful, thoughtful design. And of course, you can go back and iterate based on feedback given, changes to the design that impact design elements. If the design structure is strong, changes should be fairly small.

Basic Design Development Process:

1. research the topic, take notes, ask questions, doodle, jot down ideas, simmer 

2. series of thumbnail sketches
This is an extension of step 1. Do as many as you can muster…do it until you are sick of it. Here is a great presentation I recently found on sketching.

3. build wireframe
Stay abstract/block in composition. This is going to be larger than a thumbnail but try to keep it free from detail.

4. sketch comps
Take steps 2 and 3 and flesh out 3 comps. These should not be final but should follow specs and be close to finished in terms of look and feel for the major design components. You may use lorum ipsum text if you wish. This technique helps to keep people from giving feedback about the content over the design. Of course there are times the content may absolutely need to be there but use your own discretion and know that this is an option and may help in moving forward.

5. finalize comps
Usually 3 choices are offered to a client, but if you are your own client obviously just do your favorite.
All of this is separate from any CSS, html, javascript, etc. Mock it up using Photoshop and/or Illustrator (or a similar program of your choice). The point is to focus on the design apart from laying down code. “Form Follows Function” really rings true. It isn’t an either/or statement. The product must work first and foremost and the design will support, enhance, and make it work better. If it doesn’t work, no amount of gorgeous design will change something that is badly broken.

TaDa, right?
The design is done, let’s celebrate!

Well, not exactly. This process is merely just one phase of a much larger process that includes steps including: initially meeting the client, negotiating a contract, presenting your designs, more testing and usability, iterative design adjustments, possibly working with developers or print houses, etc. Design is a process that requires study, skills, schooling, and knowledge like many fields. I’ll be talking about more design topics in the future, so what is not covered here I’ll try and cover next time. Luckily, I gathered some great…

Design resources to get you started:

This is not a comprehensive list by any means but highlights of a few resources to get you thinking about design.

  • Non-Designer’s Design Book: One of the best beginner design books out there (overlook the cover- it really is a great book!).
  • Smashing Magazine: Really good stuff on this website- including freebies, like decent icons and vector artwork. Covers typography, color, graphic design, etc.
  • a list apart: another great site that delves into all kinds of topics but has great stuff on graphic design, UI design, typography, illustrations. etc.
  • Fast Company Design: relevant design articles and examples from industry.
  • IDEO: design thinking, great high level design examples- check out their portfolio in selected works.
  • Thinking With Type: title says it all- learn about the fine art and science of typefaces. You will never look at design and type the same way again.
  • Stop Stealing Sheep and Find Out How Type Works: another must on typography
  • Drawing on the Right Side of the Brain: seriously. even if you think you can’t draw. try it. anyone can draw, truly. Drawing helps you think in new and creative ways- it will help you be more creative and help in problem solving anything. Even those small doodles are valuable.

Pick. your. favorite. see above. do it.

Enjoy and thanks again!