What is Responsive Design?

[glstechserve]

Hello Friends,

Please tell me what is responsive design.

[salenaadam]

Responsive design is a way to deal with page creation that makes utilization of adaptable designs,
adaptable pictures and falling template media questions. The objective of responsive
design is to manufacture site pages that identify the guest's screen size and
introduction and change the format as needs be.
Responsive design is a to some degree retro way to deal with web architecture that takes care of a ton of plan issues caused by the multiplication of new sorts of cell phones.

[deepakrajput]

Responsive website are easily accessible from all devices.

[Allianceit]

Responsive design refers to a website’s layout and content changing, depending on the size of the user’s viewing screen. This adjustment optimizes a web experience for all users from desktop and laptop users to tablet and smartphone users.

[jaysh4922]

Responsive Web design is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.

[RH-Calvin]

Responsive web design refers to the design that helps websites to adapt themselves in various portable devices like mobiles and tablets to access them. This helps to generate more traffic from various devices and build your search engine popularity.

[Sojan Babu]

Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.

[ridhudhadwal]

It is easily accessible and adjustable in any device.

[Zotek]

Responsive design is like a chameleon It fits into any theme. It produces no error while website is live.

[vino]

Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.


Responsive design is a somewhat retro approach to web site design that solves a lot of design problems caused by the proliferation of new types of mobile devices. Responsive design pages use x and y coordinates on a grid for layout and mathematical percentages for images instead of fixed-width parameters. Using percentages instead of fixed-width parameters and a grid layout creates a more fluid layout that will resize itself to fit the size of the display.


Media queries, a feature of cascading style sheets (CSS), allow the developer to specify when a certain style takes effect. With CSS2, for example, a media query will serve printer-friendly style sheets if requested. CSS3 has expanded query capabilities that allow style sheets to be targeted to a device’s display and serve a desktop, tablet or smartphone style sheet depending on the query response.


This capacity means that instead of having to build a special mobile version of a website -- which often requires writing new code from scratch -- developers can simply build multiple style sheets for the same web page and perhaps even associate different images with each of the style sheets. As a result, HTML code can be repurposed instead of having to be rewritten, which saves considerable development time.

[vino]

The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.
Let’s take a traditional “fixed” website. When viewed on a desktop computer, for instance, the website might show three columns. But when you view that same layout on a smaller tablet, it might force you to scroll horizontally, something users don’t like. Or elements might be hidden from view or look distorted. The impact is also complicated by the fact that many tablets can be viewed either in portrait orientation, or turned sideways for landscape view.
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.
The point is: with responsive design, the website automatically adjusts based on the device the viewer sees it in.


Responsive sites use fluid grids. All page elements are sized by proportion, rather than pixels. So if you have three columns, you wouldn’t say exactly how wide each should be, but rather how wide they should be in relation to the other columns. Column 1 should take up half the page, column 2 should take up 30%, and column 3 should take up 20%, for instance.
Media such as images is also resized relatively. That way an image can stay within its column or relative design element.