One site for every screen.

Day by day there are various of new Smartphones  models are coming the market, so designing a website for any specific phone will not work on all devices. Here we are really need to understand what is the use of flexible lay out design means, Responsive design.
Before start talking about responsive design take a look at what is HTML5 and CSS3: An HTML document can be displayed with different styles: Cascading style sheets are using to format the layout of Web pages.CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colors, margins, lines, height, width, background images, background colors, advanced positions and many other things. The Latest version of HTML is HTLM5 , ( history of HTML5 ) and CSS is CSS3
And now a days for most of the mobile and desktop  applications also we are used HTML5  and CSS3 most common example is windows8 ,yes windows 8 most of the application used  by HTML5 and CSS3 and JavaScript. When the Microsoft gave its first public preview of Windows 8 in 2011, the now-President of Windows Julie Larson-Green   said like this about widows8: ” our new development platform.” The reason? That platform was based on HTML5 and JavaScript.
The responsive design approach says that a website should respond to the user according the device, screen size, and orientation. As a result, websites created with the responsive design are designed to display optimally at a range of sizes, no matter what device or screen resolution the user is using. That could be an oversized desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, or a 4-inch smartphone screen. This is due in part to the growth of smartphones and other mobile devices. Almost every new client these days wants a mobile version of their website no wonder more people are using smaller-screen devices to view Web pages and shopping.  That’s why now a day’s most of the clients are asking mobile versions of their website or application.
How we can easily understand is that design is responsive or not. Let’s take a traditional “fixed” website.  When viewed on a desktop computer, for instance, the website might show three columns. But when you view that same layout on a smaller tablet, it might force you to scroll horizontally, something users don’t like. Or elements might be hidden from view or look distorted.  On a tiny Smartphone screen, websites can be even more challenging to see. Large images may “break” the layout. Sites can be slow to load on Smartphone’s if they are graphics heavy.
The first key idea behind responsive design is the usage of what’s known as CSS3 media queries for our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify. If we wanted to apply some styling to mobile phones, our media query might look something like the following.
@media screen and (min-width: 480px) {
.content{
float:left;
}
.social_icons{
display:none
}
// and so on…
}
Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:
1.    @media screen and (min-width:320px) {.. here is our css..}
2.    @media screen and (min-width:480px) {.. here is our css..}
3.    @media screen and (min-width:600px) {.. here is our css..}
4.    @media screen and (min-width:768px) {.. here is our css..}
5.    @media screen and (min-width:900px) {.. here is our css..}
6.    @media screen and (min-width:1200px) {.. here is our css..}

Images are another important element must be taken into consideration when working with responsive layouts. Designers must make sure an image does not lose its quality or get chopped off when viewed from a smaller device. Scaling in CSS is pretty simple to implement for both images and video. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image or video in the best quality and size possible and then let CSS adapt the image to the right size.
img,{
max-width: 100%;
}
100% WIDE CONTAINER

75% WIDE CONTAINER

50% WIDE CONTAINER

Designing a responsive website is all about fitting the text, images and layouts into different types of screens. Typography that looks good on a desktop (big screen) must also look appropriate on smaller screens. The capability to fit into all types of screen sizes without dropping the design, content or any other elements is the foremost requirement in responsive design.
Users will not appreciate webpage’s that take a long time to load. Keep in mind that smart phones and tablets always require a bit more loading time due to restrictions in the screen’s configuration.
The Responsive Design is definitely an effective solution to provide an optimal user experience. This is a major evolution of web design inviting designers to take a new challenge. And now a day’s most of the developers are start using native applications in HTML5 CSS3 and JavaScripts because it’s light weight and easy loaded.