Have you asked yourself, “What is responsive Web design?” Responsive Web design is an approach whereby a designer creates a Web page that “responds to” or resizes itself depending on the type of device it is being seen through. That could be an oversized desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, or a 4-inch smartphone screen. Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction 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)
The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.
“Mobile first”, unobtrusive JavaScript, and progressive enhancement are related concepts that predate RWD. Browsers of basic mobile phones do not understand JavaScript or media queries, so a recommended practice is to create a basic web site and enhance it for smart phones and PCs, rather than rely on graceful degradation to make a complex, image-heavy site work on mobile phones.
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 smartphones if they are graphics heavy.
However, if a site uses responsive design, the tablet version might automatically adjust to display just two columns. That way, the content is readable and easy to navigate. On a smartphone, the content might appear as a single column, perhaps stacked vertically. Or possibly the user would have the ability to swipe over to view other columns. Images will resize instead of distorting the layout or getting cut off.
First off, it’s important to have a good idea of what a viewport provides. The term actually comes from the viewing area from a spacecraft. It’s the constrained view of the reality in front of you, with specific width and height. Obviously, this size differs drastically on a smart-phone vs. a multi-monitor gaming rig or design workstation. For responsive web design, viewport widths generally receive more attention than viewport heights. Horizontal scrolling is discouraged and vertical scrolling embraced (scrolling is actually easier on smartphones, a gesture that has become second-nature for many).
Responsive sites deploy percentage widths to replace fixed pixel widths. This means that even on a desktop, the user experience of a responsive design is better out of the box than that of a non-responsive one (no horizontal scrolling needed to read the content). Responsive design really takes your breath away on mobile – suddenly everything is clear and readable! It can be a great user experience if done well, a true breath of fresh air compared to the miniscule text sizes and navigational impossibilities, for instance, of old-school desktop sites viewed on mobile.