Articles about "Website design and usability"


NBCNEWSfeatured

NBC News redesigns homepage again to reinstate scannable headlines and greater density

Score one for those [Digiday] who [Nieman Lab] bemoan [Poynter] the rampant mobile-fication of news site designs on desktop.

NBC News has redesigned the image-heavy homepage layout that drew more than 100 angry comments to Poynter in February — and more than 300 supporters to a Change.org petition to “Reinstate a content-rich, word-navigated NBCnews.com site design.”

According to audience surveys and data obtained through the use of a test site, preview.nbcnews.com, NBC News determined what its desktop readership wanted: “The audience was looking for a faster homepage, for more scannable headlines, and for greater density,” said Gregory Gittrich, executive editor of NBCNews.com.

(That meshes with the barrage of complaints I received after writing about the February redesign. One opined, “I guess reading text is second-rate these days. Big pictures, big boxes… let the fifth-graders revel in it.”

RELATED: Time.com website redesign: ‘There’s a lot of text, and that’s intentional’

So the new homepage, rolled out this week to all readers, looks a little more like the pre-February site now (not every story has to have a huge image anymore!). But it still emphasizes large visuals for some stories and gives a prominent role to video, one of the news organization’s top priorities. (Also: rest in peace, humongous hamburger menu button.)

“While the audience that comes into the site via the desktop homepage is a minority of our users, we wanted to improve the experience for them,” Gittrich told me. “The days of people going to singular destinations are going away, so we’re investing in reaching an audience in places where people are naturally going. But we also want to do right by the audience coming directly to the homepage through desktop.”

That’s a recognition that homepage visitors still exist, especially for big, long-trusted news brands. Between 30 and 35 percent of NBC News visitors still arrive through the desktop homepage. They might be among the 2.3 million people who still subscribe to dial-up service from AOL, or they might be an older demographic than those who are on Twitter or WhatsApp all day, but they exist — in substantial numbers. And direct visitors are more engaged and spend more time on sites than social visitors do.

The previous NBC News homepage last week invited readers to try the new one.

The previous NBC News homepage last week invited readers to try the new one.

Gittrich has no doubts about the imperative to be mobile-first. But that doesn’t mean NBC News — and other news organizations rightfully and finally enamored with mobile — can’t also spend some time ensuring the desktop experience is as good as it can be, too. That’s why NBC News is iterating to maximize engagement on all platforms.

The public test site allows for a “continuous testing environment” for all kinds of A/B testing, Gittrich said. NBC News can roll out features to small segments of readers at a time, and can also appeal directly to readers to play around with new features on the preview site.

“Some of the things we try are going to be relatively small, like changing the color of the play button,” he said (they decided on black on yellow for video buttons).”Some of the things we try are going to be relatively big, like testing new video players.”

“We really wanted to systematically get data and feedback not only around the desktop homepage but around the whole experience,” Gittrich added, emphasizing that desktop needs are different from mobile needs. “The thinking and the goal is we will continue to iterate and optimize based on audience feedback and audience data.”

Since January, the site’s bounce rate has declined 13 percentage points, which can likely be attributed to the site’s continuous scroll feature.

RELATED: Time.com’s bounce rate down 15 percentage points since adopting continuous scroll

Video views per visit have increased 249 percent since January, and page views per visit are up 81 percent, he said, per internal Omniture data.


!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');

(This article was originally posted on Poynter’s Tumblr on Friday, Aug. 8, due to a server migration.) Read more

Tools:
3 Comments
nbcnewsbig

NBC News engagement up since site relaunch despite reader complaints

When NBC News relaunched its website just in time for the Winter Olympics, reaction was fierce on social media and in comments at Poynter. (Facebook commenters have even been pushing a petition at Change.org.)

Much of the criticism has focused on how the new image-heavy design makes it more difficult to quickly find the most important news. As one Poynter commenter put it:

The appeal for me has always been organized categories with lots of headlines, but I guess reading text is second-rate these days. Big pictures, big boxes… let the fifth-graders revel in it.

About a month into the relaunch, I asked Gregory Gittrich, executive editor of NBCNews.com, to respond to the criticism and give Poynter an update on how the audience has reacted. He said the transition was naturally going to be a little bumpy.

“We do have a loyal audience who has a strong emotional connection to NBC News,” Gittrich said. “We weren’t surprised by the initial feedback because the change was so significant, but that’s why the data and metrics were obviously important.”

NBCNews.com on an iPhone before and after the relaunch.

Mobile traffic nearly triples

Gittrich emphasized that it’s still early, but he said numbers for the new site are encouraging. Average daily page views post-Olympics are up 30 percent from pre-relaunch figures, and page views per visit are up 46 percent, according to internal Omniture data.

The new site’s story page automatically transitions into a related story when readers reach the bottom, echoing the seamless scrolling strategy growing in popularity at sites like Quartz and Time (although I’ve noticed considerable sluggishness as I scroll down story pages at NBCNews.com).

Most significantly, page views on mobile have increased 186 percent, Gittrich said, reflecting why NBC News saw the need to go mobile-first. Video streams per visit are up 32 percent.

Adjusting along the way

Viewers on desktop have seemed most upset with the changes. Grid-based, image-heavy designs that de-emphasize visual hierarchy and quickly scannable headlines have grown increasingly popular. Many of the concerns seemed to come from readers who had long bookmarked the legacy news brand’s homepage.

Since the relaunch, NBC News has addressed the issue of homepage elements all looking alike by adding two headline-only modules — one for top news, the other for video. They’re “easy to scan and monitored around the clock,” Gittrich said. The changes were always planned post-launch, but he said reader feedback confirmed the need for them and added some urgency.

Said Gittrich: “We are listening to the feedback and watching the metrics.”


//

Related: Bloomberg View: latest mobile-first site to embrace the grid, shun visual hierarchy | NBC News reveals responsive redesign of website in time for Winter Olympics Read more

Tools:
1 Comment
Time_screenshot

Time.com website redesign: ‘There’s a lot of text, and that’s intentional’

As Time.com‘s Managing Editor Edward Felsenthal, and Daniel Bernard, head of product, prepared to preview the newly redesigned Time.com for me, I expected one of two types of popular overhauls: a spacious, minimalist approach a la NPR, or a grid-based explosion of images a la NBC News and Bloomberg View.

But Felsenthal and Bernard emphasized neither of the two buzzwords I expected: “visual” and “white space.” Instead, the site in its second major redesign in 18 months unabashedly embraces density — text-based density!

“I think the homepage draws on visuals, which of course have always been a part of Time’s history,” Felsenthal said. “But it’s pretty dense, there’s a lot of text, and that’s intentional.”

That doesn’t mean the site is cluttered or overwhelming, just that it isn’t afraid to present visitors with lots of choices. At the same time, it maintains visual hierarchy — no visitor to the Time homepage will wonder what the top story of the moment is:

The aim, Felsenthal said, is for Time.com to “do for the minute what Time has always done for the week since it began, to bring you up to date in an extremely smart and readable fashion, quickly. The very name Time is a recognition of the fact that people don’t have enough of it.”

To that end, the site’s navigation is built around a curated, independently scrolling selection of top stories, always present in a left rail on large screens and expandable with a tap on small screens. When you reach the bottom of a story, it automatically transitions into the next story in the list, much like Quartz. (Another influence from the Atlantic’s mobile-first business site: native advertising included in the left rail and in the main stream of stories; it’s labeled “content from” at Time.)

Article-first design

Where Time’s strategy meshes with strategies at nearly every other news organization is in its focus on article pages, increasingly important as readers arrive at sites through side doors like Facebook. In January, 22 percent of visits to Time.com arrived via social media, according to Omniture, Time said.

An article page at Time.com before the redesign…
… and after.

The site’s navigation is based on Time data that suggests offering related stories isn’t always the best way to keep visitors engaged and bounce rates down, which is why Taboola’s eclectic — and sometimes tasteless — collections of stories from “Around the Web” seem to work. Visitors entering a technology-related story won’t be prompted to view other tech stories on Time; instead, they’ll be prompted to view the stories hand-selected by Time editors and deemed to be the top stories of the moment.

The homepage is divided into three columns: the latest stories on the left, the most important stories in the middle, and columns, videos and longform magazine pieces (still behind a paywall) on the right. There are no traditional topic index pages, just streams of stories grouped by topic — accessible by clicking or tapping the hamburger menu button adopted in nearly every news site redesign.

Felsenthal said the new site was a sign of Time Inc.’s commitment to fast digital growth (Time launched its first responsive site not all that long ago, in October 2012). Time.com has hired 35 people across editorial, product, tech and sales, Felsenthal said, with editorial hires coming from new media brands like BuzzFeed, Gawker, Mashable and Business Insider. (Still, Time Inc. announced 500 layoffs earlier this month as the company prepares for its IPO.)

Time has numbers to back up the claim that the investment in digital is paying off. Unique visitors have more than doubled, from 10.2 million in January 2013 to 23 million in January 2014, according to comScore. The site published an average of 122 pieces of content per day in January (some of which, it must be said, falls under the category of clickbait), up from 72 earlier last year.

Meanwhile, Facebook likes have increased 250 percent year over year, and traffic from social has nearly tripled, the company said. In January, mobile accounted for 45 percent of Time’s traffic.

Read more

Tools:
1 Comment
bloombergview1

Bloomberg View: latest mobile-first site to embrace the grid, shun visual hierarchy

Bloomberg View, no longer just an opinion vertical at bloomberg.com, has launched a standalone, image-heavy website, which publisher Tim O’Brien told Capital New York is “a departure for Bloomberg.”

But the startling new emphasis on visuals borders on overkill. Here’s how Nieman Lab’s Joshua Benton put it:

Read more
Tools:
2 Comments
nytredesign

New York Times website redesign: the desktop strikes back and other observations

Three instant reactions to the new New York Times website, which went live this morning:

The Gray Lady online: less blue, more white

That each Times headline used to be blue seemed to be less an aesthetic choice than an antiquated signal to users that yes, indeed, you can click on these. Now, those headlines are black, going a long way toward cleaning up the design and making the Gray Lady less blue (minus the blinding Dell ads on the homepage this morning, of course):

Meanwhile, we’ve seen glimpses into the newspaper’s article-level white space goals for months now, and in practice it’s a beautiful change that allows stories to breathe — and for comments to expand onto the page next to the story whenever you choose. And no one on any platform is likely to complain about the end of story pagination.

Native ads? Yawn

You’re more likely to be fooled by one of those pro-Russia print supplements in the Times than by one of the online native ads everyone’s been fretting about. The format of the first paid post on the Times site fulfills Publisher Arthur Sulzberger Jr.’s pledge to the newsroom that “Our readers will always know that they are looking at a message from an advertiser.” The homepage link to Dell’s native ad doesn’t mix with links to editorial content, and even the URL is transparent: paidpost.nytimes.com.

Desktop strikes back?

I took some heat in December for suggesting that some prominent websites have become so focused on mobile optimization that the desktop experience emerges from the redesign process with new limitations and frustrations. But that’s not the case at all here. In fact, tablets seem to be left behind a bit with the new nytimes.com (the mobile phone version of the Times site was upgraded last May).

Maybe that’s because there are so many great options besides a web browser for reading the Times on tablets. I’m a big fan of the Today’s Paper web app, which the Times touted in December as a good option for both tablet and desktop reading. Subscribers can also access Times content via Flipboard and Google Play Newsstand, two platforms that also attractively include content from other news sources. And, of course, if you still want a separate, standalone app for Times content, there’s the native app on every platform, with millions of downloads since the iPad arrived.

So what seems particularly desktop-y about this redesign? The homepage, for one, which is difficult to read on my iPad Air and still requires pinching and zooming on my Nexus 7. The layout has been virtually unchanged — good for the visual hierarchy and array of story choices sometimes lost in mobile-oriented designs, but bad if you’re one of the dwindling-but-not-insignificant number of tablet readers who arrive at websites via the front door and not side doors like Facebook and Twitter.

Although text is frustratingly small on the homepage when visiting on a tablet, it’s eminently readable in stories. We’ve seen previews of what these article pages would be like in other projects; for instance, “Invisible Child,” the five-part series on a homeless girl named Dasani, was great to read on my Nexus 7. But I wasn’t fully struck by photographer Ruth Fremson’s images until I returned to the story later at my desk on my computer. At article-level, the new ability to view photos in large, glorious detail seems like more of an advantage for those consuming Times content on a desktop computer, laptop or perhaps large tablet than on a 7-inch screen.

(And here’s a big problem I noticed on my iPad: tapping photos in a gallery on my iPad advances to the next photo, but swiping — the more natural gesture for tablet users browsing photos — jumps two photos ahead in the slide show.)

Some stories just can’t be as immersive on small screens, so I’m glad the Times is positioning itself to succeed on large screens when warranted, particularly as we see more intensely visual projects that need the real estate — not to mention the fact that major interactive efforts rarely display well on lower-powered tablets.

Certainly some elements of the redesign — like the “hamburger” menu icon — take inspiration from mobile design, and there’s some new tablet-oriented functionality like the ability to clunkily swipe from story to story within a section. But this still notably feels like an effort to first satisfy desktop users, who account for two-thirds of traffic, as Ken Doctor points out at CNN.

And consider this: the videos the Times put together to hype the site launch show desktop browser windows and a cursor exploring the new design with old-fashioned clicks of a mouse. This is just the first iteration of a new, flexible Times web infrastructure that is sure to change a lot in the years ahead, but for now the Times seems surprisingly comfortable with a website redesign that’s friendliest to desktop users.

Read more

Tools:
1 Comment

New York Times website redesign coming Jan. 8

The New York Times

It’s finally happening: The New York Times redesign arrives next week, the newspaper reports. Read more

Tools:
2 Comments
Students at the University of Cincinnati talk on their phones in this April 2006 photo. Campus news sites are seeing their audiences migrate to mobile devices. (AP Photo/Al Behrman)

College websites seeing mobile migration, but not all are ready

Website traffic at the University of Oregon’s Daily Emerald was less than 1 percent mobile in 2010. This year, it’s 39 percent and growing. And while visits on desktops have more than doubled to 951,000 since 2010, mobile visits have risen from about 2,700 to 619,000 — nearly 23,000 percent — in that time. (Statistics cover Jan. 1 through Oct. 31 of each year.)

“I told our students that I think next year we will be majority mobile and the news editor asked me: ‘What does that mean for us?’ ” Ryan Frank, Emerald Media Group publisher, said in a phone interview. “It means we’re no longer digital-first — we’re mobile-first.”

It’s a similar story at Ohio State University where I serve as student media director and oversee The Lantern Media Group. The Lantern has seen its mobile traffic grow from more than 16,000 visits in 2010 to nearly 531,000 this year, marking a dramatic rise from 1.4 percent of traffic to more than 25 percent.

But are college-media outlets doing enough to best serve their increasingly mobile audience? Experts say no.

“I think a lot of college newspapers are failing to take advantage of the natural audience for mobile news applications,” Rachele Kanigel, associate professor of journalism at San Francisco State University, where she advises Golden Gate Xpress, said in an email. “Many are so busy covering news and putting out their print and online editions that they don’t have the time and energy to think mobile-first. And social media and the need to feed that beast distracts college newspapers from mobile, too.”

Dan Reimold, an assistant professor of journalism at Saint Joseph’s University, where he advises The Hawk, agreed.

“College students are constantly on their mobile phones. College media are not — at least not yet,” Reimold, who also maintains the College Media Matters website, said in an email. “Most of the student press is still beholden to, at worst, a print-first mentality and, at best, a web-and-print mix-and-match mindset. Mobile is entering the conversation. But it’s not yet a driver in big-picture planning sessions or editorial meetings.”

Limited resources, business struggles

College-media outlets often have limited financial and human resources. They also must deal with high turnover among editorial and business staffs.

Another issue is that “a lot of student editors feel overwhelmed or daunted by the technical challenges of developing mobile apps,” said Kanigel, who is also president of the College Media Association. And there are high marketing costs involved to help ensure a new, native iPhone app is successful.

The Emerald Media Group is unusual in that it has a full-time, professional programmer on staff, who has designed a couple of native iPhone apps and some experimental projects. But the Daily Emerald’s website isn’t where it needs to be from a mobile perspective; Frank said some changes are likely before this school year is over.

To help better serve its increasingly mobile audience, the students working on The Lantern website redesign here at Ohio State insisted that the theme look good and be easy to navigate on mobile devices. The new site, which launched in September after about a year of work, is a big improvement from the old mobile version, which was basically a list of headline links. The mobile version essentially recreates the website pages, including much easier viewing of photos and other visuals. But it took longer than expected to roll out and there have been programming and other obstacles to overcome.

The business side also presents a challenge. Frank mentioned the possibility of exploring native advertising, or sponsored content, as used successfully at BuzzFeed, Quartz and elsewhere.  (Native advertising was discussed by the Federal Trade Commission yesterday in Washington.)

“In a mobile-first world, banner ads are not going to cut it,” Frank said, adding that teaching students to use their phones to shoot video or photos isn’t nearly as complicated as figuring out how to make money for college media in the increasingly mobile world.

Experimentation is happening

Still, the mobile news isn’t all bad.

Reimold said he has seen a recent increase in mobile-responsive sites among student press outlets, along with Instagram experimentation. Student reporters also are “definitely using mobile devices to regularly report breaking news and produce real-time coverage of big events.”

The Lantern and Buckeye TV crews here at Ohio State have used their smartphones to help cover breaking news events around campus. A journalism class here, taught by my colleague Nicole Kraft, provides iPads for student use as part of a broader Digital First initiative on campus.

Frank has seen some success with early adopters in the newsroom at Oregon, where the sports staff got good-quality microphones for their smartphones and recorded audio and video at football practices to upload to YouTube. There was also a recent fire that reporters on the scene covered using their mobile devices.

At San Francisco State, the Xpress magazine has had an iPad app for several years and one issue each semester is iPad-only, Kanigel said. (Here’s one example).

Both Reimold and Kanigel noted the UCLA Daily Bruin as among the best college-media outlets at experimenting with and producing mobile-first content.

Still, many college newspaper editors don’t go beyond optimizing content for mobile, said Kanigel.

“Only a few are truly thinking strategically about mobile when it comes to editorial content, advertising or both,” she said, adding that “I think there are opportunities for college newspapers to do some really innovative, ground-breaking work with mobile technology, but I’m not seeing a lot of it happening.”

The question of the moment for college-media outlets in the mobile realm, Frank said, remains to be answered: “How do we use the greatest reporting tool ever invented, which is in our pocket, and use it more effectively?” Read more

Tools:
0 Comments

The New Republic’s NYT package: A good read, despite those footnotes

New York Times Executive Editor Jill Abramson pooh-poohs Politico’s “scooplets” (“interesting in the moment but somewhat evanescent in their importance”) and praises some of its staff (“I think they have some excellent reporters”). Tina Brown says the Mayo Clinic should buy The New York Times (“Excellent at keeping people alive”). The Times will launch an opinion app, Marc Tracy reports. And Tribune should create a national supernewspaper that competes with the Times by combining its local newsgathering in cities such as Baltimore, Chicago and Los Angeles with its national reporting in Washington, Michael Kinsley argues.

All these fun reads come from The New Republic’s special “Future of the Times” package. You should read it! But first, can we talk about the footnotes? Read more

Tools:
0 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

Chicago Tribune last, NPR first in test of news websites’ speed

Idea Lab | Brian Abelson
Phillip Smith tested the speed of various news sites using tools from GTmetrix. NPR and USA Today absolutely smoke their competitors, Smith writes, while the Chicago Tribune has “one of the slowest sites on the Internet.”

NPR Director of Engineering Irakli Nadareishvili tells Smith that one of NPR’s philosophies is “Speed is a Feature. Our tech team has been investing heavy effort in getting great page load-times.” Smith made a teeth-grinding video of a Tribune page loading.

Read more

Tools:
4 Comments