What’s better, a responsive or dedicated site?
This is the kind of question that has been popping up in my inbox lately. It’s not surprising, considering responsive web design (RWD) is a hot topic right now.
Personally, I don’t like the adversarial context that RWD versus dedicated sites sets up. Both methods have their merits and a hybrid approach is definitely possible. I think before deciding on which approach is best, you have to answer some simple questions.
What’s the point? It sounds inane, but you have to ask yourself: What’s the fundamental reason that visitors will use my site? Don’t gloss over this question with something like, “Users are looking for information.” Deeply understanding what your visitors are doing should be the main driver for the experience and thus the site design.
Consider how the content relates, how visitors will navigate, communicate, etc. Ask yourself (or better yet some actual consumers): What is the first thing a user wants to do when he hits the site? What’s the second thing? Then what?
It doesn’t matter how quickly you developed it, how elegant the code is, or what cool tricks you’re using; if it doesn’t work for the visitor it’s a fail. This leads to the next question…
Are mobile and desktop users the same? To provide a good experience, you must acknowledge the “mobile-ness” of the visitor.
Many users, me included, expect a different experience from a mobile site than the desktop version.
It’s more than just a limitation in screen real estate, although that’s important. Often, visitors on a mobile device are following a different use case than the desktop user. They may be trying to find a store, share experiences or get more information on something they just saw. Geo-location, camera access, QRC readers, and gestures are part of the mobile experience, but not the desktop.
Consider also how they’ll use the site. Browsing information while in the comfort of one’s office is very different from standing in a department store while the kids have a meltdown because they’re sold out of this year’s hot toy.
Building a single site that has completely different uses is extremely difficult, even with RWD.
What about performance? This relates directly to usability. In its most basic configuration, an RWD site sends all of the content to every device. The device browser then displays the appropriate layout. This means that all of the HTML, JavaScript, images, etc., are pushed to every visitor regardless of whether they can use it.
Also, image resizing on the client side can be CPU and memory intensive—something that is in limited supply on most mobile devices. This can result in a long wait and a frustrated visitor. I’ve seen sites border on user abuse when accessed through 3G.
This is where approaches such as “mobile first” come in. This philosophy (pioneered by Luke Wroblewski) starts with the design for the most basic mobile experience. Additional functionality is added in optimized layers that enhance the foundation. When followed closely, this leads to a very satisfying experience; however, it requires a lot of careful planning and discipline. And in my opinion, it doesn’t address problems that arise when desktop and mobile use cases are different.
How will the site be built and maintained? Finally, let’s look at the creation and upkeep of the site. In my experience this is the first real consideration of a web development project, no matter how lofty the talk about visitor experience.
In theory, this is also where the biggest gain is realized from a RWD strategy. There is only one site to build and one set of content to maintain. This is can be true, but a site can get very complex when considering multiple display sizes, rotations, etc.
There’s a line of thought that RWD sites are cheaper, and this may be true for a new site. However, if the project is a retrofit of an existing site with lots of content, adding RWD gets tricky. This often leads to poor performing sites and bad mobile experiences (mobile first assumes you’re starting from scratch).
On the server side, dedicated sites may hold some additional advantages. Because there are two published instances it’s possible to manage the traffic at a more fine-grained level. One cluster can be set up for the desktop site and another for mobile. If you have a wide disparity in the number of visitors coming to one site you can allocate more resources to that area.
A hybrid approach. Okay, so it may sound like I’m anti-RWD. I’m really not—RWD can provide some very valuable tools for improving a website’s mobile experience. My point is that it is not a miracle cure. RWD brings its own issues and complexities that must be considered when developing a mobile strategy. At the same time, maintaining completely different websites with different content is just not practical.
Fortunately, it doesn’t have to be all or nothing. There is a middle ground, a way to have different but great mobile and desktop experiences and not have to maintain two sets of content. It’s a hybrid approach that can combine the best of both worlds.
The first thing to address is the different use cases between mobile and desktop users. This involves using separate templates that are created for each experience. Both sites are designed using RWD concepts to compensate for different screen sizes, resolutions and native features.
The mobile site is built to be useful for smartphone, as well as tablet users, and it must take into account how they will use the site. Using RWD allows us to have very different navigation styles depending on the size and layout of the screen. A separate design can also address performance issues that are specific to mobile.
The desktop site can be a very different experience. It can take advantage of higher bandwidth and capabilities that most mobile devices don’t have (e.g., more memory, local storage).
By using device detection and redirection features you can point both your mobile and desktop visitors to a single location. That means you don’t have to provide weird, mobile-only URLs.
So does that mean there are now two sets of content? No. The use of enterprise-grade web content management systems can help manage multiple sites by taking advantage of multisite rollout and content inheritance.
The majority of the content may be shared between the sites. Inheritance links the content across the sites so updates to one are rolled out to the other. Not all content needs to be inherited, so you can add additional features to either of the sites. This allows specific content when appropriate.
As a bonus, analytics can be tailored to each of the sites providing much more accurate data. It will let us improve each of the experiences without the risk of affecting the other.
As you can see, there are a lot of options. But some careful planning can yield great results and keep mobile visitors engaged with your content.
Michael Hodgson is senior product manager, Adobe Experience Manager, part of the Adobe Marketing Cloud, at Adobe Systems.
