Forbes’ Desktop, Mobile Experiences

Screenshot from Forbes’ desktop site.

Froont. (2014). 9 basic principles of responsive web design.

Marcotte, E. (2011). Responsive web design. New York: A Book Apart.

Concepts

Responsive web design, flexible grid, flow, mobile first

Quotations

“Relying upon all-too-convenient terms like “mobile” and “desktop” is no substitute for conducting the proper research into how your audience accesses your site: not only the devices and browsers they use, but how, where, and why they use them” (Marcotte, p. 108).

“In other words, designing for mobile devices first can enrich the experience for all users, by providing the element often missing from modern web design: focus. That’s not to say that our client’s pages are light on content, or lacking in features. But by framing our design process with that simple question, we’ve gained a handy acid test to apply when considering each proposed element, each new piece of functionality” (Marcotte, p. 113).

Rhetorical Analysis

After scrolling through Merlin Mann’s “Noise to Noise Ratio” Flickr set, I was intrigued to see how Forbes’ website and mobile experience have changed since Mann’s 2009 assessment.

Forbes’ website has moved away from the “unbelievably crowded NASCAR shit,” to a more minimal approach. The homepage now captures viewers’ attention with a large color photo and draws them into the story by placing the headline over part of the image.

The desktop site uses a flexible grid with multiple breakpoints, adjusting the site’s content as screen size decreases (This grid is carried over to all other webpages on Forbes’ site).

Screenshot of Forbes’ desktop site once it hits a breakpoint.

When viewed at full width on a laptop, a large photo takes up the entire screen for the site’s feature story with four additional stories displayed beneath the headline. As the page becomes narrower, the photo adjusts to the new width and the additional stories get pushed down, first into two columns and then one column when the screen hits a certain breakpoint.

While all the content is the same between the desktop and mobile sites, one feature that I think Forbes did well on its mobile site was its Lists feature.

On a desktop, Forbes Lists are nicely arranged within the grid, with the more important stories displayed with larger photos to the left of the site (Viewers who want to see more can click through the feature).

Forbes’ Lists viewed on a desktop.

On a mobile device, only the first story in the list is displayed and like the desktop version, viewers can click through to see other Lists (I think this was a smart design choice rather than pushing down the other items within this section down the page).

Forbes’ Lists viewed on a mobile device.

While I like the mobile design for this feature, I think the vertical photos in the Lists section are too large for mobile. I don’t like how it takes up my entire screen. Another improvement that could be made to this feature is to eliminate the 2-in-1 lists. It’s slightly confusing and distracting have both lists in there (It also disrupts the visual hierarchy of those stories that was established on the desktop version).

Question

When viewing an article on Forbes’ desktop site, I find it more distracting than the mobile version, primarily because of the video ad and additional content on the left side of the screen. My attention is drawn there before the actual article. As Marcotte mentioned mobile first can also be applied to thinking about designing for desktop experiences (and can be beneficial to users). How could Forbes’ desktop site be redesigned using a mobile first approach to provide a more user friendly experience?