Text Overflow

The Caiman Web Design Blog

What Is Responsive Web Design and Why Do You Need It?

Do you remember what it was like to visit a website in 2006? It meant sitting down at your computer desk or opening your laptop, firing up a web browser (probably Internet Explorer) on your big monitor, and using your mouse to click through the site’s menus and navigate from page to page. No smarthphones, no tablets. This “sit and click around on a big screen” approach was the typical experience for users, thus it was the experience around which web designer and developers crafted their sites.

This desktop-centered world came crashing down in 2007 when a little company called Apple released the iPhone. The instant popularity of the device – which was more like a small computer than a phone – meant the start of a new era for personal computing. Android-based smarthphones came soon after, and before we could even blink, the World Wide Web became a thing we carried around in our pockets.

The Problem

This drastic paradigm shift was really cool, especially for tech lovers, but it created some pretty big problems for web designers. Websites that looked great on monitors looked cramped on 3-5″ displays. Buttons were difficult to click, it was a struggle to target the correct menu items, and filling out forms was an absolute nightmare. Not to mention the zooming that was required to read the small text on most pages. Tablet devices gained popularity around 2010, and although they were marginally easier to view websites on, they were far from perfect. To say mobile devices weren’t friendly to the web is an understatement.

The Solution

As the popularity of mobile devices grew, it became increasingly obvious to web developers that we needed to start viewing site design in a totally different light. It was time to stop ignoring the issue of mobile ubiquity. But we didn’t know where to start. Luckily, the solution manifested in 2010 when Ethan Marcotte wrote the article titled “Responsive Web Design”. In it Ethan explained the concepts behind responsive web design (RWD) and how it makes the web a mobile-friendly place. It all made a lot of sense. The web development community let out a collective sigh of relief, and the way we made websites was instantly and inexorably changed.

So What Exactly Is Responsive Web Design?

In a nutshell, RWD is the ability for a website or web application to provide a great user experience regardless of the screen size or capabilities of the device being used. The idea is that a user of a mobile device will receive an experience equally as good as, albeit different from, that of a desktop user. Additionally, the precepts of RWD require your website to adjust itself based on the width of the device in use, rather than on a set of pre-defined device widths. For example, a website designed responsively doesn’t know that you’re using the iPhone 6 Plus. All it knows is that your screen is 414 pixels wide. Your screen could have been 600 pixels wide, 328 pixels wide, or 415 pixels wide and the website will respond accordingly. A responsively designed website is device-agnostic.

An Example

Let’s look at a real example of what it means for a website to “respond” to the screen size. Here’s a screenshot of Caiman Web Design’s recent House Packard LLC project. This is how the website appears on a 1366×768 desktop monitor (1,366 pixels wide):

House Packard LLC Desktop View
House Packard LLC as viewed on a desktop monitor

And here’s the same website viewed on a Samsung Galaxy S4 (which is 360 pixels wide):

House Packard LLC Mobile View
House Packard LLC as viewed on a Samsung Galaxy smarthphone

The navigation items have become condensed into a single menu icon which can be tapped to reveal the full menu. Similarly, the phone number and contact link have become space-saving icons. The three colored information blocks have been relocated underneath the large image, they’re stacked on top of each other, and they take up 100% of the screen width. The page has an overall narrower, more vertical layout, which provides a much better user experience on smaller screens.

The key point to understand is that this is the exact same website as the desktop view. It’s not a “mobile version” being loaded conditionally based on the user’s device. You’ll believe me when you see what happens when I adjust the width of my browser window as I’m viewing the site. The website instantly transforms itself right before your eyes:

House Packard LLC Responsive Demonstration
The mobile view snaps into place when the browser is narrow enough

If you’re ever curious if a website you’re looking at is responsive or not, this is a great litmus test.

How Is This Magic Accomplished?

There are two major techniques for making a site behave this way: fluid widths and media queries. Fluid widths are pretty easy to grasp. Say I have a big green rectangle on my web page. I have two choices of how to determine its width; I can give it a static hard-coded number, like 225px; or I can set its width with a relative unit such as percentage. In HTML and CSS, an element that’s 100% wide will be as wide as its containing element. Assuming the rectangle’s container is also set with relative units (or has no containing element at all), the width of the rectangle will change dynamically as the width of the screen changes. This is fluidity.

The second key ingredient are media queries. More specifically, CSS media query breakpoints. Remember in the House Packard LLC screenshot above how the menu items instantly disappeared at a specific point? That’s accomplished with media query breakpoints. The CSS might look something like this:

CSS
@media (max-width: 765px) {
    .main-navigation{
        display: none;
    }
    .mobile-navigation{
        display: block;
    }
}

Notice the “max-width: 765px”. That’s the CSS that tells the browser to do something when the width of the window is at 765px or lower. If the screen of the device meets this condition (or if the browser window is reduced down to that point), the code inside the media query instantly fires. You could also use “min-width” to target widths at or above a particular value. In fact there are a whole bunch of helpful media query properties at our disposal.

More Than Just Screen Width

You may have noticed that when I defined RWD earlier, I mentioned not only the screen size as a factor, but also the capabilities of the device being used. This is important. When you browse the web on your desktop or laptop, chances are you’re using a pretty snappy broadband connection. Loading those huge home page images are no big deal. But imagine using your smarthphone on the bus or in the park where Wi-Fi isn’t available and you’re stuck with 4G or even 3G. Now those enormous images take a long time to load and become an annoyance. Not to mention they eat away at your precious mobile data.

RWD helps mitigate this type of problem. Thinking responsively, the web developer can load images of different sizes depending on the device in use. Smaller screens might get smaller images, or server-side code can detect which device is being used and load the appropriately-sized image. Images aren’t the only potential problem, but this exemplifies the responsive mindset that good developers try to align with.

Whether it’s altering layout, helping pages load quickly, or sparing the user’s bandwidth, responsive web design means creating the best experience possible no matter what device is being used.

Google Just Made RWD Even More Important

As if the reasons to make your website responsive weren’t already compelling enough, Google has begun penalizing websites that aren’t mobile-friendly. This means that non-responsive sites won’t rank as high (or won’t show up at all) in Google searches performed on mobile devices. If this isn’t a good enough reason to demand responsiveness for your website, I don’t know what is.

This Is Just How We Make Websites Now

In the past, even as recently as a couple of years ago, mobile-friendliness was considered optional – an extra feature that might be nice if your budget allowed for it. Those days are long gone. Now that more people use mobile devices than PCs to browse the web, it’s become clear that we need to drop our static mindset and begin thinking of the web as a fluid canvas. Google’s announcement was essentially the last nail in the coffin. RWD is simply the way we make websites now. It shouldn’t be a special feature, it should be the default. Every single website created in 2015 and beyond should be responsively designed. It’s the way Caiman Web Design does it, and it’s the way you should be thinking about it too.

Share On
facebooktwittergoogle_plusredditpinterestlinkedin