Responsive Design – How to Use it and What is it

Posted on April 13, 2013 in HTML/CSS Category

Responsive Web Design is a trend that is keep growing and growing every day on many platforms. As a short explanation, responsive means that your website must have an adaptive design on every computer or mobile device.


What is Responsive Design

We now live in a world where more and more people have at least one mobile phone. Over 60% of the world population owns a smartphone with internet connection, which is crucial for big websites to have a mobile version of the website. Also don't forget about the tablets, which is another important factor.

Responsive Design is just a way of saying: "I want my content to fit on any desktop resolution or mobile phone without scrolling the page left and right."

Based on CSS3 Media Queries, when browser is resized, content must be adaptive and should automatically fit to any resolution and for that of course you will need to program it using media queries.

How to use Responsive Design

To have a responsive design you need to you the CSS3 Media Queries. That means you can set a specific CSS style for an element, based on a set resolution width.

First you should link in HTML your main CSS file with the desktop version. Then you can create another special CSS file just for media queries, or you can use in the same file.

<link href="styles.css" rel="stylesheet" type="text/css">

Or you can simply use another separate file just for your media queries like below:

<link href="media-queries.css" rel="stylesheet" type="text/css">

Note that you don't need to include the "media" type when linking CSS files.

Fluid Layout

Responsive means fluid, so containers should always have 100% width. Same with images. You should set a general maximum width for all your images inside the content, something such as 600px width, then you can adjust your layout better according to your images.

Here is an example below with Viewport Smaller than 640px

When the browser will detect that the viewport width will be smaller than 640px and the styles inside the condition will be applied to your elements.

@media screen and (max-width: 640px) {
    .yourDivClass { width: 50%; }


You can use the "min-width" also in your condition.

Include Media Queries Javascript Fix for Internet Explorer

Internet Explorer 8 and older versions does not support CSS3 Media Queries. You can make it work and enable the support for them by adding the css3-mediaqueries.js Javascript file.

<!--[if lt IE 9]
      <script src=""></script>

iPhone Viewport and Initial Scale

By default, Safari shrinks HTML pages to fit into the iPhone screen. The following meta tag tells Safari to use the width of the device as the width of the viewport and disable the initial scale.

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">


In the end, this is a great and easy method to make your website adaptive to all resolutions and to any device. Make sure you code your design at the right viewport size and always use fluid layouts with 100% width.

Related Articles
  1. Steini says:

    Could be longer but explains the basics :).. I would like to read a longer article by you with examples of box sizes and some other material in action. I would be back

  2. jashim uddin says:

    need some more details for responsive web design. please give more tutorial or example ….

  3. Natty says:

    A little short, I was expecting more detail, but it’s informative enough :)

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

2 + two =

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.