Since the arrival of commercial internet in the mid 90s, websites have attempted to promote products and services to users around the world through flickering static on CRT screens in some form or another.
Due to a misunderstanding of online interaction, the early attempts of online marketing were largely laughable. Early emarketers typically came from a background in advertising through pamphlets, posters and brochures; and thus designed web pages in the same way.
We’re talking static, unresponsive pages that required early internet users to scroll in eight different directions to read a sentence pointing them to another page… full of the same scrolling!
If there was an internet hell, this was it!
Jump forward to today, and we often see a similar situation.
However, mobile devices have become the new desktop and promotional sites have become the new email – yet so many emails today are still plagued by bad layout design.
Static Email Design
Static Design does not adjust well for different sized screens. If the screen is too small for the email, a scrollbar will appear on the side and bottom of the email browser forcing the reader to scroll in order to read the entire mail.
Static design is widely accepted as the easiest and least complex email design to implement. In addition, you won’t have to worry about your recipients’ email clients supporting CSS code, a requirement for responsive design.
As you can imagine, in an age where 40% of internet users access the internet through a mobile device, this kind of design is problematic. Users who have to scroll in 8 different directions on a mobile screen would rather close the email and move on than spend the next 15 minutes trying to decipher what you’re trying to sell them.
Liquid Email Design
Liquid Design is a very basic form of responsive email. It adjusts the content depending on the width of the recipient’s screen, “squishing” the content to fit. It does not adjust the content based on the height of the screen and behaves the same as static design when the window is not long enough to display the entire message.
Simpler to implement than full responsive design, liquid design offers basic scaling for minimal effort and investment.
Unlike static design, liquid design could contain code that is not compatible with some email clients. It also looks terrible when the email is opened in resolutions too wide or narrow that was originally intended.
Adaptable Email Design
Modern email marketers have started using adaptable and responsive design to ensure that readers can read their email on any screen it finds itself on. These design types use @media, a special set of CSS styles that act like conditional statements or dynamic rules.
Adaptable design uses a series of static layouts based on different breakpoints for a set of resolutions. Adaptable content shifts to different designs based on what screen size is viewing the page. Typically, there will be 5 different layouts for the most common screen sizes:
- 480 for smart phones
- 1200 – 1600 for desktop computers
- 900 – 1200 for laptop computers
- 760 for tablets
- 320 for smaller mobile phones
Here’s two different resolutions to demonstrate how adaptive design works when the screen size becomes narrower.
Designers have complete control over how their email is viewed on each of the most common screen sizes and devices. The content is not squashed or spread thin when the screen resolution in question falls outside of the specified resolutions.
Designers have to design and code each layout for the five common resolutions which means more time and resources spent on each communication. Out of all the designs, Adaptable Design tends to involve the most work and take the most time to get right.
Responsive Email Design
Responsive design uses a series of liquid layouts based on the resolution of the screen that opens the email. The content automatically adjusts as the resolution is changed, streamlining words and pictures as the screen resolution becomes narrower, as you can see with these two examples.
Responsive Design is a sure-fire way to ensure your email is able to be read on a very large majority of resolutions. While the text and images resize and compress, they don’t ‘squash’ like pure liquid designed content.
CSS code is not supported on some email applications, for example, the iPhone and Android Gmail application. In addition to this, Responsive Design requires more work and planning than simpler designs such as static or liquid design.
To see exactly how each design works; open this page, adjust the window size and observe how the content changes.
SharpSpring Mail + offers responsive email design templates that are created to render on a wide variety of mobile devices and computer applications. We recommend using single column layouts or symmetrical designs which are able to restructure properly on smaller screens. This will maximize the efficiency and readability of your emails.