What is the difference between Mobile Responsive and Mobile Friendly?

When HTML messages are sent from AWeber using our Drag & Drop Email Builder, they are "mobile responsive" by default. This is not to be confused with "mobile friendly" which would be a different display.

Why are AWeber messages mobile responsive? There are several reasons, but the primary reasons are:

  • Easier for subscribers to read on both desktops and mobile devices
  • Text, images, and buttons automatically adjust to fit
  • Multi-column layouts adjust to a single column (left column stacks on top of right)
  • Content is easy to access with both a mouse and a touchscreen

Here at AWeber we code our templates to be mobile responsive using a Media Query. That code will check the device being used to view the message, and adjust the format accordingly. Please keep in mind, however, that some apps will fall back to a mobile friendly version in the event that media queries are not supported on their end. The table below will show which apps will read that code, and which will not.

App Name Media Query Support
iOS Yes
Android 4.4 Yes
Gmail App (iOS, Android) Yes
Gmail App IMAP (Android) No
Yahoo Mail! (iOS, Android) Yes
Outlook.com (iOS) Yes
Outlook.com (Android) Yes

 

Mobile Responsive

When viewed on mobile devices versus desktop clients, responsive email uses "media queries" to adjust the layout of the email message, font sizes, images, and buttons; in some cases, they can even be used hide or swap content. This means, in effect, there are two versions of the email message - the desktop version and the mobile version. Based on where the message is being opened, PC or mobile device, the code automatically adapts and optimizes to the specific screen size or viewing device.

Responsive email design is rapidly growing as more and more users open email messages on mobile devices. It should be noted that media queries and responsive techniques don’t work everywhere. Within AWeber, should a client or device not accept media queries, the message defaults to a mobile friendly (scalable design).

Mobile responsive example one Mobile responsive example two

 

Mobile Friendly (Scalable Email Design)

Mobile friendly design can be defined as a single design that works well across both desktop and mobile email clients. There is no specific HTML/CSS code to adjust content or image sizes between the two platforms. Mobile friendly designs generally appear the same on a mobile device but "scaled down" to about half the size.

Mobile friendly example one Mobile friendly example two

 

What if I have issues designing my messages?

Contact our AWesome templates team

AWeber offers hundreds of templates you’re welcome to use! If you would ever find yourself wanting to modify an existing template or would like a custom template built for you to reflect your branding, our Template Team would be happy to modify existing templates or design a custom template for you!

Have more questions? Submit a request