Definition of Responsive Web Design

Definition of Responsive Web Design


What’s responsive web design? In substance it is whenever the design of the website responds to the measurements of the display. In other words, a website constructed to be responsive, takes note of the height and width of the screen (actually, the viewable area is generally a internet browser window, as in Internet Explorer), and changes the web page layout to fit the readable area appropriately (in accordance to what the web designer or innovative director deem suitable).

Although this is most commonly used in web layouts, responsive web design can go well past designs. Mainly achieved utilizing code referred to as media queries (see my personal post The Media Issue), responsive web design enables you to produce web pages which are independent of the viewable area.

Responsive Web Design Case Examples

A good utilization instance of this is in the case of a website that’s optimized to suit mobile devices as well as desktop computers, wherein the links in the top menus would be more workable repositioned as a up and down checklist, rather than a horizontally club going throughout. This kind of detail is supported through responsive web design.

In the event that you possess a grid in your design where 10 thumbnails fit properly throughout on a regular desktop computer monitor, individuals pictures might have to end up being terrible small to match 10 throughout on an ipad or iphone. With a responsive design you can change it out to ensure that if the width of the device is as short as an ipad, it only places 7 pictures throughout. Then, perhaps 4 throughout for an iphone.

A lot of website contact forms are accompanied with a sidebar area (or even two) for up-sale and other purposes. This really is excellent for a desktop computer, however on a smart phone, automatically, the type and the sidebar both are shrunken down too small to study. Along with responsive web design the type can be produced to fill the display and the sidebar can end up being concealed, positioned beneath, “replaced” through another smaller sized version along with the same message, almost anything is possible.

Responsive Web Design vs. Liquid Layouts

For a long time, there has been web page designs which flex to the size (generally the width, particularly) of the browsers window, recognized as liquid layouts. These types of are still in make use of these days, although they’ve never already been as common as the common set design you will find on most web sites (where the layout continues to be the same, regardless of the thickness of the viewable area). Liquid designs are very generally used for mobile devices, as they can end up being counted upon to fit each and every mobile screen size. This kind of design is generally kept quite simple, like a power grid of pictures or a list of button. But if one requires which exact same layout and lets it period the thickness of a desktop computer monitor, it is almost always discovered to end up being as well short, too stretched or things are oversized.