Why I don't use breaking points for responsive emails and you shouldn't too

Because of the 600 px width of the emails, which is the recognized standard and best practice for email newsletters, there is no point in using breaking points in email coding. When I code, everything under 600 px wide starts stacking becoming responsive fluid occupying the full width of the device.

Using a responsive fluid approach helps with a better use of the small screen real estate of the mobile phones.

The confusion comes from the huge resolution the mobile phones have. For example, the 5.8-inch screen of the iPhone 11 Pro  features a resolution of 2436 by 1125 pixels at 458 ppi. That makes a lot of developers think they need to break the view in multiple breakpoints. It's not how it works.

We are using the physical dimensions of the screens and not the resolution. Meaning, we base the media queries on the physical screen size. We literally should use mm and not pixels, that would be less confusing.

This is how I code responsive images:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
   xmlns:o="urn:schemas-microsoft-com:office:office">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title></title>
      <style type="text/css">
         img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 
         @media only screen and (max-width: 599px){
         img[class="fluid"] {max-width:100% !important;width:100% !important;height: auto !important;-ms-interpolation-mode: bicubic !important;} 
      </style>
   </head>
   <body>
      <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:600px; min-width:600px;" width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="innerTable">
         <tr>
            <td style="border-collapse: collapse;"><img style="display:block; border:none;" src="my-responsive-image.jpg" width="600" class="fluid"/>
            </td>
         </tr>
      </table>
   </body>
</html>

2 things:

  1. mso interpolation - interpolation forces IE to smoothly render resized images.
  2. I use double sized images so they display nice on retina displays, so no height on the image - you can hardcode the height using the rule of three calculation if you want. There are a couple of cases where will actually need to hardcode the height as well - e.g. animated gifs in Outlook.

That's all for today in terms of responsive emails. Will come back will more in detail tutorials on how I code responsive emails and why you should do the same. 

Till then, all the best and easy email coding! Your friend, the email snob.