Small, portable and powerful, smartphones make connectivity—to others and to information—easier. About four in ten American adults prefer to consume news online versus television, radio and print, according to the Washington-based Pew Research Center. Of those, 56 percent prefer mobile compared to 42 percent who prefer desktops/laptops.

With the proliferation of mobile technology has come a whole new universe of design challenges. As developers and designers, we have to stay ahead of these new challenges by thinking outside the screen. An essential part of this is treating form and function as a symbiotic parts rather than as estranged concepts.

Gabriel Florit, a data visualist for the Boston Globe, addressed this idea in an OpenVisConf talk in 2013. The goal is to create data visualization that isn’t just for all devices but that is of all devices, he told the audience. Reminiscent of new media theorist Marshall McLuhan’s most famous “equation,” the medium by which the information is consumed is inextricably embedded within the content itself. In the case of data visualization on a smartphone or tablet, this means interaction design and experiences which fit the form (screen size) and function (ease of portability and connectivity capabilities and limitations) of the device.

Mobile First or Last?

So, what’s the best approach to designing around features rather than screen size? There are two schools of thought on this.

Graceful Degradation (Mobile Last)

Mobile last, or graceful degradation, is probably the most familiar form of responsiveness. In this approach, a designer creates a specific UI and UX first and then makes concessions, like omitting or modifying content presentation and user interaction, to allow for smaller-screened devices.

Progressive Enhancement (Mobile First)

Progressive enhancement, or a mobile first mentality, forces a designer to focus on the most essential goals of the project.

Both of these philosophies have their advantages and disadvantages, and progressive enhancement puts readers’ needs as news consumers (being presented information in the best and most efficient way possible) before the designers’ convenience (technical difficulty and time spent modifying an existing design with responsive images, media queries, etc.).

Newsroom designers have increasingly (and rightly) emphasized responsive design which forces thought about screen size from the get-go rather than as an afterthought. Web designer Ethan Marcotte, originator of the term “responsive web design” encourages a mobile-first design approach, with some caveats. As Marcotte explained during the 2014 Acquia Engage conference, “Responsive design might begin with the screen, but it doesn’t end there.” For Marcotte and others, mobile first design is just the starting point, not the finish line.

Mobile First Puts Humanity First

“If we equate responsive design with just screen size instead of use case,” says the Globe’s Florit, “then we’re missing the point.” In a similar vein, Facebook’s open source manager, James Beard, advocates for a web in which use case dictates content and interaction. If we stick to crafting mobile websites and data visualizations that are stripped down, scaled versions of their desktop parents, “We won’t have a mobile web, but merely a 320px-wide one, a web for which the humans using it matter less than the width of the glass it is displayed on.”

Karen McGrane cites mobile’s role in closing the digital divide as one use case in which mobile first is not just good design but is the most humane design decision because it takes the humanity of the people behind the screens into account. McGrane, author of Content Strategy for Mobile and founder of a UX consultancy firm, argues that we don’t get to decide the device that audiences choose to access content—they do. In many cases, even in the Western world, there is only mobile technology available. When there isn’t parity between desktop and mobile experiences, “We are telling mobile-only users that they are second-class citizens. They don’t deserve access to the same content that everybody else gets access to.”

For McGrane, users should never be forced to go to a desktop website for content that’s absent from a mobile experience. We shouldn’t need multiple sites and device-specific experiences because our content should be fluid enough to transcend the platform on which it’s presented.

“Responsive design won’t fix your content problem,” says McGrane. Solid writing, a lack of lengthy text blocks, and content that’s visual without being obtrusive—these are all foundational, on mobile or otherwise.

Maximizing Mobile’s Capabilities

Smaller screens also magnify usability problems which impede the reader’s access to content. According to Google Product Director Luke Wroblewski, “Mobile forces us to adapt and optimize our solutions,” something he says is good for all devices. Focusing narrowly on a single, specific layout, on the other hand, thwarts efforts to take advantage of new opportunities on mobile.

Mobile offers capabilities that may be available on a desktop or laptop. But these capabilities inch us closer to more out-of-the-box innovation because, despite ardent strides in mobile technology, there is still so much to learn and do. Story presentations augmented by virtual reality, touch events and gestures, using fingerprints for authentication are all developments which push the limits of how we can improve user interaction design.

However, Wroblewski cautions that these design choices have to be backed by focused flows and judicious uses of screen space. He references several task-oriented apps as examples of getting it right. Checking flight statuses, booking a hotel stay, or completing a monetary transaction should include the same vital information available on a desktop site, but the flow of the information should be focused on the needs and use case of mobile. Tasks like these can be done on some apps with less than a half-dozen taps on your phone. They use screen space to focus on what’s most important and most pertinent on the go and capitalize on many users’ one-handed operation of a mobile device. They’re easy to figure out at a glance, and a task can be completed quickly and with minimal effort.

This is what we should strive to do when designing and developing user interaction in story presentations on mobile:

• A sleek, uncluttered interface achieved through judicious use of space
• Focused flows to navigate readers through the information quickly and easily
• Seamless transitions between different “tasks,” or in the case of story presentations, sections, chapters, visual breaks in information, etc.

But How Does It Work in News?

NPR’s Planet Money Makes a T-shirt (Source breakdown) is a great example of creating a seamless narrative in which the template produced transcends being just a story container and becomes the story itself. I spoke with Wes Lindamood, a designer and developer who worked on the project, and he explained how a mobile first mindset, from conception to production, is a core principle for the team. He recalled then- NPR Visuals team leader Brian Boyer’s thoughts on responsive design: “If it doesn’t work on mobile, it doesn’t work.” Lindamood said: “One of the things we thought a lot about is how to create an immersive experience, something that’s going to work well on mobile.” Trying to create a cohesive, uninterrupted narrative on mobile did prove difficult with the web documentary’s heavy reliance on video to unpack how globalization affects the production of a simple cotton T-shirt.

“iOS treats video as a compartmentalized thing,“ Lindamood said. “Video comes up in a separate player (on mobile) which is antithetical to our philosophy. How do you create a design so that video feels like an integrated component rather than just a separate feature?” (Their animated solution, called Filmstrips, involved creating an entirely new technique.) Lindamood remembers one reader’s feedback on the project: The reader discovered the story on Twitter and began reading on his phone. He came back to finish reading later in the evening on his laptop—and he said that the transition between devices was smooth and nondisruptive.

Moreover, audiences are hungry for innovative solutions to the challenges posed by screen size, especially on mobile. With our phones capable of so much, readers and users expect more of the content they consume. They want an integrated experience with features that take of advantage of their phone’s capabilities, like touch gestures and VR.

It’s up to us to rise to the occasion.

Disclosure

As it happens, Ethan Marcotte, mentioned above as the originator of the term “responsive design” and author of multiple books on the subject, designed the current Source site. When she’s lucky, one of our editors sometimes also edits his books.

• Share on Twitter
• Share on Facebook