What is Responsive Web Design?
Responsive web design means creating web pages that render well on a variety of devices, windows, and screen sizes. When a website is designed responsively, it will stay consistent no matter how or where you view it. Great responsive web design recognizes that it’s not just the screen size that changes from desktop to mobile. The consumer mindset changes, too.
Responsive web design is an approach to building a website that considers the different types of devices that a visitor might use to access the site. Responsive web design adjusts how content on a page is displayed according to the dimensions of the device’s screen. This is in direct contrast with non-responsive web design, which maintains the same properties regardless of what size screen is being used.
An example of a non-responsive web design page is one that reads well on desktop browsers but has very small, unreadable text on smartphones, often due to having too many columns or images that are too large to fit within a smartphone’s limited viewport display width. With responsive web design, web developers don’t have to focus on specific display sizes; rather, their responsive web code is designed to automatically adapt to a range of display sizes.
Elements of RWD: Fluid Grid, Flexible Media, Media Queries
Fluid Grid – a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content.
Flexible Media – shrink and grow based on the size of the viewport. Flexible media do not have height and width attributes or values in the HTML document. Rather, flexible images use CSS rules to resize the image relative to the wireframe and viewport.
Media Queries – allow the web page developer to detect the approximate pixel size of the current viewport. This detection allows the developer to selectively apply CSS rules that work best for that viewport size.