When creating a responsive web design, you will need to take 3 different screen resolutions into consideration: mobile, tablet and the web. The images below are an example of each from a responsive website created by Ethan Marcotte.
The next step in responsive web design is to determine what information will show at each screen resolution. It’s best to start with the mobile screen resolution because it is the smallest size and you want to make sure the most important information will show at this size. From there you can start building out how you want the site to appear on the tablet and on the web. Designing for mobile first makes it really easy to see what items are most important and which items can either be dropped for the mobile version, or moved to a different spot. An example of something that you might get rid of or make smaller when you move from web to mobile is images. While there might be some great space on the web for images, there will not be as much space on a mobile device.
When the mobile design is finished, you can move into the tablet and web designs. You will create how the content from the mobile version will look when viewed at a larger resolution. Here is your chance to add in images and other content as needed.
Responsive web design is a great solution for anyone who wants a website that will adapt to different screen resolutions without the need of creating device specific websites.