Responsive Web Design (RWD) discussions are cropping up all over the place right now and it seems like a pretty hot topic for Developers & Designers alike. However, most discussions focus on tools & techniques — and don't address the bigger picture. In this blogpost I'm going to write about RWD from a Design & User Experience perspective and will be keeping it very high level.
I will focus on large, content heavy, commercial projects, since small personal blogs or portfolios aren't so much of a big deal in this discussion and they don't serve as "best practice" examples, as is often misunderstood.
Treat it right
Responsive Web Design is a good thing, it's evolving, but it is still in its infancy. Our industry tends to hype up certain tools & techniques which is simultaneously both good and bad. It's good because it raises awareness and helps drive and define new standards. It's bad because we're getting hung up on these tools & techniques, forgetting WHY we are actually doing this, which brings me to my next point:
Be a designer
Be a designer who thinks first. Be a designer who creates real solutions for real people. Don't be a web stylist or developer who puts trends, tools & techniques over people and their needs. We need to stop thinking about pixels, grids & media queries as solutions to solve the bigger problem. We have way too many designers & developers right now who are living in a bubble — And I totally understand why — It's warm & cozy in here and we can easily get the recognition we want by showing off some fancy browser scaling shit (no offence). A designer should ask the question WHY in the first place, and not only once. There's a reason why we're doing RWD and more recently this reason has become shrouded by the content that we have arrived at a fully baked solution.
When a client asks for RWD, he usually has no idea what he's actually talking about. And this isn't necessarily a bad thing. Essentially he simply wants his service to work across a wide range of devices/viewports. That's it. It is our job to figure out how to approach the problem the right way and educate them in the process.
It's the same conversation we were having a few years ago when clients jumped on the "I need a iPhone app" bandwagon. It's our responsibility to educate them and tell them what they really need. We still have those conversations around RWD, Native Apps, WebGL, HTML5 etc. Let's be the ones who know our shit instead of just spreading buzzwords and hiding behind photoshop or a code editor.
Know your audience & goals
Whenever we talk about making an online experience accessible across a wide range of devices, we should dig a little deeper to find out who our target audience actually is. Building a responsive website just for the sake of building a responsive website is completely unnecessary. It will take a lot of time, cost a lot of money and will (if not planned correctly) negatively affect the relationship you have with your client due to false expectations.
A good mobile experience requires a design that has been specifically designed for mobile usage. The same is true of desktop experiences. Users on smartphones are using a website differently than they would on their desktop computers. They're even using it differently on their tablets. Knowing exactly what they are looking for on all these different devices is what we should find out first and then design around it. And I'm not talking about visual design. I'm talking about the content, the features we provide and how they can adapt and change depending on the context.
To the point
1. Content heavy and feature rich websites need more attention than just a responsive solution can offer. User needs and behaviours change depending on the device, so the content should always come first. Repositioning content & layout just doesn't cut it.
I would like to quote my friend JP Gary here who has another good point:
"...considering that the whole movement behind RWD was a response for sites to work on mobile devices (smaller screens), it does not really take into account mobile device limits, and you mention space/resolution, but download speed, and loading all the same junk as the main site is a huge disadvantage to a large complex site. "
"...most RWDs do cut away at the nav or image resolutions… but you are still loading the same amount of scripts and style sheets (if not a 'mobile.css' EXTRA style sheet). Sometimes RWD can lead to a worse even less optimized mobile experience then if there were just two separate builds."
So basically in most cases users get a much more rich experience from a well designed mobile website than a full downscaled site or responsive solution. (and of course we know that this isn't alway a decision we can make because of budget, time etc.)
3. In some cases, cutting content & features for the mobile experience may work, but users usually still want to be able to access the full site, and thus, there should always be an option to access it on a mobile device.
4. A lot of examples of RWD actually impact the user experience, providing an inconsistent desktop experience. When we scale the browser, the layout changes, content changes and the hierarchy isn't the same anymore. This is more confusing than helpful. Let's continue to experiment and push the boundaries, but we need to think a little more when a client next screams "...and it needs to be responsive". Everything we do should be well designed and thought through. Right now RWD feels more like a bandaid trying to kill two birds with one stone.
Let's keep on experimenting and pushing, but we need to think a little bit more next time when a client screams "...and it needs to be responsive". Who ever said "everything you do should be responsive" isn't exactly right. But everything we do should be well designed and thought through of course. Right now RWD feels more like a bandaid trying to kill two birds with one stone.
We largely neglect the initial user research — We fall into our old comfortable habits of starting with UX (however you want to define the UX part in your company/structure) without actually consulting the user or doing any research. This is the first mistake IMO and impacts the success of the project moving forward — This is at the epicentre of successful UX, not wireframes, or grey boxes with a slightly different navigation etc.
Since this topic is endless, I would like to write more about it in a second blogpost where I will focus more on actual examples. I had a hard time to include it in this blogpost since I just wanted to make you/us think a bit more about this topic instead of trying to cover every single potential project situation.
And to quote JP Gary once again:
"This is one of those discussions where I think everyone has an opinion. And that is the problem, or good thing, RWD is as much of an opinion as any other design choice."
Thank you so much to my friends Matthew Wagerfield (Senior Developer @Fi ) for adding some more fancy words to this blogpost as well as JP Gary (Tech Design Director @ThomsonReuters) for enhancing my post with your personal opinion & feedback from a more large scale tech perspective.
I would like to keep this conversation going on twitter and hope to see you again in my second Part of this blogpost.