Responsive web design is an approach that results in websites, landing pages or emails that provide an optimal viewing and interaction experience for all users. This means easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices, from desktop computers to laptops, notebooks, tablets and mobile phones.
A responsive webpage or email adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS media queries, in the following ways:
- The fluid grid concept sizes elements in relative units, such as % or em, rather than absolute units, such as pixels or points.
- Flexible images are also sized in relative units, so as to prevent them from displaying outside their container.
- Media queries allow the page to use different CSS rules based on characteristics of the device the site is being displayed on, usually the width of the browser.
- Responsive web design has become more important as the amount of mobile traffic now accounts for more than half of total internet traffic. As a result, Google announced Mobilegeddon (April 21, 2015), which commenced a boost to the ratings of sites that are responsive if the search was made from a mobile device, having the net effect of penalizing websites that are not responsive.