Responsive web design responds to the websites based on the device type and the screen size. It is hard and impractical to have unique design for devices from different companies such as Apple, Motorola, Blackberry, Samsung etc. Each device has specific screen resolution and it requires a unique design approach to fit the content for different gadgets. Some web pages may have static content which is easy to display in shortened form whereas other pages may have huge images which gets truncated or distorted when displayed on the small screens. The purpose of responsive design and development is to make a single website that responds differently when viewed from different devices. When the site is designed as responsive, the page layout automatically gets adjusted to various screen sizes and capabilities of the devices. For instance, an user might see a page content in two rows in the desktop version whereas on mobile devices it can be viewed as a single column.

Growth in the number of responsive sites
Today almost every business is implementing responsive design for their websites to improve the browsing experience of small screen users. The growth of using smartphones and tabs for browsing the internet has rapidly increased over the past few years. Previously web developers focused on accommodating websites for various screen resolutions of laptops & desktops but today it has become necessary to adjust the design for all the technology gadgets irrespective of the device type & size. This means the website should be responsive not only to all devices like laptops, desktops, tabs, smartphones etc but properly adjust to the screen sizes of the respective devices. No matter what device people use for browsing – a 19 inch notebook, 10 inch tab or 7 or 4 inch smartphone, the site should resize itself to the screen.

Elements to consider in responsive design

• Touchscreen vs Mouse
  While working on PCs people normally use mouse for navigation and selection whereas on tabs & smartphones they use touch screen and scroll down options to navigate through the page. The design guidelines for touchscreen is obviously different from cursor based interaction. To make the design work for every device, the developers should consider responsive design that takes into account all navigational options.

• Portrait vs landscape
  Many of the smartphones have flexible choice to view the page in different orientations ・portrait, landscape or even completely square. However everyday new devices are coming into market with variations in screen size, color, and functionality. While switching between the page orientations some of the features get distorted and the original page layout may not be visible to the user. To have a website with flexible accommodating features these elements should be taken into consideration while designing for responsiveness.

• Flow of content
  While making it compatible to smaller screens, elements of the web page generally get rearranged and start taking up more vertical space. The user has to scroll down the page or follow the flow to view full content of the web page. For instance, if web page has a flexible horizontal stripe layout with four columns, then it becomes difficult to adjust the widths in smaller screen formats. Fortunately, responsive design has the flexibility of coding to adjust content flow for every standard screen size.

• Images and graphics
  Images and graphics could easily break layouts when they are adjusted to fit in the smaller screens for mobiles and tabs. Responsive designs accommodate flexible layouts so that the images get automatically adjusted to smaller sizes without losing any feature. The layout or the image may look too smaller in size but the picture quality remains same for visibility.

• Page speed
  Mobile devices do not respond the same way as desktops when downloading heavy images, ads and graphics. While creating responsive design, it may be wise to have fewer graphics and smaller ads instead of keeping them as it is. Websites with heavy visual effects take longer to load on a smartphone than on desktops & laptops.