Editor’s Note: When designing for mobile, the first question that usually comes to mind is whether a mobile-specific version should be built based on the desktop version or if the original site can be created so that it can adapt to use on various mobile devices. In this excerpt from his new book Mobile Web Designer’s Idea Book, web design expert Patrick McNeil offers insights into the differences between mobile-specific design and responsive design.
Responsive Design or Mobile-Specific?
The goal of mobile design is to cater to mobile users. The means to do so vary. Let’s discuss three primary ways to accomplish this: mobile-specific, responsive design and fluid design. At the simplest level, a site either adapts in some way to the user’s environment, or the user is directed to a version of the site that is designed specifically for a mobile device. Historically speaking, most sites that wanted to address mobile used a separate URL and had a 100% mobile-specific interface. We still find that this is a popular approach in certain cases. On the other hand, the whole responsive web design revolution encompasses the very simple idea of adapting the site to fit and function properly in any environment.
With this approach, site owners maintain separate versions of a website. One is intended for the standard desktop user and another for mobile users (typically phone-based). This technique is popular for several reasons. First, it makes building and testing each site a bit easier. When adjustments are made to the desktop version, you are comfortable knowing that you aren’t messing up the mobile version and therefore don’t have to retest it as well.
One huge benefit to this approach is that you can cater the content, site structure and entire mission of the site to fit the usage of the site. This means that each can be optimized to fit the separate and unique goals of each environment. We may assume users looking at our site on a phone want the same thing as desktop user sitting in a cubicle, but is this accurate? I can think of numerous cases where I expect very different things.
A perfect demonstration of this is the 280daily website. The desktop version (figure 1) of this site works to sell the product. It gives you information on what it does and enables you to sign up. In contrast, the mobile-specific version (figure 2) focuses primarily on allowing you to log in and use the application. In this environment, the goals are reversed and converting new users takes the backseat.
Next, I want to highlight responsive web design as a technique for adapting to mobile users. Before diving in, let’s clear up some terminology. In the early days of responsive design we actually had two separate approaches: One was called Responsive Design, the other Adaptive Design. Early on, responsive design was thought of as fully fluid layouts that flex to fit the available space. In contrast, adaptive layouts were those that use multiple fixed-width designs in order to optimize the interface for various device sizes.
At this point, most of the industry refers to both of these as responsive design and the term adaptive design seems to be falling out of usage. At times adaptive and responsive are interchangeable. For now let’s consider a responsive site to be based on a fluid design, a series of fixed width layouts or some combination of both. (You will note as well that the next section is based entirely on fluid designs.)
Okay, enough with the semantics of all this: Let’s take a look at some inspiring examples.
I love the United Pixelworkers website for so many reasons, and I especially love their approach to responsive design (figures 1, 2 and 3 below). This modular design lends itself naturally to being responsive. The block-based elements don’t interconnect in any way, making them easy to mash around and style for any screen size. This sort of approach is popular in the world of responsive design, if only for the practicalities associated with it.
Finally, I want to look at some sites entirely based on a fluid approach. As I mentioned earlier, fluid sites are a subset of responsive design. I have chosen to highlight this subset here, as designing a fluid site is a rather difficult task. The following sites do a particularly good job of dealing with some common issues.
One of my favorite examples is the personal site of Javier Lo (figure 1). This site has almost no structural design elements. There are some horizontal lines separating elements, but for the most part, it is simply a typographic site. As such, it is well suited to a fluid approach. You will no doubt notice that the design doesn’t just scale to fit the space, it also adapts along the way. Load these sites up in a web browser and then resize the browser to see this in action. For example, note how the layout of the header region with the logo and navigation changes once the size gets to a specific breakpoint. It snaps to a center-aligned approach. Finally, you will perhaps notice that the layout has a maximum width. Just because a design is fluid doesn’t mean it has to size up infinitely. If this site could do so, it would grow to widths that would make the content painful to read. By maxing out the width at some point, the designer is able to ensure the content is easy to read.
|Looking for even more inspiring examples of mobile web design or ready to get started tackling your own responsive site? Check out these two resources below now!|
|Patrick McNeil’s Mobile Web Designer’s Idea Book, available now in our official online store, MyDesignShop.com.|
|And be sure to pick up up our exclusive January Collection on Responsive Web Design with WordPress. It’s a $311.97 value for just $99! But hurry, because only 75 are available at this great price!|