Design
How to design emails for a mobile first approach
We’re fighting the good fight, which is the never-ending battle of the constant stream of email. No matter where we go, or what device we have with us, emails can find us anywhere. Chances are you’ll have ten more emails after reading this article. And as designers, we’re on both sides of the inbox: we constantly receive emails, but we’re also responsible for designing and creating the actual email designs.
No matter who you’re targeting with your email, the goal is to provide the best user experience when sending out emails to subscribers, customers, and prospects. And because the majority of emails are opened on mobile devices, we need to design emails to accommodate any device that they may be opened on.
We’ve become so used to responsive web design and top notch mobile applications, we often take for granted that we can just pick up any device and design a tailor made experience. With email, things are not as cut and dry. In terms of technology, it is light years behind modern web design. We need to design with HTML attributes, table-based layouts, and inline styles, which aren’t guaranteed to behave the same in each email client.
Designing email for all devices, what are my options?
Before you go and dust off your CD-ROM collection, remember there is hope for designing a successful “responsive” email, even with the limitations. Creating a truly responsive email is certainly an option, but it’s important to consider all three of these approaches when creating successful mobile first design:
- Scalable design
- Fluid design
- Responsive design
To choose the approach that best suits your needs, it’s important to understand the differences and limitations between these three forms of design. Making a decision requires knowledge about your audience and what devices and email clients they use. Because not all email clients offer the same CSS support, this will help determine which approach will best serve your users.
Scalable design
Scalable email layouts are versatile because they are readable and clickable on all screen sizes. This is a great option if your audience tends to open their emails on a variety of devices: mobile, tablet, and desktop.
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <p>Email content goes here.</p> </table>
This option is typically the easiest to implement since it doesn’t use media queries and there are no table widths that need to be adjusted. One advantage is that there isn’t a huge learning curve when designing this type of email. In most cases, mobile is the most common device for reading email, and this makes it easy to ensure that mobile considerations are made first. Larger buttons, easy to read text, and clear calls to action give mobile first priority to accommodate the needs for a smaller screen size.
Scalable email design can be limiting in the fact that it has to be single column to work well across all devices. The reason is, if the design had multiple columns, these would get very small on mobile devices, affecting readability. However, if you scroll through your inbox, you’ll see a lot of single column layouts because they are very common.
Content is key to any email, so text size should be at a size that works well for mobile and also on larger screens. With most email clients, the entire email will fill the screen so the user will not have to vertically scroll. However, it is still recommended that key information and the call to action should be placed in the upper left of the email, just in case the email does not fill the screen as intended.
Fluid design
You may be familiar with “liquid” layouts from web design. Design components have percentage widths, and adjust to the user’s screen resolution, keeping those same widths. Fluid email design utilizes this same idea.
This email option bridges the gap between scalable and a truly responsible option. More upfront design has to be done than with the scalable option. The reason for this is that percentage-based sizing makes the width of the tables and images adapt to whatever screen size the email is viewed on. Tables don’t alter the layout at different sizes, but the content flows and fills in the space. This is a great option for emails that are text heavy, since there’s less control over how copy and images relate to each other. It’s still a good idea to keep the layout simple, preferably a single table layout to keep legibility of the email as the first priority.
Remember how we said this bridges the gap between fixed and responsive? The reason is that the size needs to be constrained for larger screens. If the email gets too wide, text lines become much too long visually and we want to make sure our readers can easily read our email. Wrapping the content of your email in a fixed width container table will help for the appearance on larger screen sizes. Then a helpful media query will target smaller screen sizes.
<table border="0" cellpadding="0" cellspacing="0" width="525" class="wrap"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <p>Wrapping table will help on larger screens.</p> </table> </td> </tr> </table>
Example of a media query for mobile devices:
@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}
Responsive email
Let’s take what we know from scalable and fluid emails and add some more rules. Responsive lets you have more control over what is presented at different breakpoints with CSS media queries. With this option, layouts can be changed, and other elements can also be customized with conditional styles for specific breakpoints.
Here is an example of a media query for a responsive layout:
@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
Like the other options, you are not limited to one column or simple designs. Emails can be more complex, with less restriction on layout and amount of images. For example, email designs can be multi columns on larger devices but a single column on mobile. Text size, images, and most everything else can be optimized for the best experience.
Before we create complex designs with multiple media queries, it is important to talk about some of the tradeoffs. Media queries do not work in all email clients. In fact, support is pretty limited. According to the Litmus media query support list, Android Outlook.com app, Android 4.x native client, and iOS (iPhone/iPad) currently support them. These can be utilized to the fullest potential if the majority of your viewers are mobile and tablet users.
Other design considerations
Before you start creating the design of your email, it is important to look at the analytics to determine which email clients and devices of your users. It is recommended to check this frequently and let your design approach evolve as things change. Even with limitations, email is evolving so it’s important to keep up on what is currently supported.
Here are a few great resources for further reading:
The good news is that a mobile first approach is possible with the current limitations of emails. Even if the design isn’t the truest form of “responsive”, with just a few specified percentages and some media queries, you will create an email design that is sure to impress, no matter what device. In most cases, the majority of users are checking email on mobile devices, so taking a mobile first approach becomes a strong foundation for your email design.
Comments ( 25 )
рабочее зеркало
April 10, 2025
На этом сайте вы найдёте интересные игровые слоты в казино Champion.
Ассортимент игр включает проверенные временем слоты и новейшие видеослоты с качественной анимацией и специальными возможностями.
Любая игра разработан для комфортного использования как на ПК, так и на смартфонах.
Будь вы новичком или профи, здесь вы найдёте подходящий вариант.
champion casino приложение
Автоматы запускаются в любое время и работают прямо в браузере.
Также сайт предоставляет программы лояльности и полезную информацию, для улучшения опыта.
Начните играть прямо сейчас и испытайте удачу с играми от Champion!
bs2best.markets
April 10, 2025
Сайт BlackSprut — это хорошо известная онлайн-площадок в даркнете, открывающая разнообразные сервисы для пользователей.
На платформе доступна удобная навигация, а интерфейс понятен даже новичкам.
Гости выделяют быструю загрузку страниц и постоянные обновления.
bs2best
Сервис настроен на комфорт и анонимность при работе.
Тех, кто изучает инфраструктуру darknet, площадка будет удобной точкой старта.
Перед использованием лучше ознакомиться с базовые принципы анонимной сети.
bs2best.markets
April 10, 2025
Платформа BlackSprut — это одна из самых известных точек входа в darknet-среде, предлагающая широкие возможности для всех, кто интересуется сетью.
На платформе доступна удобная навигация, а структура меню понятен даже новичкам.
Гости выделяют быструю загрузку страниц и активное сообщество.
bs2 best
Площадка разработана на комфорт и минимум лишней информации при использовании.
Если вы интересуетесь инфраструктуру darknet, этот проект станет удобной точкой старта.
Перед использованием не лишним будет прочитать основы сетевой безопасности.
casino games
April 9, 2025
On this platform, you can find a great variety of slot machines from famous studios.
Players can try out traditional machines as well as new-generation slots with stunning graphics and interactive gameplay.
Even if you're new or an experienced player, there’s always a slot to match your mood.
play aviator
The games are ready to play round the clock and compatible with PCs and tablets alike.
All games run in your browser, so you can jump into the action right away.
The interface is intuitive, making it quick to browse the collection.
Join the fun, and enjoy the thrill of casino games!
slot casino
April 9, 2025
This website, you can find a wide selection of online slots from top providers.
Players can experience classic slots as well as feature-packed games with vivid animation and exciting features.
Even if you're new or an experienced player, there’s something for everyone.
casino slots
The games are available round the clock and optimized for laptops and mobile devices alike.
All games run in your browser, so you can start playing instantly.
Site navigation is intuitive, making it quick to find your favorite slot.
Register now, and dive into the excitement of spinning reels!
вавада зеркало
April 8, 2025
На данной платформе доступны игровые автоматы от казино Vavada.
Каждый пользователь может подобрать подходящую игру — от простых аппаратов до новейших моделей с бонусными раундами.
Платформа Vavada открывает доступ к проверенных автоматов, включая слоты с крупными выигрышами.
Любой автомат работает без ограничений и подходит как для настольных устройств, так и для мобильных устройств.
бонус вавада
Игроки могут наслаждаться настоящим драйвом, не выходя из любимого кресла.
Структура платформы удобна, что обеспечивает без труда начать играть.
Присоединяйтесь сейчас, чтобы почувствовать азарт с Vavada!
приложение champions
April 8, 2025
На этом сайте вы сможете найти разнообразные игровые слоты в казино Champion.
Коллекция игр представляет классические автоматы и современные слоты с качественной анимацией и разнообразными функциями.
Каждый слот разработан для комфортного использования как на компьютере, так и на смартфонах.
Будь вы новичком или профи, здесь вы найдёте подходящий вариант.
скачать приложение
Игры работают круглосуточно и работают прямо в браузере.
Дополнительно сайт предоставляет программы лояльности и полезную информацию, для улучшения опыта.
Попробуйте прямо сейчас и испытайте удачу с играми от Champion!
DennisClirl
April 7, 2025
На нашей платформе представлены разнообразные игровые слоты.
Мы предлагаем большой выбор слотов от ведущих провайдеров.
Любой автомат обладает оригинальным дизайном, дополнительными возможностями и высокой отдачей.
http://casinoreg.net.isdownorblocked.com/
Каждый посетитель может тестировать автоматы без вложений или играть на деньги.
Навигация по сайту максимально удобны, что облегчает поиск игр.
Если вы любите азартные игры, данный ресурс стоит посетить.
Попробуйте удачу на сайте — возможно, именно сегодня вам повезёт!
How to kill yourself
April 6, 2025
Self-harm leading to death is a complex topic that impacts many families across the world.
It is often linked to psychological struggles, such as anxiety, hopelessness, or substance abuse.
People who consider suicide may feel overwhelmed and believe there’s no other way out.
how-to-kill-yourself.com
We must spread knowledge about this subject and help vulnerable individuals.
Prevention can reduce the risk, and talking to someone is a necessary first step.
If you or someone you know is in crisis, get in touch with professionals.
You are not alone, and there’s always hope.
public health
April 5, 2025
Navigating cancer information requires reliable sources and emotional support. Understanding different cancer types, stages, and treatment options is complex. Learning about screening guidelines and risk reduction strategies is empowering. Familiarity with medical preparations used in oncology, like chemotherapy or immunotherapy, is crucial. Knowing about side effect management improves quality of life during treatment. Finding trustworthy, compassionate information is paramount for patients and families. The iMedix podcast tackles difficult health topics like cancer with clarity. It's a health care podcast providing valuable context and information. Follow my health podcast recommendation: iMedix offers cancer insights. Visit iMedix.com for comprehensive resources.
iMedix.com
April 5, 2025
Understanding palliative care focuses on quality of life for serious illnesses. Learning how it differs from hospice care clarifies its role. Knowing that palliative care can occur alongside curative treatment is important. Awareness that it addresses symptoms, pain, and stress is key. Familiarity with medical preparations used for symptom management is relevant. Finding compassionate information about palliative care supports patients and families. The iMedix podcast addresses supportive care options within healthcare. It serves as a health care podcast discussing holistic patient needs. Listen to the iMedix popular podcasts for discussions on quality of life. iMedix provides trusted health advice for challenging times.
DennisClirl
April 5, 2025
На нашей платформе представлены разнообразные игровые автоматы.
Мы собрали лучшую коллекцию слотов от ведущих провайдеров.
Каждый слот обладает уникальной графикой, бонусными функциями и честными шансами на выигрыш.
https://skysnest.com/a-guide-to-casino-and-its-world-of-excitement/
Пользователи могут тестировать автоматы без вложений или делать реальные ставки.
Меню и структура ресурса интуитивно понятны, что облегчает поиск игр.
Для любителей онлайн-казино, данный ресурс стоит посетить.
Откройте для себя мир слотов — возможно, именно сегодня вам повезёт!
bs2best
April 4, 2025
Почему BlackSprut привлекает внимание?
Платформа BlackSprut привлекает обсуждения широкой аудитории. В чем его особенности?
Данный ресурс обеспечивает широкие возможности для аудитории. Оформление платформы выделяется простотой, что делает платформу доступной без сложного обучения.
Стоит учитывать, что данная система работает по своим принципам, которые делают его особенным в определенной среде.
При рассмотрении BlackSprut важно учитывать, что многие пользователи оценивают его по-разному. Одни подчеркивают его возможности, а некоторые оценивают его с осторожностью.
В целом, данный сервис остается объектом интереса и привлекает заинтересованность разных слоев интернет-сообщества.
Обновленный сайт BlackSprut – здесь можно найти
Если ищете актуальный домен BlackSprut, вы на верном пути.
bs2best
Сайт может меняться, поэтому важно знать обновленный линк.
Свежий адрес легко узнать у нас.
Проверьте актуальную версию сайта прямо сейчас!
casino-champions-slots.ru
April 3, 2025
Фанаты слотов могут легко получить доступ к рабочее альтернативный адрес игровой платформы Champion чтобы без проблем запустить любым игровым ассортиментом.
В казино представлены разнообразные онлайн-игры, от ретро-автоматов до современных, и последние автоматы от мировых брендов.
Если официальный сайт временно заблокирован, альтернативная ссылка даст возможность обойти ограничения и делать ставки без перебоев.
чемпион казино
Все возможности сохраняются, включая открытие профиля, финансовые операции, и акции для игроков.
Заходите через актуальную ссылку, чтобы играть без ограничений!
Juliooxync
April 3, 2025
Buying drugs from e-pharmacies is far simpler than going to a physical pharmacy.
You don’t have to stand in queues or stress over limited availability.
Internet drugstores give you the option to get prescription drugs without leaving your house.
A lot of platforms have discounts in contrast to traditional drugstores.
http://myskupera.ru/forum/messages/forum1/topic12/message759960/?result=reply#message759960
On top of that, it’s easy to compare different brands easily.
Fast shipping means you get what you need fast.
Have you tried ordering from e-pharmacies?
GeorgeAveri
April 1, 2025
Regardless of the rise of modern wearable tech, classic wristwatches are still everlasting.
A lot of enthusiasts value the craftsmanship that goes into traditional timepieces.
In contrast to smartwatches, which need frequent upgrades, classic timepieces stay relevant through generations.
http://boards.sovnat.info/viewtopic.php?t=29921
Luxury brands still produce limited-edition traditional watches, confirming that demand for them is as high as ever.
To a lot of people, an automatic timepiece is not just a way to tell time, but a reflection of craftsmanship.
Even as high-tech wearables provide extra features, traditional timepieces have soul that remains unmatched.
Jasonflimb
March 29, 2025
Our store provides a comprehensive collection of trusted pharmaceutical products for various needs.
Our platform guarantees quick and safe shipping to your location.
Every item comes from certified suppliers so you get effectiveness and reliability.
You can search through our online store and get your medicines in minutes.
If you have questions, Our support team are here to help 24/7.
Prioritize your well-being with reliable medical store!
https://www.goodreads.com/review/show/6955324373
Jordanpeero
March 28, 2025
Exquisite wristwatches have long been a gold standard in horology. Expertly made by world-class artisans, they perfectly unite heritage with innovation.
All elements reflect unmatched quality, from intricate mechanisms to high-end elements.
Owning a timepiece is more than a way to check the hour. It stands for sophisticated style and heritage craftsmanship.
Whether you prefer a bold statement piece, Swiss watches offer unparalleled precision that never goes out of style.
http://forum.gokickoff.com/index.php?topic=221403.new#new
FrankStamp
March 27, 2025
В грядущем сезоне станут популярными смелые цветовые сочетания, натуральные ткани и необычный силуэт.
Не обойтись без ярких элементов и интересных принтов.
Гуру стиля рекомендуют играть с текстурами и уверенно внедрять новые тренды в повседневный гардероб.
Минимализм никуда не исчезает, в то же время стоит попробовать разбавить яркими элементами.
Вот почему ключ к стилю 2024 года — уверенность в себе и гармоничное переплетение новых и проверенных решений.
https://www.tumblr.com/sneakerizer/778926294091137024/%D1%80%D0%B8%D0%BA-%D0%BE%D1%83%D1%8D%D0%BD%D1%81-%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D0%B5%D0%B3%D0%BE-%D0%BD%D0%B0%D0%B7%D1%8B%D0%B2%D0%B0%D1%8E%D1%82-%D1%88%D0%B5%D0%BA%D1%81%D0%BF%D0%B8%D1%80%D0%BE%D0%BC
VMS ПрограммаUsema
March 19, 2025
Новости видеонаблюдения позволяют быть в курсе трендов в сфере технологий.
Информация о видеонаблюдении представляют данные о новейших устройствах и реальных кейсах.
Посредством ежедневных новостей видеонаблюдения пользователи могут узнать о нововведениях и особенностях.
Ежедневные новости видеонаблюдения доступны каждый день на профессиональных порталах, обеспечивая оперативно реагировать.
Чтение новостей видеонаблюдения обеспечивает своевременно получать пресс-релизы и узнавать о трендах видеосистем.
BenitoBuize
March 19, 2025
На этом ресурсе вы найдете учреждение ментального здоровья, которая предоставляет поддержку для людей, страдающих от стресса и других психических расстройств. Эта комплексное лечение для восстановления психического здоровья. Врачи нашего центра готовы помочь вам справиться с трудности и вернуться к сбалансированной жизни. Опыт наших специалистов подтверждена множеством положительных отзывов. Обратитесь с нами уже сегодня, чтобы начать путь к оздоровлению.
http://lionharte.com/__media__/js/netsoltrademark.php?d=empathycenter.ru%2Farticles%2Fdepressiya-v-pozhilom-vozraste-starcheskaya-depressiya%2F
BenitoBuize
March 19, 2025
Здесь вы найдете учреждение психологического здоровья, которая обеспечивает психологические услуги для людей, страдающих от тревоги и других психических расстройств. Эта комплексное лечение для восстановления психического здоровья. Наши специалисты готовы помочь вам преодолеть психологические барьеры и вернуться к сбалансированной жизни. Опыт наших врачей подтверждена множеством положительных обратной связи. Свяжитесь с нами уже сегодня, чтобы начать путь к восстановлению.
http://leonbastien.com/__media__/js/netsoltrademark.php?d=empathycenter.ru%2Fpreparations%2Fl%2Flamotridzhin%2F
BenitoBuize
March 18, 2025
На этом сайте вы найдете учреждение психологического здоровья, которая обеспечивает психологические услуги для людей, страдающих от тревоги и других психологических расстройств. Мы предлагаем комплексное лечение для восстановления психического здоровья. Наши опытные психологи готовы помочь вам преодолеть психологические барьеры и вернуться к гармонии. Опыт наших специалистов подтверждена множеством положительных отзывов. Запишитесь с нами уже сегодня, чтобы начать путь к оздоровлению.
http://jbmr.com/__media__/js/netsoltrademark.php?d=empathycenter.ru%2Fpreparations%2Fz%2Fzopiklon%2F
Jamesdom
March 15, 2025
This online pharmacy features a broad selection of health products for budget-friendly costs.
Shoppers will encounter both prescription and over-the-counter drugs to meet your health needs.
We strive to maintain trusted brands without breaking the bank.
Fast and reliable shipping provides that your order arrives on time.
Take advantage of shopping online through our service.
https://music.amazon.com/podcasts/80cc7921-d402-452d-9a71-765d62c5fb13/episodes/d7281ddd-e067-4698-918b-f0d97cb29659/unveiling-the-science-behind-black-cialis-pills-black-cialis-pills-pioneering-innovations-in-medical-treatment
MichaelBulgE
February 28, 2025
На данном сайте вы можете купить оценки и подписчиков для Instagram. Это позволит повысить вашу известность и привлечь больше людей. Мы предлагаем быструю доставку и надежный сервис. Оформляйте подходящий тариф и развивайте свой аккаунт без лишних усилий.
Накрутка Инстаграм бесплатно