The Basics of Good Responsive Design
Mobile phones are now the largest source of traffic for most websites. 60% of Christmas orders placed at Amazon.com were from mobiles. You could expect that within the next few years, almost all traffic will be from mobile devices. This is where responsive design comes in. With good responsive design, a website will look good at various resolutions meant for different devices. There are two primary tenets of good responsive design:
It is not enough just to have your website panels change position and stretch on a mobile device. Any areas you expect touch based interaction needs to change. The standard convention for the upper navigation for websites is to switch to a touch based button dropdown when on smaller screens. This approach should also be followed for other elements of the site. For example, the left side menu sidebar contains links. These links usually dont change size in mobile form, when really it should expand with white space to act as a proper touch target
As painful as it may seem, the design should take in as many known resolutions as possible. The design should also be tested against each of these resolutions every time there is a change. It is easy to cater to the primary iOS and Android resolutions but there are a lot of other devices out there. Everything from large form factor tables, televisions and smaller lesser known phones will have other resolutions. Designing around those will ensure that you have satisfied users who have multiple devices and would like to access your site from the most convenient device available.