So, What Exactly Is Responsive Design?
Here’s the easiest way to see what designers mean when they say “responsive design” or a “responsive website.”
On a desktop or laptop, grab the edge of your browser with your cursor, and start to drag so the browser becomes smaller. Take a look at this text and the photos below. (The photos are street art from a trip to Buenos Aires!) Do you see how with each increment that the window gets smaller, the text and images do too? The text also rearranges itself, so that it doesn’t have to squish too small to be readable.
If you keep going until the window is at its smallest (about the width of a cellphone) you’ll see a few other things happen. The images will rearrange to be in a vertical row, instead of a horizontal one. The menu also switches from links in a row, to what is called a hamburger menu. (Although I’m still serving up design, and not sandwiches, sorry!) You can probably see how it got that name. That kind of menu is used frequently on very narrow formats, like a phone, so that the menu doesn’t take up your whole screen, or so the links don’t become so small that you can’t tap one.
Pretty neat, right?
This is how all of your information and images look good on any screen size from a desktop to a tablet, and right down to a cellphone.
Try it out on your favorite websites! Not every website is responsive, but it’s becoming more and more common. Did you see anything cool happen on any websites?