What is Responsive Web Design?
Last updated February 26, 2018
With more and more capable devices being able to access your website, offering users the best way to show content on their device isn't as simple as it once was.
The latest trend is responsive design, which to oversimply things, is a group of technologies that allow a website to tweak various elements of its design based on the size of the device or the size of your users' browser window.
Responsive design was made popular using technologies originally included in Apple's original iPhone (including the meta viewport tag and CSS media queries).
We've come along way, baby
In the web's earlier days, the formula was pretty standard: you probably had a big navigation bar on the side or top of your site. If your site had enough content, the ubiquitous drop-down or flyout menu was the tool of choice.
As the web grew up and people's screen sizes got larger, we bumped up our layouts to match. We used to gauge analytics and say things like "well, the most common screen size was 15" but now it's 17" so we can use more of that screen real estate..." and build a bigger website.
What browsers are people using?
The truth is, it's nearly impossible to predict what size screen and browser someone is using now—there is simply no majority. Even on desktop screens, does everyone browse every website "maximized" to their full size? Probably not, especially on widescreen monitors where someone may have more than one window open at once.
The problem intensifies on smaller screens, like a smartphone. That big navigation bar doesn't work very well on mobile so we need present it in another way.
That 3 column layout with a sidebar? Teeny-tiny on your smartphone and just barely passible on a tablet. How about those big hero banners with marketing messages on them?
We're just scratching the surface. What happens when you have in-between devices like the iPhone X or 8 Plus, Samsung Galaxy Note, or Kindle Fire that aren't quite tablets but they're bigger than a typical phone?
Are you going to make separate websites for all those devices? (We'll give you a hint: no.)
Responsive Design to the Rescue
Responsive design was made popular by technologies included in Apple's iPhone and neatly solves all these problems:
- Websites respond to changes in screen size
- No need to make a stripped down "mobile" site and having to maintain 2 websites
- Future proof—web layouts are flexible enough so designs scale no matter what new devices come out
What responsive design doesn't solve...
But the most important case for making your website mobile friendly: What about your content? Is all that copy necessary? What about the accompanying beauty shots and photos?
Even if you have absolutely perfect content, a well-designed mobile site is not generally something that can be just bolted onto an existing website with a "plugin" or theme you can download for your content management system.
It actually takes foresight and planning to pull off a good mobile, responsive website, because you need to take a good, hard look at your content and how it looks on mobile all the way up to desktop.
The contexts are not simply mobile and desktop: they're now mobile, desktop, and everything in between.