Responsive design

yes, your emails need it too

Responsive vs Adaptive

Both responsive and adaptive design optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on. But there are important differences:

 

Responsive design works flexibly – a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that automatically flexes and changes based on a multitude of factors.

 

Adaptive design is different. Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics.

 

The downside to adaptive design is that two (or more) discrete versions of your website must be created for each ‘view’ (desktop, tablet, mobile, etc.), which exponentially increases development and maintenance costs.

 

What exactly is responsive design?

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.