Articles about "iPad"


????????????????????????????????????????????????????????????????????????

Forecast: Digital ad revenue to jump 17% this year, magazine ad revenue to fall 11%

mediawiremorningWednesday already? Here we go.

  1. Digital ad revenue to pass TV in 2017: According to Magna Global forecasts, “television revenues are expected to grow 2.2% this year,” Nathalie Tadena writes. “Newspaper and magazine ad revenue are expected to decline 8.9% and 11% respectively, while digital ad revenues are expected to jump 17% this year to $50 billion.” (The Wall Street Journal) | “The research firm declared digital ad revenue will hit $72 billion by 2017, pulling slightly ahead of television at $70.5 billion.” (The Wrap)
  2. The perils of freelance war reporting: GlobalPost went “above and beyond” in working for James Foley’s release before he was killed by Islamic State militants, according to Medill’s Ellen Shearer. “But other freelancers may not get that kind of backing or have access to the infrastructure that a staff journalist would, she said.” (AP via NYT) | Freelance journalist Austin Tice, who has been missing for two years, is believed to be held by the Syrian government, Lara Jakes reports. (AP) | Previously: Tice “disappeared on Aug. 14, 2012, while reporting on Syria for The Washington Post and McClatchy, among other outlets.” (Poynter) | Related: Peter Theo Curtis, who was freed in Syria by extremist group al-Nusra Front on Sunday, has returned home to Boston and reunited with his mother. (AP)
  3. Online “spiral of silence”: In a Pew study, researchers found that 86 percent of U.S. adults were willing to talk about surveillance issues in-person, while just 42 percent of Twitter and Facebook users were willing to post about them on those social networks. “Overall, the findings indicate that in the Snowden case, social media did not provide new forums for those who might otherwise remain silent to express their opinions and debate issues.” (Pew Research Center) | Another interpretation, from Chris Ip: “A hesitancy to share online could actually be a valuable restraint for someone who would otherwise have shot an unthinking opinion into the digital ether, safe in the knowledge their network of followers would agree with their views.” (Columbia Journalism Review)
  4. “You could teach a whole course on Ferguson”: “We’ve seen it in other cities,” Amber Hinsley, assistant professor at St. Louis University, tells Kristen Hare. “But for St. Louis, this is really our first big story that broke on Twitter. You saw it unfold on Twitter.” (Poynter)
  5. Did you know: The domain .TV is owned by Tuvalu, a South Pacific nation, and it’s becoming a big deal for branding as sites look to capitalize on appetite for online video, Noam Cohen reports. (The New York Times)
  6. New Quartz homepage aimed at loyal visitors: It’s modeled after the site’s newsletter, Zach Seward tells Joseph Lichterman: “It’s so new, and there aren’t enough analogous products out there to really tell if we should be expecting people to just be twitchy and checking it all the time, or if they have one time in their day when they check it and it’s just that once a day.” (Nieman Lab)
  7. Nationwide Time Warner Cable outage: The Internet was down between 4:30 a.m. and 6 a.m. during “routine network maintenance,” Brian Stelter reports. Many of the homes served by TWC are in Los Angeles and New York: “That made Wednesday’s outage more noticeable, because it affected journalists and the people who employ them.” Good point. (CNN)
  8. Bigger iPad on the way? iPhones are getting bigger this year, and soon there will be a 12.9-inch version of the iPad, too. Sales of the tablet have fallen for two straight quarters. (Bloomberg) | It sounds awkward and way too big for a tablet, but Steve Kovach writes it could be a “dream device” by basically being a less “clunky and confusing” Surface Pro 3. (Business Insider) | Related: Walt Mossberg still loves tablets. (Re/code)
  9. Newspaper front page of the day: The Virginian-Pilot, selected by Kristen Hare. (Newseum)
    VA_VP
     
  10. Job moves, edited by Benjamin Mullin: Mignon Fogarty is now the Donald W. Reynolds Chair in Media Entrepreneurship at the University of Nevada, Reno. She is the founder of the Quick and Dirty Tips network. (Poynter) | Tom Cibrowski is now senior vice president of news programs, newsgathering and special events at ABC News. He was a senior executive producer at “Good Morning America.” (ABC News) | Michael Corn will be senior executive producer at “Good Morning America.” Previously, he was executive producer of “World News.” Almin Karamehmedovic will be executive producer at “World News.” Previously, he was executive producer at “Nightline.” (ABC News) | Kylie Dixon is now co-anchor for “2une In” at WBRZ in Baton Rouge, Louisiana. Previously, she was an anchor at KXII in Sherman, Texas. (businessreport.com) | Les Vann is now general manager of WISH in Indianapolis. Previously, he was general manager of WJCL in Savannah, Georgia. Steve Doerr will be acting general manager for WJCL. Previously, he was northeast region vice president for Smith Media. (Lin Media) | Job of the Day: The Associated Press is looking for a news editor in Nashville, Tennessee. Get your résumés in! (Journalism Jobs) | Send Ben your job moves: bmullin@poynter.org

Suggestions? Criticisms? Would you like this roundup each morning? This week, please email me: skirkland@poynter.org. You can reach your regular roundup guy at: abeaujon@poynter.org


!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); Read more

Tools:
0 Comments
90mm

New iPad Air comes closer to all-in-one reporting device for mobile journalists

Mobile journalists — those who report on the ground and file stories at Starbucks, for instance — should be tempted by the iPad Air. While it’s unlikely to revolutionize on-the-go computing, it definitely brings us a step closer to having an all-in-one reporting device.

If you’re in the market for a new tablet or your news organization is moving in the direction of outfitting you with a tablet rather than a laptop, here are some advantages of the new iPad Air:

Weight/size

The new name reflects one of the bigger selling points of the device — it weighs just a pound. At 1.4 pounds, the last-generation iPad was already lighter than hyper-mobile laptops such as the high-end 11-inch MacBook Air (2.38 pounds) or the low-end HP Chromebook 11 (2.3 pounds). Meanwhile, Microsoft’s Surface 2 tablet weighs in at 1.49 pounds, while the Samsung Galaxy Tab 10.1 weighs 1.25 pounds.

The iPad Air’s lightness is an asset for reporters who might hold it to record short videos, record audio or do voice dictation while in the field. It also has a narrower frame, making typing with both thumbs while holding the device with two hands a little easier, notes Jim Dalrymple of the Loop. That might not be the best way to take notes all the time, but in a pinch the iPad Air could stand in for the old-fashioned notebook, with the advantage that the notes are already digitized when you’re ready to write.

Improved audio and video

The iPad Air adds a second microphone to help cancel out background noise, clearing up audio from an interview on the street or in a busy office, for instance. (See the comprehensive iPad Air review at AnandTech for a side-by-side comparison of audio quality between last year’s iPad and the new one.)

If you’re a reporter, that’s added incentive to bring an iPad Air along for an interview. It’s easy enough to prop up the device on a desk or table with a case, and you’re virtually guaranteed to get some useable interview video to accompany your text. Plus, an advantage of the iPad Air’s large 9.7-inch display over the forthcoming iPad Mini’s new retina display is that it offers that much more screen real estate for video editing on the go after you’re finished shooting.

Free apps

New iOS devices now ship with a suite of free apps, including iPhoto, iMovie and Pages, letting users edit photo, video and words on the go. While it might still be difficult — not to mention silly-looking — to shoot photos and video on an iPad, there’s a real advantage to having that content immediately editable and ready to be filed to web editors via Dropbox or another sharing service. Or, if you’d prefer to shoot photos and video with the much smaller iPhone, iCloud sharing beams that content directly to your iPad — assuming it’s connected to a network — with its larger editing window.

Limitations

That said, there are disadvantages to the iPad Air that might make mobile journalists think twice about abandoning their comparatively hefty laptops.

Apple still hasn’t released a physical keyboard attachment for their tablets — such an accessory is the calling card of the Surface, geared toward users who want a tablet that can function at times as a laptop. Apple has left keyboard cases to third-party accessory makers, but Apple’s Bluetooth-enabled keyboards can of course get the job done, too.

If it’s crucial that you file stories directly to a newsroom CMS, you might be out of luck if that CMS isn’t browser-friendly. It’s still clunky to switch from app to app in iOS, and users can’t run apps simultaneously. That makes the iPad a poor choice if you want to stay connected to your editor via a Google Hangouts chat window or go back and forth between your word processor and web browser to research a story. (Writing this blog post on an iPad would likely have taken twice the time it took me on a laptop.)

Still, every time the iPad’s content-production capabilities grow while its weight decreases, it becomes a more appealing component of the mobile journalist’s toolbox.

Read more

Tools:
5 Comments
Travel Cybertrips iPad

How tablets are changing the way writers work

Journalists have long defined themselves by the medium that carries their work. They say they write for magazines, newspapers or the Web. No one says, “I write for tablets.”

Yet as more tablet-focused startups and spinoffs are developed, more journalists are seeing their bylines as tappable things connected to experiences, instead of articles. And this often changes how — and with whom — they work.

These days, many publishers are thinking “mobile-first” — even though they disagree on what that means. As always, where publishers go, writers follow — and the tablet is where journalists really want to go now, because that’s where the long-form print story has been reborn, and is being transformed through digital experiments.

More words, different experience

Each month dozens of pitches, mostly from magazine writers, pour into The Atavist, a Brooklyn, N.Y.-based digital publishing company that produces one original, long-form nonfiction story between 5,000 and 30,000 words monthly.

“We’re going to treat the piece the way it would get treated somewhere like The New Yorker,” said Evan Ratliff, co-founder, CEO and editor. “We’re going to make everything perfect, and then we promise them a very high production value on it.”

Now nearly three years old, The Atavist is notable for the seamless way it integrates audio, maps, video, photography, and even animation into its text narratives. But the story comes first: In a phone interview, Ratliff said multimedia elements aren’t added unless a good argument can be made for why they enhance the storytelling, and the reader can turn them off with a tap.

The Atavist’s artful inclusion of multimedia elements appeals to authors who believe their stories would benefit from that treatment. Take “Finding Shakespeare,” August’s story about a Vietnam veteran’s quest to discover how Shakespeare’s English actually sounded and to reproduce it on a New York stage. In reporting the story, Daniel Fromson said he gathered some six dozen film clips from the subject’s own documentary, as well as several boxes of letters, photographs, journals, screenplay drafts and other potential multimedia material “that ranged from receipts for his handyman business to readings of his horoscope.”

“I really do believe the multimedia in the story enhanced the story,” said Fromson, who has also written for The Atlantic and Harper’s, in a phone interview. “It would have been a good story without it, but the multimedia convey the general air of commitment bordering on obsession and the eccentricity of my subject.”

Fromson wanted to be involved with such efforts, but Ratliff said no commitment beyond production of a story’s audiobook is required of writers. An in-house production staff coordinates everything else.

Ratliff said it’s “pretty rare that we send a reporter out to actually gather multiple types of media. They come from somewhere else.”

Research into how people use tablets is helping shape the work produced on them. Long-form content, for instance, does well because readers read for longer periods of time on tablets than on other devices. They also read in the evenings — and do a great deal of tapping as they read.

“A high expectation comes with the device,” Poynter’s Sara Quinn said in March at a South by Southwest session on how people consume news on tablets. “During our study, we saw readers tap and tap on elements that weren’t tappable.”

Warning: distractions ahead

As with print magazines, tablet publications share certain physical characteristics but don’t resemble one another that much in terms of content. Not everyone thinks more multimedia is better for tablet readers of long-form journalism. Consider the debate after The New York Times published “Snow Fall: The Avalanche at Tunnel Creek” to near-deafening applause. The team that created “Snow Fall” had tablet consumers in mind as they integrated video, photography and motion graphics into one seamless story, and the piece won the 2013 Pulitzer Prize for feature writing. Soon, however, dissenting opinions emerged alongside a legion of imitators.

Bobbie Johnson, the co-founder of Matter, which publishes long-form stories on science, technology, medicine and the environment “for consumption on any device,” wrote a post called “Snowfallen” with the subtitle, “Just because you can, it doesn’t mean you should.”

“Snow Fall was a good story, but it felt as if getting you to read it was the story’s secondary ambition,” Johnson wrote. “When I did it, I was constantly interrupted or distracted. And while the multimedia elements provided atmosphere, in all honesty they didn’t mean much. As a reader they drew me away from what I was there for. I came away from it thinking ‘ooh, lovely design’ —  not ‘this story is amazing.’ ”

Matter’s co-founder, Jim Giles, said their publication’s focus remains on the quality of the written stories. He said writers for Matter, which was acquired this spring by San Francisco-based Medium, haven’t told him they’ve changed anything about their process.

“So often I feel multimedia gets in the way,” he said in a telephone interview. “We’re selling an experience of being engulfed by a story — a story that’s meaningful, gripping, and you’re learning something about the world in the process.”

Mixing media

Elsewhere, though, examples of immersive multimedia stories featuring long-form writing are multiplying, and editors value the fusion of thoughtful, in-depth writing and interactivity. With the new capabilities of tablet publishing come new (or at least revised) expectations for writers.

At Quartz, a global business news outlet owned by Atlantic Media and based in New York City, reporters must think about multimedia and other visual elements, such as charts, said editor-in-chief and co-founder Kevin J. Delaney. For instance, when Apple recently released a chart showing cumulative iPhone sales, reporter David Yanofsky superimposed his own chart of quarterly iPhone sales. Although Apple’s chart makes it appear as if the iPhone universe is ever expanding, the quarterly information shows that sales are cyclical and have actually declined in recent quarters.

“[Yanofsky] has deep journalistic training,” Delaney said in a phone interview. “He understands how business works. He knows how to read regulatory filings by companies.”

Quartz reporters use a custom-designed chart-building tool to make such charts, which Delaney said are very popular with readers. (Quartz has open-sourced that software, and other news organizations are now using it.) Reporters also choose, crop and place the photographs accompanying their stories in the publishing system.

More collaboration required

At The Atavist, stories can include a range of multimedia. Alissa Quart’s story about an embattled abortion clinic in Jackson, Miss., began as a documentary film by Maisie Crow. Both women, reached via telephone, raved about the experience of working together — an opportunity made possible because of support from The Atavist as well as the nonprofit Economic Hardship Reporting Project.

“There is big value in pairing writing and short film,” said Crow. “I can get really intimate, but the writing can set the stage for why the story’s important.”

Quart said she wished she could have had a similar collaboration with a photographer on her new book, “Republic of Outsiders.” That didn’t happen, but Quart said she now always thinks about multimedia. In fact, she and Crow are collaborating on another project — a nonprofit-supported one about domestic workers.

So far, writing for the tablet doesn’t seem much different from writing for print: the style depends on the audience and the editor far more than the platform. In the case of The Atavist, the tablet has provided more opportunities to work with multimedia. At Quartz, it’s added a few more responsibilities. And for Matter, it’s not changed the writer’s process at all.

In part, that’s because nearly four years after the debut of the iPad, audiences are still adjusting to narratives that include multimedia — and how to find examples of such storytelling.

“The main problem is the market’s not developed,” Quart said. “People don’t know how to think about it. Is it sold on iTunes? Is it a book?”

In her view, old habits still prevail: “You go to the art house to see the movie. You read the book. There’s still that division.” Read more

Tools:
0 Comments
2013 Cover

University of Oregon students embrace iPad-only publication, challenge traditional storytelling methods

Nathan Wallner is punching me in the face.

Again and again, the mixed martial arts fighter jukes, jives and aims jabs directly at my jawbone. Or so it seems, thanks to an eye-opening, interactive reading experience courtesy of OR Magazine.

Conceived and assembled each spring by upperclassmen at the University of Oregon’s School of Journalism and Communication, OR is the first and most prominent student publication produced exclusively for the iPad. It’s also one of the most innovative student-media and journalism-education initiatives in the U.S., an effort that seeks to “challenge the traditional approach to classroom instruction” and pioneer new methods of content production.

Or, as a student staffer on the magazine put it last year, “I really feel like I’m working for The Daily Prophet from Harry Potter.”

The Wild West of a learning curve

The reader’s journey with OR doesn’t begin in a cupboard under the stairs but in the iTunes store on the iPad. A little patience is required – depending on your connection, downloading an issue can take about 20 minutes. And navigation is an interactive adventure in its own right, involving horizontal and vertical scrolling, occasional rotating, tapping at various speeds and levels of intensity, and uncovering the multimedia extras waiting to be digested.

As I discovered, those extras can pack a punch.

For example, the video of the MMA’s Wallner delivering digital blows at the screen is a teaser for a profile focused on “the interiority of the fighter’s mind, what it feels like to step into the cage and get beaten up or beat somebody up in front of a lot of people.”

The multimedia package, titled “How to Be a Badass,” includes video, a photo slideshow, and a write-up about how Wallner balances a brutal MMA training regimen with university classes and work as a bouncer. At one point, an image of Wallner in mid-punch is meshed seamlessly with time-lapse video of his own shadow sparring against a wall. While he remains still in the foreground, his shadow can be scrolled into action, fighting on, a metaphor for how omnipresent MMA is in his life.

The main feature by Ben Kendall concludes with a glimpse inside the sport’s famed cage, recounting a bout pitting Wallner against a hometown favorite. To win the fight, Wallner unleashes a “flurry of left-right combinations,” a left hook, and a chokehold known as the guillotine. He earns a championship medal and belt, while losing a filling. As Wallner puts it, “The whole experience is kind of a rollercoaster in your mind.”

Which isn’t a bad description of how OR came to be.

Soon after Apple’s Steve Jobs unveiled the iPad in late January 2010, Ed Madison jump-started a course on the tablet’s emerging technology.

Ed Madison

At the time, Madison, a veteran journalist and a founding producer of CNN, was a UO journalism teaching fellow and doctoral candidate. He put together the 400-level invite-only lab class – called Mobile Media Production – with advertising professor Deborah Morrison. After receiving approval from School of Journalism and Communication dean Tim Gleason, it premiered only two months after the Jobs announcement.

“The class started and iPads weren’t even in the stores yet,” said Madison, now an assistant professor and media partnerships manager at the university. “We had no textbooks or anything. We created it as an experimental course.”

The experiment centered on not running from what Madison called “the wild west in terms of our learning curve.” Instead, they embraced it.

“It’s really a question of how do we define what teaching is,” Madison said. “Is teaching that I’m supposed to be in front of the room, have all the answers, and show you something that I have mastered? Or is teaching an exploration I do together with students? I think the students are more interested in the exploration.”

With iPads barely out of their boxes during that first course, students explored apps. They collaborated with several Portland-based media companies to develop app prototypes, including one for a gardening book that sought to enable users to learn more about plant life.

The experience planted the seeds for OR Magazine, which was created in spring 2011 during the course’s second go-round. As Madison put it, “If that [first] year was about apps, 2011 was about publishing.”

The 2011 cover.

Part of the beta

Since 2011, the course has also been about student control, based on a philosophy Madison advocates: “Empower leaders to be leaders.”

For each spring course, he recruits upperclassmen with a variety of skills, including reporting, copy editing, photography, videography and design. During the first weekly session, the students vie for various staff positions, and are voted in by their peers. They then make all the decisions about the thematic concept and specific content of each issue, with Madison, Morrison, and a number of experts on and off campus advising, evaluating, and teaching along the way.

“Our strength was in guiding from the sidelines, as opposed to the kind of front-of-the-room instruction that was more traditional,” Madison said in late 2011, roughly five months after students published the first edition of OR. “That by no means was meant to indicate this was a free-for-all. It’s important to have a structure in place to allow us to achieve.”

Along with structure, timing has been essential to the course’s success. Madison has repeatedly scheduled the class for 8 a.m. on Fridays, as a means of weeding out the less motivated. That bit of timing was engineered on purpose, but the timing of the most significant game-changer for the class was serendipitous.

Six weeks before the spring 2011 term began at UO, Adobe debuted its Digital Publishing Suite (DPS), which enables the creation of a more interactive, tablet-specific audience experience.

Madison read about the software and contacted Adobe staffers, asking if they could provide DPS to students prior to its public release so they could put together a magazine for the iPad. Adobe said yes, making UO’s students, in Madison’s words, “part of the beta.”

At the time, Adobe didn’t even have an instruction manual for DPS. The company asked the students to report back on anything they stumbled across that needed fixing or expanding.

While working on the magazine, students only had access to DPS for the final five weeks of the 10-week term. Functions accessible one day were suddenly gone or shifted the next. And the software was available in a single computer lab that was free solely on weekends and after 4 p.m. on weekdays.

The students soldiered on. “It’s not ‘Oh, I threw it together [at] midnight before it was due because it was just a grade,’ ” said Scott Landis, the issue’s co-editor-in-chief. “This was truly about being professionals and producing something we can be proud of and that can make a difference and change the way people view magazines, and the university.”

Bells and whistles

The first OR magazine aimed to inform readers about UO’s many accomplishments beyond what most people associate with the school – think football, Phil Knight and Nike.

A play button on that first cover brings readers to a black-and-white video depicting a campus library. On screen, a bespectacled student is slowly pushing a cart of books when a hardback title on a nearby shelf grabs his attention.

Once opened, the book flings the student – and by extension the viewer – down a colorful rabbit hole displaying many facets of the university. The images that speed by in time-lapse fashion – and against a techno-beat – appear through a tilt-shift filter. The Adobe After Effects editing option blurs and hyper-focuses certain parts of the photos, suffusing the whole proceedings with what video editor Scott Uyeda called “a figurine movement look.”

On the pages that follow, similar innovations accompany features on campus glass-blowing workshops, the school’s world-class zebrafish breeding facility, the ultimate Frisbee team, and UO professors studying Congolese apes and quantum physics.

But nothing is presented for innovation’s sake. Madison and the students describe a constant tension between experimenting with what is possible and doing what is best for the content and audience.

In a video interview conducted this spring, OR staffer Melanie Burke said that “the temptation to make everything spin and flip and turn and mirror and rotate and pop alive when you touch it is really, really strong because it’s cool and it’s new and we’ve never been able to do this kind of thing before.”

But according to Madison, “just because we have all of these bells and whistles doesn’t mean we want to gratuitously use them.”

The team tries to keep the final file size of each digital issue small enough that readers won’t become frustrated by a long download and give up before giving it a look. They also work to stay true to their editorial vision.

“We’ve had situations where we had video shot for something and went ‘You know what, this is really better told with a slideshow,’” Madison said. “Or ‘This is more oriented around the visuals instead of a lot of copy.’ It’s kind of letting the integrity of the story drive how we go about telling it.”

Dare to adventure

One last decision that has been integral to OR’s success is upending what Madison calls “the old paradigm of workflow, where a person writes an article and maybe a photographer comes out with them and then they turn things over to a design team and the design team decides how to visualize the story and how the page is going to be laid out.”

With OR, everyone is involved in every inch of story planning and execution – the brainstorming, reporting, editing, imagery, multimedia, layout, and interactivity. For this spring’s issue, this collaboration produced a set of gear guides linked to stories on Oregon kayakers, mountaineers, and mountain bikers.

The guides include head-to-toe visual rundowns of what these athletes wear and employ while paddling, pedaling, and climbing. The OR crew interacted from the get-go on the content, visual concept, and background research. They communicated throughout the subsequent reporting, including while staffers gathered audio of the adventure junkies explaining each piece of clothing and equipment. They coordinated a professional photo shoot. And they dabbled with the look and interactive elements of the final layouts, which display the supplies on their own and also attached to the individuals describing their utility.

“It’s a process that is somewhat organic, but everyone’s involved,” Madison said. “It’s not sort of handing it down a conveyor belt, if you will.”

In that spirit, one of the teaser headlines featured on the cover of the spring issue could apply to the magazine itself and the students and faculty members behind it: “Thrillseekers: Those who dare to adventure where others won’t.”

Read more

Tools:
3 Comments
responsivedesign

What journalists need to know about responsive design: tips, takeaways & best practices

Phones and tablets have created new ways for audiences to reach our work, but they’ve also made it much harder to design a website that works for all readers. A site that looks great on a laptop might be illegible on a phone, while a sleek design on a tablet might look simplistic on a desktop monitor.

To make sure everyone has a good experience, we might be tempted to build different sites — one for phones, another for tablets, and a third for laptop and desktop users.

That might have been a workable solution when there were just a few mobile-device sizes to account for, but what about the current media landscape with oversized phones, shrunken tablets and everything in between? Creating different sites for each possible configuration is a daunting prospect, especially when new form factors seem to pop up every day.

This is where responsive design comes in. It’s a simple solution to a big problem — a way to account for different devices without requiring different sites. Instead, responsive design extends a core Web principle — the separation of design from content and structure — to give us a way to make a site appear differently depending on the size of the device it’s accessed on.

The promise of responsive design

Responsive design benefits how a site is built and maintained. Because a responsive site is still just one site (with several faces), only one codebase and one publishing process are needed. Content doesn’t need to be replicated to another system — manually or otherwise — to make it accessible to a second set of users. And design changes can be made sitewide or for a specific device size, providing lots of flexibility in maintaining a site over time. 

Responsive design offers a second advantage. Since it emphasizes reusing visual elements and retaining content and functionality on different versions of a site, it encourages a consistent experience across devices. A reader who starts a story on her phone and finishes it on her tablet will get a fluid experience that feels like browsing the same site, but in ways that cater to the screen being used.

USA Today has implemented responsive techniques to develop desktop and tablet versions of their site, but their phone presence calls on a separate mobile site — with differences not just in design but content.

News organizations and other content publishers are in a particularly good position to use responsive design, at least when it comes to their articles and news stories. Things get a bit trickier with multimedia or interactivity, as we’ll see later.

But the main obstacle to enjoying a news story on a phone is one of design: Is the font size appropriate? Are there margins or padding separating content from the edge of the screen? Has the number of columns in the layout been greatly reduced? Are navigation options easy to see and tap? Responsive design doesn’t address these issues in one fell swoop, but it does give us a chance to make sure we have an answer lined up, while concentrating the bulk of our site-building efforts into one product.

How CSS and media queries factor in

Under the hood, responsive design involves a few different Web technologies working in concert, but the most important is CSS and, specifically, a tool called a media query. 

Remember, CSS — cascading style sheets — is the technology used to design a website. CSS can be used to change typography and color, and is also the tool designers use to change the layout of a site, including the placement and width of elements. So it’s not surprising that it’s at the heart of responsive design.

CSS media queries are clever ways to change the styles that take effect depending on the device used to access the content. In other words, media queries can make CSS conditional on whether a visitor’s using a smartphone, tablet or laptop.

All kinds of properties, such as color depth and aspect ratio, can be “queried.” But the most important feature to consider when implementing a responsive design (indeed, often the only feature considered) is width. Based on this one property, we can decide what version of a design makes the most sense to serve. The interesting thing about the width property is it refers not to the size of the device but rather to the browser. That means the mobile version of a responsive site can be previewed on a laptop or desktop simply by shrinking the browser’s width.

The Toronto Standard spans its navigation across two columns in the phone version of its design and makes the links larger (and easier to tap).

In plain English, a typical media query looks something like this:

If the width of the device accessing this site is less than 480 pixels, load all the styles that follow.

Another media query in the same stylesheet might look like this:

If the width of the device accessing this site is greater than 480 pixels but less than 960 pixels, load all the styles that follow. 

Here’s what the actual code for the first example looks like:

@media screen and (max-width: 480px) {
}

The key to a media query is to define width boundaries and then load up styles when a device meets the parameters. Boundaries can be defined one way (less than 480 pixels, for example) or two (between 480 and 960 pixels).

A boundary is also known as a breakpoint — a condition under which the styles on a site will change. If a site has one breakpoint, it sports two designs: one on either side of the break.

The power of media queries — and thus responsive design — lies in their flexibility. Once a breakpoint has been defined, any valid CSS can follow. This can result in big changes in how a site appears, even though the markup doesn’t change and a large portion of the CSS stays the same.

The Boston Globe design moves from three columns, then two and finally one as the width decreases.

The simplest way to think about a responsive website is that it gets narrower as the viewport — the width of the Web browser — shrinks. Though it’s true the overall width will vary with a responsive site, other factors might also change:

  • The position of elements. A site with three columns on a laptop may switch to two columns on a tablet. The content in the third column, rather than disappearing, will reposition itself below the remaining two columns.
  • The width of elements. Columns may become narrower, and images and videos may shrink.
  • Font sizes. A headline might appear in smaller font size, or even a different type face.

These differences — and more — are possible because designers can control the full range of properties accounted for in the CSS specification when they employ responsive design.

Making things fluid

In the early days of the Web, fluid designs were prevalent. These layouts would fill the browser window, whether it was full-screen on a huge monitor or narrow on a tiny one. As designs became more sophisticated, fluid layouts fell out of favor: the differences between a fluid layout at its widest and narrowest possible configurations were simply too great to create predictable results.

By limiting just how much the width of a site changes before it “resets” to a new configuration, responsive design has created a renaissance for fluid layouts. It’s now possible to have the best of both worlds: layouts that expand or contract to fill the precise dimensions of the screens they’re viewed on while offering structures fundamentally agreeable with the general screen size.

Best of all, fluid layouts are an option when employing responsive design, but not a requirement. To switch to them, designers define the width of the elements on a page in times of percentages rather than absolute values (such as pixels).

Quartz incorporates a navigation link in the upper-right corner with a dropdown menu, a common design pattern for phone layouts.

Best practices to keep in mind

Responsive design has gained enough traction that we’re starting to see best practices emerge. Here are some points to consider if you’re looking to adopt a responsive design for your publication.

  • Use commonly-accepted breakpoints. There’s no need to guess at what dimensions are best to use. Here’s a commonly-used chart to get you started:
    • 320px and lower – portrait phones
    • 321px to 480px – landscape phones
    • 481px to 768px – portrait tablets
    • 769px to 940px – landscape tablets
    • 941px to 1200px – laptop/small desktop
    • 1200px and higher – large desktop/TV

     

  • Don’t design everything at once. A responsive design with six breakpoints is quite ambitious. It’s better to start more modestly — you can always design for additional breakpoints later. As a starting point, you might focus on just desktop (940px and higher), tablet (480px to 940px) and phone (480px and lower) layouts.
  • Start big. Designing the largest version of a site or page first is usually best because it’s easiest. Difficult design choices must be made within the constraints of tablet and phone screen sizes.
  • Don’t throw anything out. As you move to narrower designs, it’s tempting to discard some of the elements that don’t fit. Avoid this temptation. One of the goals with responsive design is to keep the mobile Web a first-class experience, not a watered-down version of your “real” site.
  • Focus on a single column for phones. Single-column layouts should dominate designs for phones. Switching to two columns is possible on occasion, but most of your content will need to flow linearly from top to bottom. That makes ordering especially important since browsing on a phone will likely require lots of swiping to get to the bottom of the page. 

For more on these and related best practices, take a look at this terrific post by Tito Bottitta, one of the folks who worked on The Boston Globe’s responsive site.

Downsides to consider

Responsive design is a good way to deal with the increasingly varied devices audiences use to reach content. But it’s not without its costs.

Most notably, responsive design doesn’t automatically tailor a site to different devices — it merely offers the opportunity to do so. That means an investment must be made both in designing and deploying each site version: a site with two breakpoints must be designed three times, for example. Of course, many design elements can — and should — recur from one version to the next. Typography, color, iconography and other design pillars should largely be consistent. But grids, hierarchies and clickable areas will likely change.

Performance is another consideration. Some responsive designs incorporate CSS and JavaScript, a related Web technology. JavaScript can add advanced effects, but it can also slow things down, especially on older devices. Likewise, responsive design won’t fix underlying problems with a site’s markup, If the code’s bloated and slow, responsive design won’t speed it up.

Content isn’t the only consideration when approaching a responsive design. Different layouts mean different ad inventories — the banner that fits perfectly on your widescreen layout will get squished or clipped on a phone.

Site analytics are likely to get more complicated with a responsive design, too.

It’s also important to remember that responsive design is a set of techniques for implementing a mobile-friendly Web strategy. It won’t help answer questions about whether you should also invest in one or more apps or whether those apps should be native or Web-based.

Newsweek makes extensive use of fluid techniques, expanding images to fill even the widest monitors.

Making sure responsive design is right for you

A decision to pursue responsive design means you’re taking your mobile Web presence seriously. That may seem like a no-brainer, but mobile isn’t just about the Web, and you may still have a sizeable audience that’s just interested in getting your content on desktops or laptops.

Since responsive design will require an investment, here are some things to make sure before you get too far into it: 

  • You want to reach an audience across devices with your Web presence. Responsive design is all about the Web. If you’re pursuing a different strategy — one that hinges on native apps, for example — responsive design should take a back seat.
  • You want to deliver the same content across platforms. Responsive design is great for customizing the presentation of your site. But it’s not the right tool if you need to deliver unique content or functionality.
  • You’re starting from scratch, or your existing infrastructure benefits from “clean” markup. It can be challenging to make responsive design work on a big legacy site, especially when there isn’t a clear-cut separation between the structure and design of the site.
  • You’re ready to invest more in design. Responsive design makes design more important, and requires a bigger investment to make that design work. (Though there’s a potentially bigger payoff.)

Taking the next steps

Like all parts of the Web, the technologies undergirding responsive design are in flux. Even as the CSS3 specification gains traction, proposals are under review for its successor, CSS4.

Some of the issues now under review include how complex structures such as tables and forms are handled, and how the resolution of images and video can be adjusted depending on the device.

In the meantime, the techniques needed to bring a polished responsive design to fruition are well developed, especially for article-based content. And one of the best ways to get started with responsive design is by using a framework — a collection of pre-built code that takes a lot of the heavy lifting out the equation, helping you stay focused on your content and how to best present it. Read more

Tools:
0 Comments

Boston Globe gives iPads to classrooms, reimagines NIE for the digital age

The Boston Globe is giving iPads, projectors and free Boston Globe digital subscriptions to local public school classrooms in a digitally reimagined version of the Newspapers In Education program.

A major goal of longstanding NIE efforts has been to hook young readers on the print habit by dropping off free newspapers in schools and incorporating their content in lesson plans.

But that logic has faltered in recent years, the Globe’s Robert Saurer told me.

“We kind of walked away from NIE a little bit — we didn’t know what to do with it. We didn’t really believe that a 10- or 15-year-old reading print in school is going to continue on later to be a print reader in their 20s and 30s,” said Saurer, who is director of customer experience and innovation. “But a digital Globe reader in schools today might, in fact, turn into a digital Globe reader in their 20s and 30s.” Read more

Tools:
0 Comments
SeattleTimes

How the Seattle Times made an iPad book from its best photos of the year

Seattle Times | iTunes
At the end of each year, The Seattle Times chooses its Pictures of the Year to feature in online galleries and its weekly print magazine.

This year it added something new — a $2.99 e-book for iPads that lets readers swipe and tap through the full-screen immersive images.

The table of contents for the e-book.
Read more
Tools:
2 Comments
mobilenews

Pew: Men, highly educated are more engaged with news on mobile devices

Pew
“In the growing realm of mobile news, men and the more highly educated emerge as more engaged news consumers,” says a new report on the demographics of mobile news from the Project for Excellence in Journalism. The report continues:

While they are much lighter news consumers generally and have largely abandoned the print news product, young people get news on mobile devices to similar degrees as older users. And, when getting news through apps, young people say they prefer a print-like experience over one with high-tech or multi-media features.

In fact, most of the people (58 percent) who read news on tablets prefer to see a print-like reading experience, while 41 percent want a more high-tech interactive experience with audio, video and graphics. Read more

Tools:
2 Comments
the daily

2 major lessons from the demise of The Daily

The publisher of News Corp.’s The Daily said earlier this year that the iPad-only publication might need a few more years to be profitable. Today the company announced it won’t get that chance.

Although it has been one of the most-popular and highest-grossing iPad news apps, The Daily was unable to gather enough paying subscribers at 99 cents a week or $39.99 a year to sustain itself.

In a note to staff, The Daily’s publisher and editor-in-chief said, “Although we have over 100,000 passionate paying subscribers, unfortunately we have not been able to build a big enough audience fast enough to make our business model work.”

News Corp. CEO Rupert Murdoch set a high bar. He said early on that The Daily would be a success “when we are selling millions.” With expenses running at about a half million dollars a week, the publication would have needed near 500,000 subscribers at $3.99 a month or $39.99 a year just to break even. So one big failing was the business model.

News Corp. will shut it down on Dec. 15 and as of this morning the apps are no longer available for download. Some of the approximately 120 employees will be folded into the New York Post staff.

Being the first-of-a-kind is as dangerous as it is exciting in the technology world. With few or no prior examples to learn from, you’re left to try stuff and learn the hard way. With the benefit of hindsight, there seem to be at least two other major lessons from The Daily’s failure:

1. Audience clarity. It was difficult to grasp who exactly was the intended audience of The Daily. It excelled at interactive elements and visual appeal, but the contents were so sprawling and varied that it was tough to know who this publication was speaking for and to.

2. One platform isn’t enough. The Daily was first imagined as the daily news magazine for the iPad era. Going with a tablet-first strategy was a great, ambitious idea.

But going with a tablet-only strategy? In hindsight, questionable.

Research has since shown that tablet owners are “digital omnivores” who consume media seamlessly across tablets, smartphones, PCs and print publications. To serve them news on only one platform is not satisfying.

Contrast that with the new direction in which we see publishers like Quartz and USA Today heading — optimizing their websites for a tablet-style swipe-and-scroll experience, but still serving readers seamlessly across all platforms.

Murdoch said, via a press release:

From its launch, The Daily was a bold experiment in digital publishing and an amazing vehicle for innovation. Unfortunately, our experience was that we could not find a large enough audience quickly enough to convince us the business model was sustainable in the long-term. Therefore we will take the very best of what we have learned at The Daily and apply it to all our properties.

Journalists outside of News Corp. will be applying those lessons too. Here are some other reactions from media figures:

[View the story "Reaction to the demise of The Daily" on Storify]

Related: Murdoch’s decision wasn’t about the money (Capital New York) | News orgs should focus on reader relationships, not readers’ devices, Jeff Jarvis says (The Guardian) | “Someone needed to see whether there was such a thing as tablet-native journalism…The answer, it turns out, is no.” (Felix Salmon/Reuters) | 3 Theses About The Daily’s Demise (Alexis Madrigal/The Atlantic) | The Daily didn’t fail, Murdoch gave up (Jack Shafer/Reuters) | Tablet readers don’t want Interactivity, says Hearst president (Mashable). Read more

Tools:
10 Comments
apple

What journalists should know about the new iPad mini

Of all the mobile devices launched in recent years, the iPad has been the most promising for the journalism business.

iPad owners are more likely than others to use the devices to keep up with news, and compared to other types of tablet owners they are more likely to download news apps and over five times more likely to subscribe to digital news products.

The iPad hasn’t been a savior for legacy media companies, but it has offered the brightest light at the end of the tunnel.

So many journalists should be watching closely and thinking critically today as Apple makes its biggest tablet-related announcement since the original iPad launch in 2010. At 1 p.m. ET (10 a.m. in San Jose, Calif.), Apple will reveal a new smaller version of the iPad — nicknamed the “iPad mini,” but we don’t yet know what the company will call it.

The video of the event will be live-streamed on Apple’s website (you have to use Apple’s Safari browser to watch it).

Price will matter greatly

Since Apple debuted the first iPad, it has owned the full-size tablet market.

Competitors have failed to make a dent against Apple’s 9.7-inch tablet, but recently several — including Amazon, Google and Samsung — have carved out a niche market for devices that are smaller (7- to 8-inch screen sizes) and cheaper.

Apple's iPad has dominated the large tablet market, while Amazon's Kindle Fire leads the small tablet market, according to research by the Reynolds Journalism Institute.

Price has been the main differentiator. Apple product owners cite the brand, the operating system and the apps as their top reasons for buying. Android tablet owners cite price. iPad owners report greater overall satisfaction with their devices.

And so until now we’ve really had two classes of tablet owners: Those willing and able to pay $499 to $829 for Apple’s product and those willing to pay $199 to $299 for smaller Android-powered alternatives.

Today the two shall meet. And if Apple can price the smaller iPad competitively, it may win on every other measure.

Analysts are predicting a starting price as low as $299. It would seem odd, though, to give the new iPad the same price point ($299) as the smaller iPod Touch. So don’t be surprised if it’s a little higher than that.

Is it a small iPad or a big iPhone?

Or a third class altogether?

We won’t know this for sure until we get our hands on the device and see how people use it in the wild. But the question matters to designers of news products and other apps or mobile sites.

User interface designers will need to adjust to the smaller screen dimensions. Is that button that was just right on the iPad now too small to tap comfortably? Is that two-pane layout now too cramped?

User experience designers will need to determine how and where people will use a smaller iPad. The full-size iPad is mostly left at home, used in the evenings while relaxing. The iPhone is carried everywhere and used in short sessions throughout the day. The user needs and environments are different, so you have to design differently for each. If the new smaller iPad turns out to be significantly more portable, that will change what users want it to do.

In the long run, the additional complexity may be yet another nudge for news organizations toward using responsively designed websites that adapt fluidly to any screen size.

Related: Other observations, including that one-handed reading is quite different than the larger iPad (SFN Blog) || Earlier: Steve Jobs hated the idea of a 7-inch tablet. Read more

Tools:
1 Comment