Responsive Web Design vs Adaptive Web Design

Earlier this week Hassan Bawab wrote a piece that appeared on titled Responsive vs Adaptive Website: Six Questions to Ask. He goes through his points, detailed below, comparing responsive web design to adaptive web design (also known as m.). Responsive web design is a single site using media queries and possibly a sprinkle of JavaScript to drive an experience appropriate for the screen size and pixel densities. Adaptive web design utilizes a phone or mobile specific web site and a desktop web site. The two web sites are completely different client applications, differentiated usually on the server by some sort of crude feature detection or expensive device database. A request for the desktop site from a phone is redirected to the m. version and visa versa.

Just over a year ago I was a fan of adaptive as the right solution. I had worked on several 'mobile' specific web applications over the previous years. But as I was winding up a mobile web project about a year ago, reflecting on the experience and my previous experiences I had to admit the adaptive approach was too broken to survive the long haul. The adaptive requires too much code maintenance and device detection and browser sniffing is not that easy to accomplish with the accuracy needed for success. I have several mobile devices and it is more and more evident how poor  server-side solutions really are. I get an improper mixture of mobile and desktop experiences far too often.

My main arguments against responsive design was performance and maintainability. It just felt wrong to co-mingle mobile and desktop in the same files. I was also concerned I would be sending way too much content to phones than they would actually use. Turns out I was wrong on both points.

I am going to respond to Hassan's points one at a time because in general I disagree with him across the board.

1.Do visitors interact with the site much differently on mobile versus desktop?

Here we agree, mobile users do use your client experience different than on the desktop. But I disagree that adaptive gives you the best solution. All applications must start with a mobile first approach. This means you clearly identify the most important piece of data and then rank everything else in importance. Make sure the important stuff is displayed on the smaller screen then as real estate expands content is added, in order of importance.

Luke Wroblewski coined the Mobile First approach in his book of the same title. In that book he references an XKCD cartoon about a university web site. The cartoon is a Venn diagram showing the content on the university's home page in one circle and the things visitors wanted on the home page. The only place they intersect is the university's name.

You laugh, but this is a very common problem, especially in larger companies. A company's home page is valuable real estate and everyone wants a piece. What happens more often than not is sales/marketing or advertising decides what is on the home view and they do not want to leave anyone out. In some organizations several hundred managers that believe their product is the most deserving product. The first impressions visitors get is overwhelming and often not what they want.  Mobile first helps you focus your resources on what customers really want. More often than not when I visit a company's mobile presence, on my phones I get a slow bulky web site, instead of a fast experience with access to what I want.

Responsive coding must be done mobile first. This means the default CSS rules are designed for small screens. Use media queries to adjust the rules as more screen is available. Also be cognizant of portrait-landscape modes. Defining CSS mobile first makes managing responsive design much easier. I say this from first hand experience and research.

Since both approaches give you a 'good' mobile experience Hassan is technically correct. Where he is wrong is defining what constitutes mobile, which I would assume he means phones. But is that really true anymore? He later references Google Glass as an upcoming mobile experience. That is not a phone, it is just a different experience, screen size, usage context. Ultimately the adaptive approach falls on its face. It simply cannot keep up because the adaptive approach makes too many assumptions. The user agent string does not tell you what the current view port size is. it does not tell you features available to the user, server-side detection guesses. I can have a 320 pixels wide browser view port on the desktop, but I don't hold the device or walk around with my monitor. Windows actually encourages you to use snap view for modern applications, which implies a split screen, yet adaptive assumes this is a desktop experience. The adaptive approach serves me a traditional fixed width site that just gets zoomed out as I snap or shrink the browser. The site is effectively unusable at that point.

Responsive Web 1  Adaptive Web 0

2.What is the primary age range of your average customer?

Really? Actually, yes this is important to know, but again Hassan claims adaptive design wins because it is faster and simpler. Both are demonstrably untrue. Responsive design is just as fast as adaptive, and I would argue faster because redirect is necessary. Redirects are deadly to mobile performance because they take an average of 700ms. Visitors start leaving sites at 1000ms, so every millisecond counts. A responsive design should have the same small screen design or experience in the adaptive solution. The experiences would be the same, just faster for responsive design.

Responsive Web 2  Adaptive Web 0

3.What is the average customer’s income level?

Huh? Do I care? Sure, more income means they should be inclined to spend more. He argues wealthier visitors will have better phones and devices, while poorer visitors will most likely be on cellular connections. Again responsive design wins. He uses the speed argument for mobile again, which he looses. All sites should be fast, period. Sadly most of you fail at this, so please go on a diet. He also argues about low income having lower quality devices. Seriously I see many low income smartphone owners and they have iPhones and Samsung Galaxies. Not shabby equipment. Again the responsive approach means you have a solid solution for all devices.

Responsive Web 3  Adaptive Web 0

4.Are a vast majority of mobile users clustered on two or three devices?

Yeah, iPhone and Samsung have the largest market share. I see more and more Windows Phones when I am out in public, not just at my Microsoft centric user groups or conferences. I saw several Windows hones at the movie theater this week. But again, I should not care too much about the device dispersion. I should not care about a user's screen size. I do care that in all screens I have a solution that is viable. I love this photo from the recent Breaking Development conference. Notice how many different devices the attendees had? There is a Leap Motion in the mix, I mean wow!

resonsive web design gives you a solution for every device

Responsive Web 4  Adaptive Web 0

5.Is your website’s content designed for sharing?

Honestly, his statement seems a little scattered. All content is shareable and you want your content shared. This really has nothing to do with adaptive or responsive.

6.Is the website design budget a big issue?

Responsive is cheaper, after several responsive projects this year I can say this with confidence. It is cheaper because you have a single solution to meet every possible scenario. At least that is the plan. I am not naive, you are going to miss some scenarios, the world is too fragmented to say you have 100% coverage. I never met a site that had 100% coverage even when we were 800x600.

Responsive Web 5  Adaptive Web 0

I used to say I am a mobile web developer. That is no longer true. I am a web developer (again). I develop a solution for as many screens and user stories as I can possibly imagine. I study my application's usage patterns and make adjustments. Responsive design empowers me to meet the modern end user scenarios the cheapest way with the higher performance and best experiences. There is no mobile, it died when phones started growing into tablets, tablets into phones and desktops into the Surface. Everything is mobile, screens are touchable, devices are more and more powerful. Browsers are radically different than they were just 2-3 years ago. Its not mobile web, its modern web today.

Share This Article With Your Friends!