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. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
- Deciding the break points.
Mainly there are four
- iPhone / Droid – 320px wide
- Small Tablets – 640px wide
- iPad / Tablet – 768px wide
- Computer – greater than 960px wide
- Testing the look and feel on multiple devices for diff widths
- Buttons, icons, images, modal boxes. Deciding which elements should not be shown or if shown, whether they should be in similar way.
- Convert your main navigation into a dropdown for mobile width
- Form factor- size, shape, and style, as well as the layout and position of the phone's major components
- Media queries
- Flexible layout: A layout which dynamically resizes.