In this example, I have a basic page layout with a header, content container, sidebar, and a footer. You can use media-queries.js or respond.js to add media query support in IE.

Internet Explorer 8 or older doesn’t support media query. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. You can use the viewport meta tag to reset this. Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. I promise you can learn about the basic logic of responsive design and media queries in 3 steps (assuming you have the basic CSS knowledge). To help you quickly get started with responsive design, I’ve put together a quick tutorial. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. With the help of CSS frameworks like Zurb Foundation, Twitter Bootstrap, etc., you can easily create responsive web designs using the inbuilt codes provided by these frameworks, you will learn more about it in the following chapters.Responsive web design is no doubt a big thing now.

The Easiest Way to create Responsive Web DesignĬreating a responsive web design from scratch may be easy for professionals but for beginners and intermediate users it is a very hard task. If you are not good at programming, you can make use of CSS Frameworks to do the job of CSS3 Media Queries. All elements are automatically re-sized to fit the device accessing it.Ī website can be made responsive using CSS3 Media Queries. The size of these grids are not decided using pixel value but using proportion. Responsive web design uses fluid grids which will respond to all kinds of resolutions. Due to the rapid development of technologies, many devices with different resolutions are being released and creating a version of website for each device is practically impossible, this is where we need responsive web design. For instance, take a look at the image below,Įach device has different screen resolution, a responsive web design will re-size itself to fit the screen of the device which is accessing it.Īlmost all the clients wishes to have different versions of their website to fit different devices like iPhone, iPad, Desktop and so on. Responsive Web Design is an approach where the webpage re-sizes (responds to) itself based on the device accessing it.

Twitter Bootstrap Framework JS Components.

Html responsive design tutorial