You might have heard of the new trend of Responsive web design (RWD). It is a web design approach aimed at designing the website suitable to work on every device and every screen size. Responsive web design is focused around providing an intuitive and gratifying experience by easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.
Device friendly website
2013 is year of gadgets, smart phones and tablets. According to study, Tablet sales are expected to exceed 100 million this year. It makes clear that 20% to 30% visitors to your site might be using smart phone or tablet and this percentage is ever growing. This is where device friendly Responsive website design comes to rescue. Whether it is small screen of mobile, tablet or larger screen of desktop, the website will look consistent across all screen sizes.
Technically, a responsive web design uses "media queries" to figure out what resolution of device it's being served on. Flexible images and fluid grids then size correctly to fit the screen.
Lets take a look at an example of a Restaurant Website below, when you shrink your browser, the content resizes to fit. Here is how the same website looks like in different screen resolutions and devices:
Website look in Desktop screen:
Notice the left side bar and large banner image.
Website look in Tablet screen:
Notice the left side menu has been adjusted in top. The banner image has been shrinked to to be fit in tablet screen.
Website look in Mobile screen:
Notice the top menu icons are hidden, the logo has been adjusted in middle and the banner image has been shrinked to be fit in mobile screen!