Skip to content
digital response
  • Home
  • Services
    • Agile Campaign Management
    • All services
  • Partners
    • Bloomreach Engagement
    • Braze
    • Klaviyo
    • Salesforce
    • All partners
  • Cases
  • Who we are
  • es_ES
Contact
Blog, Mobile Email

Responsive Email Design: How to create a responsive email layout

14 January 2014 alecastellano Comments Off on Responsive Email Design: Cómo maquetar un email adaptable

At In another article we explained how the CSS rules that make it possible to adapt our design work.. These are the media queriesan element that comes from the hand of CSS3 and whose functioning we can understand very well in the web site http://mediaqueri.es/ where there are many examples of how a website can change depending on the width of the device on which it is displayed. While there is a great deal of information on Responsive Web Designsince it has been a trend for a couple of years now, we did not find much information on the web specifically on responsive email design. However, it is easy to extrapolate the way of working on the web to email. The main obstacles we encounter are due to the different email clients that interpret styles differently. So, if in web design, it's a headache to do tests crossbrowser and check that it displays the same in all browsers, email adds the headache of the different platforms. and levels of compatibility.
In any case, given the new and growing data on the mobile opening ratesIn the meantime, it is to be hoped that this lack of adaptation to the latest technologies in email clients will soon be remedied.
email-movil
Another problem we encounter is that emails are laid out differently from the web: tables, inline styles... And this leads us to ask ourselves... where do we put the media queries? Necessarily we have to break the inline style rule, since it is not possible to embed these rules like this. The solution is to embed the CSS rules in the email header between the tags. In doing this we must understand that Gmail will not take these rules. We might think that it is best to put all the CSS rules of the email inside the code and leave just the media queries inside the tag, but don't forget that CSS rules work in cascade and this means that the last rules declared in the document will override the previous ones. Thus any inline style would overwrite what is declared in the head of the email. Therefore if we want our email to be responsive we can only declare general inline style rules that are not going to be modified according to the width of the device. The styles that can be changed will all go in the head, and the media queries to the queue of rules to be taken as a priority on a device-by-device basis. Some point out that adding !important to the CSS rules in the head would solve the overwriting of inline styles, but in some tests we have done this is not always the case.
Let us now look at some more technical details of how it would create a media query. As long as you are familiar with style sheets, you will find it easy. It is simply a matter of declaring the specific rules for each size within a declaration of this form:
@media only screen and (max-width: 480px) { ... }
Or we can even specify further by giving it a maximum and minimum width, for example:
@media only screen and (min-width: 480px) and (max-width: 768px) { ... }
Within the brackets we will place the specific rules for each measure. There is no consensus on the points of change of the rules, but a logical definition could be:
Mobiles: Max-width:480px
Tablet: min-witdh:480px and max-width: 800px
Desktop: min-witdh:800px and max-width: 1200px
High-resolution desktop: min-width:1200px
In any case, at the production stage, we may detect the need to declare further media queries to correct some details that don't quite fit in with the most common rules. If you would like to know more about how we work in the agency, please contact us. responsive email templateswe recommend this article.
We would like to know more about your experience with Responsive Email Design, in this case in its more technical aspect. Have you managed to overcome the compatibility problems between devices and applications? Do you know of examples to take as a reference? Should we consider Gmail as lost on this path? In this phase of maturity, debates like this one are necessary to get closer to a technical standard and a standard way of working.
To find out more about responsive email we recommend that you take a look at our Webinar.

  • Responsive Email Design
alecastellano

Post navigation

Previous
Next

Search

Categories

Latest posts

  • Empowering ecommerce through user experience and technology
  • Mejores prácticas de accesibilidad en emails
  • Agencia Marketing Automation
    Agencia de marketing automation

Related posts

Marketing Automation
Email Marketing Agency

Email marketing agency

19 May 2025 José Boix Comments Off on Agencia de email marketing

Email marketing agency in Barcelona In today's digital environment, connecting with users in a personalised way is key to the success of any strategy. In Barcelona, Digital Response is positioned as an email marketing agency specialising in effective and automated email campaigns. Why work with an expert agency in email marketing?

Blog, Mobile Email

Responsive Email Design: resources and materials from our webinar

20 May 2015 alecastellano Comments Off on Responsive Email Design: recursos y materiales de nuestro webinar

Last Wednesday we launched our first webinar. The theme of this first seminar was Responsive Email Design, a hot topic in the email marketing sector that many of you are still "afraid" of due to the lack of homogeneous interpretation by many email clients.

Blog, Email design

Yahoo fixes its problems with media queries

7 April 2015 alecastellano Comments Off on Yahoo soluciona sus problemas con las media queries

At the beginning of February, Fresh Inbox started a campaign to ask Yahoo to fix its incompatibility with the media queries we use to make our emails responsive.

digitalResponse_claim_500

We work with CRM teams looking to scale their programmes, operational excellence and improve results.

Agency
  • Services
  • Partners
  • Cases
  • Who we are
  • Work with us
  • Contact
Social
  • Facebook
  • Twitter
  • Linkedin
  • Youtube
  • Spotify

2025 © Digital Response, all rights reserved. Web by sararovira.com

  • Legal notice
  • Privacy policy
  • Cookies
Manage consent
To provide the best experiences, we use technologies such as cookies to store and/or access information on your device. Consenting to these technologies will allow us to process data such as browsing behaviour or unique identifiers on this site. Not consenting, or withdrawing consent, may adversely affect certain features and functions.
Functional Always active
The storage or technical access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing unsolicited preferences of the subscriber or user.
Statistics
Technical storage or access that is used exclusively for statistical purposes. Storage or technical access which is used exclusively for anonymous statistical purposes. Without a request, voluntary compliance by your Internet service provider, or additional records from a third party, information stored or retrieved solely for this purpose cannot be used to identify you.
Marketing
Technical storage or access is necessary to create user profiles to send advertising, or to track the user across a website or across multiple websites for similar marketing purposes.
Manage options Manage services Manage {vendor_count} vendors Read more about these purposes
See preferences
{title} {title} {title}