As web developers, it is now fairly standard practice to be called upon to create a web site/app that changes its user interface depending on the browser/device accessing the site, to provide an optimized experience. One approach to this is to create different versions of your site/app for different platforms or browsers and serve them appropriately after detecting which browser or platform is looking at your site. But this is increasingly inefficient: browser sniffing is inherently error prone, and maintaining multiple copies of your code can turn out to be a nightmare.
It is usually much better to create a single version of your code, which doesn't care about what browser or platform is accessing the site, but instead uses feature tests to find out what code features the browser supports or what the values of certain browser features are, and then adjusts the code appropriately. This tends to be termed responsive design or adaptive design, two related but different approaches (for a discussion on the differences between the two, read Responsive design versus adaptive design.)
This is much more reliable, more maintainable, and more future proof. You don't get caught in the situation of having to bring out more new site versions as more new browsers and platforms come out, and adjust code as feature support in existing browsers changes.
There are disadvantages to this type of approach as well. If the content, layout, and functionality need to change greatly for different devices, it may not be such a good approach. Also, taking an existing site and adding responsiveness to it, to make it mobile/tablet friendly, can be a lot more effort than just creating a separate mobile site or app, especially if it is a sprawling enterprise site. Read more about responsive design advantages and disadvantages.
In this article we will briefly discuss the main essential components of responsive design, with some links to further information where necessary.
The best place to start is with fluid measurements for your application layout — essentially, this means using a combination of percentages and ems/rems to size your containers and text, not fixed widths such as pixels. This has a lot of advantages in that the layout will adapt to different viewport dimensions. Let's look at an example:
Fluid grids are a great start, but you'll notice that at certain points the layout starts to break down (known as the breakpoints.) It may be just a small issue (minor breakpoint), or a major layout catastrophe (major breakpoint)! At these points you'll want to change the layout to rectify the layout problem, and this can be done using media queries.
Media queries are a CSS3 feature that allow you to selectively apply CSS depending on the results of media feature tests — for more on the basics, read Media queries.
Generally you'll have a media query for each different UI design you drew in your planning stage, to swap between the different layouts — these are the major breakpoints. Each major breakpoint will have a separate fluid layout within it.