Search
Close this search box.

Programming Tips for Mobile Devices

Programming Tips For Mobile Devices

Checking email is the most popular activity on smartphones. The widespread use of mobile devices has created new challenges for email designers and programmers. Now, instead of designing and programming for a standard monitor size, you’ve got to think about how your content will display on everything from a 54″ monitor to a 2″ smartphone screen. As with most things email, there isn’t a single or simple answer for how to deal with mobile devices. But, with 61% of consumers now reading at least some of their emails on a mobile device (Yesmail “Email Compass: The Mobile Effect”, 2013), it’s increasingly important to account for mobile in your email strategy.

You’ve basically got three choices when it comes to designing and programming your emails for mobile.

  • Mobile Aware
  • Mobile-Friendly (Fluid design)
  • Mobile Friendlier (Responsive design)

 

Mobile Aware – Mobile aware is the simplest solution because it doesn’t require special coding. It’s just designing your email with an awareness of the constraints of the small screen.

  • Keep the width of your email smaller than 600 pixels (400 pixels is a good number to start with).
  • Keep your call to action in the upper left so people viewing on mobile devices don’t have to scroll right, or up and down, to see it.
  • Use a single-column design
  • Use large font sizes and finger-friendly buttons and links

 

Mobile Friendly (Fluid Design) – Fluid design is a programming technique that enables an email message to shrink and grow based on the screen size on which it is viewed. This is done by setting table and cell widths and heights as percentages rather than set pixels.

A drawback of this method is that on large monitors, the email will expand to the full width of the screen and can often appear stretched and difficult to read.

Fluid design works best with a very simple, single-column design with images that are not intended to take up the full width of the email.

Mobile Friendlier – Responsive Design

The mobile friendliest technique is responsive design and programming. Responsive design uses media queries to specify what fonts, colors, images, and even layouts to use based on screen widths. Responsive design can be as simple as increasing the font sizes to a few pixels for mobile devices or as complex as switching a two-column layout to a single column and displaying different images.

Because media queries are written as part of style sheets, responsive design does not work in all email browsers. Older versions of Android devices, in particular, do not support media queries.

More Insights

Find Out How We Can Help Your Business.

Agile Education Marketing block logo

Subscribe to our monthly market insights newsletter

© 2023 Agile Education Marketing, All Rights Reserved

We use cookies to give you the best online experience. Cookies keep our site secure and reliable. They allow us to personalize agile-ed.com to you and help us analyze how the site is used.