What comes to mind when you hear the phrase, “responsive website”? If you’re anything like me, you might be picturing some sort of computer/robot hybrid that can talk back to you like a human. As cool (or creepy) as that would be, having a responsive website doesn’t actually have anything to do with R2D2 or C3PO. It is, however, a necessity for a successful site.
So What the Heck is a Responsive Website?
A responsive website is simply a site that automatically adapts to fit whatever device the viewer is using. Have you ever visited a website on your phone and found that it only displayed half of the page? Or that the fonts were a weird mixture of sizes? Or maybe you’ve tried to use a website on an iPad and discovered that it only works on a PC. Most likely, these issues were because the website was not designed to be responsive.
Not only do responsive websites adapt to different devices, but they also take into account other factors in the user’s environment and behavior such as the screen size and orientation, which browser they are using, and the size of their browser window. A responsive website can automatically adjust image and text size or rearrange the entire layout of the page in seconds.
How Does it Work?
Responsive websites use a system of fluid grids that work in multiple configurations. With a traditional layout, elements are fixed-widths determined by a rigid number of pixels. A fluid grid sizes elements in relation to one another. So using a traditional layout, if you shrink your browser window down from 900 pixels to 300 pixels, only 1/3 of the elements would show. Using a fluid grid however, none of the elements would be left out. Instead, each of the elements would automatically shrink down to fit the page.
Web developers often use CSS media queries to gather the information needed to automatically adjust the image size, resolution, and page scripts from one device to another. The query creates a series of conditions that, if met, will trigger a specific style. For example, if the browser falls between 320 px and 480 px, it would automatically apply the CSS style that changes the layout from two columns to one.
If you are really interested in the nitty gritty of how it all works, you can check out this article by Ethan Marcotte, the original developer of responsive web design.
Why Does It Matter if My Site is Responsive?
It’s obvious that creating a site that only works on some devices and not others limits your reach. The alternative to a responsive website is building entirely separate sites that are compatible with each platform. Instead of building one site, you have to build three (or more). Then, every update you make to your site has to be made on each site individually. This can get both tedious and expensive.
The bottom line is that consumers are impatient. If your site isn’t easy to use on the first try, chances are they will look elsewhere.
How Do I Create a Responsive Website?
As more developers and companies recognize the importance of responsive websites, some are offering online tutorials to walk you through the process.
If you aren’t so keen on learning the ins-and-outs of media queries and fluid grids, you can leave the dirty work to us! Den Web Design optimizes each of our sites so that they will work perfectly on any device without you having to think twice about it. A responsive website may not be quite as cool as having your own droid, but it comes pretty darn close!