Connect with FOLIO:
         

ADVERTISEMENT



3 Lessons Learned With Responsive Design

What seems like a no-brainer decision still has its challenges.


Hugh Byrne By Hugh Byrne
07/25/2013 -12:18 PM






 

If you're like most b-to-b publishers, you're delivering a PC-optimized Web experience in a soon to be post-PC world.

So it's time to migrate your website(s) to responsive design: Displaying content that arranges automatically based on the device and screen size of the viewer.  This lets you provide optimal reading, navigating, and viewing from any device, from a desktop PC to a mobile phone.

In this post, I'll tell you about the transformation underway at GreenBiz to mobile-first, what we've discovered—and what we have yet to learn.

It's true that most b-to-b users are still using PCs to browse websites, but that's rapidly changing. In fact, PC shipments are forecast to drop 7.8% worldwide in 2013, IDC reports.

So it makes sense that Mashable declared 2013 the year of responsive design (conveniently announced shortly after launching its own responsive-design site). With the rise of technology to support multiple platforms, you'd think every publisher would have made the switch by now.

The diminishing clout of the PC is further highlighted by the dramatic rise in mobile traffic:

 

 

Tablets are clearly picking up ground. They have so far surpassed laptop sales in 2013, and are projected to outsell all PCs by 2015. And smartphones appear unstoppable, on pace to sell nearly a billion units this year.

At GreenBiz, our site has won awards for years. We want to continue winning awards, and so we are midway through a site overhaul, having drunk the Kool-Aid for adopting a mobile-first strategy. But like many things in life, what seemed like a no-brainer decision still presents a few challenges.

What we are finding:

1. Mobile Loves Pictures
Creating multiplatform news requires rethinking the role of images. In a desktop environment, our images are often an afterthought, stock photos providing a graphic complement to a largely text-based news item or blog post. On a mobile device, the feature image plays a larger role (literally) in drawing the reader into the article. Our editors are going to be spending more time thinking about images and how they contribute to telling the story across platforms.

2. Farewell My Leaderboard
Ad-serving technology is still playing catch-up to responsive design. There's just not a great solution for 728x90 leaderboards, and while you can use javascript code to swap ad tags based on device size, it's an inelegant solution with a decidedly workaround feel. But the 300x250 size is a happier story, as it works just fine across all platforms. And sponsored content is particularly well-suited for mobile.

3. Plug-Ins Need to Catch Up
Like a lot of publishers, we've added capabilities to our website that involve skinning third-party tools to appear native on our site. Things like our job boards, directories, e-commerce tools, and marketing automation, all neatly integrated into our site are going to stick out like a sore thumb when applied in a tablet or mobile phone environment. We're re-evaluating these vendors based on their mobile roadmap, and in some cases will be seeking new providers.

These are just a few of the challenges we've encountered, and as we near launch in the coming months there will undoubtedly be more. I'll keep you posted.

 





Hugh Byrne By Hugh Byrne -- Hugh Byrne is senior vice president, product and audience development at GreenBiz Group, Inc. You can find him on Twitter @greenbiztweets

Post Comment / Discuss This Blog - Info/Rules


RECENTLY in B2B dots icon

MOST READ on FOLIOdots icon

FOLIO: Alerts & Newslettersdots icon

Sign up for our news alerts, special offers & feature updates:



FOLIO: Alerts
Breaking news & industry updates

FOLIO: Publishing Technology
The Latest on Trends, Issues & Products (2x Monthly)

FOLIO: Special Promos
Special offers & announcements from Partners, Sponsors & Red 7 Media

FOLIO: Update
Webinar, content & service feature updates



CONNECT WITH FOLIO: NOW
         


CAREER CENTER dots icon