24 May 2017



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.

Want To Work With Us Then Feel Free To Contact Us