Responsive web design is a recent term that has been used to describe the concept of a website s layout changing in response to the user’s screen size and resolution. This has grown in importance with the rise of smartphones and tablets because their screens are very different from those of traditional laptops and desktops. Ethan Marcotte coined the phrase responsive web design and he wrote a book on the subject, fittingly titled Responsive Web Design.
Many users may have noticed that websites will often have an alternative mobile site. In the past this has been a separately designed enterprise but today with an even greater variety of devices, browsers, and screens it has become increasingly inefficient to design separate websites and the utility of flexible layouts has been recognized. The issue is that maintaining different sites for different devices is time-consuming and expensive. Also, many times a site will detect the kind of device that is used to access it and redirect it if it is a mobile device. With the large number of mobile devices being used to access sites, there is a greater strain on the server s resources.
Marcotte explains in his book that there are two other elements to responsive web design besides media queries and these are flexible/fluid grids and responsive images. Essentially grids used to be made with a certain number of pixels with a certain number of columns. To make this fluid one of the first ways to think about the design is to think about proportions and to make things scalable. There are already premade fluid grids that can be downloaded and used for new responsive websites. The next issue becomes one of fixed images in a fluid grid and this is tackled through the use of responsive images. The key is to essentially limit the image s size to the container that is used on the website. These issues are simple in terms of ideas but complex in their execution. These concepts are integral to future web design because responsive behavior will be increasingly valuable to designers and consumers. Responsive web design will essentially will allow a user using any device to have a more personally tailored and comfortable experience.