After reading this negative article on responsive design, I felt compelled to write a response.
Responsive Design (RWD) is something I have studied and thought through a lot over the last couple years. It is just one solution to a very complex issue that we face.
That complex issue is the endless sea of devices that are used to visit websites. You have cutting-edge phones that support the latest standards, and you also have old Blackberry’s that don’t have a full-fledged web browser – not to mention large smartphones, phablets and tablets.
Image credit: Brad Frost
What defines a “mobile” device?
One thing the author totally missed in the article is what defines a mobile device?
If you look at the picture describing our vast sea of devices, that is what I feel like when people start throwing around terms like “mobile”. What does that even mean (certainly not only 320 x 640)?
Does mobile refer to just a “standard” iPhone? What about the new 5 inch iPhone that might be coming out soon, or the Samsung Galaxy Note 2 (5.5″ screen size 720 x 1280 pixels ), or the Sony Xperia Z Ultra (6.4″ screen size 1920 x 1080 pixels), and how about the Kindle Fire (7″ screen size 600 x 1024 pixels)?
Photo Credit: T3
You can quickly begin see the problem of detecting by screen size. When do we switch to a tablet layout, or even a desktop layout?
If I were using a Sony Xperia, it would actually be served-up the desktop experience, even though my screen-size is only 6 inches!
Mobile website performance
The author does make a good point about performance.
However, the analogy of Flash to RWD is a terrible comparison. The only remote connection I see is that Flash was bloated and used a lot of system resources, and bad RWD is also bloated as well.
That is one of RWD’s biggest issue, but it can be done correctly, in a way that is friendly for slower connections – it just takes some thought and work.
The concept behind RWD is not flawed; the problem is that not many designers have taken the time to correctly implement it on their site. When done correctly, and considering our present state of devices/technology, RWD is really the best way to go.
One of the article’s commenters made a few helpful observations I want to touch on (see below)
Your first mistake is that you claim RWD is not the FUTURE of design and then use TODAY’S mobile internet speeds to justify it – even though you specifically remark how the average mobile internet connection speed is increasing and closing the gap between itself and desktop speed. By your own data, we can assume the trend will continue into the future until there is virtually no significant difference between broadband and mobile internet speeds. This means that the entire concern of file size will become a moot point in the future. Not to mention you’re completely ignoring the data that points to mobile users connecting through WiFi the majority of the time – meaning that even though they’re on a mobile device they still have access to broadband speeds.
Second here is this line: “He found that the web page size and load time results were nearly identical regardless of device or screen resolution being tested.” By your own admittance the LOAD TIMES are nearly identical. Meaning the mobile users don’t have to wait any longer than they would on a broadband connection. So tell me, what is your point with this entire section?
My edit: (I believe the author’s point is that with a m.dot site you can create a stripped-down version of the desktop site and make it load super fast).
In your Time and Money section you say responsive requires more resources than just building a single desktop site – but that’s not an apples-to-apples comparison. When you’re done with a RWD site, you have a desktop site, mobile site, tablet site, and widescreen site. Of course it will require more than just a desktop site. But would RWD take more resources than completing 4 different “m dot” variations of a site? Of course not. Yes – getting more requires you build more resources, but RWD is 100% more efficient than the process to build out 4 completely different sites.
Russell’s last point is good enough to repeat again: RWD is way more time-efficient for development than building 4 completely different sites. We don’t want to have a mobi.com, phab.com, tab.com, desk.com, tv.com, iWatch.com (next year), refridgerator.com (2 years), car.com, internetWall.com (5 years) etc.
I do agree that Responsive design is complex – but so is creating separate m.dot sites – not to mention creating separate apps for ios, android, windows etc.
Image credit: Idownloadblog.com
“m.dot” sites can have a poor user-experience
I’ve shared this example with fellow developers about “m.dot” mobile-websites. What happens if you are browsing a website on your phone, bookmark it in Chrome or Safari and then click on that synched bookmark later on your desktop… uh-oh, you are now looking at a very tiny mobile/half done experience on a huge desktop!
Or maybe you grab a link to send to your friend who then opens it on his phone… but it comes up with an alert asking if you want to use the mobile site. Now we have to wait another 5 seconds for the mobile version to load? Obviously, this can be solved to some degree with device detection, but again, what constitutes a switch from the m.dot to the “normal” desktop site?
Also, how are you going to decide what to cut from your normal desktop site for mobile users? What if someone was viewing a site on their laptop in the morning, and then visited it again while riding the train to work. Unfortunately to save on load time, you cut out the part of the site they were just using. They leave your site feeling very frustrated and possibly never coming back.
Brad Frost also had a great reply to this article that you should all take a few minutes to read.
After the article, Douglas posted an interesting comment on Brad’s article about endless scrolling:
What’s better, pinch in and out or scroll scroll scroll in one direction, impatiently, to find out if the content you need is somewhere in the scroll
A desktop view is perfectly suitable, and the pinch and zoom affordance is a better experience than linear scroll with no indication or way of knowing what content is going to be where.
What is intuitive about linear scrolling on a RWD site? If you don’t see what you need when landing on a page, you have to scroll scroll scroll, especially if you’ve been to the site on a desktop. Where is that sidebar you saw? Why is it half way down the long scroll, or at the bottom? Or is it even there. RWD offers no information to the user about where the desktop content might have been moved to. And to the first time visitor on mobile, it is essentially myopic, and induces only linear scrolling. That can’t be right, long term.
I don’t agree that desktop sites are easier to use than the “endless scroll” of responsive mobile websites, especially since many desktop sites are now endless one-pagers. But he does raise a good point: we do need to think about our mobile and tablet experience, and use new and innovative techniques to lay out the content in a super user-friendly way. There is so much more you can do on a touch screen that a static LCD monitor!
We need to think through some different use-cases and use some creative, user-friendly ways to flow users through the website – whether mobile or desktop. Especially considering the fact that lots of touch-screen desktops are beginning to enter the market.
Major “m.dot” problem: Multiple code-bases to manage
One of the main problems with creating a separate mobile “m.dot” website is that you now have 2 code bases to manage. Every time you change the content of a page, you now have to update that content in 2 or more places.
This can become a management nightmare very quickly!
This issue is not 100% solved with RWD, because in some instances we still only load certain content for mobile or desktop – but it is greatly reduced.
So as a user, all I need to do is upload one large photo for my event and the content management system will serve up the appropriate sized image depending on what device I am using.
For more on this topic, you may want to read this post about how responsive design is easier than separate websites.
You may also want to read how Google penalizes the SEO rankings of “m.dot” sites.
Remember, Good RWD = Good SEO rankings.
As you can see, there are many different use-cases and issues to take into consideration before you begin creating any sort of “non-desktop” website.
I am not going to make a hard and fast rule that RWD is the only way to ever build a site. Rather that in most cases, it is the best way to ensure a consistent experience for your site’s users.
If you need something more, like the bank app mentioned in the article, by all means develop an app – but you are still going to run into the problem of multiple OS’s to develop and support.
Web languages are really coming to a place where they are beginning to mirror/challenge the position of traditional programs/apps.
Responsive websites are just one step of helping us to get closer to the goal of building platform and device-size independent websites and apps.
Action item for the week
I always try to make these articles very practical and useful to fellow developer and designers.
This week, I am asking everyone who has created a separate m.dot or responsive website to post a comment on their preference and the reasons behind it. If you totally believe that separate mobile sites or even apps are better, I want to hear from you!