Responsive design is one of those things that everyone knows they need, but not everyone has a clear understanding of. As prevalent as this design trend is, I still occasionally meet people who ask me what I mean when I say that every site I design and develop is responsive, or whose idea of what responsive design is doesn’t quite hit the mark.
So let’s take a quick look at responsive design, what exactly it means, and why it’s so dang important. You may feel like you’ll already know everything I’m about to say, but it can’t hurt to cover some basics, and you might even learn a thing or two along the way!
So What Is It, Already!?
Simply put, responsive design is the practice of designing and building a website so that it “responds” to any device or screen you throw at it. The end result is a site that looks good and performs well anywhere. If you want to check to see if a site is responsive or not, one quick way is to grab the edge of your browser window and drag it horizontally back and forth. Does the content respond to the size of the window as you drag it? Then the site is (at least somewhat) responsive. You can also try entering the site at ami.responsivedesign.is, which will show you a live preview of the site at various different screen sizes.
How is responsive design achieved? Using a combination of flexible grids, multiple layouts, CSS media queries and optimized images. Flexible grids allow the content to adapt fluidly to the width of the screen, and to reorder content into multiple layout variations based on which best fits the available screen real-estate. CSS media-queries allow you to set the rules for how each element of a design should behave at any specific screen dimension and optimized images allow you to serve large images to large screens and small images to small screens to ensure that the user is loading the smallest possible image version necessary for their device.
What Isn’t Responsive Design?
One of the biggest areas of confusion when it comes to responsive design is whether a mobile-friendly site (a separate version of a site whose sole purpose is to be served to mobile devices) constitutes as responsive design. It does not! Mobile-friendly sites were an early solution to the problem of viewing websites on mobile devices, but have since been supplanted by responsive design as the standard solution. This is mostly because mobile-friendly sites have a number of drawbacks, the primary one being that mobile-friendly sites create duplicate content which then competes with your primary site in search engine results. That’s a pretty big no-no!
What Are The Benefits?
Besides just making sure your site looks good on any screen, there are a number of other benefits to having a responsively designed site:
Better Usability — If your site isn’t responsive, and mobile users are forced to use the desktop version on their tiny devices, it’s highly likely that it is very difficult to interact with it. A responsive site puts usability in the forefront, making sure that every interaction is as smooth as possible for the context within which it is taken.
Decreased Bounce Rates and Increased SEO — Better usability leads to a decrease in how quickly your visitors click away from your site (the bounce rate). This is great for you and your content, and since the search engines are paying pretty close attention to bounce rate, it means a boost in their rankings as well.
Faster Page Load — Another thing that search engines pay attention to is the speed at which your pages load. Since responsive sites are built to only serve content and images optimized for the screen they are shown on, they usually load faster than their unresponsive brethren. Booya, another SEO boost!
And there you have it! Now you know exactly what responsive design is, and why it’s so important to modern web design. If you’d like your new website to be responsive, feel free to give me a shout, and we can get the ball rolling.