The good news is that, nothing is really different from what we designers have had to deal with since the beginning of the Web. In this case, the technology has just improved and made it easier for us to deal with these variations.

 The first step in developing a responsive website (and one that can take place during your early discussions with your client) is determining which device(s) you’re designing for. Will this website benefit from being mobile-phone friendly? The argument can be made that any website benefits from being mobile-friendly. For example, if you have a mobile-friendly shopping site, people will buy when they’re on the go. If you have a mobile-friendly news site, people will read it when they’re commuting to and from work. And if you have a mobile-friendly event-registration website, people will be able to sign up for your event anytime and anyplace!

 We might be going overboard here; but honestly, you should think about whether there’s any benefit to making your website iPhone and Android-compatible. Are tourists likely to reference your site while on vacation? It’s far more likely that they’ll be looking for local information using a mobile device than a desktop computer. Also, think about the scenarios where you use a mobile device; does this business/organization/ individual’s website fit into one of those scenarios. If you reach an impasse here and just can’t decide, do a quick estimation of how much added time “going responsive” will take and present your client with a dollar figure. How long will it take to recoup that cost based on the perceived benefits of a mobile site? 

Using the prior power company example, the financial benefit of a mobile site lies in the savings achieved by not having to have as large a call center answering calls that revolve around, “When will my power be back on?” Instead, folks can access that information themselves online. It’s not hard to appreciate that such a website would pay for itself pretty quickly.

Responsive Design 

Responsive design is a new name for an old concept. The term responsive used to be applied mainly when talking about a website’s speed (i.e., if a website was fast, it had a good response time). Lately, the term has been co-opted for a different purpose. A responsive website now refers to a website that responds to its viewport. It used to be that web designers had to concern themselves only with a minimum screen resolution of 640 pixels by 480 pixels and a maximum resolution of 1280 by 1024 pixels. Two factors have led to both the floor being dropped and the ceiling being raised. First, the sharp rise in mobile and tablet devices used to access the web has dropped the floor all the way down to 240 by 320 pixels. Second, a sharp increase in screen resolutions coupled with the introduction of widescreen monitors has raised the resolution ceiling to 2560 by 1440 pixels (and possibly even larger than that). How are we expected to produce a website that looks good given such a range of devices?

Other considerations 

Screen size isn’t the only limitation of a mobile device, however; bandwidth is also a concern. Despite the rapid pace of development in cell phone networks, they do still lag behind the fastest home and business connections available. Compound this with the issue of coverage being inconsistent in all areas, and you could find that some visitors are having to view your website at speeds that are much lower than what you originally planned for (most websites aren’t designed with dial-up Internet access in mind these days). There are a few really simple things you can do with speed in mind: serve up alternate, smaller images for mobile devices or eliminate some images altogether. But we’re getting ahead of ourselves here!

What’s next? 

Making the decision early on in the process makes it easier on you, the developer, to produce a website that will work at a range of resolutions. You can opt to either design from the top down (highest resolution to lowest) or from the bottom up. We would argue that taking the bottom up approach is actually better because you’ve got the largest number of constraints in mind from the start. Unfortunately, decisions aren’t always made early on. We’re going to continue with our project from the previous chapters; the difference is that now we’ve made the decision to produce a website that works on the following: 

• desktop machines 
• tablet devices 
• mobile phones

Why bother? 

The first question worth asking is, “Should I even bother?” The very simple answer is that you may not have a choice. A lot of clients these days are asking that their websites work on an iPhone. You can go a couple of ways if that’s the case: build a responsive website, or duplicate your efforts and build two parallel websites for the exact same content. If that isn’t specified as a requirement, though, how do you decide whether a responsive website makes sense? Begin by putting yourself in your visitor’s shoes. Depending on the type of website you’re working on, it may not be worth the added trouble. Are people going to be accessing this site frequently when they’re on the go? What sort of actions will they need to take?

For certain sites, the decision is obvious: anything that’s related to travel and tourism would likely benefit from a mobile-friendly view. How much do you wish that your favorite restaurant would allow you to view its menu on your cell phone? Maybe it does, and that’s why it’s your favorite! Here’s another great example: where we live, there can be some really great windstorms in the winter, and the power goes out often. 

The local power company has a wonderful mobile-friendly (albeit not responsive) website that allows you to view the status of the power outage affecting your area and see when it estimates that it’ll have service restored. During an outage, not many folks will be able to power up their desktop computers and connect to the Internet, so a cell phone is their lifeline to the outside world. Now that we’ve (hopefully) made the case for building a responsive design, how do we go about taming this beast?