Take me back!! I want my CSS!! Click me to get back :)

×

Are you missing out on your dream job?

Enrollment for Skillcrush Blueprints JUST OPENED. Register today!

Click Here

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!

Your email address will not be published.

3 comments

  1. Jo Replied

    At the time of writing this comment, the article states that visiting NY Times on a mobile device serves a desktop version. This is incorrect, a mobile version is served.

  2. Jeff Replied

    Is responsive design covered within your course?

    • Deepina Kapila Replied

      Hi Jeff, Responsive is not covered in our 101 because it’s a bit more of an advanced topic. We will be offering a separate course on responsive design that will build off the materials covered in our 101 course. Would love to have you in our Jan class! If you’d like to enroll go ahead and use the code ‘socialisfun’ fpr $50 off the price.

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.