The term "responsive design" has gathered a lot of well-deserved buzz among Web designers. As you probably know, it refers to an easy way to dynamically customize interfaces for different devices and to serve them all from the same website, with no need for a separate mobile domain.
It solves one major problem, and very elegantly: how to adapt visual interfaces for mobile, tablet and desktop browsers. But when unifying a website, you have to solve problems other than how it will appear in different browsers, which could make the task much more difficult than you first realize. A solid design has to account for differences in interaction when using mouse pointers and when using touch gestures, as well as the bandwidth constraints on mobile users.
You might also have to restructure content according to how much information it makes sense to present on each screen. And the new breed of mobile Web apps that leverage HTML5's offline capabilities might have to be built much differently than conventional desktop websites. Hopefully, after considering these problems, you should be able to implement a responsive website that is suitable for all devices; but you'll need a fallback plan if that's not possible.
You might decide to target your responsive
design more narrowly as a hybrid for smartphones and tablets, keeping it
separate from the desktop interface. For those of you who opt for this route,
the remainder of the article will explore ways to better integrate the
different websites, or Web apps, and how to make it easier for users to learn
about the appropriate interface, get to it and stay there.
A Responsive Design For Mobile And Tablet
The single-column mobile interface transforms into a multi-column interface more suitable for tablets, with a richer set of navigation options appearing at the top of the screen. While the multi-column interface is a bit more complex, it's still cleaner and less cluttered than most desktop-facing websites. Most responsive websites rely on CSS media queries that reference screen widths, but they can also respond to specific browser features and exhibit fallback behavior that "progressively enhances" an interface.
Why Desktop Is Different
The adaptive interfaces are a healthy development, one that could lead to uncluttered desktop interfaces in the future. Still, there may be times when mobile or tablet interfaces should feature a different set of content than for desktop browsers. A desktop page also features a much richer set of navigation options, especially up in the banner. On many desktop websites, users have drop-down menus to access nested categories in a single move. Desktop websites can also rely more heavily on navigation driven by search, which is more difficult to manage with virtual keyboards.
Mobile Web Apps Vs. Mobile Websites
Using media queries to adapt an interface is a powerful technique, but we must recognize how superficial it is. It does little to address the particular needs of cached mobile Web apps, which could be built much differently than conventional websites.
Web apps are becoming popular because they offer developers a cross-device alternative to native application platforms. Most features of native apps can be implemented as browser-based apps, executing on the client as if the app had been formally "installed" from an app store. Web apps can be accessed on most platforms using icons on the home screen, and they might be set to hide browser controls in order to take total control of the interface. Once a Web app is saved to the home screen, there may be nothing to indicate that it is being implemented as a Web page.
Conclusion
This article asks whether your desktop and mobile interfaces really belong together and whether they should work as a single client-adapted website. This question has no single answer, but asking it is important.
But your goal, as a developer with a vision of a unified design and an appreciation of technical elegance, should be to be able to answer yes, having dealt with those issues. Just don't focus too much on visual design to the neglect of variations in interaction design, information design and underlying deployment. As Disual, we can help you to get the answer as yes. Please contact us and built a responsive website.