Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 27 2013

19:13
Yahoo News has redesigned it’s site. It looks very similar...


Yahoo News has redesigned it’s site.

It looks very similar to the new home page, including a customizable news stream.

Mike Kerns, Vice President, Product, says:

"We made the news stream customizable so you can tell us what content you’d like to see more of. Yahoo! News will get smarter over time - the more you use it when signed in with your Yahoo! ID, the more it learns about your preferences, creating a personal news hub just for you."

March 31 2013

17:49

10 examples of bespoke article design and scrolling goodness

Have you been noticing all the pretty sliding/scrolling articles that are popping up around the Internetz? My students think they’re wonderful, and so do I. So let’s look at a roundup of some great ones.

Screenshot: Snow Fall

Of course we’ll begin with Snow Fall: The Avalanche at Tunnel Creek. This New York Times multimedia feature had the world journalism community talking and tweeting like crazy as soon as it appeared online. This blog post – More than 3.5 million page views for New York Times’ “Snow Fall” feature – reproduces an internal New York Times memo about how popular the multimedia feature turned out to be. In this post at Source (a project concerning journalism code) – How We Made Snow Fall: A Q&A with the New York Times team – the graphics director, graphics editor, video journalist, and deputy director for digital design who created this feature explain how they did it.

Screenshot: America: Elect!

America: Elect! (from The Guardian) is not only a fun, slidy mini-graphic novel – it’s also the subject of a short but very helpful how-to article: How we built our “America: Elect!” graphic novel interactive, by interactive developer Julian Burgess. Parallax scrolling libraryskrollr (check this one out).

Screenshot: Dock Ellis 1 of 2

Screenshot: Dock Ellis 2 of 2

ESPN was ahead of the pack with The Long, Strange Trip of Dock Ellis, a lavishly illustrated story about the Pittsburgh Pirates pitcher. Plugincurtain.js.

Screenshot from Pitchfork 1

Screenshot from Pitchfork 2

Pitchfork magazine used the technique as a showcase for photography, featuring Bat for Lashes singer Natasha Khan, in a cover story titled Glitter in the Dark.

Screenshot: Lost and Found

Lost and Found, an NPR story about photographer Charles W. Cushman, has a beautiful horizontal scrolling audio story in the middle of the page. Look for the Play button below the heading “The Year Is 1938.” Frameworkpopcorn.js.

Screenshot: Fracking

Screenshot: Every Last Drop

The Guardian‘s Burgess linked to a scrolling graphic story about fracking — What goes in and out of hydraulic fracturing (it appears that designer Linda Dong rolled her own scrolling code for this one) — which reminded me a little of Every Last Drop, which uses scrolling graphics to tell the story of how much water we waste every day (parallax scrolling libraryskrollr). I found the fracking story to be more journalistic, especially given the sources listed at the end.

Screenshot: Cycling's Road Forward

Another long-form narrative dressed up very nicely with this technique: Cycling’s Road Forward, from The Washington Post. Framework: Bootstrap. Tools include Modernizr.

Screenshot: Unfit for Work

Unfit for Work (from Planet Money, a program that runs on NPR) has a beautiful responsive article design. I love the big data graphics embedded throughout the article. I’ve been all over the code looking for the bit that slides the sections up and down, but all I can find is very clean CSS and HTML, great attention to responsiveness, and assorted JavaScript files that don’t reference the section element, the H3, or the wallpaper class. I’m super-impressed by the code, because it looks like it can be replicated for other articles. In other words, this design is repeatable.

Screenshot: Too Young to Wed

Too Young to Wed (from the United Nations Population Fund) is a little harder to navigate than the others, in my opinion (it interrupts the vertical scroll with horizontal-scrolling slideshows), but the gorgeous photography and heartbreaking story make it well worth a look. jQuery plugin: ScrollTo.

There are many tutorials for parallax scrolling — here’s one.

Related: The future of the feature: Breaking out of templates to build customized reading experiences, by Kevin Nguyen, November 2012

Do you have other examples to recommend? Please share links in the comments!

17:49

10 examples of bespoke article design and scrolling goodness

Have you been noticing all the pretty sliding/scrolling articles that are popping up around the Internetz? My students think they’re wonderful, and so do I. So let’s look at a roundup of some great ones.

Screenshot: Snow Fall

Of course we’ll begin with Snow Fall: The Avalanche at Tunnel Creek. This New York Times multimedia feature had the world journalism community talking and tweeting like crazy as soon as it appeared online. This blog post – More than 3.5 million page views for New York Times’ “Snow Fall” feature – reproduces an internal New York Times memo about how popular the multimedia feature turned out to be. In this post at Source (a project concerning journalism code) – How We Made Snow Fall: A Q&A with the New York Times team – the graphics director, graphics editor, video journalist, and deputy director for digital design who created this feature explain how they did it.

Screenshot: America: Elect!

America: Elect! (from The Guardian) is not only a fun, slidy mini-graphic novel – it’s also the subject of a short but very helpful how-to article: How we built our “America: Elect!” graphic novel interactive, by interactive developer Julian Burgess. Parallax scrolling libraryskrollr (check this one out).

Screenshot: Dock Ellis 1 of 2

Screenshot: Dock Ellis 2 of 2

ESPN was ahead of the pack with The Long, Strange Trip of Dock Ellis, a lavishly illustrated story about the Pittsburgh Pirates pitcher. Plugincurtain.js.

Screenshot from Pitchfork 1

Screenshot from Pitchfork 2

Pitchfork magazine used the technique as a showcase for photography, featuring Bat for Lashes singer Natasha Khan, in a cover story titled Glitter in the Dark.

Screenshot: Lost and Found

Lost and Found, an NPR story about photographer Charles W. Cushman, has a beautiful horizontal scrolling audio story in the middle of the page. Look for the Play button below the heading “The Year Is 1938.” Frameworkpopcorn.js.

Screenshot: Fracking

Screenshot: Every Last Drop

The Guardian‘s Burgess linked to a scrolling graphic story about fracking — What goes in and out of hydraulic fracturing (it appears that designer Linda Dong rolled her own scrolling code for this one) — which reminded me a little of Every Last Drop, which uses scrolling graphics to tell the story of how much water we waste every day (parallax scrolling libraryskrollr). I found the fracking story to be more journalistic, especially given the sources listed at the end.

Screenshot: Cycling's Road Forward

Another long-form narrative dressed up very nicely with this technique: Cycling’s Road Forward, from The Washington Post. Framework: Bootstrap. Tools include Modernizr.

Screenshot: Unfit for Work

Unfit for Work (from Planet Money, a program that runs on NPR) has a beautiful responsive article design. I love the big data graphics embedded throughout the article. I’ve been all over the code looking for the bit that slides the sections up and down, but all I can find is very clean CSS and HTML, great attention to responsiveness, and assorted JavaScript files that don’t reference the section element, the H3, or the wallpaper class. I’m super-impressed by the code, because it looks like it can be replicated for other articles. In other words, this design is repeatable.

Screenshot: Too Young to Wed

Too Young to Wed (from the United Nations Population Fund) is a little harder to navigate than the others, in my opinion (it interrupts the vertical scroll with horizontal-scrolling slideshows), but the gorgeous photography and heartbreaking story make it well worth a look. jQuery plugin: ScrollTo.

There are many tutorials for parallax scrolling — here’s one.

Related: The future of the feature: Breaking out of templates to build customized reading experiences, by Kevin Nguyen, November 2012

Do you have other examples to recommend? Please share links in the comments!

September 05 2012

00:00

Aerbook Maker, Kwik Help E-Books Come Alive with Multimedia

In the two years since I wrote a "A Self-Publisher's Primer to Enhanced E-Books and Book Apps," the development of user-friendly tools for authors to build rich-media books has boomed. Aerbook Maker and Kwik are two easy-to-use tools for authors of graphically rich enhanced e-books and apps. Mimetic Books is developing a tool for photographers and artists. The founders demonstrated these Corona-backed tools at the last meeting of the Palo Alto, Calif., Corona SDK Meetup Group titled "Bringing Stories to Life - eBook Development with Corona SDK."

Before I go into more detail, it's worth noting that these are really today's only options for authors who are not programmers to easily create picture books and games. Aerbook Maker is a browser-based, drag-and-drop tool that works much like presentation applications like Keynote and PowerPoint. Kwik is a plugin that extends Photoshop CS5 to create pages of a book and even animations. Mimetic is at work on a plugin to Adobe InDesign.

AERBOOK MAKER

Ron Martinez

Aerbook Maker was founded by Ron Martinez, an inventor with a long resume including the impressive title of vice president, Intellectual Property Innovation for Yahoo. He was there to demonstrate Aerbook Maker, talk about an upcoming Corona partnership, and give a sneak peak of projects in the pipeline.

If you're writing an illustrated children's' book, a book of photography, art, or any other heavily graphic book, Aerbook Maker is for you. Martinez demonstrated how easy it is to drag and drop your files into a window in the web browser. You can drop in photos, audio, video, text boxes, scene animation, and interactivity, then rearrange them and apply styles, colors, and frames.

When you're done, export your content to all the major e-book formats -- to HTML5 for viewing on the web -- and soon you'll be able to print.

A built-in social media feature lets readers share any page of your book on Twitter, Facebook, and other networks. Like Kwik and many other tools for authors, Aerbook is evolving, and though books are not fully or officially supported until iOS 6, your book will probably already work on the iPad today.

The tool is cloud-based, so whether you're just one author, or partnering with a designer or an entire team, the project is scalable and centrally available.

Aerbook Maker's pricing structure is based on export credits at $29 each or $99 for five exports. This removes the Aerbook watermark and generates a final version to download directly to devices and place with e-book retailers. Their services include book and app distribution, and they will help you build your book for a reasonable fee.

KWIK PHOTOSHOP PLUGIN

Kwiksher Book Floating FunKwik is now in release 2.0, and founder Alex Souza showed off some impressive cross-platform e-books: "Fire Cupid" (featured in the Wall Street Journal, TIME, the Washington Times and others), Frederick "Spin" (which soared to the No. 2 e-book in the Dutch App Store), and "Sparky the Shark" (a beloved, award-winning children's tale).

Kwik's capabilities allow much more than creation of a simple color book. You can add audio, sound effects, buttons, timers, actions, drag and drop objects, linear animation, sprite sheets, movie clips, even path animation. Children's book authors will be interested in the ability to sync audio to text so that the words are highlighted during playback. If you have items for sale in the iTunes App Store or Google Play, you can insert in-app purchases. Output your book to a universal app or iPad, iPhone, Kindle Fire, Nook Color or other Android device.

Kwik's creator, Alex Souza, holds a master's degree in Digital Design. In 1995, he was the first developer of a Shockwave game in his native Brazil, and in 2000 was a runner-up for the iBest Top 3 award, Brazil's most important Internet award. Later he worked for IBM and Microsoft, creating applications and marketing Microsoft Office, Expression and Silverlight.

"There are too many updates to 2.0 to list, but physics is a major thing in the new version," said Souza, "so the game-making capabilities have improved." Kwik 2 costs $249.99 for a new license and $149.99 for an upgrade but at launch. Look for it in late September and get introductory pricing at $199.99 and $99.99. The free trial version will allow you to export up to four project pages. For ideas on what can be done with Kwik, take a look at their showcase.

Mimetic Books

Golden Gate Bridge E-Book / AppPhotojournalist David Gross of Mimetic Books presented some of his recent e-books including App of the Week winner "A Wild Flight of the Imagination: The Story of the Golden Gate Bridge," a project he put together for its 75th anniversary. The free e-book weaves interactive photographs, artwork, letters, and newspaper clippings together with music, audio recordings and video.

Gross is a photographer who can code, and he invented his own way of importing his projects directly from Adobe InDesign (the tool that book designers use) and exporting the results to XML. Gross says that Mimetic Books plans to offer an InDesign plugin so that photographers and artists can create books to publish to the iPad and Nook. In the meantime, they do it for you. You choose from a number of designs, then send Mimetic the picture files. They can create a chapter from a properly captioned collection of photos in Lightroom or from captioned JPEG pictures. Or you can hire them to do full-service graphic design, photo-editing, copywriting, editing, animation, and custom programming.

Gross said that as well as using InDesign, "I am working on ways of using Google Apps, WordPress, and a custom browser-based editor to create books. As well, I am investigating whether Kwik can create plugins for books -- Kwik excels in making complex animations, so why should I?"

Regarding pricing, Gross said that "I was offering book apps starting at $850, but I found that clients did not have enough experience in graphic design to deliver 100% complete materials. The extra work I have to do to prepare clients' pictures, sound, and video, and the multiple changes clients make during the creation of the book, I have found a book project generally costs between $5,000 and $15,000. In addition, custom "interactive" pages also raise the price. But, I can produce a basic book app relatively cheaply using my system."

Mimetic plans to have some products ready to go near the end of October.

By now, you might be wondering, so what's an e-book and what's an app? Yes. The lines are blurring as content becomes portable among a variety of devices.

"Book apps are different from e-books," Gross explained. "E-books are data files which are displayed with readers. EPUB is one of the best-known data file formats designed for books of text (not fixed-format). A 'book app' is an app -- a stand-alone program -- that is a book. It's a weird idea, actually, a temporary effect of the state of publishing software and the market. In a rational world, it wouldn't exist, and I don't expect such things to exist in few years. Instead, we will have a few e-book file formats that the different devices can read and display."

Why the Corona SDK?

If you're geeky enough to know that SDK stands for Software Development Kit, you might be interested in the reasons these e-book and app platform developers chose the Corona SDK to power Aerbook Maker and Kwik export-to-app capabilities. They pointed me to David Rangel, COO of Corona Labs, to provide details, and here's what he told me.


"Corona integrates a number of advanced technologies such as OpenGL (widely adopted 2D and 3D graphics API), Box2D (a 2D physics engine for games), physics and more, to allow developers to create great mobile content," Rangel said. "If e-book platforms wanted to replicate these features on their own, it would take them loads of development time and expertise. By building to Corona SDK, they save a great deal of time and get to take advantage of our platform's offerings."



Adding to the previous point, Rangel said, "Corona allows developers to build apps for both iOS and Android, from a single code base. If e-book platforms want to support both of these operating systems, they would need to spend a lot of time and energy building in that support. As we add in more features and platform support for Corona SDK, Kwik and Aerbook Maker automatically reap the benefits."

Designers and illustrators are attracted to the SDK's core engine because of its popularity in the mobile space. Kwik and Aerbook Maker provide the added advantage of allowing e-book authors to create impressive content without the need for code.

Watch the YouTube Video

The folks at Corona Labs recorded the event.



Carla King is an author, a publishing consultant, and founder of the Self-Publishing Boot Camp program providing books, lectures and workshops for prospective self-publishers. She has self-published since 1994 and has worked in multimedia since 1996. Find her workshop schedule and buy the Self-Publishing Boot Camp Guide for Authors on SelfPubBootCamp.com.

This is a summary. Visit our site for the full post ».

January 17 2012

10:31

December 21 2011

05:13

New Poynter eye-tracking study focuses on tablet design and user experience

Tablets have been around for a while, it's time we finally learn how people use them.

Well, SND STL was amazing and is finally in the books. After a little recovery and catch-up-on-reading time, I’ve found my next side project: The Poynter Institute’s new eye-tracking study, focused on tablet design and user experiences.

I remember when the previous eyetracking studies were released it was kind of like this kid on Christmas morning. I’ve regularly referred to them and re-read them throughout my career and now to be involved in the project now is amazingly humbling and exciting. The group involved in this round of research is like my fantasy journalism design team: Sara Quinn, Dr. Mario Garcia, Jeremy Gilbert, David Stanton, Rick Edmonds, Regina McCombs, Roger Black, Rusty Coats, Andrew DeVigal, Jeff Sonderman, Jennifer George-Palilonis, Michael Holmes, Damon Kiesow, Miranda Mulligan, Tor Bøe-Lillegraven, Nora Paul, Robin Sloan, and Matt Thompson.

Our focus this time around, tablets, are an interesting beast because they seem to marry dynamic and interactive content of the web with the portability and “lean back” nature of print or even TV experiences. Often lumped in with mobile devices, tablets are similar, but very unique in many ways. Mobile is always with you and very utility, speed-driven; tablets tend to be portable within the house and workplace, and early research shows that people tend to consume more content and for longer periods on them than either mobile or the web.

We’re going to look at design challenges such as which view do people people prefer to consume content in most frequently – portrait or landscape.  Even in those two options, I suspect the behaviors from users on an 10-inch, letter-box shaped device like the iPad may differ greatly from those on a 7″ tablet, like the Kindle Fire. Or the type of content they’re consuming will likely also change the results, from my personal anecdotal experience (and what I’ve observed in others), I tend to read text more frequently in portrait mode and video in landscape no matter what device. But that’s just anecdotal.

There’s lots to learn and this research will offer ‘more than a hunch’ solutions to help us all improve our products. Specifically, we’ll focus on some of these issues and questions, which Sara spelled out in her original announcement post:

  • Tools and tasks: How intuitive can tablet navigation be and how long does it take to successfully complete a task?
  • Satisfaction: How happy are users with an overall experience and how does that impact their perception of the credibility of the source?
  • Comprehension and retention: Which forms help people to understand and remember what they have seen or read?
  • Business and revenue: What strategies might work for news organizations? For advertisers? For consumers? How might editors set up a newsroom to create content for a tablet product?

How you can help right now

  • Your questions - Share your thoughts, comments and suggestions on the Poynter Eye-Tracking research page on Facebook and follow along there to learn more about what we’re learning.
  • Funding – The Knight Foundation and CCI Europe is helping kick in money, but the more funding, the more extensive research we can do. Please contact Sara about this at: squinn [at] poynter.org.

 

December 18 2011

05:47

A Brief Rant on the Future of Interaction Design

Thought-provoking! A really good article that pushes us to think beyond swiping our fingers on "pictures under glass."

October 14 2011

10:29

The Do’s And Don’ts Of Infographic Design





 



 


Since the dawn of the Internet, the demand for good design has continued to skyrocket. From Web 1.0 to Web 2.0 and beyond, designers have remained on their toes as they define the trends and expectations of our online universe. The Internet is a great designer’s playground, and online businesses are growing more and more appreciative of what can be gained from a bit of well-executed eye candy. Over the past two years, this fact has become the backbone of a growing trend in online marketing: the infographic.

Infographics are visual representations of information, or “data viz” as the cool kids call it these days. The term “data viz” comes from “data visualization,” which implies that sets of data will be displayed in a unique way that can be seen, rather than read. This visualization should not be left up to interpretation, it should instead be designed in a way that provides a universal conclusion for all viewers. In the simplest terms, infographics are not too different than the charts and graphs that programs like Excel have been spitting out for years.

Of course, just as Web 2.0 changed 1.0, today’s infographics are far more eye-catching than simple pie charts and bar graphs. Today, infographics compile many different data visualizations into one cohesive piece of “eye candy.” They have evolved with design trends, received some creative facelifts, and the Internet is now getting filled with interesting information delivered in enthralling ways.

While some design trends come and go, infographics are here to stay. With brands like USA Today, The New York Times and Google and even President Obama getting behind them, infographics are becoming a powerful tool for disseminating huge amounts of information to the masses. Companies large and small are using infographics to build their brands, educate their audience and optimize their search engine ranking through link-building. This is why learning how to design a good infographic is a must, and avoiding the common pitfalls of infographic design could mean the difference between landing a big client and losing them entirely.

Wrapping Your Mind Around Data Viz

Designing an infographic is not the same as designing a website, flier, brochure, etc. Even some of the best designers, with portfolios that would make you drool, cannot execute an effective infographic design. Creating infographics is a challenge and requires a mindset that does not come naturally to everyone. But that mindset can be gained through practice and by sticking to certain standards, the most important of which is to respect and understand data viz. Here are some simple rules to follow when wrapping your mind around proper data viz.

Show, Don’t Tell

A rule of cinema is to show, don’t tell. The same holds true for infographic design. The foundation of any good infographic is data viz. As an infographic designer, you may or may not determine the concept and compile all of the research for the final design, but either way you are responsible for turning that information into a visually stimulating, cohesive design that tells a story and that doesn’t miss a single opportunity to visualize data. Take this portion of an infographic about Twitter by ViralMS as an example:

twitter infographic
This Twitter infographic writes out the data, rather than visualizing it.

What’s wrong with this infographic? It breaks the first rule right out of the gate. When you have an opportunity to display information visually, take it. Here, the tweets per second could have at least been shown in a bar graph. This would enable someone to quickly look at this section and see what’s going on; by seeing the various heights of the bars, the eye could have quickly gauged the differences in tweets per second per event without having to read anything.

If you’re having trouble adhering to this rule, try keeping all of your text on one layer of your AI file (excluding text inside charts and graphs). Every once in a while, turn off the text layer and see whether the infographic still makes sense. If there isn’t any data viz, or if a bunch of pictures are missing context, then you are doing too much telling and not enough showing.

If the Client Wanted an Excel Chart, They Wouldn’t Need You

It might sound harsh, but it’s true. If infographics were as simple as laying out a bunch of standard charts and graphs on a page, then clients would not need to search out great designers. Many tools are online that can create colorful pie charts, line graphs and bar graphs, so you have to take things to the next level for your design to stand out. Taking the data from above, which of the two graphs below do you think would make a client happier?

unique data viz
Two ways to visualize the data from the Twitter example above.

If you answered Graph B, you’re catching on. Of course, not all data lends itself to creative and unique graphs. Graph A might work very well if the rest of the infographic shared a similar aesthetic. Sometimes you just have to bite the bullet and produce a traditional bar graph or pie chart; nevertheless, always consider ways to dress it up, as in the examples below:

infographic examples
Ways to dress up simple graphs for an infographic.

Typography Should Not Be a Crutch

Typography can make or break a design, but it should not be the solution to a data viz problem. More often than not, designers begin an infographic with a great deal of energy and excitement, but they lose steam fast as they continue down the page. This often leads to quick decisions and poor solutions, like using typography to show off a big number instead of visualizing it in some way. Here’s an example:

Too much dependence on typography
TravelMatch’s infographic highlights too much.

Whenever I see this, I’m reminded of the “Where’s the beef?” ad campaign, and I think, “Where’s the data viz?” Although Sketch Rockwell is one of my all-time favorite fonts, this is a perfect example of relying too much on typography.

Any time a research number is provided to you for an infographic, ask yourself how it can be visualized. Percentages can always be visualized with creative pie charts; numerical values in a set can usually be turned into a unique bar graph; and when numbers don’t fit on a consistent scale, you might be able to visualize them in a diagram. Here is another way the above data could have been visualized:

data visualization
An example of how to visualize the TravelMatch data, rather than relying on typography.

Typography Has Its Place

All that being said, typography does have its uses, which should not be ignored when creating an infographic. Most of the time, you will want to focus your creative typographical energies on titles and headings. The title of the infographic is a perfect opportunity to use a fun and eye-catching font and to give it a treatment that fits the theme or topic. Just make sure the title isn’t so distracting that it takes away from the reason we are looking at the infographic in the first place. The truth of the matter is that some infographic topics are boring, but the right title design can engage people enough to scroll through.

Similarly, headings help to break up an infographic and make the data easier to take in, giving you another chance to let your font-nerd flag fly.


The title of an infographic is your chance to draw attention to the design.

Organization And Storyline

Organizing an infographic in a way that makes sense and that keeps the viewer interested is not always easy, but it’s part of the job for most infographic designers. Usually, you will be given a lot of data and will need to create a visual story out of it. This can be challenging at first, but you can follow some general rules to make things easier.

Wireframe the Infographic

Wireframing an infographic enables you to work out a storyboard and layout for the design. You may have an idea of the story you want to tell, but as you start laying things out, you might hit a wall and have to start over. Having to reorganize after having already done a lot of the design is incredibly frustrating. Avoid this by setting up your storyline at the start to determine what data to show and how. Set aside an hour to sketch things out and make sure it all makes sense. This will also help to ensure that the color palette you will choose drives attention to the important points and keeps the eye flowing down the page.

Think Outside the Box

As you wireframe the infographic, you will identify section breaks that help to tell the story. Most infographics online have a vertical flow, in which each section has a heading to distinguish it from the last. This gets boring fast. Organizing the data and sectioning off information without relying entirely on headings and color breaks is a good way to break the monotony.

For instance, rather than going for a typical one-column layout, you could use two columns in certain parts. You could also break up sections with borders, with backgrounds of different shapes or give the entire design a road or path theme. Here’s some outside the box layouts to get your creative juices flowing:

unique infographic layouts
There are many unique ways to lay out an infographic that will keep the viewer engaged.

Tell a Story

All good stories have a beginning, middle and end. Infographics deserve the same treatment. At the beginning of the infographic, introduce the problem or thesis. From there, back it up with data. Finally, end the infographic with a conclusion.

Visualize the Hook

Every good infographic has a hook or primary take-away that makes the viewer say “A-ha!” As a designer, you should make this hook the focal point of the design if at all possible. Placing the hook at either the center or very end of the infographic is usually best, so that it grabs more attention. Give the most important information the most visual weight, so that viewers know what to take away. Here are some examples of well visualized hooks:

hooks in infographics
Hooks should either be in the center, beginning, or end of the infographic and need the greatest visual emphasis.

Cleaning Things Up With Color

The difference a color palette can make is amazing, especially in the world of infographics. The right palette can help organize an infographic, evangelize the brand, reinforce the topic and more. The wrong palette can turn a great topic into an eyesore, harm the brand’s image and convey the wrong message. Here are some tips to consider when choosing colors for your infographic.

Make It Universal

In Web design, it’s always important to choose a palette that fits the theme of the website and that is neutral enough for a diverse group of visitors. Because infographics are primarily shared online, picking the right palette for an array of visitors is equally important. You must also consider what looks good online.

For instance, dominant dark colors and neons typically do not translate well on infographics; neon on black can be hard to read, and if there is a lot of data, taking it all in will be a challenge. Also, avoid white as a background whenever possible. Infographics are often shared on multiple websites and blogs, most of which have white backgrounds. If your infographic’s background is also white, then deciphering where it begins and ends will be difficult.

A Three-Color Palette Is Easy on the Eyes

With all of the data that goes into an infographic, make sure that the reader’s eye easily flows down the page; the wrong color palette can be a big barrier to this. Choose a palette that doesn’t attack the senses. And consider doing this before you start designing, because it will help you determine how to visualize the various elements.

If picking a color palette is hard for you, stick to the rule of three. Choose three primary colors. Of the three, one should be the background color (usually the lightest of the three), and the other two should break up the sections. If you need to add other colors, use shades of the three main colors. This will keep the palette cohesive and calming, rather than jarring.

Use the Tools at Your Disposal

When picking colors, you don’t have to reinvent the wheel. A number of great websites out there will help you choose the right palette for your infographic. Adobe’s Kuler offers fresh themes and a searchable database, as well as an easy tool to adjust the palette that you’re interested in. One issue with Kuler is that all of the palettes have five colors, and the colors are sometimes from completely different families, rather than shades of a few primary colors, so finding the right palette can be like searching for a needle in a haystack.

Another color-picking tool is COLOURlovers. This database is easier to search through: it breaks palettes into different themes and can be sorted by favorites. While most of the palettes also consist of five colors, the colors are not always given equal weight; instead, the tool suggests which should be dominant. Here are some good and bad palettes for infographics:

infographic color palettes

Final Thoughts

While these standards are important to consider for most infographic designs, sometimes an infographic comes along that breaks all of these rules and still succeeds immensely. In the end, clients like “eye candy” and designs that “pop!” While such terms are subjective (and annoying to most designers), we all know a great infographic design when we see one, and your clients do, too. Use these rules to guide you into the infographic realm, but create your own techniques and standards after you’ve gained some experience.

(al)


© Amy Balliett for Smashing Magazine, 2011.

October 07 2011

11:13

Hi, my name’s Zarino

So when Nicola asked me to write a Friday post introducing myself on the ScraperWiki blog, I never thought I’d be writing it during such a momentous few days. I was meant to entertain and beguile you with talk of my MSc research into Open Data at Oxford, tease and tantalise with news of how we’re making ScraperWiki cleaner, faster and more intuitive.

But suddenly, all of that seemed pretty unimportant. In the small hours of Thursday morning, people all over the UK woke up to find that Steve Jobs, one of the greatest and most controversial legends of the technology world, had passed away. The news rocked Twitter — there was pretty much nothing else in my stream all day — flowers and candles were laid outside Apple Stores around the world, people published poems and pictures and stories and bittersweet obituaries. Many of the highest-traffic pages on the web displayed humble banners with his name. Some simply shut down and devoted every pixel to his memory.

And it got me wondering — what does a guy do to cause such a stir? Books will no doubt be written (in fact, they already have) answering that question. They’ll talk about Steve the college dropout, Steve the child of the Sixties, Steve the garage marketeer. They’ll picture him bowtied and bespectacled grinning above the first Macintosh, clad in the inimitable blue and black at one of a hundred keynotes, and worryingly gaunt at the height of his battle with cancer. They’ll talk about how he revolutionised not just the computing industry, not just the software industry and not just the music industry, but also the animation industry, the movie industry, and the technology retail industry. And they’ll be right.

But if you ask me, the real reason why we’re all laying flowers for this guy, writing poems for him, even talking about him at all, is because he put the user at the live, beating heart of everything he did. Steve didn’t invent the mouse, or the GUI or the personal computer, but in a world of green-on-black, of FORTRAN and BASIC, he had the foresight, the passion and the balls to back these weird, unpopular and user-centric technologies, because he knew, once normal people had access to the liberating power of the silicon chip, their lives would change forever. It’s only a matter of time until someone (hopefully us!) does the same with data.

I’m no Steve Jobs (I look terrible in turtle-necks). But if I can do anything here at ScraperWiki, it’s to try and bring some of that user focus to the world of data science. Life is too short to spend it puzzling over dubug console output, or commenting out lines of code one by one. And most of all, life’s too short to be doing all of that alone. I have two goals as the ScraperWiki UX guy: to make the experience of using our services as smooth, as intuitive and as integrated as possible, and also to make it as social as possible—not in a Facebook way, but in a hackday way—so you can all benefit from the wealth of experience, backgrounds and talents around you, right now, on this very site. There’s some amazing work being done by our members, and it’s my job to make sure you can keep on doing it, keep on getting the scoops, informing the public, serving your clients, no matter how hideous the HTML or unstructured the PDF.

Like I said, I’m no Steve Jobs. Who could even try to compete? But like Steve, I have an email address – zarino@scraperwiki.com – and I want to hear from you. Yes, you, right now. And in the future, whenever you have a problem. Whenever you think of something ScraperWiki should be doing for you, or whenever it fails to do something it says it should. Drop me an email and we’ll work on a solution (I promise my responses won’t be as famously acerbic as Steve’s).

And with that, I’ll leave you. Our brilliant new Editor interface isn’t going to design itself, you know. But before I go, I should take one last chance to say thank you. To you amazing ScraperWiki diggers, to Francis and the ScraperWiki team, but most of all, to Steve, for making all of this possible. I hope we can do him proud.


September 16 2011

15:30

This Week in Review: A unique paywall plan in Boston, and ethics at TechCrunch and the Times

Every Friday, Mark Coddington sums up the week’s top stories about the future of news.

Paid and free, side by side: The Boston Globe became the latest news organization to institute an online paywall this week, but it did so in an unprecedented way that should be interesting to watch: The newspaper created a separate paid site, BostonGlobe.com, to run alongside its existing free site, Boston.com. PaidContent has the pertinent details: A single price ($3.99 a week), and Boston.com gets most of the breaking news and sports, while BostonGlobe.com gets most of the newspaper content.

As the Globe told Poynter’s Jeff Sonderman, the two sites were designed with two different types of readers in mind: One who has a deep appreciation for in-depth journalism and likes to read stories start-to-finish, and another who reads news casually and briefly and may be more concerned about entertainment or basic information than journalism per se.

The first thing that caught many people’s attention was new site’s design — simple, clean, and understated. Tech blogger John Gruber gave it a thumbs-up, and news design guru Mario Garcia called it ”probably the most significant new website design in a long time.” The Lab’s Joshua Benton identified the biggest reasons it looks so clean: Far fewer links and ads.

Benton (in the most comprehensive post on the new site) also emphasized a less noticeable but equally important aspect of BostonGlobe.com’s design: It adjusts to fit just about any browser size, which reduces the need for mobile apps, making life easier for programmers and, as j-prof Dan Kennedy noted at the Lab, a way around the cut of app fees required by Apple and others. If the Globe’s people “have figured out a way not to share their hard-earned revenues with gatekeepers such as Apple and Amazon, then they will have truly performed a service for the news business — and for journalism,” Kennedy said.

Of course, the Globe could launch the most brilliantly conceived news site on the web, but it won’t be a success unless enough people pay for it. Poynter’s Sonderman (like Kennedy) was skeptical of their ability to do that, though as the Atlantic’s Rebecca Rosen pointed out, the Globe’s plan may be aimed as much at retaining print subscribers as making money off the web. The Washington Post’s Erik Wemple wondered if readers will find enough at BostonGlobe.com that’s not at Boston.com to make the site worth their money.

The TechCrunch conflict and changing ethical standardsLast week’s flap between AOL and TechCrunch over the tech site’s ethical conflicts came to an official resolution on Monday, when TechCrunch founder Michael Arrington parted ways with AOL, the site’s owner. But its full effects are going to be rippling for quite a while: Gawker’s Ryan Tate called the fiasco a black eye for everyone involved, but especially AOL, which had approved Arrington’s investments in some of the companies he covers just a few months ago. Fellow media mogul Barry Diller also ripped AOL’s handling of the situation.

At the Guardian, Dan Gillmor said that while he doesn’t trust TechCrunch much personally, it’s the audience’s job to sort out their trust with the help of transparency, rather than traditional journalism’s strictures. Others placed more of the blame on TechCrunch: Former Newsweek tech editor Dan Lyons said TechCrunch’s people should have expected this type of scenario when they sold to a big corporation, and media analyst Frederic Filloux said TechCrunch is a perfect example of the blogosphere’s vulnerability to unchecked conflicts of interest.

There was more fuel for those kinds of ethical concerns this week, as the winning company at TechCrunch’s annual Disrupt competition was one that Arrington invests in. But Arrington had an ethical accusation of his own to make at the conference, pointing out that the New York Times invests in a tech venture capital fund which has put $3.5 million into GigaOM, a TechCrunch competitor. Poynter’s Steve Myers detailed the Times’ run-ins between the companies it invests in and the ones it covers (and its spotty disclosure about those connections), concluding that even if the conflict is less direct than in blogging, it’s still worth examining more closely.

As it plunged further into its battle with TechCrunch late last week, AOL was also reported to be talking with Yahoo, which recently fired its CEO, about a merger between the two Internet giants. All Things Digital’s Kara Swisher said there’s no way the deal would actually happen; Wired’s Tim Carmody called it a “spectacularly crazy idea” and GigaOM’s Mathew Ingram agreed, while Business Insider reminded us that they said a year ago that AOL and Yahoo should merge.

Meanwhile, the New York Times’ David Carr homed in on the core problem that both companies are facing: The fact that people want information online from niche sites, not giant general-news portals. “As news surges on the Web, giant ocean liners like AOL and Yahoo are being outmaneuvered by the speedboats zipping around them, relatively small sites that have passionate audiences and sharply focused information,” he wrote.

Facebook opens to subscribers: It hasn’t gotten nearly as much attention as some of its other moves, but Facebook took another step in Twitter’s direction this week by introducing the Subscribe Button, which allows users to see other people’s (and groups’) status updates without friending or becoming a fan of them.

As GeekWire’s Monica Guzman and many others noted, Facebook’s “subscribe” looks a heck of a lot like Twitter’s “follow.” When asked about similar Google+ features at the TechCrunch Disrupt conference, a Facebook exec said it wasn’t a response to Google+.

Guzman said Facebook is putting down deeper roots by going beyond the limits of reciprocal friendship, and GigaOM’s Mathew Ingram pinpointed the reason why this could end up being a massive change for Facebook: It’s beginning to move Facebook from a symmetrical network to an asymmetrical one, which could fundamentally transform its dynamics. Still, Ingram said Twitter is much better oriented toward being an information network than Facebook is, even with a “Subscribe” button.

The change could have particularly interesting implications for journalists, as Poynter’s Jeff Sonderman explained in his brief outline of the feature. As he noted, it may eliminate the need for separate Facebook profiles and pages for journalists, and while Lost Remote’s Cory Bergman said that should be a welcome change for journalists who were trying to manage both, he noted that shows and organizations may want to stick with pages.

News Corp.’s scandal widens: An update on the ongoing scandal enveloping News Corp.: A group of U.S. banks and investment funds that own shares in News Corp. expanded a lawsuit to include allegations of stealing, hacking, and anti-competitive behavior by two of the company’s U.S. subsidiaries — an advertiser and a satellite TV hardware manufacturer. As the Washington Post’s Erik Wemple noted, these are old cases, but they’re getting fresh attention, and that’s how scandals gain momentum.

James Murdoch, the son of News Corp.’s Rupert Murdoch, was also recalled to testify again before members of Britain’s Parliament later this fall, facing new questions about the breadth of News Corp.’s phone hacking scandal. The Wall Street Journal examined the scandal’s impact on the elder Murdoch’s succession plan for the conglomerate, especially as it involves James. The company’s executives also announced this week that they’ve found tens of thousands of documents that could shed more light on the phone hacking cases.

Reading roundup: Here’s what else went on this week:

— The biggest news story this week, of course, is actually 10 years old: Here’s a look at how newspapers marked the anniversary of 9/11, how news orgs used digital technology to tell the story, and a reflection on how 9/11 changed the media landscape.

— Twitter introduced a new web analytics tool to measure Twitter’s impact on websites. Here’s an analysis from Mathew Ingram of GigaOM.

— At an academic conference last weekend, Illinois j-prof Robert McChesney repeated his call for public funding for journalism. Here are a couple of good summaries of his talk from fellow j-profs Axel Bruns and Alfred Hermida.

— Finally, here’s a relatively short but insightful two-part interview between two digital media luminaries, Henry Jenkins and Dan Gillmor, about media literacy, citizen journalism and Gillmor’s latest book. Should make for a quick, thought-provoking weekend read.

September 01 2011

09:19

The ultimate responsive web design roundup

Responsive design is the new darling of the web design world. It seems that not a week goes by that there aren’t new resources for doing it, opinions about how to do it or even whether to do it at all, and new sites that make beautiful use of it.

It can quickly get overwhelming trying to keep up with it all.

Here we’ve compiled a list of more than seventy resources for creating responsive designs.

Included are articles discussing responsive design and related theories, frameworks and boilerplates for responsive layouts, tools for testing your responsive designs, techniques for resizable images, and a whole lot more.

Then, to top it all off, we’ve collected a hundred of the best responsive designs out there right now to inspire you and give you some real-world ideas.

Articles and Publications

Below are a number of high-quality articles talking about responsive design and the techniques that go into it. Some might include a few code snippets or other technical information, but for the most part, these are concept-level discussions.

Responsive Web Design

This is the original post by Ethan Marcotte that was posted on A List Apart. It discusses the reasoning and principles behind responsive design, as well as practical techniques for creating responsive sites.


Responsive Web Design Book

Responsive Web Design by Ethan Marcotte, published by A Book Apart, covers the state of the responsive web, flexible grids, flexible images, media queries, and how to create responsive designs.


The Practicalities of CSS Media Queries, Lessons Learned

This post, from Bloop, is a fantastic overview of how to use media queries (and their pros and cons compared to creating a dedicated mobile site), as well as some useful tips for implementing them. Some useful code snippets are included, too.


Big vs. Small: Challenges in Responsive Web Design

This article discusses some of the challenges responsive web design can present, including the unique considerations that are required as desktop screen sizes continue to grow, while at the same time many users are now accessing the web more on tablets or smartphones.


Beginner’s Guide to Responsive Web Design

This Beginner’s Guide from Think Vitamin offers a great introduction to responsive design, including information on fluid grids and media queries.


Responsive Web Design: What It Is and How To Use It

This introduction to responsive design from Smashing Magazine is a great primer on the subject. It covers the basic concept, as outlined by Ethan Marcotte, as well as practical concerns for creating responsive designs. Code examples are also included.


Responsive by Default

This article from Andy Hume discusses why the web is responsive by default, and that designers have been forcing it to be un-responsive for years. It’s an interesting idea, discussed mostly from a developer’s point of view.


Content Choreography

We often talk about responsive design strictly from the technical end of things, but the entire point of responsive design is to improve the content experience. This post from Trent Walton talks about just that, how stacking content isn’t always the best solution, and what can be done instead.


Understanding the Elements of Responsive Web Design

This post from Six Revisions covers the basics of responsive design: flexible grid, flexible images, and media queries.


A Brief Overview of Responsive Design

Here’s another great basic rundown of what responsive design is and how to achieve it, this time from 1st Web Designer.


Responsive Web Design has Created Opportunities Across the Board

This post covers some of the opportunities that responsive design presents for designers and developers.


Designing for a Responsive Web

This article from Webdesigntuts+ discusses responsive design in terms of fluid grid, fluid images, and media queries.


Experimenting with Responsive Web Design

This article from Lee Munroe gives a simple overview of responsive design, particularly media queries, as well as some examples.


CSS3 Media Queries

Web Designer Wall offers a great roundup of media query code snippets, responsive design examples, and more in this article.


20 Amazing Examples of Using Media Queries for Responsive Web Design

This post from Design Shack offers up some great examples of responsive design, as well as plenty of information how to create your own responsive sites.


Context

This post from Adactio covers some of the confusion that often surrounds responsive design, breaking it down in simple terms and offering some useful insight.


A Richer Canvas

This article from Mark Boulton discusses some of the advantages that responsive design, CSS3, and other tools give designers and content creators, specifically that we should be designing from the content out, rather than the other way around.


Some Thoughts on Responsive Web-Design and Media Queries

This post from Jon Phillips discusses some of the potential downsides to responsive design and, more importantly, offers some great solutions.


Responsive Web Design and Mobile Context

This post discusses how mobile devices are being used for browsing web content, and how that can affect your responsive design choices.


The New Front End Design Stack: The Role of Responsive Design

This post from Acquia discusses the importance of responsive design, offers some great examples, the technical elements that go into creating responsive designs, and more.


Responsive Web Design from the Future

Responsive Web Design from the Future is a presentation by Kyle Neath that discusses the future of web design in relation to responsive design principles.


To Hell With Bad Devices: Responsive Web Design and Web Standards

This is an in-depth look at responsive design, discussing device-specific design, what responsive design means for apps, and more.


The Pros and Cons of Responsive Web Design

Plenty of articles discuss how to create a responsive design, but not that many discuss the good and bad things about responsive designs. The Pam does just that, giving a fairly comprehensive list of the positives and negatives associated.


11 Reasons Why Responsive Web Design Isn’t That Cool

This post from WebDesignShock outlines some of the potential challenges and problems that responsive design can present.


Tutorials

The tutorials below will teach you about CSS media queries and other responsive design techniques.

Quick Tip: A Crash-Course in CSS Media Queries

This Nettuts+ tutorial offers some basics for working with media queries, complete with video tutorial and code snippets.


Adaptive Layouts with Media Queries

This tutorial from .Net Magazine offers a look at basic CSS3 media query techniques. It includes plenty of code snippets and practical information about crafting your own responsive layouts.


Responsive Web Design: A Visual Guide

This video tutorial from Tuts+ offers a great introduction to what responsive design looks like, with examples. It then explains how to create your own responsive design, taking into account both the visual and technical aspects.


CSS Media Queries & Using Available Space

This post from CSS-Tricks explains the concept of using media queries to take advantage of the available space in the browser viewport. It includes plenty of useful code snippets and examples.


Working with Media Queries

Here’s a short tutorial for working with media queries, with plenty of code examples. It’s basic and to-the-point, but a perfect introduction to basic media queries.


How to Use CSS3 Orientation Media Queries

Media queries are great for adjusting the way your responsive design displays on different browser sizes, but a lot of designers overlook the orientation controls. These allow you to change the way your site is displayed based on whether a device is currently oriented to portrait or landscape mode, which is useful for both smart phones and tablets.


Optimizing Your Email for Mobile Devices with the @media Query

We often overlook HTML email newsletters when thinking about responsive design, but considering the number of people who are likely to view your HTML emails on their phone, it’s a good idea to use media queries in this case. This post from Campaign Monitor explains how it’s done.


How to Use CSS3 Media Queries to Create a Mobile Version of Your Website

This post from Smashing Magazine explains how to use media queries for creating a mobile site or otherwise linking separate stylesheets.


Adaptive & Responsive Design with CSS3 Media Queries

This fantastic post from Web Designer Wall includes a responsive design template, as well as a tutorial on how the template was created. It’s a great resource for those who like to learn new techniques by dissecting finished projects.


Responsive Web Design with HTML5 and the Less Framework 3

This article from SitePoint offers thorough instructions for creating a responsive design using HTML5 and the Less Framework. It includes all the code you’ll need for the final design, as well as a good breakdown of what that code does.


Tools and Techniques

The techniques and tools below make it a lot easier to create designs that respond the way you want them to. Many are for handling images (arguably one of the more challenging aspects of responsive design), but there are others, too.

CSS Effect: Spacing Images Out to Match Text Height

Depending on your layout, you may need text to line up properly with images, regardless of how the images and text are spaced. This technique from Zomigi shows you how to do just that.


Hiding and Revealing Portions of Images

Resizing images can only take you so far with responsive designs in some cases. At times, it’s more important for a particular part of an image to be visible or readable than for the entire image to be shown. That’s where this technique from Zomigi can come in handy. It makes it possible to dynamically crop background and foreground images as your layout width changes.


Creating Sliding Composite Images

This technique, from Zomigi, lets you create what appears to be a single image but is actually multiple images layered on top of one another. In this way, you can control the exact placement of different elements of the image as your browser viewport changes size and shape.


Seamless Responsive Photo Grid

This gallery from CSS-Tricks offers up a seamless photo grid that automatically resizes your images and the overall grid to fit your browser viewport.


Responsive Data Tables

Responsive design techniques aren’t very friendly to data tables. It’s easy to end up with tables where the type is so small it’s impossible to read. Or you can specify a minimum width, but then that kind of defeats the purpose of a responsive design. This technique from CSS-Tricks offers a solution for responsively displaying tabular data on a mobile device.


Foreground Images that Scale with the Layout

So it’s easy enough to create scaling background images, but foreground images are a little trickier. This article covers a technique from Zomigi for creating foreground images in your content that will scale with your layout.


FitText

FitText is a jQuery plugin for scaling headline text in your responsive designs. Using this, your text will always fill the width of the parent element.


Sencha.io Src

Sencha.io Src is an image hosting service that sizes your images to the appropriate size for the device requesting them. Images are also optimized for efficient repeat delivery.


The Goldilocks Approach to Responsive Design

This post by Chris Armstrong talks about the “Goldilocks Approach” for creating responsive designs that are “just right” for any device.


Responsive-Images

Responsive-Images is an experiment in mobile-first images that scale responsively to fit your design. The idea is to deliver optimized, contextual image sizes in responsive layouts.


Lettering.js

Lettering.js is a jQuery plugin that gives you precise control over the way your web typography appears, which can be a big plus in maintaining readability in a responsive design.


Fluid Images

This technique from Ethan Marcotte creates fluid-width images for your fluid designs. It also works for embedded videos, and there’s a workaround for IE compatibility.


Respond

Respond is a lightweight polyfill script for min/max width CSS3 media queries, to make them work in Internet Explorer 6-8. It’s only 3kb minified, or 1kb gzipped.


Modernizr

Modernizr is a toolkit for HTML5 and CSS3 that provides JavaScript-driven feature detection combined with media queries.


Responsive Web Design Sketch Sheets

If you wireframe your designs on paper, you’ll find these Responsive Web Design Sketch Sheets to be very useful. There are a couple of different layouts you can download for free, each of which shows a handful of likely device viewports.


Frameworks and Boilerplates

Frameworks and boilerplates can greatly speed up your design process. The good news is that there are tons of boilerplates and frameworks already available for creating responsive designs.

Golden Grid System

The Golden Grid System uses a 16-column base design for widescreen monitors. On tablets, the columns will fold into an 8-column layout. And on smaller smartphone screens, the columns fold again to 4-columns, allowing the design to adapt to anything from a 2560 pixel wide screen down to a 240 pixel screen.


The Semantic Grid System

The Semantic Grid System allows for fluid layouts and responsive designs, while also using semantic markup (which is sorely lacking from most grid frameworks).


Gridless

Gridless is an HTML5 and CSS3 boilerplate for creating mobile-first responsive websites. It includes no predefined grid system and no non-semantic classes.


Less Framework 4

The Less Framework is a CSS grid system for designing responsive sites that adapt to the size of the browser viewport. It has four layouts: default (for desktops and landscape mode tablets), tablet layout, wide mobile layout, and mobile layout. This is a good option for designers who want a responsive design but don’t necessarily want fluid columns.


Responsive Twenty Ten

Responsive Twenty Ten is based on the Twenty Ten WordPress theme. There’s also a plugin available to turn your Twenty Ten child theme into a responsive design.


Columnal

Columnal is a CSS grid system that’s a “remix” of some other grids, with added custom code. The elastic grid base is taken from cssgrid.net, while other bits of code are taken from 960.gs.


1140 CSS Grid

The 1140 CSS Grid System is a flexible, fluid grid that will rearrange based on the browser viewport. It’s designed to fit perfectly in a 1280 pixel wide monitor, but becomes fluid below that.


320 and Up

320 and Up uses the mobile-first principle to prevent mobile devices from downloading desktop assets. It’s an alternative to starting with a desktop version and scaling down.


Skeleton

Skeleton is a boilterplate for responsive, mobile-friend designs. It starts with the 960 grid but scales down for smaller screens, and is designed to be both fast to get started with a style agnostic.


Fluid Grid System

The Fluid Grid System is based on a six-column grid and has 720 different layout possibilities. Because of its simplicity, it degrades well in older browsers.


Fluid 960 Grid System

The Fluid 960 Grid System is based on 960.gs, but has a fluid layout regardless of browser size.


Foldy960

Foldy960 is a responsive version of 960.gs. It consists of some extra classes and other things for turning a 960.gs design into a responsive design.


SimpleGrid

SimpleGrid is another responsive grid framework that supports infinite nesting. It’s configured for screens at four different sizes, including 1235px and 720px.


Testing Tools

These tools make it much easier to test your responsive designs without having to use a bunch of different devices.

resizeMyBrowser

resizeMyBrowser is a useful testing tool for responsive designs. Just click one of the predefined browser size buttons and your browser will resize. Each size is labeled with the name of at least one device that uses that resolution.


responsivepx

responsivepx is a browser testing tool that lets you enter a URL (local or online) and then adjust the height and width of the browser viewport to see exact break-point widths in pixels.


Responsive Design Testing

Matt Kersley has created this browser testing tool that lets you see exactly how your site displays at common browser widths, starting at 240px and going up to 1024px.


Screenfly

Screenfly shows you how a website will look on various devices, including internet-enabled TVs and mobile devices.


Adobe Device Central

A number of Adobe Creative Suite products come with Device Central, which can be a very valuable tool for testing your responsive designs. It lets you not only preview, but also test your designs on the device of your choice.


Examples

Below are 100 examples of fantastic responsive designs. There are a lot more sites out there using the technique, and new ones are launched every day. One great resource for finding new sites is Media Queries, a gallery dedicated specifically to sites using responsive design techniques.

Profi Span


Forgotten Presidents


Ben Handzo


Aaron Shekey


The Highway Hurricanes


dConstruct 2011


Merlin Ord & Media


The Happy Bit


Forefathers


Easy Readers: Adaptive Web Design


More Hazards More Heroes


Facts Regula


Hi, My Name is Andrew


Sifter


FoodDrinkEurope


The Obvious Corporation


Geek in the Park


Mapalong


JCHELBY


10K Apart


Expositio


Food Sense


New Adventures in Web Design Conference


Cisco London 2012


Team PAWS Chicago


Diablo Media


Andersson-Wise Architects


Designing with Data


Full Frontal 2011


Aaron Weyenberg


Web Design Yorkshire


Winnie Lim


Urban Svensson


Luke Williams


Upperdog


Writer


Toronto Standard


Design Professionalism


Impact Dialing


Modernizr


Johan Brook


Dust and Mold Design


Gridchin


Staffanstorp


El Sendero del Cacao


Dustin Senos


Kisko Labs



51bits


digitalHappy


Patrick Grady


Trent Walton


Headshift


Owltastic


WeeNudge


Ash Physical Training


Mark Boulton


The Modern Gentleman


Build Guild


Do Lectures


David Hughes


320 and Up


About.com


Really Simple


Splendid


Leica Explorer


Spigot Design


Cohenspire


Jason Weaver


Joni Korpi


iwantedrock.com


Converge SE


Pelican Fly


Simple Bits


Information Architects


Andy Croll


Hicks Design


8 Faces


The Sweet Hat Club


Little Pea Bakery


Sleepstreet


Andrew Revitt


Cujo.jp


Interim.it


Philip Meissner Design


Teixido


Transfinancieel


UX London


Jeremy Madrid


Brad Dielman


Thomas Prior


Clearleft


Herjen Oldenbeuving


Bureau


City Crawlers Berlin


CSS-Tricks


Robot…or Not?


Marcelino Llano


Caleb Ogden


A Flexible Grid


Simon Collison


More roundups

Here are some more great responsive design roundups from other sites.


Written exclusively for WDD by Cameron Chapman.

Are you using responsive design techniques in your projects? Know of any resources we missed? Let us know in the comments!

Source

July 31 2011

16:44

6 Proposals for Journalism Education Today

I’ve spent a huge amount of time this year thinking about and working on journalism curriculum. From developing and teaching a four-week program to train journalism educators in Africa in the practice of online journalism, to helping with a major overhaul of the undergraduate curriculum in my own department, to my current preparations to teach journalism at a university in Indonesia, I have been thinking a lot about what students need to learn today.

Here are six proposals in three distinct areas of journalism that are increasingly important today.

Data Journalism

My colleague Ron Rodgers sent me this post from the Guardian, and it has great value in its brevity and directness: Data journalism at the Guardian: What is it and how do we do it? It addresses 10 big themes that a journalism educator could build a whole course around, but you can read the whole post in about 10 minutes.

In contrast, a paper produced last August as the outcome of a conference in Europe about data-driven journalism is quite long — 78 pages. The paper, Data-driven journalism: What is there to learn?, provides many details in a very well organized format, and it includes lots of links to examples and tools (free tools!).

Moreover, there’s a new book to help us teach students about data! The video below explains it.

Proposals: (1) A journalism degree program should ensure that all students are introduced to basic data journalism, using current examples and demonstrating how to apply concepts. (2) A journalism degree program should offer at least one 3-credit elective course that focuses exclusively on data journalism.

Social Media and Participation

Just about everyone who teaches journalism is trying to figure out how to integrate social media into the mix. We all know that young people are already active users of social media — but that doesn’t mean they understand how to use those media ethically and effectively to do journalism.

Did you know that journalists in Al Jazeera’s Arabic and English newsrooms have had intensive social-media training? Read about it here. The same article discusses how social media links drive traffic to news websites.

As well as getting involved (if they choose) in newsgathering, verification and curation of news, readers and viewers have also become part of the news-distribution system as they share and recommend items of interest via e-mail and social networks. [source]

The phrase participatory journalism is not precisely defined, but I take it to mean that the audience participates in setting the agenda for news. This requires that journalists make themselves open to listening more, and listening to more sources (not only official ones), as well as making a commitment to go beyond superficial (and sometimes denigrating) man-on-the-street interviews.

Another important term is crowdsourcing. This is one kind of audience participation in gathering news — but not the only kind. This BBC story provides a good overview of crowdsourcing, and this article from the scholarly journal Journalism Practice discusses some excellent examples.

Proposals: (3) All journalism students need to learn how to use social media for specific journalistic goals. Assignments should focus on distinct uses such as identifying experts, crowdsourcing, and crisis mapping. (4) In any journalism program, the instructors must work together to eliminate unnecessary repetition in the program — for example, two or more required courses might have almost identical Twitter assignments or blogging assignments. This is a particular danger because it’s easy to integrate social media into almost any course — but redundancy risks trivializing the experience for students.

Presentation

This is not just a matter of design (as in “page layout and design”), and it should never be a mere afterthought in the production of news materials. A wonderful post by designer Andy Rutledge illustrates better than anything else I have seen why news websites — and many news applications for mobile devices — are more likely to repel readers than to attract them.

Sometimes I think the students who choose to major in journalism came to us through a time machine from a place where people still read text that is printed on paper. What’s especially strange is that most of these students do not themselves read any text on paper — but they imagine that someone will give them a job where they will spend all their time writing text, text, text that will not interact with any other media.

In the early days of print newspapers, pictures were added to help attract people who would buy the product and read the text. Formats and font sizes (among other things) make journalism more appealing. When the product is appealing, it does not drive people away.

Unfortunately, many online and digital news products since the mid 1990s have been doing just that — driving people away. Why was this permitted? Why didn’t the entire newsroom stand up and protest that the website was hideous, slow, impossible to read, horrible, offputting, unusable? They didn’t do it because it wasn’t their job — the way their stories looked was of no concern to them. As the readers abandoned them, the journalists continued to be silent and even ignorant about the destructive effects of bad digital design.

Educators could use this book, for example, and assign students to evaluate news web pages according to its principles: Neuro Web Design: What Makes Them Click?

Proposals: (5) Every journalism program needs a required course in visual design. (6) A journalism course in visual design must educate students in the principles that make an image, a frame, a page, and a screen appealing — or offputting. The course does not need to produce skilled designers; rather, it should produce journalists who recognize when a presentation of news or journalism is effective, and when it is confusing, difficult, and fails.

I’ve spent a huge amount of time this year thinking about and working on journalism curriculum. From developing and teaching a four-week program to train journalism educators in Africa in the practice of online journalism, to helping with a major overhaul of the undergraduate curriculum in my own department, to my current preparations to teach journalism at a university in Indonesia, I have been thinking a lot about what students need to learn today.

Here are six proposals in three distinct areas of journalism that are increasingly important today.

Data Journalism

My colleague Ron Rodgers sent me this post from the Guardian, and it has great value in its brevity and directness: Data journalism at the Guardian: What is it and how do we do it? It addresses 10 big themes that a journalism educator could build a whole course around, but you can read the whole post in about 10 minutes.

In contrast, a paper produced last August as the outcome of a conference in Europe about data-driven journalism is quite long — 78 pages. The paper, Data-driven journalism: What is there to learn?, provides many details in a very well organized format, and it includes lots of links to examples and tools (free tools!).

Moreover, there’s a new book to help us teach students about data! The video below explains it.

Proposals: (1) A journalism degree program should ensure that all students are introduced to basic data journalism, using current examples and demonstrating how to apply concepts. (2) A journalism degree program should offer at least one 3-credit elective course that focuses exclusively on data journalism.

Social Media and Participation

Just about everyone who teaches journalism is trying to figure out how to integrate social media into the mix. We all know that young people are already active users of social media — but that doesn’t mean they understand how to use those media ethically and effectively to do journalism.

Did you know that journalists in Al Jazeera’s Arabic and English newsrooms have had intensive social-media training? Read about it here. The same article discusses how social media links drive traffic to news websites.

As well as getting involved (if they choose) in newsgathering, verification and curation of news, readers and viewers have also become part of the news-distribution system as they share and recommend items of interest via e-mail and social networks. [source]

The phrase participatory journalism is not precisely defined, but I take it to mean that the audience participates in setting the agenda for news. This requires that journalists make themselves open to listening more, and listening to more sources (not only official ones), as well as making a commitment to go beyond superficial (and sometimes denigrating) man-on-the-street interviews.

Another important term is crowdsourcing. This is one kind of audience participation in gathering news — but not the only kind. This BBC story provides a good overview of crowdsourcing, and this article from the scholarly journal Journalism Practice discusses some excellent examples.

Proposals: (3) All journalism students need to learn how to use social media for specific journalistic goals. Assignments should focus on distinct uses such as identifying experts, crowdsourcing, and crisis mapping. (4) In any journalism program, the instructors must work together to eliminate unnecessary repetition in the program — for example, two or more required courses might have almost identical Twitter assignments or blogging assignments. This is a particular danger because it’s easy to integrate social media into almost any course — but redundancy risks trivializing the experience for students.

Presentation

This is not just a matter of design (as in “page layout and design”), and it should never be a mere afterthought in the production of news materials. A wonderful post by designer Andy Rutledge illustrates better than anything else I have seen why news websites — and many news applications for mobile devices — are more likely to repel readers than to attract them.

Sometimes I think the students who choose to major in journalism came to us through a time machine from a place where people still read text that is printed on paper. What’s especially strange is that most of these students do not themselves read any text on paper — but they imagine that someone will give them a job where they will spend all their time writing text, text, text that will not interact with any other media.

In the early days of print newspapers, pictures were added to help attract people who would buy the product and read the text. Formats and font sizes (among other things) make journalism more appealing. When the product is appealing, it does not drive people away.

Unfortunately, many online and digital news products since the mid 1990s have been doing just that — driving people away. Why was this permitted? Why didn’t the entire newsroom stand up and protest that the website was hideous, slow, impossible to read, horrible, offputting, unusable? They didn’t do it because it wasn’t their job — the way their stories looked was of no concern to them. As the readers abandoned them, the journalists continued to be silent and even ignorant about the destructive effects of bad digital design.

Educators could use this book, for example, and assign students to evaluate news web pages according to its principles: Neuro Web Design: What Makes Them Click?

Proposals: (5) Every journalism program needs a required course in visual design. (6) A journalism course in visual design must educate students in the principles that make an image, a frame, a page, and a screen appealing — or offputting. The course does not need to produce skilled designers; rather, it should produce journalists who recognize when a presentation of news or journalism is effective, and when it is confusing, difficult, and fails.

16:44

6 Proposals for Journalism Education Today

I’ve spent a huge amount of time this year thinking about and working on journalism curriculum. From developing and teaching a four-week program to train journalism educators in Africa in the practice of online journalism, to helping with a major overhaul of the undergraduate curriculum in my own department, to my current preparations to teach journalism at a university in Indonesia, I have been thinking a lot about what students need to learn today.

Here are six proposals in three distinct areas of journalism that are increasingly important today.

Data Journalism

My colleague Ron Rodgers sent me this post from the Guardian, and it has great value in its brevity and directness: Data journalism at the Guardian: What is it and how do we do it? It addresses 10 big themes that a journalism educator could build a whole course around, but you can read the whole post in about 10 minutes.

In contrast, a paper produced last August as the outcome of a conference in Europe about data-driven journalism is quite long — 78 pages. The paper, Data-driven journalism: What is there to learn?, provides many details in a very well organized format, and it includes lots of links to examples and tools (free tools!).

Moreover, there’s a new book to help us teach students about data! The video below explains it.

Proposals: (1) A journalism degree program should ensure that all students are introduced to basic data journalism, using current examples and demonstrating how to apply concepts. (2) A journalism degree program should offer at least one 3-credit elective course that focuses exclusively on data journalism.

Social Media and Participation

Just about everyone who teaches journalism is trying to figure out how to integrate social media into the mix. We all know that young people are already active users of social media — but that doesn’t mean they understand how to use those media ethically and effectively to do journalism.

Did you know that journalists in Al Jazeera’s Arabic and English newsrooms have had intensive social-media training? Read about it here. The same article discusses how social media links drive traffic to news websites.

As well as getting involved (if they choose) in newsgathering, verification and curation of news, readers and viewers have also become part of the news-distribution system as they share and recommend items of interest via e-mail and social networks. [source]

The phrase participatory journalism is not precisely defined, but I take it to mean that the audience participates in setting the agenda for news. This requires that journalists make themselves open to listening more, and listening to more sources (not only official ones), as well as making a commitment to go beyond superficial (and sometimes denigrating) man-on-the-street interviews.

Another important term is crowdsourcing. This is one kind of audience participation in gathering news — but not the only kind. This BBC story provides a good overview of crowdsourcing, and this article from the scholarly journal Journalism Practice discusses some excellent examples.

Proposals: (3) All journalism students need to learn how to use social media for specific journalistic goals. Assignments should focus on distinct uses such as identifying experts, crowdsourcing, and crisis mapping. (4) In any journalism program, the instructors must work together to eliminate unnecessary repetition in the program — for example, two or more required courses might have almost identical Twitter assignments or blogging assignments. This is a particular danger because it’s easy to integrate social media into almost any course — but redundancy risks trivializing the experience for students.

Presentation

This is not just a matter of design (as in “page layout and design”), and it should never be a mere afterthought in the production of news materials. A wonderful post by designer Andy Rutledge illustrates better than anything else I have seen why news websites — and many news applications for mobile devices — are more likely to repel readers than to attract them.

Sometimes I think the students who choose to major in journalism came to us through a time machine from a place where people still read text that is printed on paper. What’s especially strange is that most of these students do not themselves read any text on paper — but they imagine that someone will give them a job where they will spend all their time writing text, text, text that will not interact with any other media.

In the early days of print newspapers, pictures were added to help attract people who would buy the product and read the text. Formats and font sizes (among other things) make journalism more appealing. When the product is appealing, it does not drive people away.

Unfortunately, many online and digital news products since the mid 1990s have been doing just that — driving people away. Why was this permitted? Why didn’t the entire newsroom stand up and protest that the website was hideous, slow, impossible to read, horrible, offputting, unusable? They didn’t do it because it wasn’t their job — the way their stories looked was of no concern to them. As the readers abandoned them, the journalists continued to be silent and even ignorant about the destructive effects of bad digital design.

Educators could use this book, for example, and assign students to evaluate news web pages according to its principles: Neuro Web Design: What Makes Them Click?

Proposals: (5) Every journalism program needs a required course in visual design. (6) A journalism course in visual design must educate students in the principles that make an image, a frame, a page, and a screen appealing — or offputting. The course does not need to produce skilled designers; rather, it should produce journalists who recognize when a presentation of news or journalism is effective, and when it is confusing, difficult, and fails.

I’ve spent a huge amount of time this year thinking about and working on journalism curriculum. From developing and teaching a four-week program to train journalism educators in Africa in the practice of online journalism, to helping with a major overhaul of the undergraduate curriculum in my own department, to my current preparations to teach journalism at a university in Indonesia, I have been thinking a lot about what students need to learn today.

Here are six proposals in three distinct areas of journalism that are increasingly important today.

Data Journalism

My colleague Ron Rodgers sent me this post from the Guardian, and it has great value in its brevity and directness: Data journalism at the Guardian: What is it and how do we do it? It addresses 10 big themes that a journalism educator could build a whole course around, but you can read the whole post in about 10 minutes.

In contrast, a paper produced last August as the outcome of a conference in Europe about data-driven journalism is quite long — 78 pages. The paper, Data-driven journalism: What is there to learn?, provides many details in a very well organized format, and it includes lots of links to examples and tools (free tools!).

Moreover, there’s a new book to help us teach students about data! The video below explains it.

Proposals: (1) A journalism degree program should ensure that all students are introduced to basic data journalism, using current examples and demonstrating how to apply concepts. (2) A journalism degree program should offer at least one 3-credit elective course that focuses exclusively on data journalism.

Social Media and Participation

Just about everyone who teaches journalism is trying to figure out how to integrate social media into the mix. We all know that young people are already active users of social media — but that doesn’t mean they understand how to use those media ethically and effectively to do journalism.

Did you know that journalists in Al Jazeera’s Arabic and English newsrooms have had intensive social-media training? Read about it here. The same article discusses how social media links drive traffic to news websites.

As well as getting involved (if they choose) in newsgathering, verification and curation of news, readers and viewers have also become part of the news-distribution system as they share and recommend items of interest via e-mail and social networks. [source]

The phrase participatory journalism is not precisely defined, but I take it to mean that the audience participates in setting the agenda for news. This requires that journalists make themselves open to listening more, and listening to more sources (not only official ones), as well as making a commitment to go beyond superficial (and sometimes denigrating) man-on-the-street interviews.

Another important term is crowdsourcing. This is one kind of audience participation in gathering news — but not the only kind. This BBC story provides a good overview of crowdsourcing, and this article from the scholarly journal Journalism Practice discusses some excellent examples.

Proposals: (3) All journalism students need to learn how to use social media for specific journalistic goals. Assignments should focus on distinct uses such as identifying experts, crowdsourcing, and crisis mapping. (4) In any journalism program, the instructors must work together to eliminate unnecessary repetition in the program — for example, two or more required courses might have almost identical Twitter assignments or blogging assignments. This is a particular danger because it’s easy to integrate social media into almost any course — but redundancy risks trivializing the experience for students.

Presentation

This is not just a matter of design (as in “page layout and design”), and it should never be a mere afterthought in the production of news materials. A wonderful post by designer Andy Rutledge illustrates better than anything else I have seen why news websites — and many news applications for mobile devices — are more likely to repel readers than to attract them.

Sometimes I think the students who choose to major in journalism came to us through a time machine from a place where people still read text that is printed on paper. What’s especially strange is that most of these students do not themselves read any text on paper — but they imagine that someone will give them a job where they will spend all their time writing text, text, text that will not interact with any other media.

In the early days of print newspapers, pictures were added to help attract people who would buy the product and read the text. Formats and font sizes (among other things) make journalism more appealing. When the product is appealing, it does not drive people away.

Unfortunately, many online and digital news products since the mid 1990s have been doing just that — driving people away. Why was this permitted? Why didn’t the entire newsroom stand up and protest that the website was hideous, slow, impossible to read, horrible, offputting, unusable? They didn’t do it because it wasn’t their job — the way their stories looked was of no concern to them. As the readers abandoned them, the journalists continued to be silent and even ignorant about the destructive effects of bad digital design.

Educators could use this book, for example, and assign students to evaluate news web pages according to its principles: Neuro Web Design: What Makes Them Click?

Proposals: (5) Every journalism program needs a required course in visual design. (6) A journalism course in visual design must educate students in the principles that make an image, a frame, a page, and a screen appealing — or offputting. The course does not need to produce skilled designers; rather, it should produce journalists who recognize when a presentation of news or journalism is effective, and when it is confusing, difficult, and fails.

July 15 2011

10:23

Community journalism or “Local nosey parkers with mobile phones “

Thud! Thud! Thud! Thud! Thud!

What’s that Andy?

It’s me banging my head against the desk…

There’s a story about the Beskpoke project on Hold the front page. I was interested in it as (full disclosure) my Uni is one of the partners in the project. Inevitably I got sucked in to the comments.

But just to put things in to context:

The project has been established to look at the issue of digital and social exclusion in the Fishwick and Callon areas of Preston.

Broadly speaking, the project has two parts. The first is for us to set up a team of community/citizen journalists who will report on the issues that are important to them and to their local community.

The second part of the project is centred on innovative design. Partner universities (Dundee, Falmouth, Newcastle, Surrey, and UCLan) will use the news stories, as well as other information gathered during the lifespan of the project, to design digital technologies that can meet the needs of the area. This collaboration between emotive, technological and functional design with hyper-local journalism is a ground-breaking exercise and, as far as we’re aware, has never been tried before.

Hold the Front page focus on the journalism aspect

The group of citizen journalists were trained as part of a project called Bespoke, a scheme that sees members of the public in Preston provided with flip cameras, mobile phones and journalism training in order to generate their own news stories.

One that stood out began:

Years of training, university degrees, shorthand classes ad infinitum.

And the reward? Local nosey parkers with mobile phones are netting page leads.

Given the usual anti-degree tone that pervades it was nice to see degrees get a mention.

Traffic Chaos continues:

So-called citizen journalism should not extend beyond a phone call or submission of on-the-spot footage to the nearest newsroom.

There’s really no such thing as citizen journalism outside of the egotistical “blogosphere”, populated by keyboard warriors and bigots who feel they can do a better job than anybody else at everything – especially the news.

Hmm. I think they actually mean that the term Cit-j has little or no meaning outside a limited circle of egotistical journalists. But everyone is allowed a view (except it seems local nosey-parkers!)

You wouldn’t call a citizen-MD would you?

Update: Jon Walker tweeted to suggest that the phrase MD related to managing director, not Medical doctor.

@digidickinson It's a small issue but I'm pretty sure that moaning hack meant managing directors, not doctors
@jonwalker121
Jonathan Walker

My response is Doh!

Of course you can’t mention Cit-j without a hackneyed and inappropriate comparison. Hacked off duly obliges

 

Can’t wait for the day they introduce Citizen MDs thus clearing out an entire layer of over-paid fools and replacing them with an entire layer of fools for free.

A great comment that:

a) conflates journalism with medicine –  because they are exactly the same aren’t they.

b) insults journalists as well as the apparent cit-j’s in such a short space – nice work!

The general tone of the comments is to wonder what impact this will have on the journos at the LEP. I don’t want to play down the plight of shrinking regional newsrooms for one minute. Or belittle those who lose jobs. But to see one as a cause of the other is a leap.

Room for all

About the same time that the LEP published it’s first newspaper (1886) my great-grandad borrowed money to buy his first house. He didn’t go to the bank, he went to the butcher. The local butcher! (We have the receipt to prove it.) Would the butcher have advertised that service in the LEP? Not sure. No doubt a local nosey parker would have told him. Oh and if that butcher had sold him a dodgy steak the chance are, nearly 60 years before the NHS he wouldn’t have gone to a doctor.

That’s how my great-grandad’s community worked. It’s how communities still work. Not on definitions of professional pratcice but on people who have the means and the skills doing the jobs that need doing.

My point to hacked-off and traffic chaos would be that there is a world outside the newsroom, full of people who do and discover in different ways. They’ve done it that way before you and they will do it that way after you. You only play a role in a community if you are part of it. Please don’t contribute to an attitude that means they chose to do it without you.

And here is that sentiment in morse code…

Thud! Thud! Thud! Thud!…

July 03 2011

21:02

Updated gear, tool & book guide, bonus mobile tools included too

Photo courtesy Stéfan Le Dû on Flickr

So as the school year has come to an end I’ve had several requests form graduating seniors for advice on what gear they should purchase to add to their arsenal  to get them ready for the next step of their career. A long time ago I set up a gear guide to help people with this, but it’d been a while since I’d updated it, until this weekend. So take a gander if you’re curious, looking for some interesting summer reading or in the market for new multimedia, mobile gear or books, check it out.

I also added a couple more categories to better split out the topics into more clear buckets: Design, development, mobile/tablet tools, management & leadership, social media & community, video/audio/photo gear and video/audio/photo training. … Oh, and “Nerdtastic stuff”… my favorite category of quirky nerd tools and gifts.

Full Disclosure: That is an affiliate link, so if you make a purchase I’ll get a 4% kick back, which I’ll use towards hosting costs for the site. It doesn’t cost you any more, just sends a little cash my way for helping create the resource.

Flickr photo courtesy Stéfan Le Dû

July 02 2011

05:22

ProPublica - a redesign, which puts “future of context” ideas to work

Niemanlab :: As most site revamps tend to be, the new propublica.org is sleeker, slicker, and generally more aesthetically pleasing than its previous incarnation. But it’s also more intuitively navigable than the previous version, incorporating the accumulated wisdom that the investigative outfit has learned about its users, its contributors, and its journalism in the past two-and-a-half years.

[Scott Klein, editor of News Applications:] ...(what we) hope is that the level of design sophistication now matches the sophistication of our reporting.

Pro-publica-small

Continue to read Megan Garber, www.niemanlab.org

April 03 2011

16:31

10 useful resources about data visualization

These will be useful to introduce students, journalists, or yourself to the concepts of data visualization. Bonus: There’s an interesting discussion on Quora about the difference between information graphics and data visualization.

(1) When the Data Struts Its Stuff (April 2, 2011): A 1,000-word article that covers a lot of non-journalism work in this field, including the marvelous Gapminder World.

(2) 7 Things You Should Know About Data Visualization: This two-page PDF from EduCause provides a text-only explanation.

Representing large amounts of disparate information in a visual form often allows you to see patterns that would otherwise be buried in vast, unconnected data sets. … Visualizations allow you to understand and process enormous amounts of information quickly because it is all represented in a single image or animation.

(3) FlowingData: This blog by Nathan Yau, a statistics scholar, is a wonderful resource, frequently updated with great examples from all kinds of sources.

(4) Visualization Options Available in Many Eyes: Part of the “Many Eyes” site from IBM Research, this list links to examples of every kind of information chart and graphic you can create with the Many Eyes application. You get an illustration and a clear, brief explanation — great for teaching. See an example: Bubble Chart Guide.

(5) VisualJournalism: A great blog that’s focused on information graphics and journalism, published by Gert K. Nielsen, a longtime news graphics editor in Denmark.

(6) Journalism in the Age of Data: A Video Report on Data Visualization by Geoff McGhee: Interviews with data graphics experts, including journalists and non-journalists. The package includes a large collection of linked resources, cleverly keyed to the videos, which are split into manageable short chapters. Geoff has been a journalist at The New York Times, ABCNews.com, and Le Monde Interactif.

(7) Datavisualization.ch: Another excellent blog devoted to the topic, and also a great source of recent examples. The authors are engineers and interaction designers at Interactive Things, a design and technology studio in Switzerland.

(8) 10 Awesome Free Tools to Make Infographics: Time to get your hands dirty! This useful blog post (from October 2010) also offers advice on how to make an information graphic.

(9) Research: How to Tell Stories with Data? This blog post at Information Aesthetics (yet another fine blog about data graphics) summarizes a groundbreaking article (How Do People Tell Stories Through Interactive Visualization?) written by two Stanford University researchers in 2010.

(10) A Practical Guide to Designing with Data: A new book by Brian Suda provides a gentle introduction — suitable for journalism students. It’s not high-end theory like the work of Edward Tufte, but the explanations are really well suited to people without a background in statistics or graphic design.

Know about a good resource I missed? Please add it in the comments!

16:31

10 useful resources about data visualization

These will be useful to introduce students, journalists, or yourself to the concepts of data visualization. Bonus: There’s an interesting discussion on Quora about the difference between information graphics and data visualization.

(1) When the Data Struts Its Stuff (April 2, 2011): A 1,000-word article that covers a lot of non-journalism work in this field, including the marvelous Gapminder World.

(2) 7 Things You Should Know About Data Visualization: This two-page PDF from EduCause provides a text-only explanation.

Representing large amounts of disparate information in a visual form often allows you to see patterns that would otherwise be buried in vast, unconnected data sets. … Visualizations allow you to understand and process enormous amounts of information quickly because it is all represented in a single image or animation.

(3) FlowingData: This blog by Nathan Yau, a statistics scholar, is a wonderful resource, frequently updated with great examples from all kinds of sources.

(4) Visualization Options Available in Many Eyes: Part of the “Many Eyes” site from IBM Research, this list links to examples of every kind of information chart and graphic you can create with the Many Eyes application. You get an illustration and a clear, brief explanation — great for teaching. See an example: Bubble Chart Guide.

(5) VisualJournalism: A great blog that’s focused on information graphics and journalism, published by Gert K. Nielsen, a longtime news graphics editor in Denmark.

(6) Journalism in the Age of Data: A Video Report on Data Visualization by Geoff McGhee: Interviews with data graphics experts, including journalists and non-journalists. The package includes a large collection of linked resources, cleverly keyed to the videos, which are split into manageable short chapters. Geoff has been a journalist at The New York Times, ABCNews.com, and Le Monde Interactif.

(7) Datavisualization.ch: Another excellent blog devoted to the topic, and also a great source of recent examples. The authors are engineers and interaction designers at Interactive Things, a design and technology studio in Switzerland.

(8) 10 Awesome Free Tools to Make Infographics: Time to get your hands dirty! This useful blog post (from October 2010) also offers advice on how to make an information graphic.

(9) Research: How to Tell Stories with Data? This blog post at Information Aesthetics (yet another fine blog about data graphics) summarizes a groundbreaking article (How Do People Tell Stories Through Interactive Visualization?) written by two Stanford University researchers in 2010.

(10) A Practical Guide to Designing with Data: A new book by Brian Suda provides a gentle introduction — suitable for journalism students. It’s not high-end theory like the work of Edward Tufte, but the explanations are really well suited to people without a background in statistics or graphic design.

Know about a good resource I missed? Please add it in the comments!

April 02 2011

03:38

Timelines in journalism: A closer look

You’re not going to create one every week, but a timeline is a useful — and helpful — type of information graphic, and fairly common in journalism. When teaching students about timelines, here are some ideas to consider and discuss:

Chronology or timeline?

Sometimes a timeline is not a timeline, according to Len de Groot, a longtime graphics journalist. A timeline shows actual spans of time, with proportional measurements for decades, years, days or hours, depending on the total time involved. “The space between events should be as important [as] or more important than the events themselves,” he says. A chronology, on the other hand, shows the momentum of a series of events. It might be more effective if presented as a list, or as an illustrated slideshow.

Here’s an excellent chronology about Operation Odyssey Dawn on Libya, from El País:

Cronología: Operación Amanecer de la Odisea sobre Libia

Not what we think of when we imagine a timeline, is it? But it’s quite well suited to telling the story of recent events in Libya, and it is being updated day by day. (Navigate days via the two arrows at upper left.)

The Wall Street Journal has published a multi-line timeline covering recent events in Arab countries (below). Selecting any day loads a region map and summary of events for that day in an area above the timeline. I like the way this compact layout shows us at a glance where activities have occurred, and when. This is a very successful timeline graphic tailored closely to the story.

WSJ: Middle East Turmoil

Here are some questions we can ask before we sketch our timeline ideas:

  1. Is this a story about hours, days, years or decades?
  2. Should equal periods of time be represented with equal space? (Example: 100 pixels equals one year.)
  3. Are parallel time periods required? (Example: While this was happening in India, this was happening in China.)
  4. Does it make sense to combine the timeline with a map or a line graph?
  5. Should photos or other images be added to the timeline to help tell the story?
  6. How much text is necessary to make the story understandable — and satisfying?

A “timeline” that does not represent time proportionally to space — but which works well, I think, because it is straightforward and clear, is this one by graphic designer Sean Carton:

Sean Carton: Social Media Timeline

Design questions

Most timeline graphics present time in horizontal lines, with the oldest events to the left and more recent ones progressing to the right (I suppose we would do it right-to-left if we were Arab or Chinese). A notable and very recent exception is the Guardian’s brilliant (and vertical) Arab spring: An interactive timeline of Middle East protests (blogged about by Tracy Boyer last week).

Guardian.co.uk: Arab Spring timeline graphic

I think it’s useful to think about Len de Groot’s distinction between timelines and chronologies when admiring this graphic: Is this really a “timeline”? I don’t think so — has there ever been a better illustration of the momentum of events? No need to quibble over the words, though, when the execution is so effective.

Here are some questions we can ask as we examine our sketches of our timeline ideas:

  1. Will people like it?
  2. Is it helpful, easy to understand?
  3. Is it confusing?
  4. Hard to use?
  5. Does it add something that text alone would not convey?
  6. Does the graphic need to be a timeline — or would a regular slideshow (or map, or whatever) be equally effective?

One of the more successful interactive timelines is 10 years old — every time I revisit this package about Winston Churchill, I am amazed all over again at how well it works. Note in particular the double timeline at the bottom: The upper bar is Churchill’s life, and the lower bar shows concurrent world events.

Library of Congress: Churchill and the Great Republic

The Template Trap

Sometimes I think we fall into a “one size fits all” trap with templates or tools. You have a template or a tool, and you re-use it for various stories. But is that always the right decision? Does expediency sometimes defeat the goal of clear communication?

WSJ: Deepwater Horizon Rig Disaster

I think the Deepwater Horizon Rig Disaster timeline (above) is much more successful than the Biggest Volcanic Eruptions (below), which skimps on details about the eruptions. Both are from The Wall Street Journal.

WSJ: Biggest Volcanic Eruptions

Likewise, CNN’s Trapped Chilean Miners timeline (below) is better suited to its timeline interface than the recent Egyptian Protests timeline, which uses the same interface.

CNN: Trapped Chilean Miners

Timeline tools

TimelineSetter is a new, free tool from the great folks at Pro Publica, the nonprofit investigative journalism organization. It’s not available for mass consumption just yet (“We have some more code generalization and fixes we need to do before it’s ready to open source, but we plan to do so as soon as we can,” they said on March 22), but it might be useful in lots of different situations. Below is a timeline created with this tool.

Pro Publica: How One Blast Affected Five Soldiers

The functionality and the design are similar to the timeline template The New York Times has been using for some time; for a recent example, see Elizabeth Taylor: 1932-2011 (below). I found the checkbox options to be distracting and unnecessary.

New York Times: Elizabeth Taylor: 1932-2011

Other free timeline tools were described (and linked) in a post by Alex Gamela in May 2010. Dipity and SIMILE are fairly well known; others are less so, but it’s worthwhile to check out the different visual approaches to presenting information in this way.

Which of these tools produces the best result for the story you want to tell?

Do not create an interactive timeline just because it’s cool. Use interactivity to make the information more clear.

Two older timelines that are worth a look:

03:38

Timelines in journalism: A closer look

You’re not going to create one every week, but a timeline is a useful — and helpful — type of information graphic, and fairly common in journalism. When teaching students about timelines, here are some ideas to consider and discuss:

Chronology or timeline?

Sometimes a timeline is not a timeline, according to Len de Groot, a longtime graphics journalist. A timeline shows actual spans of time, with proportional measurements for decades, years, days or hours, depending on the total time involved. “The space between events should be as important [as] or more important than the events themselves,” he says. A chronology, on the other hand, shows the momentum of a series of events. It might be more effective if presented as a list, or as an illustrated slideshow.

Here’s an excellent chronology about Operation Odyssey Dawn on Libya, from El País:

Cronología: Operación Amanecer de la Odisea sobre Libia

Not what we think of when we imagine a timeline, is it? But it’s quite well suited to telling the story of recent events in Libya, and it is being updated day by day. (Navigate days via the two arrows at upper left.)

The Wall Street Journal has published a multi-line timeline covering recent events in Arab countries (below). Selecting any day loads a region map and summary of events for that day in an area above the timeline. I like the way this compact layout shows us at a glance where activities have occurred, and when. This is a very successful timeline graphic tailored closely to the story.

WSJ: Middle East Turmoil

Here are some questions we can ask before we sketch our timeline ideas:

  1. Is this a story about hours, days, years or decades?
  2. Should equal periods of time be represented with equal space? (Example: 100 pixels equals one year.)
  3. Are parallel time periods required? (Example: While this was happening in India, this was happening in China.)
  4. Does it make sense to combine the timeline with a map or a line graph?
  5. Should photos or other images be added to the timeline to help tell the story?
  6. How much text is necessary to make the story understandable — and satisfying?

A “timeline” that does not represent time proportionally to space — but which works well, I think, because it is straightforward and clear, is this one by graphic designer Sean Carton:

Sean Carton: Social Media Timeline

Design questions

Most timeline graphics present time in horizontal lines, with the oldest events to the left and more recent ones progressing to the right (I suppose we would do it right-to-left if we were Arab or Chinese). A notable and very recent exception is the Guardian’s brilliant (and vertical) Arab spring: An interactive timeline of Middle East protests (blogged about by Tracy Boyer last week).

Guardian.co.uk: Arab Spring timeline graphic

I think it’s useful to think about Len de Groot’s distinction between timelines and chronologies when admiring this graphic: Is this really a “timeline”? I don’t think so — has there ever been a better illustration of the momentum of events? No need to quibble over the words, though, when the execution is so effective.

Here are some questions we can ask as we examine our sketches of our timeline ideas:

  1. Will people like it?
  2. Is it helpful, easy to understand?
  3. Is it confusing?
  4. Hard to use?
  5. Does it add something that text alone would not convey?
  6. Does the graphic need to be a timeline — or would a regular slideshow (or map, or whatever) be equally effective?

One of the more successful interactive timelines is 10 years old — every time I revisit this package about Winston Churchill, I am amazed all over again at how well it works. Note in particular the double timeline at the bottom: The upper bar is Churchill’s life, and the lower bar shows concurrent world events.

Library of Congress: Churchill and the Great Republic

The Template Trap

Sometimes I think we fall into a “one size fits all” trap with templates or tools. You have a template or a tool, and you re-use it for various stories. But is that always the right decision? Does expediency sometimes defeat the goal of clear communication?

WSJ: Deepwater Horizon Rig Disaster

I think the Deepwater Horizon Rig Disaster timeline (above) is much more successful than the Biggest Volcanic Eruptions (below), which skimps on details about the eruptions. Both are from The Wall Street Journal.

WSJ: Biggest Volcanic Eruptions

Likewise, CNN’s Trapped Chilean Miners timeline (below) is better suited to its timeline interface than the recent Egyptian Protests timeline, which uses the same interface.

CNN: Trapped Chilean Miners

Timeline tools

TimelineSetter is a new, free tool from the great folks at Pro Publica, the nonprofit investigative journalism organization. It’s not available for mass consumption just yet (“We have some more code generalization and fixes we need to do before it’s ready to open source, but we plan to do so as soon as we can,” they said on March 22), but it might be useful in lots of different situations. Below is a timeline created with this tool.

Pro Publica: How One Blast Affected Five Soldiers

The functionality and the design are similar to the timeline template The New York Times has been using for some time; for a recent example, see Elizabeth Taylor: 1932-2011 (below). I found the checkbox options to be distracting and unnecessary.

New York Times: Elizabeth Taylor: 1932-2011

Other free timeline tools were described (and linked) in a post by Alex Gamela in May 2010. Dipity and SIMILE are fairly well known; others are less so, but it’s worthwhile to check out the different visual approaches to presenting information in this way.

Which of these tools produces the best result for the story you want to tell?

Do not create an interactive timeline just because it’s cool. Use interactivity to make the information more clear.

Two older timelines that are worth a look:

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl