How mix Responsive Design and Mobile Templates

You need a mobile strategy for your site. You have to pick Responsive Design or a dedicated mobile site, right? Maybe not. Maybe you can mix and match a variety of strategies.

Me and the team are working hard on CodePen every day. But we’re a team of three. Our mobile strategy is to chip away at it the best we can as we 1) have time and 2) have good ideas on how to handle things.

Example of a Responsive Template

Take our Recent Activity page. This page is so simple that writing a couple of media queries to shuffle things around and a little bit of JavaScript to toggle the filters is a decent solution:

Example of a Mobile Specific Template

Now look at our Details page on desktop:

This page is far more complicated. It shares the same layout as the Editor view. You can click-and-drag the preview area to make it larger or smaller. There are keyboard commands. Leaving it at desktop size was awkward because the text was microscopic. Using the proper meta tags and making it load at mobile size made for very awkward layout and awkward scrolling, where it was possible at all.

This was our worst mobile view on the entire site.

I could have went to war with this view with CSS and smashed it into shape. But even if I did that, there was quite a bit of JavaScript being loaded that no longer had any purpose. Instead, I decided to go with a mobile specific template. This way I was able to take complete control of the HTML, CSS, and JavaScript and only load what was needed. I was able to re-use almost everything, because we approached everything from a modular perspective. I could pick the HTML partials, JS modules, and compile a new CSS file of just the bits I needed – writing very little from scratch.

The Details view is a lot more usable now, not to mention quicker.

For the curious, we use the browser gem and choose the template to render at the controller level. It’s UA sniffing, which doesn’t feel great, but at least it’s server side¹ and based on an open source project that is kept up to date.

if browser.mobile?
  render :template => 'details/mobile', :layout => "mobile-pages"
else
  render :template => 'details/index', :layout => "pages"
end

Also for the record, there is nothing you can’t do on the mobile version you can on the desktop version.

Example of the Uhm-Not-Quite-Ready View

Not every view on CodePen is great on small screens yet. The Editor, arguably the most important page of the app, doesn’t use responsive design or a mobile template.

It works pretty well on the iPad and large tablets, but smaller isn’t great. This view is not something we want to half-ass. Leaving the design at desktop size keeps it usable until the time comes we have a good idea for it and can tackle it head on. It will very likely be a mobile specific template.

Example of Mobile-Specific Parts in a Responsive Template

Check out our Profile view:

This is a responsive template. I think it works great, except for the “tabs” area where it’s broken into two lines. That’s awkward and won’t scale as we potentially add more navigation. Instead, we serve a different partial just in that one spot which outputs a<select> menu navigation instead of tabs.

A bit better, anyway.

It’s a Process

I’m not blogging this to show off CodePen as this beacon of mobile design perfection. It certainly is not. I do think it’s interesting to think about hybrid and iterative approaches to mobile development.

No separate domains/URLs, no separate repositories/code bases, no separate teams. Everything together as one big monster. Like I think it should be.