In Response to Responsive Web Design

Posted

After receiving such high praise from those who have earned my high praise, Ethan Marcotte’s article on Responsive Web Design quickly hit my must read list. If you haven’t had the chance to read it I suggest that you do. Not only because the rest of this article will make no sense to those unfamiliar with the article but also because we all have a lot to learn from it.

After reading what Ethan had to say I immediately had this itch to throw in my opinion. Maybe I am just long winded but I knew that a comment on the post itself would be a poor medium for me to explain what I had to say. Unfortunately my opinion was quickly buried under a sea of responsibilities and deadlines. Thankfully Jeremy Keith came to the rescue yesterday when he posted some expanded thoughts on the topic. Once again a suggested read. Jeremy started to touch on what really irks me about this subject but didn’t quite hit the nail on the head for me.

Responsive Web Design is Incomplete

Responsive web design is a fantastic idea and practice, something that I hope will become a normal practice not only for myself but for web design in general. However, I find these two articles to be a one dimensional solution to a multi-dimensional issue. Both Ethan and Jeremy discuss the importance of having a fluid and flexible layout when creating a web site. Something that can adapt itself not just so it can fit your iPhone or your Droid but so that it makes the best use of available space in any environment.

I believe an important part of responsive web design is that we understand the big picture. The big picture here being that fluid web sites are not just designed in order to be effective for the devices and technology we have today but also for what we might have in the future. My question with all of this is why are we so focused on the site layout when different devices have other implications as well?

Different Devices = Different Content Needs

I do a decent amount of web browsing on my phone and I do a lot more on my desktop machine. While the mobile web is growing and getting a lot better I still don’t have a strong desire to do a lot of web browsing on my phone when I don’t have to. It is much more a convenient tool to use when a computer isn’t an option. Because of this, my goals for browsing a web site on my phone are entirely different than they would be if I were on my computer. So why does the website I see on my phone show me the same content?

Now before I go on I’m sure a lot of people will jump at me here and talk about how mobile sites are often stripped down to the basics and do display a different environment for the user. However, mobile sites and responsive web design don’t really agree with each other do they? No, what I want is content that is focused to my situation on a layout that plays well with whatever device I am using.

An Example

This whole argument is best showed in an example. For the sake of consistency I am going to go back to the St. Paul’s School web site that Jeremy uses in his post, hopefully he doesn’t mind! First let me say that the design and layout of the site is beautiful and well done. This site can serve as an excellent example of how a fluid web site should be created. The flexibility of this site on multiple devices is great but if we factor in the additional implementations of mobile browsing some issues may start to arise.

If I am visiting this school for the first time and I am confused as to where I should park I would consider my phone a resource for solving this problem. If I were to visit the school web site to search for information about parking I would find that I need to navigate to Facilities then Location and then find there is a PDF I can download showing parking facilities for visitors. On my desktop this setup is perfectly fine, the information is not hard to find and pretty quick to get to as well as being in a logical place. On a mobile device it becomes a bit of a hinderance and not an ideal way to get my information.

I should probably follow this example up with a disclaimer that clearly St Paul’s was not my client so I have no idea now many people actually need to access their parking resources.

Expanding Responsive Web Design

The point I am making here is how can we take this genius practice of responsive web design and make it even better? How can we use resources like media queries to not only build a web environment that displays great everywhere but also targets the different needs of different devices? People using their phone to browse the web need different information than people browsing on a desktop and the same can be said for tablets, TV’s, readers, and the entire array of devices that now connect to the internet.

We need to look beyond responsive web design as the fluid layout and start seeing it’s potential as a fluid experience.

8 Responses to “In Response to Responsive Web Design”

  1. Jeremy Keith

    Again, you’re fixating on the idea of responsive web design as being a solution for mobile. As I tried to make as clear as I possibly could, it isn’t. It’s a solution for a variety of screen widths, some of which may be on mobile but, as you rightly point out, a dedicated mobile solution will almost certainly be the best option for those devices.

    But as I emphasised (in bold text) in my post, the choice is not between responsive web design and a dedicated mobile solution; the choice is between responsive web design and nothing (i.e. just serving up one layout to all devices regardless of screen size).

    I’m not sure how often I can repeat that is isn’t specifically about mobile without boring myself.

    Reply
  2. Jason Gross

    @Jeremy

    Thanks for the read and response. I guess my opinion on the matter comes across as being mobile focused but I used mobile phones simply as an example here. I felt like going into other devices for additional commentary would be long winded and redundant.

    What I was trying to get at with this is that different devices hold more than just different screen sizes. They have different functions and all invoke unique browsing needs.

    My goal in thinking is to ask if we can use the same body of thought in responsive web design to look at how we can shape web sites to be flexible in design and content.

    Reply
  3. Jeremy Keith

    I actually disagree that a different context automatically implies different content.

    Instead, I like to turn the question on its head. Instead of asking “What can I take away in one context (such as a narrow-width device)?”, ask instead “Am I serving up this content to wide-width device just because it has a wide width?”

    I think that quite often, the answer will be yes. We’re filling up available space just because it’s available.

    If we stop doing that, then the issues that you are laying at the feet of responsive web design will disappear.

    The same goes for performance (as I mentioned in my post) — this is something we should considering in *every* context.

    Reply
  4. Jason Gross

    In regards to performance you certainly did make a good point in your article yesterday about the inclusion of images at narrow resolution. So it would be hard to say that I could really argue against the same point for content.

    I do still believe that there is some untapped potential behind Responsive Web Design, particularly with how we handle content. I am eager to experiment with it and see how it grows and evolves as it gets into the hands of more designers and developers.

    Reply
  5. Ethan

    Unsurprisingly, I’m with Jeremy.

    I think that many of the “problems” you’re attributing to responsive design are simply characteristics of a project that would benefit from a non-responsive approach. In working on a book about responsive web design, the subtitle I’ve dreamed up is “Designing for—and beyond—the desktop.” Awful writing? Probably. But it describes the goals and merits of a responsive approach.

    When I was at Happy Cog, we designed cogaoke.com for a SXSW event we hosted. The goals for the “mobile” experience were going to be markedly different from the “desktop” experience: the latter was going to promote the event and its performers for months in advance, whereas the former was just going to provide “night of” directions to our attendees. A responsive approach wouldn’t have worked, as the two sites’ goals–and content–needed to be drastically different.

    So while I don’t believe that a different browsing context automatically requires different content, there still might be a need for the more “traditional” approach. Responsive design is a technique, not dogma—another tool in the belt, as it were. I just happen to think it’s an incredibly compelling one.

    Reply
  6. Maria Malidaki

    Greetings,
    having read Jeremy’s main article and the responses from Ethan and Jason, in my humble opinion Jason has a point.

    I believe responsive design and different device content are two things that should be looked upon separately, and then together. Correct me if I didn’t understand well, but what Jason is trying to say is that we use each device for different purposes in matters of browsing.

    People can browse happily for hours at their computer screen, but will they do that in such carefree way using a device of smaller width (be it a cell phone or anything else smaller than, say, 600px width)? Smaller device browsing is supposedly often used for quick data and updates, since not only is it tiring for the eyes but also not so easy to use (vs keyboard, mouse) and at certain cases much more expensive.

    I think that a good way to go on designing for multiple devices would be first to identify the content that a user will expect to find through the device, and then adjusting the original computer screen website to that content, while trying to keep some of the feel of the original website.

    Jason mentioned that “people will jump at him here and talk about mobile sites are often stripped down to the basics and do display a different environment for the user”. Certainly it’s frustrating to have a completely different visual experience when viewing the site at a computer screen and at another, smaller device, but is it expected after all from the user to keep all the pretty design through the smaller screens?

    I’m not trying to avoid flexible design here, I’m merely saying that it’s not only design and aesthetics we should worry about, but mainly content. And each device has a specific content purpose to serve. We should first adjust that and then the design about that specific content.

    Hopefully I stuck to the point. :)

    Reply
  7. Jason Gross

    Ethan

    Thanks for the comment and thoughts. Your example of cogaoke.com sits well with me and helps clear up your point. Indeed I do believe I have fallen victim to trying to apply your idea as a shotgun solution. I will go ahead and blame you for all of it since you did write the article that sparked my interest.

    If there is indeed a book in our future I will quickly be in line to order!

    Maria

    The point you made about browsing on your desktop for hours is spot on to what I am getting at with the post and the main reason I feel there to more than meets the eye with responsive design :)

    Reply
  8. Bruno Barros

    Jason,
    I think your point is good and fair, but it is a project decision, a back-end stuff. The Responsive Web Design is a front-end stuff. In fact, are diferent works to do in a web site. The way you wrote these things are inside the same box. I don’t think, so.

    Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>