A growing number of people are now accessing websites from their smartphones and web designers are scrambling for creating web designs to fit iPhone, Blackberry, iPad, netbooks and small computers. Obviously it won’t be possible to create so many website designs for different devices and different screen resolutions. With all of the new devices now it would become impractical to do so unless web developers gave a thought to responsive web design.
Responsive website designing is designing websites to respond to the devices and screen resolutions they are being viewed on. It involves the use of flexible design layouts and grids, graphics and CSS media queries. Most websites are designed to work on desktop screens that are 1000 pixels wide. When these are viewed on narrower screens, the website appears pretty compact with a horizontal scrollbar. On the other hand, a wider screen would result as a stretched website having too much white space. A responsive website design will allow websites to automatically consider image size, resolutions and scripting abilities. This means web designers do not have to carry out web design and development for every new device that is invented as the website design would itself react to user’s preferences.
The term ‘Responsive Design’ can imply the following:
- Adjusting the design layout and images for different devices and screen resolutions
- Altering images so that they use low bandwidth on cell phones
- The web page elements are simplified by using large buttons for easy selection and eliminating unnecessary elements for small screens
Web developers can create responsive layouts by using CSS media queries. These media queries allow designing CSS rule sets that are only applied when the website is viewed in a certain height or width or in a specific width/height range. For instance, if you are viewing a web page in a device that is 700 pixels wide, web designers can customize CSS rules that will itself resize the web page elements to fit on narrower screens. The problem with media queries is that when a new query comes, the previous designing style changes quickly. This problem can be overcome by using CSS transitions for some elements.
Data tables usually are pretty wide and the zooming option lets you zoom in and out to read clearly. This data table issue can be resolved by reformatting the data table or using a pie graph instead to fix narrow mobile screens. Previously when flexible layouts came into existence, the layout columns and text were flexible. The images in the web page could break the layouts by compromising on the pixels. But now with advances, images can be adjusted without breaking layouts. Moreover, responsive designing is not only resizing of images and content for fitting into smaller screens. Mobile environments can also rely on things such as relevant and focused content, simpler navigation, rows and lists instead of too many columns.
With increasing innovations in the mobile world, responsive web design is not the only answer. It can no doubt enhance the user experience but cannot solve issues with every platform or device.
