Plant the Seed for a Responsive Future

The debate on whether to design a mobile-only site or design responsively rages on. Mobile web strategist Brad Frost recently dissected the ongoing debate, using the recent presidential election to prove his points. Thankfully, Brad avoided any politics, and so will we. Nevertheless, Brad makes several good points for both sides of the mobile vs. responsive argument.

What really caught our eye was when Brad says the decision to go either mobile-only or responsive depends on a bunch of factors, such as your business needs and goals. There's rarely a black-and-white answer. Watch the video below and take note of why forgoing any consideration for mobile or responsive would be a death sentence:

We're not going to breakdown Brad's arguments or his riff on Layon's Hierarchy of Mobile Needs point-by-point. After all, he's already done a fine job writing it on his own. That being said, we do want to address some of the takeaways as it relates to responsive design. After all, we've said before that responsive design is the future.

"Mobile users will do anything and everything desktop user will do."

When we go to a site on our phones, we expect to do the same things we can if we were on a desktop browser. As Brad points out, the limitations with a mobile-only site is content parity. With responsive, it's possible to have content parity, which Brad also states. The trick, however, is to be able to present your content to fit nicely within the mobile browser.

As Design Lead Jonathan has written before, you can certainly hide elements on a smaller device with a change in the markup, such as .show-on-phone or .hide-on-mobile classes. You can also rearrange the navigation so that it's not in your face at the top.

Jonathan suggets writing the nav last after the content, and having it "pull" to the left. If you are using Foundation, it would look like:

Jonathan points out that touch devices also have no hover state, so you'll have to consider that as well when making your designs adaptable. Tools like Plunk can help ensure your touch targets are up to snuff.

"Good Performance is Good Design"

Brad rightfully highlights that performance is an issue on both a mobile-only site or a responsive one. You've got five seconds, as Brad says, to make a good first impression. If your site doesn't load quickly, users might just bounce.

We admit that there's no perfect solution yet for this, even with Foundation. If we hide large images on mobile and show a smaller image, it still loads both. To circumvent this, you can build everything as much as possible with CSS, making sure your images are optimized.

In any case, performance is something we are really going to have to work on to make better.

Mobile-First, Adaptive and Future-friendly

Brad does make the argument that we do have to consider a mobile-first, adaptive and future-friendly approach, especially if we're going to be designing responsively. It's something we've taken into serious consideration and why we're working to make the next, great iteration of Foundation to be mobile-first.

Plant the Seed

While we're strong advocates of responsive design, we understand that companies might be hesitant to toss out their desktop-locked sites. As Brad says, even if you do a mobile-only site at least you are planting the seed for the future.

That being said, with so many companies, such as NPR, going responsive, it is imperative that we plant the seed for a responsive future sooner rather than later. Doing so, takes our products and services into the far-future rather than being put in an early grave.