Skip to main content

Other Mobile First Responsive Web Design Challenges

By Jason Grigsby

Published on October 10th, 2011

Topics

Alright, I’ve written extensively on the challenges with the IMG tag for mobile first responsive web designs. What other challenges are people running into?

Here’s what I’ve seen:

  • Video (especially embedding third-party video) — Looks like Fitvids.js is the solution a lot of people are using. See also Elastic Video. BTW, if you’re doing a lot of video, it is probably a good idea to look into how you can use HTTP Adaptive bitrate streaming to send different quality video based on data connection and CPU.
  • Data tables — Chris Coyier’s excellent Responsive Data Tables article explains three different possibilities for solving this.
  • Third-party ad networks and social widgets — This is biggest problem. It’s a problem whether you’re doing responsive design or not. Scott Jehl talks a little about how they handled ads on the Boston Globe in his presentation from the Breaking Development Conference (pg 97).

What am I missing? What other challenges do you see?

Jason Grigsby is one of the co-founders of Cloud Four, Mobile Portland and Responsive Field Day. He is the author of Progressive Web Apps from A Book Apart. Follow him at @grigs.

Comments

Stephanie Rieger said:

I think what stil stands out for me is that the capabilities detection aspect of responsive design (which impacts images, video, tables etc.) is still quite fuzzy (and is technically not part of the ‘responsive triumvirate’ of grids, media queries and images…so at the moment, not everyone presumes it is needed).

As we all know, swapping style sheets based exclusively on screen size conflates all sorts of other capabilities with screen size even though there is often little correlation amongst them.

Taking RWD that extra mile to progressively enhance based on capabilities brings up the lovely can of worms that is first load, feature detection, the need/benefit of (some) server-side adaptation, usefulness of some sort of device grouping etc.

Not exactly solved at this point…

(and don’t get me wrong…if we can find a way to easily solve responsive images for 80% of people and recommend solid techniques for the other 20% we will have come very far indeed…all progress is welcome 🙂

Josh McKenney said:

One I’m struggling with often, how to fit a full navigation system into mobile. Specifically, one level sub navigation. I’m a fan of full navigation at the bottom of the page, but what if you have a simple navigation you want to keep at the top and you want to show a sub navigation on inside pages?

Carolyn Lee said:

Right now I think just about everything is a challenge. I’ve been reading and reading about Mobile First Responsive Web Design and I wanna learn everything I can before I tackle redesigning several sites. So all I wanna say is I can’t wait til your book comes out. It’s on my Amazon wishlist. Will you be producing a Kindle version as well? I just pre-ordered the new Kindle Fire. 😀 Another device I can test responsive designs on.

Zoe Gillenwater said:

I assume you’re specifically referring to challenges with content and design? There are lots of challenges related to process (how to design comps, etc.) and syntax decisions (which media features to use, which sizes to use as breaking points, etc.), but I don’t think this is what you’re asking for.

I agree with Josh McKenney: handling navigation when it’s more than just a single level with a handful of links is a bear!

Widgets of various types are also a problem. Modals/lightboxes, carousels, tabs, accordions and lots more can all be difficult to make work on mobile but desirable on desktop.

Aaron Weyenberg said:

RWD clearly surfaces more questions than answers by what seems like a factor of 5 to 1. Browsers have to be part of at least some of the solutions. RWD is, at this stage, incredibly hackish in its techniques to deal with the range of user agents and use cases. I’m excited though to see what proposals emerge over the next year as we move the ball down the field.

But right now the reality is we’re on our own 20 yard line.

Brad Frost said:

Source order is a big issue. We have flex-box on the horizon, but JS is required to rearrange elements right now. Like some of the commenters above, anything more than a simple navigation requires a whole lot of hoops to jump through.