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.
The solution lies in having a layout that is flexible and responds to the users themselves. One major responsive web design method is the media query, introduced in CSS3. A media query allows the site to essentially ask the device what its specifications are. There are two essential parts to media query. The first is the media type, which in this case is what kind of screen is the device using and the second is the query itself, where the device inspects a certain feature of the device such as its vertical or horizontal resolution. There have been previous responsive layouts based on JavaScript but media queries are more powerful because they can test for more than just screen resolution and these separate properties can all be tested in a single query. For example, even the bandwidth being used by the consumer of the website can factor into the layout viewed. Based upon the answer to the queries the CSS will tailor its markup of the site to the device being used. Responsive web design also allows a web designer to alter where or whether images will appear on a layout all in adjustment to the user.
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.
