Tell me Basic steps to develop a responsive design?

Nobody will "Tell" you anything. Go find about it yourself.

Try this:

1- type into google "responsive design"

2- type into google "bootstrap"

Hi Mian,

 

All you need to know about is "Media queries(Roots of Responsive design) and A Responsive Framework.

 

I will prefer  "Foundation Responsive Framework". It's very easy to work with Foundation due to it's well written documentation.

#3) Now, You are just one clicke away. Visit http://foundation.zurb.com/  for quick responsive design & development.

 

All the best !

Your best way is to use a CSS/JS framework. takes all the heavy load off you and let'st you start on your project right away.2 of my favourite frameworks are UIKit (my favourite) and Twitter Bootstrap3. I found that foundation lacks a base design template.

You can get UIKit from: http://www.getuikit.com

and Twitter Bootstrap3: http://getbootstrap.com

1 - setup wireframe for each page

2 - give it to designer to create templates

3 - send it to the HTML designer or developer to slice it into html - at this stage you need to ask him to use a responsive framework like zurb foundation. He will use the framework to slice and that could be easily viewable on all browsers, smart phones and tablets. 

4 - you can then further pass on the designs to your developer if it required dynamic data via a database and scripting language like php. they should know how NOT to to mess up html and css while making the pages dynamic.

Just in few words, use Bootstrap and its Grids, read more deeply about how to make it responsive by this style-sheet and its Javascript,Its amazing and fast, less work more results, believe me. I tried it for all kinds of devices and work will without1% error

i think the simplest description going to be.

- build Website Design page with Class'es (include the viewport meta to detect device with as below ),

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

- build General CSS for Website over the Desktop.

- build another CSS for Responsive.

- start copy the class's from General CSS file and reflect it inside @media on the CSS of responsive with custmize it to the mobile & tablet.

1. Create wireframes or mockups for each device, designing mobile first.
2. Create you basic dom structure.
3. Add your meta viewport.
4. Add your site content
5. Add your CSS
6. Add your media queries from largest to smallest.
7. Test using either inspector element or adobe edge and devices.

Well i think framework is not necessary thing , you should have design mocup for each break point or screen you want to support and then based on this your Front-end Developer use Media Quries to adjust your site css based on screen size 

 

Foundation , Bootstrap, YAML all these frameworks are good but keep in mind some time you no need that much additional code you only need simple grid which you can code yourself 

This should help..

http://www.freshegg.com/blog/web-development-2/10-steps-responsive-web-design

I always prefer bootstrap and write less do more slogan JavaScript library "jQuery" for basic functionality of responsive web development.

1.Define The Viewport Mega Tag 2. Create The HTML Structure 3. Set The Features Of Your Style Sheet 4. Start With Media Queries For The Smallest Screen 5. Move On To Media Queries For A Relatively Large Screen 6. Define Media Queries For The Large Screen 7. Add Content 8. Make The Images Flexible 9. Go For Flexible Embedded Videos 10. View The Final Demo