Posts

What is Responsive Design?

Key Takeaways

Responsive design means writing code ONCE, and having the page look great EVERYWHERE. A great, responsive site should be able to adapt to various screen resolutions. It will look good on a desktop computer, iPhone, iPad, or any of the other devices that people carry around in their pockets.

Your Assignment: Learn Responsive Design Today

  1. Look at the images of Pack below. What is the difference between the smallest screenshot (on the left) and all of the other screenshots? Write down at least 3 differences that you see.
  2. After writing down the differences you will quickly see what it means for a site to be “responsive”. After you complete Pack, do the same for The Japanese Times. More examples can be found at http://mediaqueri.es/. (5 minutes).
  1. “Media Query” is the official CSS property largely responsible for making a site responsive. If you’re a developer, try adding this CSS into your stylesheet. See what happens!
@media (min-width: 400px) and (max-width: 600px) {
    h1,h2,h3,p {
        color: red !important;
    }
}

The code listed above should make your h1, h2, h3, and p tags (headers and paragraphs) red. You can play around with some example code over at Google’s page on media queries.

Additional Resources to Keep You Learning

Bootstrap: a popular framework for making a responsive website. Download it for free.

Zurb Foundation: another framework for making responsive websites. It’s free.