In 2014, more people will be using mobile devices to access the internet and mobile devices have become a priority for web developers. The web of today is complex and has already round about 14 billion indexed web pages worldwide.
Responsive design is seemingly accepted
Aside from the technical, stylistic, and resource considerations that inform the decision for/against responsive web design, I’d offer up another factor that is often overlooked.
Wikipedia:
Responsive Web Design essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries…with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.
But what is it exactly and why would you need the same functionallity on your phone when your fingers barely fit onto the keys of the board? I assume there are different parameters, which have to be considered for different types of applications.
Responsive Web Design
What do we mean by that?
User behavior is going to differ depending on the context in which they’re visiting a site, and that will reflect that user’s intent and expectations. Most users have a reason to be surfing the web on their smartphones or tablets – it may be to kill time while waiting in line, it may be immediate need for information, or it could even be to complete a last minute task. Their needs when accessing a mobile site is not going to be the same as when they’re sitting at their desk or on their couch with a laptop.
So, depending on what the user needs and what the site owner wants them to do, the designer may need to offer up different content or functionality with respect to platform.
The benefits are obvious to many. Because sites can be designed once and reformatted, responsive web design eliminates the need to maintain multiple sites, which can sometimes decrease dramatically the costs of going mobile. Responsive web design also makes content available on a single URL, which some SEOs cite as a solution to a duplicate content problem.
Type of content in question?
A lot of the best examples of responsive web design are from online publishers, such as Mashable, where the primary function of the site revolves around the delivery and consumption of content. In terms of mobile experience, this won’t change much – the user will want to be able to access site content on the go, or they may be opening a socially shared link off of Facebook or Twitter. Mashable, in this case, would just want to keep their mobile users engaged with their content so that they keep coming back (ultimately to serve ads to them). RWD fills this need perfectly.
Quora – while users are consuming content on the site, we can assume that Quora wants them to actively create quality content as well. The main sections of the mobile app are the feed, notifications, and the search/ask bar. That puts to main focus to read questions and answers in the feed, and ask questions as they come up.
Quora is a question-and-answer website created, edited and organized by its community of users.
Contrast this to the website and you can see while the central focus is still on the feed, there is a lot more emphasis on writing answers than in the mobile app. The answer tools are much better on the website than in the mobile site or mobile app, and are much more conducive to longer, well-structured answers.
In Real Life
Not all websites revolve solely around online content. Many large websites also have brick-and-mortar operations that they are supporting, and these are usually much better served by separate sites or apps than Responsive Web Design.
Some blogs are developed unsing the twitter bootstrap theme. If you visit one such blog that has been developed with a responsive design, that sidebar will almost definitely disappear. It may be re-jigged and moved to the top or bottom of the page, but one thing is for sure — it will not be where you were expecting it.
This my blog for instance
I am constantly working on CRUD applications with backbone.js and twitter’s bootstrap. Most of the mobile apps are build using this blog as design template. However, this blog also delivers content that should be readable on your PC, tablet and mobile phone. I thought that this template should apply some of the famous Facebook features that will be shown in the next few images.
BrowserStudios build for mobile 1024x800px
BrowserStudios 786x1024px
- Desktop visitor: lots of functionality for CRUD application development.
- Mobile site visitor: pared down functionality – users can read and post context and web apps can be tested.
- Mobile app visitor: pared down functionality – users can read and post context and web apps can be tested.
Other examples
One example is the mobile vs. web experience of Yelp.com, where you have a website, separate mobile site (http://m.yelp.com), and a mobile app:
San Francisco User Reviews and Recommendations of Top Restaurants, Shopping, Nightlife, Entertainment, Services and More
- Desktop visitor: lots of functionality to find restaurants, post reviews and interact with other users.
- Mobile site visitor: pared down functionality – users can find restaurants, get directions and phone numbers, and read read reviews. However, mobile site visitors can’t post reviews.
- Mobile app visitor: added functionality – in addition to what they can do on the mobile site, users can also check-in, take photos, and interact with other users. But get this – they still can’t post reviews. They can add tips, highlights, and candraft reviews, but only full-site visitors can post reviews.
Or take large brick-and-mortar/e-commerce hybrid retailers (http://www.walmart.com, http://www.bestbuy.com, etc.) – users will often look for reviews and compare prices while show-rooming an item in a physical store, or they might be more interested in a store locator or be looking for an item in-stock than in online delivery.
Regarding Speed of Development
Regarding time, from my experience, development often takes more time than you estimate when you start. Although a task may seem relatively simple when you think about it, during development you realize every aspect that it involves, you realize that there are things that you did not think of, that it is a bit more complicated and that takes more time than you anticipated.
Companies – Responsive Web Design or Mobile Device
Facebook and Twitter have been around for some years and developed their apps accordingly. It is hard for established services to make fundamental changes to their design, especially when supporting so many people. Big companies tend to make small, incremental changes rather than big ones. If a new company was established now, they would give responsive design a serious consideration. So, small, gradual changes would be better for established services.
Also, you could argue that a specialized app for a device, such as the iPhone is better than a responsive site design, because the design of it was focused for that particular device. So, for example, if an iPhone app exists already, that app is better than making a site responsive because the app was designed specifically for the iPhone. So an argument would be that if you already have a specialized device for a platform, why go through the trouble and risk of changing your site. If another platform appears, such as Android, why risk changing the design of your site, changing the iPhone app to make something that works on all 3 platforms, when you can simply just make an app for Android? Again, it all depends on your application.
I am not sure which approach is better, having a responsive site that works on all platforms or having specialized apps based on the platform but as responsive design gets more popular, we will have more experience and better understanding with it and eventually we will realize that either responsive design is a good approach and more and more services start implementing it or that it doesn’t work so well and it will start losing its popularity. This realization will come with time and it will come from our experience with implementing and using it.
Mark Zuckerberg recently declared that trying to code Facebook in HTML5 was a failure, and therefore decided to code a native application for each devices. Some HTML5 lovers answer to this affront by coding an facebook mobile in HTML5/CSS/JS/etc: it is called Fastbook. Checkmate. The application is fluid and powerfull, plus some extra features.
A lot of major websites (or websites for major organisations) are big. And the content management systems running these websites can be unweildy and difficult to work with. To retrospectively apply responsive web design techniques to these websites can be a massive job and isn’t something to be taken lightly.
They’ll also be carefully weighing up arguments against responsive web design, including the notion that many users get confused and lose trust in a website if it looks totally different on their mobile phone than on their PC. They might be waiting until a number of other major companies and websites successfully adopt responsive web design techniques before they decide it’s safe to take the plunge.
Responsive Web Design is worth it
If you’ve read everything I’ve written so far, I’ve hopefully got across two key points:
- Responsive design is a compromise. It is a subjective decision by the designer that the desktop display will not be optimal on mobile devices, followed up by a subjective decision as to what will be.
- Responsive Web Design is about making your site adaptable to any scenario, without worrying about specific devices and their proprietary dimensions.
- Responsive Web Design doesn’t need to take more time and therefore doesn’t need to cost your clients more money. At least not after you’ve rethought your approach to web design, anyway.
Understanding user needs, goals, and behaviors is crucial to executing a successful site/app/software/system. We can’t neglect the user experience in favor of a shiny new product that is, admittedly, very cool. Instead, we should figure out how to make that shiny new product even cooler by integrating it with the user experience.
As someone who has done a tonne of research and heard many arguments for and against responsive web design techniques, I believe responsive web design is the correct approach for most websites, but it will take time for these larger websites and more conservative organisations to adopt this approach.