Responsify! vs. Johnny 1.0 – On converting a static website to be responsive…

Home / Web Design / Responsify! vs. Johnny 1.0 – On converting a static website to be responsive…

After my talk for 1DevDayDetroit I did a little Q&A, and a question that came up a couple of times was “What is a case for an adaptive site vs. aresponsive site?” I would say that making that call comes down to your answers on two factors: budget and legacy.

Adaptive sites are great. Don’t let anyone tell you that full-fluid responsive is the only one true way. The average user is going to get it in the context that is appropriate for their device and that will be fine. For example, I built the berkleychopshop.com site (in the image at the top of this post) on an adaptive layout. It has a single column layout tailored to devices with a viewport of 499px and below, and another for devices 500px and above, and maxes out at 960px.

Some foundation

For clarity’s sake, I’d like to define a couple of terms: Responsive and Adaptive. A responsive design would be one that incorporated the following:

  • A fluid, percent-based layout.
  • Images that resize by themselves within that layout.
  • The use of @media queries to determine the size of the viewport that the website is meant to respond to. (see mediaqueri.es )
An adaptive design is similar in that it uses @media queries to react to viewport sizes, but rather than being fluid it picks two or more fixed widths to display based on the viewport that it is in. If you haven’t read it, you should get familiar with the now-legendary Ethan Marcotte post “Responsive Web Design” on A List Apart because he explains the difference in detail.

Legacy & The Ballad of Johnny 1.0

The fact that you have a site to convert means that somebody had to build it. If that somebody was you or someone on your team then you probably have a good idea how it’s put together (for better or for worse :). Maybe you are inheriting the site from “Johnny 1.0” and he and his team may or may not have designed and developed it in a manner that will make it easy to convert. So in order to make an informed decision about version 2.0 you should have a really good idea of how flexible the site is now:

  • Is there any table-based layout?
  • Are container dimensions set high up the DOM by a master container (good) or individually down closer to the content (more work)?
  • To what extent are images used for text in headlines, etc? (They could present a problem as columns get narrower)
  • Are there a lot of images in backgrounds? (They don’t scale)
  • More reasons I am not thinking of off the top of my head…
If you don’t have the budget or the buy-in to go full responsive, and/or you are up against these types of problems, and there is still a desire to optimize for mobile, then an adaptive site could be just the thing. An Adaptive approach could be be “cheaper * ” and “less painful * ” because you don’t have to account for images, margins, backgrounds and nav to be fully fluid. It’s also a good way to go if you are just getting used to the idea of media queries because it keeps the number of moving parts down and makes debugging easier.

And now for a little browser squishing…

Take a look at this animation of browser squishing. I love Browser Squishing! Lots of devs and designers do it, but let’s keep in mind that it’s not meant to be a use case. “Normal” people just load it up in a browser and use it. They don’t squish it. Following that thought, you could argue that a fluid layout is also not a necessity, even in a “responsive” context. And speaking of use cases, they have a direct impact on your…

Budget

Your budget, whether time or money (and usually both), will let you know a lot about how responsive you should get. The more breakpoints you add, the more design you have to do, the more developing and debugging you have to do. You can speed things up by using a responsive template, you can simplify, but that may compromise some design features. It’s all a great balancing act. Although responsive can be built in without a lot of extra overhead, it probably won’t be so with the first project you attempt. So start small and get better.

 

* Individual mileage may vary

 

2 Comments

  • Have you ever made responsive emails? I’m trying to create a 2-to-1 column layout for an email. But I can’t find much help online.

    Just curious
    thanks for your time

  • I have played around with it, but still use good ‘ol bulletproof table-based layout (shudder) with inline styles (gyahhh!) to make a static 600px wide email. Support for media queries and CSS in general in email clients is a bit of a crap shoot. Some email clients have great support, some can hardly reproduce even the most basic CSS, so to make the most consistent layouts I try to design to the medium.

    However, there is a pretty solid table-based 2 to 1 column technique that you can use. Check out this article from Campaign Monitor: campaignmonitor.com/guides/mobile

Leave a Reply

Your email address will not be published. Required fields are marked *