what is responsive design?

**kimi108ka** · 04-05-2015, 07:48 AM

what is responsive design? how does a responsive webpage help the mobile and other devices.

View more threads in the same category:

**commercepundit** · 06-05-2015, 06:13 AM

Responsive design mean the webpage that is compatible to open properly in all devices like tab, mobile and desktop, and from SEO point of view the best benefit of responsive design is to it helps user to stay on and proper call to action can help you bring more visits that will turn in to customers.

**thuybk** · 07-05-2015, 07:59 AM

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

**yasar** · 07-05-2015, 03:43 PM

Mobile user can view your web site with clear view this is responsive,that is your site responsible for every device its called responsive design

**trimantra** · 22-05-2015, 08:04 AM

Responsive design means your web pages are reformat depending on your devices or your web pages are adapt to the size of your current Devices.

Web Development & Design company in India

**daviddakarai** · 30-05-2015, 10:15 AM

Responsive Web Design (RWD) is an approach of laying-out and coding a website such that the website provides an optimal viewing experience — ease of reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices.

**anirban09p** · 05-06-2015, 04:32 AM

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.

**MrJaswal** · 23-06-2015, 12:02 PM

Originally Posted by kimi108ka

what is responsive design? how does a responsive webpage help the mobile and other devices.

In simple word, Responsive design is made, to fit your site into any screen without zooming in/out. Its the latest trend in web designing world and its good for users experience in smart phones or tablets.

**miencotich** · 14-07-2015, 09:18 AM

Step 1. Declare the viewport meta

First you need to put this card into the folder <head> section on the HTML code of the website.

Code:

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

Step 2. Write CSS to the width of the device

Code:

body {
   background: #fff;
   color: 333;
}
 
@media all and (max-width: 320px) {
   body {
      background: #e7e7e7;
   }
}

This means your website will default (background) is white, but when scaled to the browser from 0px to 320px, then it will have a base of gray with color code # e7e7e7

**dakshadesign** · 21-07-2015, 11:13 AM

Responsive design means website design that fits according to the device resolution and provide good user experience.

Responsive Web Design Company India

**royaloptimizer** · 09-08-2015, 07:46 AM

Responsive Web design (RWD) 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 is broken down into three main components, including flexible layouts, media queries, and flexible media.
1. The first part, flexible layouts, is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width.
Basic formula for responsive is section is target ÷ context = result

Example for refrence for Responsive Web Design:

<div class="wrapper">
<div class="left-part">...</div>
<div class="right-part">...</div>
</div>

.wrapper {
width: 538px;
}
.left-part,
.right-part {
margin: 10px;
}
.left-part {
float: left;
width: 340px;
}
.right-part {
float: right;
width: 158px;
}

.left-part,
.right-part {
margin: 1.858736059%; /* 10px ÷ 538px = .018587361 */
}
.left-part {
float: left;
width: 63.197026%; /* 340px ÷ 538px = .63197026 */
}
.right-part {
float: right;
width: 29.3680297%; /* 158px ÷ 538px = .293680297 */
}

2. Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation.
eg. @media all and (max-width: 420px) {
.your-class, #your-id {
float: none;
width: auto;
}
}
3. Flexible Media, Images, videos, and other media types need to be scalable, changing their size as the size of the viewport changes.
eg. img, video, canvas {
max-width: 100%;
}

I hope this will clear your basics about Responsive Web Design. Here is the link of a responsive website which will clear you when you'll open this link in Desktop, iPad, Mobile etc. http://www.indianfashionera.com/

**kanesimicart** · 10-08-2015, 03:52 AM

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)

**dangngoclinh247** · 27-08-2015, 03:21 AM

Originally Posted by miencotich

Step 1. Declare the viewport meta

First you need to put this card into the folder <head> section on the HTML code of the website.

Code:

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

Step 2. Write CSS to the width of the device

Code:

body {
   background: #fff;
   color: 333;
}
 
@media all and (max-width: 320px) {
   body {
      background: #e7e7e7;
   }
}

This means your website will default (background) is white, but when scaled to the browser from 0px to 320px, then it will have a base of gray with color code # e7e7e7

Thanks, great example. Easy to imagine

**Tanisha10** · 01-09-2015, 08:24 AM

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).

**nextbits** · 24-09-2015, 03:49 AM

You put water in a cup, it becomes the cup; You put water into a bottle, it becomes the bottle… Be water, my friend.” —Bruce Lee

Back in the 1970s, Master Lee already laid down the basics of what the industry has dubbed responsive design. True interactive design experiences are like water: they take the form of the device you’re viewing them on, and in turn fully deliver the content and experience, regardless of that device.

Like all things that last and remain effective…it must remain adaptive. That takes strategic thinking, not just fancy code.

Thanks,
Nextbits
[email protected]

**Andy007** · 24-01-2016, 06:08 AM

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.

**melinawilliams** · 27-01-2016, 05:47 AM

Responsive design have very flexible nature like a water because you can keep water in container with any size and any shape, it does not matter because the water will adjust according to the shape of your container. Similarly, the responsive design will work same in all size and shaped devices like desktop, laptop, mobile and tabs.
You can search more informative and interesting information about responsive website design from http://www.clickmatix.com

**sharmaraghu65** · 27-01-2016, 09:29 AM

The main thing which i like about web designing is that it needs creativity and we need to work differently acccording to our clients need this needs a creativity and innovation.