Learn Design, Learn Tech Skills

Responsive Design

Responsive design is designing one web page to be easily viewable on multiple screen sizes.

Ever tried to visit The New York Times on your iPhone? Since The Times uses the same version of the site on your laptop as it does on your iPhone, you need to pinch and zoom and scroll to get over to the story that you want to read. Then, you have to struggle a little bit more to resize the text so that it’s readable. For The Times and many other web sites, you need to go to their mobile app to get a good reading-on-your-phone experience.

It doesn’t have to be that way!

Responsive design is the idea that a web site should be flexible enough to be useable on a phone, tablet or computer—all without needing to download an app or visit a special mobile site.

Responsive design hinges mostly on “CSS3 @media queries,” which pretty much means “the web browser knows how big the screen is.” A developer can tell the browser to display the page one way on a nice big monitor, a different way when it starts to get a little smaller, and another way when it’s pocket-sized.

Many web sites have two or three columns of content. As the screen gets smaller, it becomes increasingly difficult to cram all of those columns onto one page. Using responsive design, you might see 3 columns on a computer monitor, while your phone might show just one long column! That way you can easily scroll through the content while keeping the text nice and big.

Responsive design doesn’t just move around columns; images might be resized or turned into icons, navigation moved, or less important information removed completely. All without using a special app or mobile site!

Responsive design can be a lot of work for designers and developers, but with so many people browsing the web from so many different types of devices, it makes for a better experience for everyone.

Now try this!
  1. Visit A Flexible Grid.
  2. Try making your browser larger and smaller, and see how readable and useable the site is at each level. That’s responsive design!