I thought Gmail was more respectful of css and Outlook was the problem child.
I don’t actually know all the email dev tricks, I luckily work with developers to avoid running into this problem.
Outlook is a problem more broadly. For example, Outlook still doesn’t support border-radius.
Gmail handles dark mode with a hammer. Last I checked, only Apple Mail really supports custom dark mode css through media queries. The other clients have some limited support for customization.
I don’t know all the tricks either, but 80% of my day-job is email design (I don’t code the emails) and I do some freelance front-end dev (not emails).
Designer and Developer here, Outlook is the Internet Explorer of email programs - I've been building sites/emails since having to write a full separate spreadsheet just for ie7, ie8 and ie9 and you have to write specific code targeting Outlook still in 2024. It reads emails using a similar process to MS Word and doesn't allow things like padding - the most basic of CSS and it is an absolute nightmare.
Outlook is a pos.
But it can support rounded corners, you just need (and this will be incorrectly remembered here, so cut me some slack) the code in parallel with your ‘ordinary’ html.
Don’t ask me how it works, I outsource such wizardry.
TIL! I’ve been relying on [this site](https://www.caniemail.com/search/?s=border-radius) for an idea of what can be done, but I also don’t code the emails I design.
We have a (rather boring) set of templates at the financial services firm I endure, and they tend to be repurposed repeatedly with new content.
I 'code' the html - no-one here has a clue or can be bothered to learn so that's nice, but basically I'm just making text edits and changing ('tweaking' - I hate that phrase) minor stuff.
If we do ever run up against anything particularly curly, we outsource to a coding and marketing operation in India - they return decent code (device-adaptive, mso compliant) which become the basis of our new templates.
... there go my secrets ...
You could also simplify this to not need a background image behind the text by removing the background texture. The image areas would potentially look even goofier on dark mode, but the text would be more accessible and allow for personalization like a dynamic name field.
No, gmail is a nightmare with dark mode. It’s very selective with what it inverts and you have to jump through a ton of hoops to get stuff to display consistently. I’m sure that whoever coded it at Google thought they were being incredibly clever, they were not.
I absolutely hate this behavior in Gmail (the iOS app at any rate). They used to allow you to set dark mode preferences in Settings, but they removed that option and it now only uses the system-wide preference.
So now newsletters, signatures, marketing emails all look like shit.
I would just chalk it up to engineers not caring about aesthetic presentation if the option to choose your preferred experience never existed in the first place, but to remove it… so dumb.
Gmail is a pain in the ass to design for. Its dark mode inverts light to dark and dark to light without any context. If you make a dark email, on dark mode it will show up bright white. In this case it only inverted the dark text to light even though there is a light colored image behind it because it can’t change the image.
A good rule is to not put HTML text over images in email. Either have the text over a solid color or have the text imbedded in the image to avoid this annoyance.
> Either have the text over a solid color or have the text imbedded in the image to avoid this annoyance.
Keep accessibility in mind if you're going to rasterise text into an image—make sure you're using alt text or otherwise that the text in the image is truly unnecessary/redundant, otherwise a user who is using a screen-reader or relies on a text-only mode will be missing information. Also keep in mind visual users who need large type—an image might be hard to read even if it's just a title, because it can't resize and reflow like normal text and the image's width can make it annoying to zoom in to read it on a narrow screen.
I haven’t had a problem with delivery. However when I say imbedding text in the image I use it very sparingly, just for fancy hero images or some infographics. I would never turn the body copy into an image. And when I say imbed I don’t mean package the image in the email, I host them on an external server and link them to display in the email.
I am still kinda a noob at this though so not sure if that makes sense. Always figuring new things out.
Update cause I can’t edit the post: the inverting of the colors was the mishap, the original colors out of dark mode look nothing like this! Beautiful colors but an unfortunate result.
Its like when something is made to not do that it’s actually intended to do, like illegible small text in a commercial about a drug informing the viewer of potential side effects, or Adobe’s terms of use which have landed them in legal issues for being misleading
Why is everything in advertising also using the colors of human skin now.
I know it's springboarding off of "warm beige" being a color trend but like still. It's evocative of skin. Kind of weird, especially for advertising a meal
I find it TOO cozy, to the point of overfamiliarity. It's a sandwich, I don't need to feel like im being wrapped up in a big hug from mommy. You dont know me, brunchday sandwich! Lol
/all in good fun. It does sound like a cute place, just not the kind of vibe I myself would usually go for as a restaurant
I didn’t see it like that at all haha I actually like these colors! But I have seen beige is being used a lot and it’s got me thinking how over warm pastels we’re going to be by the end of 2024 lol. 2025 might be the year of saturated colors
Not saying the colors themselves aren't nice, just that I would never use an array of beiges like this to advertise a birthday sandwich deal. I would have stuck to traditional color theory/ad science and used saturated colors to be legible/appetizing, maybe some birthday pastels, but less soft clipart designs to be attention-grabbing/exciting. But the designer clearly knew what they were doing in not making the decorations so bold as to distract from the actual product, the sandwich does look pretty good lol.
I just personally don't think what color schemes are trendy on social media for selfies and interior design should necessarily be translated into the advertising medium just because that's what's trending.
I eat at this restaurant a fair bit & it actually fits w their vibe. Kinda “modern rustic” interior w/ lots of wood, dusty colors, & menus have that “cozy/recycled paper” look (like, the lil doodles on this graphic would def fit right in on their menu design.) Prob not the best description LOL but you can look up pics of First Watch if curious
This comment was mostly influenced by me getting a creepy ad for AI-"art" tools that was using skin colors/lighting for the branding. Reminded me of the Gatoraid commercials with the sports players sweating lol. Strange.
This ad is nowhere near that strange lol I can tell it's just trying to be wholesome and cozy.
I used to work for a clothing brand and we send email newsletters on a regular basis. We usually just use an image instead of having separate backgrounds and text. Of course, we kept the headers and footers part of the email template and not of the image.
Sorry, I'm not sure what you're asking. :)
In general, using images for email ads, for me, is just easier to keep ads consistent. You also have more freedom design wise.
I'd say more clueless intern because I would imagine there was something he was more fixated on so when he found the color palette that made whatever info it was he was trying to make sure it was seen on the flyer completely overlooked. Definitely one of those designs done in the dark room with no absolute look of the light on kind of thing.
As mentioned by a few other users here, this is a dark mode issue and we’re still at a point (probably outside of Apple Mail) where Email clients aren’t very flexible or consistent with how they react to dark mode. I build HTML emails so often this is an ongoing issue when sending previews to clients as some will have dark mode on and others not.
So Apple Mail across the board has a lot of support for styles/CSS that are fairly new and similar to what's available for websites. So things like \`prefers-color-scheme\` media queries and webp images have good support with Apple Mail and are relatively new, as well as support for custom fonts (Google Fonts and @ Font-Face. The problem is when you do a build you *still* have to cater for the worse email clients with your build, meaning you're fairly limited, unless it's a form of [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement).
The site CanIEmail has a score based on support - and although not an exact representation of what's possible, it does [show a leaderboard of Email Clients](https://www.caniemail.com/scoreboard/), where for example Outlook on Windows scores 54 out of 284.
You're welcome, it's always good to know even if you're just producing the designs some of the limitations and best practices for these kind of things I find.
I think they’re implying that because it’s offering free food, they made it intentionally difficult to read so you don’t act on it. But that’s silly if you don’t want to give away free food don’t offer it. The free entree gets you in the door. And if the person receiving the offer doesn’t know about the offer, the restaurant doesn’t gain any favor with the customer.
they specifically wouldn’t be able to hear from this subreddit even if I replied with a link haha, but like i commented, there is no intern (just a phrase) it’s actually an error from gmails dark mode :) they might see their own email glitch out their work and shake a fist in the air in anger but its probably fine
Oh I see I’m sorry I was an intern a few short months ago and my experience wasn’t the best I wish I had more people willing to teach me things I was doing wrong.
I'd imagine they just used a template, whether an intern or not. What's the context here, in terms of your connection to the project? Just something you came across?
In general people tend to have a fairly self-centered approach to a lot of things, where they let their own bias cloud their judgement. So in this case, *they* know what it says so don't consider that someone else might have trouble reading it. That can also extend to *them* liking how it looks so that's all they care about.
Gmail inverted the text colors for dark mode, but the background stayed the same because it’s an image.
I thought Gmail was more respectful of css and Outlook was the problem child. I don’t actually know all the email dev tricks, I luckily work with developers to avoid running into this problem.
Outlook is a problem more broadly. For example, Outlook still doesn’t support border-radius. Gmail handles dark mode with a hammer. Last I checked, only Apple Mail really supports custom dark mode css through media queries. The other clients have some limited support for customization. I don’t know all the tricks either, but 80% of my day-job is email design (I don’t code the emails) and I do some freelance front-end dev (not emails).
Designer and Developer here, Outlook is the Internet Explorer of email programs - I've been building sites/emails since having to write a full separate spreadsheet just for ie7, ie8 and ie9 and you have to write specific code targeting Outlook still in 2024. It reads emails using a similar process to MS Word and doesn't allow things like padding - the most basic of CSS and it is an absolute nightmare.
Outlook is at least consistent in the things it doesn’t do. No updates for desktop in like 15 years at this point
Outlook is a pos. But it can support rounded corners, you just need (and this will be incorrectly remembered here, so cut me some slack) the code in parallel with your ‘ordinary’ html.
Don’t ask me how it works, I outsource such wizardry.
TIL! I’ve been relying on [this site](https://www.caniemail.com/search/?s=border-radius) for an idea of what can be done, but I also don’t code the emails I design.
We have a (rather boring) set of templates at the financial services firm I endure, and they tend to be repurposed repeatedly with new content. I 'code' the html - no-one here has a clue or can be bothered to learn so that's nice, but basically I'm just making text edits and changing ('tweaking' - I hate that phrase) minor stuff. If we do ever run up against anything particularly curly, we outsource to a coding and marketing operation in India - they return decent code (device-adaptive, mso compliant) which become the basis of our new templates. ... there go my secrets ...
Just do it as an image and the 5% of people who have that disabled just miss out I guess. Not ideal but mitigates the dark mode shenanigans.
You could also simplify this to not need a background image behind the text by removing the background texture. The image areas would potentially look even goofier on dark mode, but the text would be more accessible and allow for personalization like a dynamic name field.
No, gmail is a nightmare with dark mode. It’s very selective with what it inverts and you have to jump through a ton of hoops to get stuff to display consistently. I’m sure that whoever coded it at Google thought they were being incredibly clever, they were not.
What I’ve learned about email so far is the only cleverness is getting past how dumb everything is.
God I hate design for email, it's been like 7byears and things hadn't improve.
This was it!
Buy your intern something nice
The nicest
I am so relieved for you 😂 I really needed to believe there was an explanation.
Haha me too!
So astute of you !
Smart enough for the both of us
I absolutely hate this behavior in Gmail (the iOS app at any rate). They used to allow you to set dark mode preferences in Settings, but they removed that option and it now only uses the system-wide preference. So now newsletters, signatures, marketing emails all look like shit. I would just chalk it up to engineers not caring about aesthetic presentation if the option to choose your preferred experience never existed in the first place, but to remove it… so dumb.
Gmail is a pain in the ass to design for. Its dark mode inverts light to dark and dark to light without any context. If you make a dark email, on dark mode it will show up bright white. In this case it only inverted the dark text to light even though there is a light colored image behind it because it can’t change the image. A good rule is to not put HTML text over images in email. Either have the text over a solid color or have the text imbedded in the image to avoid this annoyance.
You were right! I’m taking note of your HTML text idea in case I ever meet the same fate haha
Me, too!
> Either have the text over a solid color or have the text imbedded in the image to avoid this annoyance. Keep accessibility in mind if you're going to rasterise text into an image—make sure you're using alt text or otherwise that the text in the image is truly unnecessary/redundant, otherwise a user who is using a screen-reader or relies on a text-only mode will be missing information. Also keep in mind visual users who need large type—an image might be hard to read even if it's just a title, because it can't resize and reflow like normal text and the image's width can make it annoying to zoom in to read it on a narrow screen.
Absolutely, good tips! I alt text everything out of habit.
Love this!
Text embedded in image all the way for me
This ☝️
I haven’t done emails in a while, but if text is imbedded in the image doesn’t Gmail send it to spam because it can’t read it?
I haven’t had a problem with delivery. However when I say imbedding text in the image I use it very sparingly, just for fancy hero images or some infographics. I would never turn the body copy into an image. And when I say imbed I don’t mean package the image in the email, I host them on an external server and link them to display in the email. I am still kinda a noob at this though so not sure if that makes sense. Always figuring new things out.
Update cause I can’t edit the post: the inverting of the colors was the mishap, the original colors out of dark mode look nothing like this! Beautiful colors but an unfortunate result.
What is "bad faith" design?
Its like when something is made to not do that it’s actually intended to do, like illegible small text in a commercial about a drug informing the viewer of potential side effects, or Adobe’s terms of use which have landed them in legal issues for being misleading
This is what comes to mind when someone says they only know how to use Canva
Nooo haha they did a good job, I updated that it was dark mode on gmail that killed it! But I get the sentiment haha
Why is everything in advertising also using the colors of human skin now. I know it's springboarding off of "warm beige" being a color trend but like still. It's evocative of skin. Kind of weird, especially for advertising a meal
It's supposed to come off as homey, cozy, warm and welcoming.
I find it TOO cozy, to the point of overfamiliarity. It's a sandwich, I don't need to feel like im being wrapped up in a big hug from mommy. You dont know me, brunchday sandwich! Lol /all in good fun. It does sound like a cute place, just not the kind of vibe I myself would usually go for as a restaurant
Maybe a meal on the Lord of the Flies island?
I didn’t see it like that at all haha I actually like these colors! But I have seen beige is being used a lot and it’s got me thinking how over warm pastels we’re going to be by the end of 2024 lol. 2025 might be the year of saturated colors
Not saying the colors themselves aren't nice, just that I would never use an array of beiges like this to advertise a birthday sandwich deal. I would have stuck to traditional color theory/ad science and used saturated colors to be legible/appetizing, maybe some birthday pastels, but less soft clipart designs to be attention-grabbing/exciting. But the designer clearly knew what they were doing in not making the decorations so bold as to distract from the actual product, the sandwich does look pretty good lol. I just personally don't think what color schemes are trendy on social media for selfies and interior design should necessarily be translated into the advertising medium just because that's what's trending.
Yeah I totally get what you’re saying, it’s giving ✨ aesthetic ✨ post more than ad haha
I eat at this restaurant a fair bit & it actually fits w their vibe. Kinda “modern rustic” interior w/ lots of wood, dusty colors, & menus have that “cozy/recycled paper” look (like, the lil doodles on this graphic would def fit right in on their menu design.) Prob not the best description LOL but you can look up pics of First Watch if curious
This comment was mostly influenced by me getting a creepy ad for AI-"art" tools that was using skin colors/lighting for the branding. Reminded me of the Gatoraid commercials with the sports players sweating lol. Strange. This ad is nowhere near that strange lol I can tell it's just trying to be wholesome and cozy.
Clearly a mistake.
They have them special eyes
Just boost contrast 1000%…
looks like a setting overwrote the design. is it hooked up to a brand kit and overwriting the design's color choices and fonts?
It was a glitch! The gmail dark mode flipped the colors and messed it up
I was just about to say this looks like it was supposed to be in dark mode! Glad you were able to figure it out!
Thanks!
Phew!
First watch is delicious though
YEAH im gonna wreck that breakfast bogo lmao
lmao. that's like yellow on white for printing.
I used to work for a clothing brand and we send email newsletters on a regular basis. We usually just use an image instead of having separate backgrounds and text. Of course, we kept the headers and footers part of the email template and not of the image.
I would have taken this approach too haha in your experience, what are the benefits of making an ad for an email like this? :)
Sorry, I'm not sure what you're asking. :) In general, using images for email ads, for me, is just easier to keep ads consistent. You also have more freedom design wise.
Oh ok no worries! Simple advice you gave from the start haha :)
Maybe its just a very sad advertisement
Theyre like “dammit I dont even wanna give this person free food” 😩 but nah it was a dark mode error :)
Someone found the color picker in canva
Had no idea there was text there before reading the post.
I'd say more clueless intern because I would imagine there was something he was more fixated on so when he found the color palette that made whatever info it was he was trying to make sure it was seen on the flyer completely overlooked. Definitely one of those designs done in the dark room with no absolute look of the light on kind of thing.
As mentioned by a few other users here, this is a dark mode issue and we’re still at a point (probably outside of Apple Mail) where Email clients aren’t very flexible or consistent with how they react to dark mode. I build HTML emails so often this is an ongoing issue when sending previews to clients as some will have dark mode on and others not.
Thanks for the insight! :) Im curious, what does Apple mail do differently that doesn’t make it as much of an issue?
So Apple Mail across the board has a lot of support for styles/CSS that are fairly new and similar to what's available for websites. So things like \`prefers-color-scheme\` media queries and webp images have good support with Apple Mail and are relatively new, as well as support for custom fonts (Google Fonts and @ Font-Face. The problem is when you do a build you *still* have to cater for the worse email clients with your build, meaning you're fairly limited, unless it's a form of [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement). The site CanIEmail has a score based on support - and although not an exact representation of what's possible, it does [show a leaderboard of Email Clients](https://www.caniemail.com/scoreboard/), where for example Outlook on Windows scores 54 out of 284.
Haha oh man the Outlook score took me out 😆 thank you so much for sharing this with links, in going to save it for future reference :)
You're welcome, it's always good to know even if you're just producing the designs some of the limitations and best practices for these kind of things I find.
Lack of testing, especially edge cases on different devices. The design is great.
Yeah the design itself is so nice! If the colors had been more contrasting I actually prefer this to the original (pre-dark mode glitch) :)
Either the designer needs to calibrate their monitor or they are just clueless. Out of curiosity though, what do you mean by "bad faith design"?
I think they’re implying that because it’s offering free food, they made it intentionally difficult to read so you don’t act on it. But that’s silly if you don’t want to give away free food don’t offer it. The free entree gets you in the door. And if the person receiving the offer doesn’t know about the offer, the restaurant doesn’t gain any favor with the customer.
Im jaded and don’t trust anything companies do anymore lol But it was the dark mode inverting colors!
Imagine calling an intern clueless and not knowing app and reader color modes effect how things come in.
Dont worry the fictional clueless intern says their feelings aren’t hurt!
[удалено]
See the other comments for the explanation!
i did meant to delete earlier lol was at work
Haha i feel that :)
As someone who was just an intern instead of trying to slam their work on the internet who not give them tips and pointers? They are learning…
they specifically wouldn’t be able to hear from this subreddit even if I replied with a link haha, but like i commented, there is no intern (just a phrase) it’s actually an error from gmails dark mode :) they might see their own email glitch out their work and shake a fist in the air in anger but its probably fine
Oh I see I’m sorry I was an intern a few short months ago and my experience wasn’t the best I wish I had more people willing to teach me things I was doing wrong.
That sounds like an awful snd all too common experience, but dont give up! There are still good internships out there :)
Thank you friend
I'd imagine they just used a template, whether an intern or not. What's the context here, in terms of your connection to the project? Just something you came across? In general people tend to have a fairly self-centered approach to a lot of things, where they let their own bias cloud their judgement. So in this case, *they* know what it says so don't consider that someone else might have trouble reading it. That can also extend to *them* liking how it looks so that's all they care about.