Innovation @ BBG » Responsive Web Design http://www.innovation-series.com Fri, 20 Nov 2015 18:47:05 +0000 en-US hourly 1 http://wordpress.org/?v=3.6.1 Creating responsive graphics and streamlined images for VOA’s World Cup coverage http://www.innovation-series.com/2014/08/14/creating-responsive-graphics-and-streamlined-images-for-voas-world-cup-coverage/?utm_source=rss&utm_medium=rss&utm_campaign=creating-responsive-graphics-and-streamlined-images-for-voas-world-cup-coverage http://www.innovation-series.com/2014/08/14/creating-responsive-graphics-and-streamlined-images-for-voas-world-cup-coverage/#comments Thu, 14 Aug 2014 14:44:18 +0000 Brian Williamson http://www.innovation-series.com/?p=6176 For the French and English VOA World Cup sites, we wanted to create a lean, minimalist site. Through the use of progressive enhancements and responsive design we added features to provide an enhanced experience for phones, tablets and desktop browsers. What follows is a description of some of the techniques we used to optimize the World Cup sites.

Using progressive enhancements and SVG (or: How i stopped worrying and learned to love <tables/> )

Who scored when? How many saves did the goalkeeper make? How many shots on goal per a game did a player make? How many of those were successful? Statistics and graphics are a core feature of most sports coverage.

We experimented with a number of approaches for creating graphics for the World Cup. We explored NPR’s fork of ChartBuilder, for converting tabular data into SVG graphics with image fallbacks. We used DataWrapper, a tool that creates responsive graphics embedded via an iframe. Both tools work well for quickly creating one-off graphics.

But because of the tremendous range of devices used across our target market, we couldn’t be sure if (or how) the browsers would support Javascript, CSS or SVG. Ultimately we decided to create a custom solution, using D3.js and borrowing the progressive enhancements approach described by the Filament Group.

We started off by converting Opta’s XML data into a standard HTML table and sending that to the browser. This tabular view was a perfectly valid way of reading and exploring the data. (We actually relied on HTML tables for many basic design elements, because modern CSS techniques created inconsistent results across older, archaic and obscure devices.)

If the device supported Javascript, we could use that data to create a graphic (e.g. a simple bar graph). If the browser supported SVG graphics, we used D3 to bind the data and create the SVG.

I was really inspired by Ryan Pitts’ talk at NICAR 2014 on creating responsive graphics for censusreporter.org. The charting library we created creates responsive graphics based on the width of the browser. If the user resizes the browser, the graphics on the page will be resized.

Because D3 isn’t strictly an SVG-based tool, we could bind the data to almost any HTML element. If the browser didn’t support SVG, we attempted to create an alternate form of the graphic using a somewhat bastardize technique of drawing the bars and labels with an HTML table.

Two JPEG photos of Lionel Messi from VOA football, comparing download sizes.

Streamlining downloads

In addition to creating responsive graphics, we took several simple steps to optimize the site and reduce the overall page weight.

Adaptive images: We used a Javascript solution for downloading the appropriate sized images. The initial images that are downloaded with the page are low-res thumbnail images. If the browser supports Javascript, we check the browser size and then replace the initial image with an image tailored to the size of the window. For comparison, the desktop version of this photo is 156kb, while a 400-pixel mobile version is only 29kb. Multiplied for posts with multiple images, this optimization resulted in tremendous bandwidth savings.

Lazing loading videos: Most video players automatically download additional Javascript and CSS files whether you watch the video or not. We installed a WordPress plugin to add lazy loading support for YouTube videos. When the page initially loads, the plugin displays the YouTube thumbnail image of the video. The user taps or clicks on the image to load the Javascript, CSS and video. This results in a savings of 300 – 1000kb.

Animated GIFs: Those small, pixelated animated loops of cats can actually be fairly large files (particularly for clips created from video footage). We used a similar approach for animated GIFs as we used for video. For the initial page load the user downloads a tiny static JPG image. If the user taps on the image, jQuery replaces the .jpg with the animated .gif file.

In addition, we also tried to optimize the GIFs by simplifying the color palette, reducing the size and reducing dithering. In some instances, an MP4 video would result in a smaller file size than an animated GIF. And for some very simple animated graphics, we loaded the GIF directly without the need for user action.

Planning versus execution

By using a mixture of server- and client-side solutions, we tried to tailor the site to the technical and bandwidth needs of the audience. But the realities of producing a news site with a diverse group of journalists scattered across multiple newsrooms sometimes undermined those efforts.

Third party embeds of tweets, photos and large Storify iFrames, occasionally resulted in enormous, multimegabyte posts.

Future efforts will need to recognize the importance of continued training on best practices in coordination with any technological solutions.

]]>
http://www.innovation-series.com/2014/08/14/creating-responsive-graphics-and-streamlined-images-for-voas-world-cup-coverage/feed/ 0
How to Do UX Testing on Tablets, In Cartoons http://www.innovation-series.com/2014/01/27/how-to-do-ux-testing-on-tablets-in-cartoons/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-do-ux-testing-on-tablets-in-cartoons http://www.innovation-series.com/2014/01/27/how-to-do-ux-testing-on-tablets-in-cartoons/#comments Mon, 27 Jan 2014 16:01:33 +0000 Erica Malouf http://www.innovation-series.com/?p=5682 One of my great passions is traveling — I get a kick out of understanding other cultures, and how they use technology. As a graduate student, I am rarely able to travel, but working at the BBG is truly the next best thing.

We frequently interact with people from a broad array of cultural backgrounds, with fluency in various languages, who each share their unique perspective and offer a fascinating glimpse of a distant place. (The holiday parties and hallway networking spreads offer a tasty glimpse of distant places — BBG staff can really cook.) This cultural diversity also happens to be convenient for user experience testing because we are able to tap into our ‘natural resource’ to test our digital products, which are often targeted to a specific segment of our global audience.

Typically, when we’re doing in-house testing, we test each application in it’s intended language as well as in English, whether it’s a product for one of the 44 language services at Voice of America or another BBG entity. Most recently we have done testing for Radio Free Asia and Radio Free Europe/Radio Liberty (RFE/RL).

The cultural diversity within BBG is convenient for user experience testing because we are able to tap into this ‘natural resource’ to test our digital products.

And so we need bilingual participants, who also fall into our target demographics, to provide our English-speaking developers, designers and testers with feedback we can understand. Thankfully, our gracious multi-lingual employees and interns are happy to oblige.

We’ve been using software called Morae for in-house UX testing on tablets and mobile phones. Morae allows us to capture video — with more than one camera angle — and record scoring as we go. Having video of a participant’s hand movements allows us to do a more accurate and thorough analysis of how they reacted during certain tasks, as opposed to just having a heat map and data that provide only part of the story. Also, since it’s in-person, we can ask follow-up questions immediately after a task to find out why a participant may have been confused about a task.

This comic strip breaks down how we do UX testing. Hat tip to the illustrious Steve Fuchs (one of our lead UX testers and designers at ODDI) who illustrated these, and who I often work with on UX testing.

1-stake-holders-managers

2-3-design-book-volunteers

4-tv-tray-plus-chair

5-6-table-top-mic

7-two-cameras-record

8-laptop-software

9-test-team

10-collect-analysis-report

One of the more interesting UX tests that I worked on was for RFE/RL mobile websites, which we tested in English and in various languages common in Russia and nearby. Without knowing anything about the site, several of our participants commented right away that it must not be from a Russia-based news network solely from the editorial choices, referring to the top stories on the home page. I recall one participant commenting that no Russian news outlet would dare have the Pussy Riot story front and center, if they reported on it all, because in-country news typically paints the Kremlin in a positive light.

Screen shot 2014-02-03 at 10.01.22 AM

In addition to a responsive website, RFE/RL now offers a mobile app for Android and iOS.

Comments like those remind me why it’s so critical to provide an alternate point of view for people in countries where the press isn’t truly free — where people only hear one side of the story because the media is subject to repercussions for content published.

I find it ironic that in the U.S. we have so much freedom to chose what we read and so many options of media offering all points of view, and yet pundits and others are saying that we are increasingly choosing to consume news from organizations that support or confirm our existing point of view. Are we self-imposing what is forced on people in less free countries? It’s a similar concern to that voiced by Netflix CEO Reed Hastings, at the recent BBG tech panel, who cautioned that we should consider the downside of personalized content streams.

It’s something I want to be more conscious of — in fact, I’ll be checking multiple news outlets tonight in order to get a more balanced view of the world, starting with the VOA news app that I recently helped test. Speaking of the VOA news apps, I have to brag that our mobile team at ODDI led by Will Sullivan has just been dubbed one of the top five mobile platforms in the world by the GSMA, which means we’re in the running to receive a prestigious award at the Mobile World Congress in Barcelona.

Please comment here if you have any questions or thoughts! We’d love to hear how you do UX/UI testing, especially for products intended for global audiences. You can also find us on Twitter: @BBGinnovate, @ericamalouf and @stevefuchs1.

]]>
http://www.innovation-series.com/2014/01/27/how-to-do-ux-testing-on-tablets-in-cartoons/feed/ 0
The Beauty of Paper Prototyping: Low-tech UX Testing Yields Timely Feedback http://www.innovation-series.com/2013/09/12/the-beauty-of-paper-prototyping-low-tech-ux-testing-yields-timely-feedback/?utm_source=rss&utm_medium=rss&utm_campaign=the-beauty-of-paper-prototyping-low-tech-ux-testing-yields-timely-feedback http://www.innovation-series.com/2013/09/12/the-beauty-of-paper-prototyping-low-tech-ux-testing-yields-timely-feedback/#comments Thu, 12 Sep 2013 16:26:16 +0000 Erica Malouf http://www.innovation-series.com/?p=4527 We’re Testing a Digital Tool with Paper??

I admit to feeling very skeptical when I was first told we’d be doing a paper prototype UX test for a digital storytelling tool that my colleagues have been developing. Thoughts in my head included: How can a paper version of a tablet simulate what it’s like to use this tool on an actual iPad? Could users reacting to a paper mock-up possibly give us the feedback we need?

In concept, it sounded silly to have someone touch an image of a button on a piece of paper and then have an ODDI staff member pretend to be the computer and change out the paper with each touch  of the ‘screen.’ However, my tune changed on testing day as we went through the process.

PP CU

i
The Set-up

We had four interns from our building at BBG participate—they were all in their twenties and generally savvy with technology. On our team, we had a moderator to guide the testers through the process, a person acting as ‘the computer,’ and several people on the panel to ask questions afterward. We also had a video camera set up to record all of the action.

During the test, our moderator read from a carefully prepared script that guided each participant through different tasks. While best practice dictates that one strictly follow the script, we were somewhat relaxed with this particular test and occasionally improvised in order to extract the information we needed.

The Results

Despite the fact that we only had a pool of four testers (testing usually requires a minimum of five for a paper prototype), we were able to get some extremely valuable feedback. None of our test subjects knew they would be testing a storytelling tool for breaking news, so it was telling that all of the participants guessed that it was a news application right away—we knew we were on the right track with the general design and feel. All of testers noticed at least one flaw in functionality and offered suggestions on design that continue to inform our decisions as we refine the tool.

PPsmiles--impressionist

i
A Testing Rule to Live By

My colleague Steve Fuchs (head of design at ODDI) taught me an important lesson about testing. He explained why we do paper prototyping at the early stages of the design process by equating it to the ’5-50-5000 rule of print production’.

“An error gets exponentially more expensive to fix the later it is caught in the production process.”

Essentially, he is saying that what we can test for maybe $5 and fix cheaply early in the development of a design project–be it a website, an app or any digital product–would cost more and more as we get further along in the process. The goal is to save time and money by catching things early with a simple and easily implemented UI test.

Take home lesson: in the early stages, don’t worry about creating a fancy UI/UX test that simulates the product perfectly—first do a low-tech test to fix the major flaws.

Paper prototyping is what I now think of as the quick and dirty way to do a first round of UI testing. I’m a convert. I also read a recent blog post from Jamie Tolentino on “The Next Web” that praises guerilla UX testing, further confirming my newfound appreciation.

Do you have any UX or UI testing rules, methodology or tips that you live by?

 

]]>
http://www.innovation-series.com/2013/09/12/the-beauty-of-paper-prototyping-low-tech-ux-testing-yields-timely-feedback/feed/ 1
Using Twitter Bootstrap to Speed Up Responsive Website Development http://www.innovation-series.com/2013/05/31/using-twitter-bootstrap-to-speed-up-responsive-website-development/?utm_source=rss&utm_medium=rss&utm_campaign=using-twitter-bootstrap-to-speed-up-responsive-website-development http://www.innovation-series.com/2013/05/31/using-twitter-bootstrap-to-speed-up-responsive-website-development/#comments Fri, 31 May 2013 18:40:49 +0000 Lynne Venart http://www.innovation-series.com/?p=3244 Occasionally in our office, we have small, one-off projects that don’t need to fit into our existing content management system. This gives us more flexibility in design and structure, but we need to get them done quickly and without a lot of resources. When we built the redesigned and responsive VOA Pronunciation Guide, we used Twitter Bootstrap to get it up and running fast.

Twitter Bootstrap is an open source HTML, CSS and Javascript framework. It was developed by Twitter engineers at their first Hackweek as a flexible and streamlined framework for all of their developers—replacing the tendency to build projects from scratch or from a variety of different frameworks.

Responsive CSS

Using Bootstrap’s fluid grid system makes your site scale-able to any device, big or small. If you’re just getting started with responsive CSS, poke around the bootstrap-responsive.css file to see how styles are changed based on screen size. The CSS uses @media queries to change the display based on screen size, like this:

@media (min-width: 768px) and (max-width: 979px) {
.class { your css here }
}

The Bootstrap examples have all of this CSS completed for you. If you’re already a pro at responsive CSS, downloading Bootstrap gives you source files to start from, which you can leave as is or manipulate.

Easy to Implement User Interface Components

It can be difficult to decide on user interface elements before you see them in action. With Bootstrap, much of the custom development time is eliminated, so you can experiment with different components without adding a ton of extra work.

For example, to add breadcrumbs as seen below,  simply create a list and add the class “breadcrumb” to the <ul> tag. To add a divider between the list items, add <span class=”divider”>/</span> before closing the <li> tag.

breadcrumb

Instructions to add all of the components are clearly spelled out on Bootstrap’s GitHub.

Pretty CSS Forms

I love CSS, but I don’t love trying to make forms look pretty using CSS. Twitter Bootstrap read my mind with their default form styles in the base CSS. They are slightly more complicated than the breadcrumb example above, but use the same method of adding class names to indicate the function — and corresponding look — of the item.

forms

For the VOA Pronunciation Guide, we started with the basic marketing site template, and customized the look and feel by editing the CSS. We added several Bootstrap components, including dropdowns, tabs, suggestive search, glyphicons, breadcrumbs, pagination, and buttons. Using Bootstrap helped us get the project off the ground quickly, without a lot of development resources.

To explore the VOA Pronunciation Guide further, visit pronounce.voanews.com.

- – - – -

Thoughts? Feel free to post comments or questions in the section below or tweet us @BBGinnovate.

- – - – -

The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.

]]>
http://www.innovation-series.com/2013/05/31/using-twitter-bootstrap-to-speed-up-responsive-website-development/feed/ 0
VOA Pronunciation Guide, Reimagined for 2013 http://www.innovation-series.com/2013/04/27/voa-pronunciation-guide-reimagined-for-2013/?utm_source=rss&utm_medium=rss&utm_campaign=voa-pronunciation-guide-reimagined-for-2013 http://www.innovation-series.com/2013/04/27/voa-pronunciation-guide-reimagined-for-2013/#comments Sat, 27 Apr 2013 22:58:30 +0000 Steve Fuchs http://www.innovation-series.com/?p=3152 Innovation is not only exploring the future, it is also rethinking the present with new tools.  ODDI’s redesign and retooling of VOA’s Pronunciation Guide (originally developed circa 2000) relaunched in April.  The project team’s code name for the guide, “Juicy App,” refers to the fact that, just like a juicy red apple, the pronunciation guide was ripe and ready for the next step in its digital career.

VOA’s Pronunciation Guide was the first of its kind on the Internet.  The database has nearly 7,000 entries, most of which have an attached audio clip. Along with showing the pronunciation of the word in text format, the audio clip allows you to hear what the name should sound like. VOA Special English broadcaster Jim Tedder says that using the correct pronunciation of a name shows that the speaker cares about his listener.  It also builds credibility, which is very important for a news organization

The primary aim of the redesign is to make the pronunciation guide more friendly and universal by making the design responsive; so that a single design is accessible via phone, tablet, or desktop. A secondary goal is to update the back end of the site: Ajax is now used to streamline code, Twitter Bootstrap now provides a new framework, the site has moved to a cloud based host and Google Analytics code has been added.

 

Twitter Bootstrap jumpstarts development.

Twitter Bootstrap is an easy way to get a responsive website up, running fast, and saleable to any device. Like other tools, it does end up making many of the sites built with it look similar. But, it is easy to customize with CSS, logos and images to add branding and uniqueness.

Bootstrap is simply an HTML, CSS and JavaScript framework. It uses 140 icons in dark grey and white from Glyphicons, has built-in buttons (with pre-defined colors and sizes) and a vast selection of reusable components, like dropdown menus, pagination, tabbed navbars, progress bars and default thumbnail sizes. The components are easy to implement without thorough knowledge of JavaScript, but you do need to be comfortable with HTML and CSS semantics.

To build the VOA Pronunciation Guide, we started with the Basic Marketing Site template and designed our site with that structure in mind—adding color, logos and functionality where needed. The template is simply HTML with CSS—nothing fancy. We added a custom CSS file on top of Bootstrap’s starter CSS to add our custom styles. Using Bootstrap’s built-in components and JavaScript (including the breadcrumbs, search, modals, tabs, buttons and dropdowns) helped the project move quickly.

pronunce-before-afterBefore (image behind) and After (images in front) re-development.

 

Migration from local server to the cloud.

The VOA Pronunciation Guide was originally served from a locally managed web server connecting to a locally managed database.  In order to take advantage of flexibility, maintenance, and cost savings, the new application is served utilizing Amazon cloud services.  The files were moved to an Amazon EC2 instance connecting to an Amazon RDS instance for database services.  Amazon Simple Email Services are also used for management and notification purposes.  The application code was completely re-architected and rewritten to migrate from a closed proprietary language to a standard, and more open, LAMP stack (Linux, Apache, MySQL, PHP).  Twitter Bootstrap stepped in again to help with new functionality such as paged data navigation and type-ahead search results.  Audio playback was implemented using the open source jPlayer plugin.  This allows the VOA Pronunciation Guide to play back audio files seamlessly across devices and platforms.

 

A product of agile development.

The new guide is a product of the ODDI new agile project framework.  These feature a team-based collaborative approach to setting goals, daily scrum meetings and constant collaboration in person or online using new project management tools.

 

To explore the VOA Pronunciation Guide further, visit http://names.voa.gov/.

 

- – - – -

Questions? Comments? Post in the comments section below or tweet us @BBGinnovate.

- – - – -

Thank you to April Deibert and Lynne Venart for their contributions to this post.

(The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.)

]]>
http://www.innovation-series.com/2013/04/27/voa-pronunciation-guide-reimagined-for-2013/feed/ 0
Using TimelineJS and a GoogleDoc spreadsheet to create a responsive timeline http://www.innovation-series.com/2013/03/22/using-timelinejs-and-googledoc-spreadsheet-to-create-timelines/?utm_source=rss&utm_medium=rss&utm_campaign=using-timelinejs-and-googledoc-spreadsheet-to-create-timelines http://www.innovation-series.com/2013/03/22/using-timelinejs-and-googledoc-spreadsheet-to-create-timelines/#comments Fri, 22 Mar 2013 11:25:11 +0000 Brian Williamson http://www.innovation-series.com/?p=2807 ODDI works with journalists broadcasting in over 60 languages around the world. One of the challenges the UX studio is focusing on this year is how to help busy journalists create more interactive content. We want to identify existing tools (or create new ones) that will enable journalists to quickly and easily tell stories in new ways, while ensuring that the content is accessible across devices.

For our first project, we collaborated with the Vietnamese language service at Radio Free Asia to create a timeline of online dissidents in Vietnam who have been jailed.

After exploring various timeline tools, we settled on TimelineJS.

TimelineJS is a free, open source tool developed by Zach Wise and The Knight News Innovation Lab that enables journalists to make responsive timelines that work well on a desktop screen or mobile device.


How It Works

In its most basic form, the timelines can be created with a GoogleDoc Spreadsheet, so they’re easy to update, make corrections and expand in the future. And, because they’re based on a GoogleDoc, multiple journalists can collaborate simultaneously to create a timeline on a deadline.

Each timeline can include a variety of media. Journalists can use photos, maps, videos, audio files, tweets and wikipedia articles to help tell the story.

TimelineJS currently supports more than 30 languages. And if a language isn’t supported, it’s relatively easy to add it by creating a language file that translates the months, days of the week and navigation.

Building a Timeline

Creating a timeline is easy. Simply grab a copy of the timeline template and fill in the information.

GoogleDoc spreadsheet for a timeline about Aung San Suu Kyi

Each row represents a new date in the timeline. Begin by creating a start date for the event. Write a headline and short text description.

The media column is your opportunity to include multimedia content. Simply insert the link to an image, Google map, unique tweet, Wikipedia article, SoundCloud file or YouTube link. TimelineJS will process the link and incorporate the content directly in the timeline.

Flickr, GoogleMaps, YouTube, Vimeo, SoundCloud, Twitter and Wikipedia icons

If you’re linking to an image, you should be hosting it or linking to it from your Flickr account so that you can control the file size and quality of the image (and to avoid this).

When you’re ready to see your timeline, go to the File menu and select “Publish to the Web.” Check the box next to “Automatically republish when changes are made” and click “start publishing.” This will give you the spreadsheet URL to insert into TimelineJS. Copy the link and paste it into the embed generator.

You now have several options for customizing your timeline—changing the language for the navigation, choosing a map style and selecting the fonts.

Timeline Tips and Inspiration

Here are some basic suggestions for working with TimelineJS:

  • Vary the pacing using different types of media. Decide whether a map, image, video or tweet will best tell the story for that specific date.
  • Keep the headlines and text short but descriptive. Remember that you can link to additional content to enable readers to dig deeper.
  • It’s easy to add to the timeline and collaborate with others. Think about setting up a timeline with a handful of points to start with and then building on it as the story evolves.
  • You can customize the look and feel of the timeline by tweaking the CSS.

In addition, Zach Wise suggests that you “pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.”

Remember that there are lots of different ways to use a timeline to help tell a story:

Spreading the Word

Before we met with RFA, there were already a few journalists in the language services who had used TimelineJS. Our goal is to democratize the process so that there aren’t just one or two timeline ‘experts’. We want to have entire newsrooms of journalists who are comfortable creating interactive content.

To help us accomplish our goal, we created a short tutorial video and we’re hosting a series of brown bag sessions to introduce TimelineJS to more journalists throughout VOA, RFA, RFE/RL, MBN and OCB.

Update: April 16, 2013

We reached out to Chris Spurlock, Graphics Editor at the Huffington Post, to find out how he used TimelineJS to follow the breaking news of twin explosions at the Boston Marathon.

Huffington Post timeline of the explosions at the Boston Marathon

ODDI: When did you start working on the timeline and how did you set it up?
Spurlock: As soon as I got word of the blast and how serious it appeared to be, I immediately set up the HTML for the timeline, which I did by simply cloning our Newtown page. Next I made a copy of our Newtown Google Spreadsheet and shared it with the reporter I was working with. Lastly, I copy-pasted the new Google Docs link into the HTML file and got the timeline live online.

ODDI: How did you collaborate on creating the timeline?
Spurlock: From there, the reporter and I started working on filling in the sheet. I started with the events from earlier in the day (race start, winners, etc.) and she started from the present moment and worked backward until we met in the middle.

After we had it decently flushed out and fact-checked we put it up on the site and continued to add to it (and are still adding as of now). We had a reporter from Sports offer to grab and add AP photos for us, and later we passed it off to the NewsDesk for the evening.

ODDI: What’s your favorite part about working with TimelineJS?
Spurlock: What I love is that all you have to do is share the Doc and an infinite number of people can collaborate and add info. The only tricky part is making sure you don’t paste over something someone has just entered. You also have to be careful of typos and other errors, because as soon as something is added, it goes live.

ODDI: How long did it take you to post the timeline?
Spurlock: I think I started the timeline about 30 minutes after the first bomb, and it was up on the site in less than an hour after that.

ODDI: How’ve you used TimelineJS to tell stories?
Spurlock: We’ve used the tool for big breaking news events like the Aurora and Newtown shootings, but also for other stories, both serious and not.

- – - – -

What are your thoughts on TimelineJS? What tools do you think more journalists could use to produce interactive content? Post in the comments section below or tweet us @BBGinnovate.

- – - – -

Thank you to April Deibert and Chris Spurlock for their contributions to this article.

(The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.)

]]>
http://www.innovation-series.com/2013/03/22/using-timelinejs-and-googledoc-spreadsheet-to-create-timelines/feed/ 0
SXSW 2013: Mobile-only, performance-focused web development for a future-friendly BBG http://www.innovation-series.com/2013/03/21/sxsw-2013-mobile-only-performance-focused-web-development-for-a-future-friendly-bbg/?utm_source=rss&utm_medium=rss&utm_campaign=sxsw-2013-mobile-only-performance-focused-web-development-for-a-future-friendly-bbg http://www.innovation-series.com/2013/03/21/sxsw-2013-mobile-only-performance-focused-web-development-for-a-future-friendly-bbg/#comments Thu, 21 Mar 2013 17:23:27 +0000 Will Sullivan http://www.innovation-series.com/?p=2845 Last week at SXSW Interactive, I was a mobile-aholic, focusing almost exclusively on sessions around mobile and responsive web design. One of the most influential sessions that still has my heart fluttering and brain racing was from by Brad Frost, entitled “Beyond Squishy: The Principles of Adaptive Design,” that reinforced a lot of what I’ve been preaching about our mobile strategy here.

Frost started off discussing the terminology of “responsive web design” and how it has become all-encompassing and almost generic, like “corn flakes” or “Kleenex,” to refer to a bunch of ideas — responsive design, adaptive design, progressive enhancement focused on multi-platform design and development so that the web works everywhere. He likened this ideology by citing Sir Tim Berners-Lee, the inventor of the Internet’s tweet during the opening of the 2012 Olympics, “This is for everyone.”

The bulk of his talk was about what technically is referred to as “adaptive,” which he outlined the core principles as:

  • Ubiquity – The Web is everywhere from phones to TVs to cars and beyond. We must embrace this.
  • Flexibility – Transform seamlessly between screen sizes, orientations and resolutions
  • Performance – Performance *is* design. Users expect content to be as fast, if not faster on mobile devices. You have less than 5 seconds of someone’s attention before they bounce. Some “responsive” approaches force users to download everything then modify it on the device, it needs to be the opposite way, which leads to the next principle…
  • Enhancement – Start with a mobile-first, low technology experience and add enhancements and features through server side detection as the device and context is capable (from data points such as hardware capabilities, software, bandwidth, etc.)
  • Future friendly – Build APIs and content that is fluid for future technological developments and experiments. “We don’t know what will be under Christmas trees in two years, but that’s what we need to design for today.”

While to outsiders (and even some insiders) we may look similar to CNN, AP or any of the other global media organizations, our audience is very different — we focus almost exclusively on conflict areas and audiences with restricted or low and unstable bandwidth — and need to keep that in perspective at all times.

We need to be mobile-first in our approaches, because in most of our countries they’re mobile-only. They don’t own cable Internet connections and desktop computers. They’re leapfrogging the digital divide and their first and only experiences with the Internet is on a mobile device.

Since they’re mobile-only in most of our countries, we need to also be a performance-first organization.

Speaking of performance, there’s an excellent piece on the PBS IdeaLab website from Phillip Smith comparing the web performance of major media sites. I’ve distributed a similar comparison internally, bench-marking our sites to other major international media as we begin this transition. We’re currently doing better than some, but as we continue move to the responsive approach we need to continue to make performance our first priority above all others. This might mean we can’t run the latest social media gizmo widget on our site, but it will mean for a better user experience for all our audiences on 2G connections.

Frost closed his presentation discussing how amazing it is to be in this technological space right now; he pointed to the exponential future potential of the Internet that is coming soon:

  • 2.4 billion people currently have access to the Internet.
  • 4.5 billion don’t.

Our audience is more the latter than the former. The Web *IS* for everybody. Let’s bring it to them.

]]>
http://www.innovation-series.com/2013/03/21/sxsw-2013-mobile-only-performance-focused-web-development-for-a-future-friendly-bbg/feed/ 1
Innovation Strategy on a Global Scale, 2013 http://www.innovation-series.com/2013/02/26/innovation-strategy-on-a-global-scale-2013/?utm_source=rss&utm_medium=rss&utm_campaign=innovation-strategy-on-a-global-scale-2013 http://www.innovation-series.com/2013/02/26/innovation-strategy-on-a-global-scale-2013/#comments Tue, 26 Feb 2013 06:24:52 +0000 robbole http://www.innovation-series.com/?p=2563 The Office of Digital & Design Innovation launched roughly a year ago with a very straightforward mission: the expansion and usage of digital platforms to grow our global online audience.  We do that by working with our partner media networks to bring best-in-class platforms and services, as well as experimenting and launching innovative new technologies that speed our transition in serving increasingly online audiences.

Over the last twelve months we have been working on the “ground game”, by migrating off of old platforms, adopting new agile software frameworks and generally preparing the ground for faster innovation.  I am very proud to say that with our close partners, especially with Radio Free Europe’s digital team, we have fully turned over all of our core infrastructure on-time and on-budget.  And in an unprecedented event, we will be able to take some operational savings and invest in new areas, such as expanding our mobile presence and improved digital syndication.

In this current year we are going to expand our presence and quicken the pace of introducing new products and services.  We have a mandate for change and now are fully ready to drive innovation that leads to audience growth.

Here is our plan for 2013.

 

2013 Strategy & Goals

1.  Integrate Digital Platforms: Develop our new core digital services to an effective “run” state in order to provide normal enterprise operating services to all of USIM.  ODDI is working closely with our colleagues in RFERL Digital, as well as with RFA, MBN, VOA and OCB, to ensure that our core services, such as the online video/audio platform (OVAP), mobile web and mobile applications, are effectively established for all of USIM.  In many places we believe that integration into the “Pangea core” and RFA’s system will enable important improvements in our operating efficiencies.

Digital platform highlights include:

  • Full integration of the Kaltura online video/audio platform (OVAP) into Pangea: ensure that video and audio management becomes a ‘back office’ function to a user of the Pangea CMS and enable seamless distribution to all USIM accounts, including external accounts like YouTube and SoundCloud.  We also want to do a complete implementation of mobile-compliant audio/video players for iOS, Android and other mobile devices.
  • Deliver enhanced live streaming capabilities for 24-hr “true” Mp3 audio playout: create capabilities for streaming services on digital channels such as Apple iTunes, TuneIn, Stitcher and other radio streams.
  • Expansion of Direct to provide services to all entities and all content types: provide technical connectors to allow all entities to seamlessly publish a wide-range of content types (broadcast-quality to Internet-quality rich media, text, photos, etc) for a range of broadcast and digital affiliates.
  • Launch “measure everything” platforms: launch new platforms and technical services to ensure cross-agency tag management, web analytics, social media analytics and video analytics.  In addition, launch a powerful analytics application programming interface (API) and customizable dashboards of real-time analytical data for all levels of the organization–from the Board down to the editor and reporter levels.

 

2.  Grow Mobile: Drive future (“road map”) improvements and expansion of our mobile platforms and services to increase our global audiences.  Mobile is the single most important method for USIM to be able to reach audiences.  Statistics often point to the fact that mobile adoption has a lot of room to grow or that there is a clear ceiling on the use of fixed-line broadband in different regions.  Our goal is to deliver the platforms and services that enable all entities and language services to deliver content across all mobile devices–from high-bandwidth IPTV applications down to simple feature phones.  And, just as important, we want to facilitate the use of voice/audio over local phone calls.

Mobile highlights include:

  • Launch of new news “Umbrella” applications for all five entities.  In conjunction with the entities, we will be launching and improving a range of mobile news applications.
  • “Responsive+” on core digital platforms.  Re-development of our core digital sites to utilize both responsive web design and progressive enhancement with server-side detection through a mobile-first strategy.  This change will enable us to provide digital content across a wide range of devices and bandwidths, customizing the content for the user, based on their device’s hardware and software capabilities and network connection.
  • Expansion of IVR and other low-bandwidth mobile publishing.  Improving existing open source frameworks to enable enterprise Interactive Voice Response (IVR) services to enable low-cost local calling for the audience, and low-cost operational costs for BBG.
  • e-Book, magazine publishing improvements.  This year we will be piloting a number of design templates and easy workflows to create interactive books and magazines for the distribution of collections of content both in static (text) and dynamic, rich media formats.

 

3.  Expand Audience Engagement: Implement an innovative initiative that builds a USIM-wide, audience-centric sourcing, storytelling and distribution service. We are focused on elevating the role of the global audience in our work as journalists, from enhancing simple commenting and discussion tools to supporting direct audience participation while covering events. Audience engagement occurs within a news organization when three critical pieces align: business strategy, technical capabilities and editorial management.  Our office will elevate the notion of audience engagement throughout our language services while simultaneously increasing our digital capabilities.

Audience engagement highlights include:

  • Strengthening core content (text/audio/video) platforms.  Working closely with RFERL and TSI, we will focus on enhancing our current infrastructure, as well as adopting or building enhancements to platforms and services that enable audience members to participate in our journalism.
  • Interactive storytelling expansion.  We are introducing a number of new JavaScript and other frameworks to enable new types of storytelling by our journalists.  Our goal is to identify, seed and then support a core group of video and audio producers to understand and use Popcorn.js, Timeline.js and other frameworks to publish interactive content–especially using audience-generated materials.
  • Audience engagement testing.  In order to engage with audiences, we need to understand their interests, preferences and cultural lense in order to present compelling content and product that encourage their participation.  We will be partnering with BBG Research to identify and test digital products in-country, especially to discover better ways to create and develop content with audiences.

 

4.  Grow Digital Affiliates: Expand the number of websites and digital services that carry USIM content through new API and other syndication services.  Our goal is to: 1) replace expensive satellite distribution for lower-cost Internet-based distribution wherever possible; 2) increase the ability for ALL entities to share, distribute and create content with local partners; and 3) build a new class of “digital affiliates” in the form of syndication points (i.e. Google Currents), blog networks, emerging all-digital news organizations, etc.  Our goal is to build an expanded “affiliate storefront” using a robust application programming interface (API) strategy.

Digital affiliate highlights include:

  • Increased syndication partnerships.  This includes regional goals whereby we will launch two to four quarterly syndication agreements with global partners, as well as targeted regional syndication deals in Eurasia, Africa and Southeast Asia.
  • Direct API/digital affiliates program.  We have three goals in this area: 1) the integration of Direct with our Kaltura OVAP system for the inclusion of Internet-quality video and audio content in affiliate distribution; 2) integration with OSD’s customer relationship management system to enable affiliate information to flow between the two systems; and 3) a public-facing API to enable existing affiliates, as well as the potential for a new class of “digital affiliates”, to have our content delivered to them dynamically.
  • Strong syndication analytics system.  This includes the expansion of our analytics platforms, as well as offering training and simple dashboard tools, to enable a more robust tracking of digital content usage by existing and new affiliates. We hope to provide business/editorial managers with more information on the use and consumption of their content by third-parties.

 

In order to accomplish these goals, ODDI is going to continue to evolve its operations and capacities.  We have been replacing remote vendors with an increasing number of “makers” at the staff level, or through full-time, in-office, contractors.  As resources become available we will be adding additional capabilities to the office.  We will be continuing to balance an expanded, full-service, in-house capability to build, maintain and grow a range of new digital platforms with a rational number of high-quality, best-in-class vendors.  In particular, we will focus on expanding our capacity in three critical areas: technical development/programmers, user experience design/storytelling support and increased services for doing digital data analysis in support of product development and strategy.

If you have any questions, comments or thoughts in improving our 2013 strategy please let us know!  [You can leave a comment below or contact us on Twitter (@BBGinnovate).]

- Robert Bole, Director of Innovation, Office of Digital & Design Innovation

]]>
http://www.innovation-series.com/2013/02/26/innovation-strategy-on-a-global-scale-2013/feed/ 1
How Other News Orgs Are Integrating News Content with Responsive Design http://www.innovation-series.com/2013/01/11/how-other-news-orgs-are-integrating-news-content-with-responsive-design/?utm_source=rss&utm_medium=rss&utm_campaign=how-other-news-orgs-are-integrating-news-content-with-responsive-design http://www.innovation-series.com/2013/01/11/how-other-news-orgs-are-integrating-news-content-with-responsive-design/#comments Fri, 11 Jan 2013 22:47:54 +0000 April Deibert http://www.innovation-series.com/?p=2445 It’s a fact: responsive design is on the radar of some of the largest news organizations.  Executives and editors of these orgs listed below are realizing that clean looking and easily accessible content and graphics across any variety of devices is worth the trouble since there is less need to develop native apps for different devices.  News orgs who are using this technology hope that once users realize they will get a phenomenal digital experience each time, they’ll keep coming back.  For news orgs with paywalls, this could translate into a new (non-print loving) subscriber base.  For the BBG, it could translate into increased user engagement and more bang for the American taxpayer buck.

 

The-Boston-Globe-responsive-design
Bostonglobe.com

The Boston Globe was the first major metropolitan newspaper to embrace responsive design. Take a look and you’ll see why they continue to be one of the leaders when it comes to integrating news content with responsive design.  First of all, you’ll notice it’s a paywall site (limited advertising; all news content) as opposed to it’s free parallel companion site, Boston.com, and second of all, its design is as clean as it comes (minimal clutter).  Turns out that Ethan Marcotte (pioneer of responsive design) consulted with the Globe on the BostonGlobe.com project.  As described in a review on Emedia Vitals, “Our philosophy with BostonGlobe.com is that less is more, where we can just let the journalism do its thing,” said Jeff Moriarty, the Boston Globe’s Vice President of Digital Products.  In addition, the HTML5/CSS3 code combo allows web developers to use progressive enhancement techniques.  This means content can be enhanced or targeted it for specific platforms to create a more rich storytelling experience.  For example, responsive design can sense if a user has a touch screen (content could include a carousel of picture content), but it wouldn’t necessarily be able to use iOS- or Android-specific device capabilities.

Cool Content Example: “The Boston Globe received a big dump of audio files and transcripts from the court but wasn’t sure what to do with them. In the end, one of the designers built a player that allows you to read and listen to the transcript at the same time.” [Source: Emedia Vitals]

How to Approach a Responsive Design:  In a pretty entertaining blog post, the designers break down the creative challenges and the technological challenges to make the BostonGlobe.com redesign happen. “The process was a total joy, and we’ve adopted it for the projects we’ve worked on since. The key is understanding that the design conversation is a long one, it may start with static comps but it continues through development. The more you can fuse the two (in your process and in your personnel) the more successful you’ll be.”

Some Responsive Infographics: Boston Globe Infographics Department [Tumblr, Javier Zarracina, Boston Globe’s Graphics Director]

Video Interview with Miranda Mulligan (former Design Director for Boston Globe, currently Executive Director of the Knight Lab):

[Source: Next Issue Media, YouTube]

[Read more: “BostonGlobe.com: The Future of Web Design?” [Emedia Vitals]]
[Read more: “BostonGlobe.com: Using responsive design to tell interactive stories” [Emedia Vitals]]
[Read more: “The Boston Globe Embraces Responsive Web Design” [WebMonkey]]

 

 

Time-responsive-design

Time.com

On October 22, 2012, Time.com became “the first global news site to roll out a fully responsive redesign optimized for mobile and tablet browsing.”  In particular, the new design includes a fresh new home page, better presentation of TIME’s award winning photography, more emphasis on voices and personalities, improved search capabilities and a robust new commenting system, LiveFyre, that pulls relevant conversations from Twitter and Facebook.

Cool Content Example: What’s really cool about Time’s redesign is it was also applied to their archives, meaning subscribers can view content all the way back to 1923 from their desktop, tablet, or smartphone.

How to Approach Responsive Design: “…Don’t underestimate the amount of time it takes to build a responsive site. It took us about nine months start to finish and a critical part of that was quality assurance. Not just using emulators and simulators, but you have to make that small investment to have multiple versions of the devices on hand so the people doing the quality assurance and user acceptance testing can test for multiple scenarios. You have to make sure you nail that part of the process,” said Craig Ettinger, general manager for Time.com in an interview with the Association of Magazine Media.

[Read more: “The New TIME.com: Responsive Global News Site” [Techland Blog, TIME.com]

 

 

BBC-responsive-design

BBC

BBC News is in the process of moving to a responsive design to make their content easily accessible to their increasing number of mobile users, all while still maintaining a full content desktop version.  They also keep a blog on responsive design.

Cool Content Example: Phil Buckley, Executive Product Manager for BBC Future Media News World Service, and his team recently released a new mobile site for BBC Indonesia in Responsive Design.  “As far as I can find this is the world’s first responsive website in an Asian language and one of the very first non-English responsive sites,” says Buckley.

How to Approach Responsive Design: .net offers this really interesting article discussing BBC’s responsive challenges thanks to an interview with David Blooman, Test Engineer at BBC Future Media.  And, BBC produced this talk that touches on how BBC rose to the occasion.  The presentation includes: “How we support as many devices as possible using responsive design”, “How we’re using a sprinkle of Symfony2 components in our Zend world”, “How we scale to serve BBC News to the masses”, “What tools we use to help us along the way.”

[Video: “Scale and Adapt: A Story of How We Built Responsive BBC News” [SpeakerDeck]]
[More how-to:
BBC TV Channel Homepages: Responsive Design [Graphics]]
[Read more:
BBC News on Mobile: Responsive Design] [BBC Internet Blog]]

 


Chicagonow-responsive-design

Chicago Now

Last year, the Chicago Tribune converted its local set of blogs, Chicago Now, to a responsive design.  In January, the Chicago Tribune’s Spanish-language site, vivelohoy.com, was also converted into a responsive design.

Cool Content Example:  According to the Chicagonow.com staff blog, it’s a heck of a lot easier to find what you’re looking for (compared to boston.com).  I gotta agree.

How to Approach Responsive Design:Adee said there are four reasons the Tribune is betting on responsive design: to go where the users are as quickly as possible; to save money and time on development and support of native apps; to provide advertisers with new ways to connect with mobile and tablet users; and to provide users with a consistent experience across all devices. He said, however, that chicagotribune.com’s switch to responsive design will be more challenging for revenue reasons as well as integrations with third parties.”

 


TheGuardian-responsive-design

The Guardian

The mobile beta trial was released in November 26, 2012 and aims to offer readers faster download speeds, an easier reading experience, top-stories access from any page, auto-updating of live blogs, near real-time football scores and stats, swipe-through photo galleries, playable videos, and better quality photos. It currently stretches to fit the browser but isn’t using media queries to adjust the design for different sizes or devices.

Cool Content Example: IMHO, the auto-updating of live blogs and real-time scores is a great feature, as is the ease of flipping through interesting high-resolution photos and watching the latest videos from my smart phone.

How to Approach Responsive Design: The Guardian’s Web Developer Matt Andrews outlines in this article how the publication aims to make use of responsive design, following in the footsteps of the Boston Globe and BBC News.  Created by TIME.com design director Davina Anthony with input from the magazine’s design staff, the new look showcases the depth and breadth of TIME’s content, with over 100 new articles, blog posts and photos produced each day.

[Read more: “Guardian rolls out new responsive mobile site following beta trial” [Guardian]]

 

 

Have any thoughts about responsive design or about BBG’s efforts to move in the responsive direction?  Leave us a comment below and we’ll be sure to respond in kind.

 

- – - – -

(Thank you to Brian Williamson, William Sullivan, and Rob Bole for their contributions to this post.)

(The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.)

]]>
http://www.innovation-series.com/2013/01/11/how-other-news-orgs-are-integrating-news-content-with-responsive-design/feed/ 0
MPEG-DASH & the Future of Adaptive Media Delivery http://www.innovation-series.com/2012/10/12/mpeg-dash-the-future-of-adaptive-media-delivery/?utm_source=rss&utm_medium=rss&utm_campaign=mpeg-dash-the-future-of-adaptive-media-delivery http://www.innovation-series.com/2012/10/12/mpeg-dash-the-future-of-adaptive-media-delivery/#comments Fri, 12 Oct 2012 13:15:34 +0000 Adam Martin http://www.innovation-series.com/?p=2005 Delivering high quality viewing and listening experiences to diverse audiences across an ever-expanding range of connected, digital devices is a technology and workflow challenge for any media organization. When the complexities of available digital infrastructure in emerging markets are introduce, the challenges become even more formidable.

 

MPEG Dash in Live Tests on Google Chrome, 8 Oct 2012 via BeetTV on YouTube

 

MGEG-DASH is an emerging international standard for efficient, high-quality delivery of streaming media over the Internet that takes a universal, open approach to solving this challenge. It offers content producers and technologists an opportunity to simplify their process and provide an improved experience to audiences on multiple platforms and devices with varying levels of bandwidth connectivity.

DASH stands for Dynamic Adaptive Streaming over HTTP and takes an open standards-based approach to delivering an adaptive streaming service similar to current solutions provided by Apple, Microsoft and Adobe. This more open approach to the challenge of adaptive streaming focuses on providing formats that enable more efficient delivery of audio, video and related metadata without strict proprietary requirements for codecs, containers and protocols.

While Apple’s HLS for streaming video and audio content to iOS devices, Microsoft’s Smooth Streaming for Silverlight and Adobe’s HDS for Flash all share similar technologies for creating multiple media file segmented encodings of various sizes and bitrates and pairing them with a time-coded manifest file.  They also all rely on methods that are incompatible with one another and require individual configurations on the media player client application to be successfully played-back by the end-user.

With DASH, the plan is to implement the best features found in each of these HTTP adaptive streaming solutions and create a new standard that can be used in all connected devices including mobile handhelds, tablets, laptops and desktops as well as over-the-top devices and connected TVs while remaining agnostic toward the codec (think H.264 vs WebM vs Vorbis) and file format container (MP4 or MPEG-2 TS). This new specification would allow audio and video content producers, content delivery networks, device and software manufacturers to simplify existing workflows and infrastructure while optimizing the user experience on all platforms.

DASH does face challenges on its way to full adoption from key stakeholders in the video delivery ecosystem who have invested significantly in their current technologies. Mozilla, makers of the Firefox browser, also may not support the new specification because of underlying dependencies on patented technologies that require royalty payments.

MGEG DASH in its current form does not present a clear path to a single solution for content producers or technologists targeting the growing multitude of connected devices and HTML5 browsers. It does however offer the potential for emerging international markets to provide flexible audio and video presentations that reach across the entire bandwidth spectrum to engage audiences in new ways without the burdens of high operating costs or over-commitment to any single technology provider.

 

Additional Resources:

 

- – - – -

(Thank you to Adam Martin for his contributions to this post.  To contact Adam: amartin at bbg dot gov or @adamjmartin on Twitter]

(The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.)

]]>
http://www.innovation-series.com/2012/10/12/mpeg-dash-the-future-of-adaptive-media-delivery/feed/ 0