Making a Responsive Web Design

Introduction:-
Responsive web design is the practical way of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Website is built responsive by keeping in mind about every multimedia device users.

Source:http://www.tutorialspoint.com/css/css_responsive.htm

Responsive Vs Adaptive Vs Mobile:-
Responsive and adaptive web design are closely related. Responsive generally means to react quickly and positively to any change, while adaptive means to be easily modified for a new purpose or situation, such as change. With responsive design websites fluidly change based on different factors, such as viewport width, while adaptive websites are built to a group of preset factors. A combination of the two is ideal, providing the perfect formula for functional websites. A responsive layout is made using flexible layouts and relative length units are used which are in accordance with flexible layout. So that it can adjust at every screen size accordingly. Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media.

Flexible Layouts:-
The first part, flexible layouts, is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width. Flexible grids are built using relative length units, most commonly percentages, rem or em units. These relative lengths are then used to declare common grid property values such asfont-size ,width, margin, or padding.

Media queries provide the ability to specify different styles for individual browser and every multimedia devices, the width of the viewport or device orientation.

Using media query:-

@media all and (min-width: 800px) and (max-width: 1024px) {...}
@media not screen and (color) {...}
@media only screen and (orientation: portrait) {...}

Media feature in media Queries:-

1. Height & Width Media Features
2. Orientation Media Feature
3. Aspect Ratio Media Features
4. Resolution Media Feature etc.

Flexible media:-
This part deals with making all media contents responsive. It can adjust to what ever the screen size it is used on. Images and videos are made to response in accordance with width of the media device screen and orientation. This also includes about embeded media to make responsive. Although max-width property does not work in all types of media.

Identifying break points:-
There are certain common breakpoints of viewport sizes as determined by different device resolution such as 320px, 480px, 768px, 1024px, 1224px . But taking this point commonly in use is not a good idea. Instead, it must be defined in accordance with the working of the web layout. It must be introduced only when a website starts to break, look weird or the experience is being hampered.

Responsive layouts are made in mainly two approaches.
1. Mobile first
2. Viewport

Mobile First:-
This approach is made to make a web layout in keeping mind about the screen size of the mobile and then a media query is applied to make it responsive. Applying media query to get it adjusted in all media devices be it desktop or tablet etc.

Viewport:-
Viewport width is the actual visual screen size width. This approach is used to make the layout responsive as it works on every media screen differently in accordance with the viewport size of the media screen. It gets adjusted to the size of the media screen.
Syntax for using viewport:-

@viewport {
width: device-width;
zoom: 1;
}

Making a responsive web design is demand of every user now a days. As it covers more number of users to interact with.