Web Design Resources

Web Design Resources

Responsive Website Design

The Internet is getting complex. In the good old days (in Internet time, that means about 5 years back), a web design company had to code a website for a resolution of 800 or 1024 max. Most web designers used a very simple technique to make the website look good for both these resolutions - design for 800, and extend the background pattern for 1024. However, as more and more gadgets could access the Internet, web design became complex. Desktops, notepads, tablets and cell phones came in different sizes and resolutions. It became increasingly difficult for web designers to develop a 'one size fits all' kind of websites as clients wanted a cost effective single website that would look good on all these devices.

Responsive Websites 
Enter responsive website. Simply put, responsive websites change on the fly to fit the container device that is viewing them.  They scale their layout, design and even content elements to accommodate the device's screen, providing a better experience for the website users. Rather than creating a single webpage that is a fixed resolution, responsive websites are composed of elements that size, shape, and place themselves based on the width of the available browser screen. 

Theory behind Responsive Websites
The basic theory of responsive web design is to use flexible grids and scalable images. Web browsers, using the HTTP protocol, provide information on the maximum pixel width they support using a CSS element known as a media query. Flexible images and fluid grids then size correctly to fit the available screen size.  A 'media query' is a CSS3 attribute that allows web designers to gather data about the site visitor and use it to conditionally apply CSS styles. In other words, a web design responds to the need of the gadget and displays only that content which the designer has defined appropriate. 
Of course, responsive web design has some limitations.