“Responsive Web Design” or RWD or a hashtag #rwd on Twitter has become a great plague in web design just like AJAX technologies which arise a few years ago. Almost all people uses AJAX to run their website. Nowadays, people are talking Responsive Web Design rather than CSS3 media queries technology like people are talking jQuery rather than the AJAX technologies itself.
What is Reponsive Web Design?
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) — Wikipedia.
Nowadays, RWD has becoma a new standard to deliver a greater user experience in web. From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers, stationary or mobile. RWD is more than just a technique to make a web page resize itself automatically to client’s browser. RWD is a craft, state-of-the-art designs that anticipate’s and respond to users’ needs. Adopting the latest HTML5 and CSS3 technologies, techniques, and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display.
The responsive web is one that abstracts what you have to say from how you say it. Take, for example, NPR’s recent move to an API driven content model. By moving to an API for providing content, NPR has been able to manage its collection of apps and sites in a consistent way. The only thing that changes is the presentation layer.
This is what the responsive web should be all about. Figuring out what it is you have to say, and letting how you say it be driven by that. Design is about meeting a need in a way that is visually pleasing, but also that works to meet the needs of the user.
This is what the responsive web is all about, the user — creating websites that work for the people that use them, however they access the content. Making sites that can refactor themselves for small screens is just the beginning.
– Webdesigner Depot
Then we got ourself a responsive web design. How about the content itself: the text, the images, or videos? Well, text reflows effortlessly within a flexible container—and I don’t know if you’ve noticed, but the Internet seems to have one or two of those “image” things lying around. Images will still be images. when bigger images comes into small layout, you’ll notice that your web layout is going to be broken. The “excess” image content will simply overflow it’s container, which is we don’t want it to happen.
Such a constraint in images are able to do such a “magic” thing to force their size to match or at least has maximum size constrained to it’s parent container. First discovered by designer Richard Rutter, Fluid images rule immediately provides an incredibly handy constraint for every image in our document. img element will render at whatever size it wants, as long as it’s narrower than its containing element using the following CSS rule:
img {
max-width: 100%;
}
Those “magic” CSS rule also apply to most fixed-width elements such as video, embed, or object. You may get more information about fluid images article here.
Okay we got our content adapt is size dynamically. But how about user’s browser. Does it compatible to every browsers that users use. More than just trial, error, and experiments, and compatibility “patch” is going to be applied to make your web page design is usable to all browsers. But at least, responsive web design is something good to be applied in web page design and development.