Login or Register

Login, Buttercup!


Are you looking to grow as a designer and developer? Tired of going to places that don't offer any valuable discussion and content? Well Drawar is here for you. You control the content and seeing as how you are the type of person that thrives on writing great stuff this site is only going to get better after you join.

 

The Case Against Responsive Web Design

When Ethan Marcotte wrote Responsive Web Design I thought it was a great article that showed designers that it is possible to create designs that can flex and move to fit the screen they are on. We needed this line of thinking because you just never know how people are going to view your content anymore. Before the question was what resolution to design for and after some time we began to settle on fixed width designs that could be viewed on over 90% of our users' screens. Now the question isn't just about resolution, but also what device and what type of viewport (landscape or portrait).

Responsive web design is supposed to aim for a single design that acts like a liquid in a container. It takes the shape of whatever resolution it is in and while this means more work for the designer it also leads to a better experience for the user.

At least for the most part...

Cater To My Needs

When viewing a website on my iPod Touch I don't want a resized version of the website. I want a version that gets me quickly to what I want and avoids all that isn't necessary. This might mean that the version I'm wanting is nothing more than what I would see in a RSS reader. I don't need flexible images. I don't need any images at all most of the time.

In that case maybe Instapaper is all that I'm looking for.

I completely understand the advantages of Responsive Web Design that Ethan talks about and maybe this includes the ability to remove what isn't necessary from a design when viewing through certain devices. I don't think responsive web design has to be an all-in-one solution where you can't leave things out and in that case I really don't have a case against responsive web design. I just think that it needs to go beyond resizing and trying to make everything flexible.

Sometimes we have to deal with the fact that we can't or shouldn't make the experience of our sites that exact same across all devices. While we should ensure that our brands make it through being careful and selective of how the experience is on a mobile device versus a desktop can go a long way in showing that you care.

The Drawar Responsive Design

There isn't one. There isn't even a mobile version of the site. There needs to be one, but with so many different sections and types of content I dread having to do things all over again. It will get done though and will be a great learning experience. My tiny brain just has to get creative with some of the solutions to the problems that I will encounter. Maybe it will be fun after all.

 

Discussion (25)

 
 

Sure, and I think it's in the air from a long time. I'm just working on something around that and there is so much to think.

First we have to completely rethink the site concept. For now we often enhance with new tools and concepts. Perhaps it's time to put the whole to the garbage. But to create what ?

Perhaps we should try to create site as a services provider. Among the services perhaps a default clothing. But the way I see the stuff, in a short time the wears of a site will be choosen by users and although the browsing and filter tools.

Browser where the first internet proper tool to grab infos, now more and more programs give us infos without to use IE, FF or others.

For me, there will be a lot of wonderfull things to come. and IE6 problematic will seem just a little stupid joke. ;-). But a lot of other users will be pleased, disabled poeple for example.

For example, I just would my brother give me the price compare between shops of my street, concerning beef meat. Should be the beginning...

 

One of my favorite blogs on World of Warcraft (a game which I have long nursed a addition to) is simply called WoW.com. Their full size site is pretty, but strolling through the long list of articles they post daily takes a while, something that turns me off as a user. Their mobile version is right to the point: logo on top, a nice RSS style list of their articles; and I highly prefer it to browsing the main version.

Once again I think we have a per project decision to make. I'm in the process of building 5 sites, one of which is a tumblog of my kayaking adventures; I'm moving towards keeping it responsive, while a site I'm building for a local chapter of a organization may very well have a mobile option, since it is so large. We need to anaylze what's going on with a site, and see which concept will allow the better presentation of content and ease of use.

 

What I currently dislike about responsive web design is that I'm not given a choice to view the full version. A great example of this is Hickdesign, which is very well designed for all devices but i'm left without an option.

On the iPhone it's much faster for me to click around a full site, then scroll on and on for the mobile site. That's actually what initially drew me to the iPhone. I'd no longer have to deal with the infinite scroll of long mobile websites, I could just jump here and there with 1 quick swipe and a tap.

I love the idea of responsive web design, but I think the option to view the full site should always be made available. And not at the bottom of the page where I have to scroll forever to get to it, maybe a gesture could activate it or something.

 
 

The first problem I see not addressed here in the other comments and that is the situation of hover states and the like. The difference in what one expects to happen when using a touch a screen verses say using a mouse or even a physical keyboard.

The second: Information needs to remain accessible no matter what and needs to be available in whatever format I should want it in. However as the owner of content I do want certain control over the presentation and branding. There is no easy solution here and I see many years ahead hashing on how to deliver content in multiple forms without overstepping the creators intent.

Many arguments have been brought about advertising and Safari's new reader feature and the Readability's bookmarklet. These arguments are valid as advertising revenue is a vital part of keeping many sites online. So far I think efforts to interject advertising directly into content have been dismal at best, hyperlinks within large bodies of text, short commercial breaks before videos or popups during. All these are intrusive and I don't think are ideal.

The point is yes we have to accommodate whatever screen or device a user wants to view the content on, but there are some very serious concerns before we move into this.

 

Ever since I saw how uxmag.com changed (slightly) when it resizes, I've been interested by what is now becoming known as responsive web design.

I like how you can use @media queries to swap out the stylesheets, but that doesn't address behaviour and the DOM.

If I'm targeting different devices, surely I want to adapt the behaviour to that device!

Likewise, no matter how much you may dislike the fact, but the way in which you style a site is still heavily tied to the structure of the DOM. If you really want to have completely different designs, you're gonna need a way to restructure the DOM.

I like the idea of responsive web design, but I'd need to be able to do a bit more than swap some stylesheets before I saw it as something I could really use.

 

responsive web design is great for progressive enhancement/graceful degradation, which in turn automatically give you an seo boost; you're pushing your content out to more viewers. it also lets you tweak UI(s) specific for media type, which in turn enhances UI/usability. @TwitCh i hear ya. for the time being, here's a dirty way to get :hover working on iPhone/iPad http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/

 

Personally I think fixed width is a bit of a cop out.

This is the web people, fixed width makes sense if your coming in from print design but there is absolutely no reason for you not to take advantage of that massive screen your user spent £200+ on.

I hope in a few years the majority of sites will accommodate multiple screen and devices.

 

You're saying that on your iPod Touch with a 480 x 320 resolution, you'd rather see a fixed with site with say ~960px, rather than a perfect 480? So you have to scroll horizontally almost 2x the width of the site? That doesn't make sense to me.

Granted, I don't own a Touch, let alone a smart phone, so I can't judge whether or not a site will display easily on these devices. But I don't understand your argument of "I want a version that gets me quickly to what I want and avoids all that isn't necessary." If a responsive website formats the design effectively, reduces the images & navigation down to the proper size and reduces the width to your specific device, how is that not getting you quickly to what you want?

 

@Damon Bauer On the iPod Touch the entire site is squeezed into the window. This makes it hard to read, but with a quick tap to zoom you can see most of the article teasers all at once. Then click the article you want to read. There's not much horizontal/vertical scrolling in this scenario.

What he's saying though is he basically want an RSS feed of all the articles that he can quickly scroll through. He doesn't want the full site (with pictures/ads/nav/footer/header) just squeezed into a smaller window causing more scroll time of unnecessary data.

I think you're both basically saying the same thing, but you want all the stuff on the original site included in a smaller format and he just wants the articles.

 

Ok, what we've got here now is a useless "Article with criticizing another article" and which says us nothing. Is that the thing Drawar is about? I will not be surprised to see next week something like "What is better for the design community - Mac or PC?" This could be a really interesting topic about nothing with many comments saying a lot of text, telling us nothing. It's becoming "bla bla bla drawar cool bla bla bla community bla bla bla premium bla bla bla". Isn't that cool?

 
 

If I understand you correctly, your objection is to the "one size fits all" design in the ALA example specifically, not necessarily the larger concepts behind responsive web design. 

It's important to make that distinction; like any new and interesting technique, responsive design is a tool (and a damn useful one in my opinion) that you can use to whatever end is most appropriate for a project.

On the other hand, we could continue to rely on forking code half a dozen ways for each specific device and  use heavy-handed javascript to detect user agents an screen sizes.

 

I think this could be taken as less of a case against responsive web design and more as a case against excessive web design - or a case for a kind of minimalism. My personal philosophy is that if a graphic element isn't necessary to a design, then it shouldn't be there. If it aids in the understanding of an element, it should stay. So, to me it's less of an issue to scale down or to create an RSS-like version of the site, because each page ought to be designed in such a way that anyone can get to the information they want quickly, not just mobile users.

 

We just rebuilt our own portfolio site making quite extensive use of responsive design and @media queries and it seems to be working very effectively and user responses have been very positive so far when we've asked.

I think we have to be quite wary of taking the view that everyone these days has a 17"+ monitor. Sure, it may depend on your target audience, but there are plenty of people still using slightly older hardware and it's crucial that we still cater for them. Ethan Marcotte describes a friend of his browsing nytimes.com on a 5 year old iBook (from what I can recall) and how the sides of the page got chopped off - and this is a reportedly very tech-savvy user he's talking about, so it's not a case of silver surfers not keeping up with the times.

One of the massive benefits of using @media queries is not to provide any kind of cool parallax-esque resizing novelty, but to control the way content is displayed in a context-dependent manner. I'd be willing to bet that the vast majority of users don't realise it's even in place, but I can guarantee that their user experience will improve as a result of a little extra effort. I'd even go as far as to say that merely applying a fluid layout doesn't make a huge amount of sense unless you're going to control the position of elements within the design. All we get otherwise is a hugely stretched page.

Sure, responsive design doesn't address all the issues we have regarding touch devices and hover states, as @kelvinj says, but it's definitely a start!

 
 
 
 
 
 

Recently while attending the “Traffic and Conversion Summit”, organized by Ryan Deiss of Digital marketer, I raised this issue and asked everybody about what they think on “Responsive Web Design” and is it helpful for conversion of traffic into buyers. And the outcome of this debate was unanimous as almost everyone were agreed to the point is that responsive web design is the next step.

 

We are living in the age of internet. Every individual as well as business owners are launching their websites in order to promote their brands and businesses online. It is essential to design an attractive and user friendly website; so that visitors feel comfortable to access it. Now days I’m busy working with a dental website design. Things are still going smooth.

 
 

Respond To This Post

You need to Login or Register to comment. Become a member of this great community because you like to be a rebel and actually learn on a website.

Recent Posts

Title Last Reply Replies
 

© Emersian // About // Pimped out hosting by (mt)