I'm wondering if I can change the dark mode colours in Outlook.com because it looks gross. On mac it looks exactly like I want it. Windows it simply inverts colors.
Is there any method how can I change darkmode properties specifically to clients and OS?
Thank you in advance
Outlook is quite a beast when it comes to dark mode because you'll find many variations.
Outlook on macOS has good supports for #media (prefers-color-scheme:dark) media queries, so you should have full control there.
Outlook on iOS, Android and Outlook.com on the web also have support for #media (prefers-color-scheme:dark). But it also applies automatic color changes on top of this. You can try to tweak this using [data-ogsb] attribute selectors to target the matching elements.
Outlook on Windows applies automatic color changes and supports neither the dark mode media query nor data attributes. You can try to play with VML and mso- specific properties though.
I would recommend reading the following articles:
The Ultimate Guide to Dark Mode for Email Marketers by Alice Li
How To Fix Outlook Dark Mode Problems by Nicole Merlin
Making Emails React to Outlook.com’s Dark Mode by me!
Feel free to post your code for more specific help.
Related
I have a basic footer that would be super easy to create in almost any environment but email.
i am looking to do a email/phone/unsubscribe line to appear like
"email#email.com | 1-888-PHONENO (1-888-111-1111) | Unsubscribe"
works perfect in desktop view (600px width) but once i try and do anything responsive it dies and formats all crooked. I've had good luck with flex box with apple products, but many of the microsoft products (email clients) strip the flexbox out. so i am using table but finding it difficult to make it responsive.
I would use media queries but when i use display:none, it doesn't always work. it almost like the sendgrid console wont let me target certain elements. for example i can easily change the html background using html, but when i give classes to elements, nothing happens, id's either. its like the style doesnt get applied.
to solve this issue i'd be totally happy with writing different header/footers and then rendering them per the view (599 down, 600 up) if anyone has experience using media queries in emails or sendgrid please advise.
I could also write a responsive table but having trouble w how to set that up for the above. some of the items would need to be wrapped, like it would be ok to render on 2 lines in mobile as long as the style looked decent. right now it looks jacked.
you cant-
due to email clients rendering code totally different (some strip margins/padding, some strip flexbox, some strip other things from your css)
just stay to best practices: inline style, single column tables work good on almost anything. keep it simple.
I made a nice looking inline css flex box footer. looked great on mac/google products, looked like garbage on all outlook/samsung.
so i had to dumb down my beautiful footer to something that was more compliant across platforms.
litmus is a tool we bought that really helps. you basically just have to design it then test. litmus will show you previews on every possible email client so u can go thru and find a good balance of compatibility and design.
for sendgrid, the built in template and drag and drop option render good on everything. use the v3 api and dynamic templates. use a drag and drop then add html blocks to customize what u need to. use the drag and drop as much as possible because they build a robust html code for you. unless you want to manually type out a 600 line email that is totally disorganized.
I have to develop an application for Nokia Asha 501. I am using Nokia SDK 1.1 and the library S40-asha2013 from the ${SDK_HOME}/plugins/lwuit/lib.
I am trying to figure it out the UIID stuff from all the examples I am studying, but I couldn't find a source that would list all the UIID values for the components. For example I could change the background color of a normal TextField only if I set the UIID to "Label"
Ex:
textField.setUIID("Label");
Or to make for example a green button you have to set the UIID like this:
saveBtn.setUIID("ButtonGreen");
Which let's be honest do not makes any sense. So my question is does anyway know where I can find some documentation or listing related to this "mysterious" UIID. Or at least does anyone know where or if I can find the sources to Nokia Asha Lwuit because I only found this https://java.net/projects/lwuit/sources/svn/show but doesn't seem to be the same library (the version for my lwuit is 1.1.2).
With source code available I could look myself in the code and check for all UIID's.
Edit:
As a piece of advice if you want to really ease your life and understand how style and look is handled in LWUIT the resource editor tool is very valuable. Only after I opened the Nokia Asha default resource in Resource Editor I actually understood what happens there and what is the thing with UIID's.
I had also the experience that some styles seem to be "hardcoded", like the background of a text field. I had a suprising effect with an alert. When I set styles in resource editor they get ignored.
I also did not found the latest Nokia sources.
You get a list of all used UUIDs when you open the lwuit-jar file with a zip program, for example 7.zip, andd extract the file asha2013_themes. You can then open this file with the resource editor.
You can try to ask in the Nokia developer forum:
http://developer.nokia.com/Community/Discussion/forumdisplay.php/324-Mobile-Java-UI-and-User-Experience
Im making a email template and they wanna put background images underneath the text - and to most email clients that is a no no.
So i tough can you make a fallback to the clients that don't support it?
Or is their a hack to make it work?
On this picture you got a list over css support
also see this link
There is a technique that is supported by all major clients: emailbg.net. The VML is a hack for Outlook which doesn't support CSS background images (except in the body tag).
You should always set a bgcolor however as most clients load with images disabled.
I am using notmuch as my email client and using its default interface, the emacs mode. I'm trying to figure out how to prevent it from displaying images in email - since I'm using it for my professional email, the images are pretty much always unwelcome (I also am an enemy of those 1-pixel tracking tags that some anti-social services poke into HTML email).
I'm coming up empty on Google searches and consulting the notmuch mode documentation and M-x customize options. I assume, though, that there's some elisp value I can twiddle to make this work, and it's simply not obvious to me.
How can I tell notmuch to ignore images, or alternatively, to display only the text part of emails by default, ignoring MIME/HTML content?
Adding the following line to ~/.emacs seemed to do it for me:
(gnus-inhibit-images t)
I have a template which i used for sending emails written purely in hand made with css, and then i tested in Firefox/InternetExplorer/Chrome browser. But when i send that email to My boss PC as he is always Microsoft outlook user.
He always gets the alignment broken, texts broken all problems start. My question is how do you really write then? None of the web browser showing my template wrong.
I searched a lot, but most answers are not deeply and correctly well answered about this. I would really appreciate some experts input on this.
Thanks
outlook uses an older version of Trident, the CSS rendering engine. Depending on what Outlook your boss is on, the worse it can get. Outlook 2010 actually reverted to an older version of Trident because of Microsoft losing the Anti-trust case with the EU, so whatever version was before 2010 actually renders better, however they are both quite subpar # best.
you're going to want to literally stop developing with modern html/css and fall back on old school table layouts. i know, its gross, but you're going to have to do it for email.
the best tests are native, but if you don't have access to both versions (not many do) you should check out EmailOnAcid.com, they provide a plethora of email clients you can test on.
constantcontact.com, mailchimp.com and campaignmonitor.com all offer more than testing services if you need anything else.
Outlook 2007 is the bad guy. Any newer or older is much better. In Outlook 2007 lots of CSS commands don't work.
See this page: http://www.email-standards.org/ for details.
However, try sending your emails to Gmail.com and see how it gets displayed in Gmail web interface - Gmail is quite restrictive and as a rule of thumb, if it displays nicely, it should look good in other web clients too.
Some advice regarding HTML emails:
Outlook
It is good to provide width for Outlook, otherwise the CSS may crash.
Outlook doesn't support padding for <div>s / <p>s, float and various other things.
Gmail
For Gmail, you should use inline CSS in preference to defining classes.
Gmail actually parses CSS provided by you and for instance, changes height to min-height so using height is useless. However min-height of <td> is not respected by the browsers, so internal <div>s inside <td>s can be used to assure that min-height was applied.
Gmail strips background images, and generally in all email clients images are displayed upon user request for security reasons. Therefore, wrap images with <div> and set background color and color of this outer div, and provide alt (alternative text) for image (note also that images with empty src do not preserve width and height while rendered by the browser).