Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices from desktop computer monitors to mobile phones.
Responsive web design is a technique that will help your design scale with the ever-growing array of devices and browsers.A site designed with Responsive Web Design adapts the layout to the viewing environment by using fluid, proportion-based grids,flexible images and CSS3 media queries an extension of the @media rule.
HTML and CSS standards are evolving to help Web designers deal with Responsive Web Design issues. It’s clear that some form of responsive Web design will be used to meet the challenges, and it’s equally clear that standards will continue to evolve as better ways of handling the changing world of devices and browsers are discovered.
There are three key technical features are the heart of responsive Web design:
- Media queries and media query listeners
- A flexible grid-based layout that uses relative sizing
- Flexible images and media, through dynamic resizing or CSS
Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly.
While mobile devices are changing the display landscape, with the appearance of more and more small screens, displays are also getting larger and larger.