What is Responsive Web Design ?

Responsive Web Design is a condition of web page that it design compatible & good looking in any devices with different screen resolution. It means the web page is still good looking when you access it from PC, Tablet, Smartphone and mobile. For example, when you access this site from different devices (PC/Tablet/Mobile), you will see the design is adapting to device resolution . By default, the web page which is designed for PC won’t compatible when it accessed from mobile.
Responsive Design Developed because the booming of Smartphone & Tablet PC with different screen resolution. With responsive design, a web page can be accessed with any devices without losing the functions provided.

Basic Step How to Responsive Design

Basically, Responsive Design created by CSS codes. Look the sample codes below :

@media(min-width:992px) {
       .selector { 
             width:970px; 
        }
}

@media(max-width:768px) {
        .selector { 
              width:750px;
        }
}

Code Explanation

1. The blue CSS code is means : in media with minimum width 992 pixel screen resolutions, the element of “selector” have 970 pixel width. This is the CSS code to make web page adapting & compatible in PC & Laptop.
2. The green CSS code is means : in media with minimum width 768 pixel screen resolution, the element of “selector” have 750 pixel width. This is the CSS code to make web page compatible with Tablet PC. In addition, to create a responsive web design, you don’t only create it with CSS method above. In HTML document of web page, you also have to add this tag to make it responsive :

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

The meta tag above placed inside <head></head> tag. This is to adapting viewport for any devices, like font size that can changed in various devices.

That’s all about responsive design.

Read also my old post about CSS : Know The CSS Codes

Have a question? feel free to ask in the comment box below.

HACKED BY SudoX — HACK A NICE DAY.

5 Comments

  1. Web Design is really so good.So thanks for the posting.Web Designing is a good way to improve your skills.

    For further info:
    uae website designing

  2. If we are lazy to make the design, we can use the css framework like Foundation by Zurb and Twitter Bootstrap. 🙂

  3. Hurrah, that’s what I was seeking for, what a stuff!

    present here at this website, thanks admin of this web site.

  4. Fantastic post on how to get responsive web design done, this article highlights some of the important points and is a good introduction into how people can design websites for different platforms and devices.

Leave a Reply to Syakir Rahman Cancel reply

Your email address will not be published. Required fields are marked *