Email Camera

This is some next level stuff right here….

Using you phone’s camera in an email????

https://emails.hteumeuleu.com/email-camera-2fb5f237d2e4

Thank you for reading!

Posted in Email Dev | Tagged , , | Comments Off on Email Camera

Fixing bugs with Outlook specific CSS

This is a very informative, yet frustrating article on the fun time that is coding Emails for Outlook.

https://cm.engineering/fixing-bugs-with-outlook-specific-css-f4b8ae5be4f4

Here is an excerpt from the article:

Conditional stylesheet

The most common way to code Outlook targeted CSS is by placing an embedded stylesheet inside a conditional comment.

<!--[if mso]>
  <style type="text/css">
    ul {
      margin: 0 0 0 24px !important;
    }
  </style>
<![endif]-->

Note the !important declaration which is needed to override inline styles.

The stylesheet will be parsed by the Word-based versions of Outlook. To other rendering engines, the whole block of code will look like an HTML comment they should ignore.

Although I’ve never needed to, you can get more specific with conditional comments that target specific versions of Outlook. Should you need to, here are the mso version numbers that correspond to each Word-based Outlook version.

<!--[if mso 12]>Outlook 2007<![endif]-->
<!--[if mso 14]>Outlook 2010<![endif]-->
<!--[if mso 15]>Outlook 2013<![endif]-->
<!--[if mso 16]>Outlook 2016<![endif]-->

Thank you for reading!

Posted in Email Dev | Tagged , , , , | Comments Off on Fixing bugs with Outlook specific CSS

TD stacking not working on Outlook app in IOS

If you just want the answer to fixing this issue, go down to “The Solution” section.
(Hint: replace <td> with <th>)

A common technique for making a multi-column desktop layout magically transform to a one-column layout for mobile is to stack the table columns by changing the TD display to “block” in a media query. You are changing a table cell into a block-level element, like a DIV or P.

The following code is an example of how that happens. The styles below will only be applied to screens that are 500px wide or smaller, meaning most cell phones. The “stack_mobile” class is applied to all the <TD> elements we want to stack.

@media only screen and (max-width: 500px) {
  td[class="stack_mobile"] {
    display: block !important;
    width: 100% !important;
  }
}

This works on all devices that recognize media queries, or so I thought. For some reason we were not checking Litmus results for the Outlook app. I really started paying attention to the Outlook app results when I started using the app myself a while back. The problem was that I am on an Android phone, and although there were some Outlook app specific issues I caught by looking at my phone, I had never looked at any results for the Outlook app on iPhones, which was pretty amazing as most people that were proofing the emails, had iPhones, but not sure if any were using the Outlook app, so my/our bad.

I immediately added the Outlook app for IOS to my Litmus results, and dang it if my Responsive, Adaptive, or whatever you want to call them, emails were not looking jacked up on the Outlook app for IOS.

The problem wasn’t just that they didn’t stack, but also that the medial query was being applied to SOME things, but not all, so I was not seeing my columns stack, but I wasn’t seeing the desktop version either. This was because the app did recognize the query, but it just didn’t apply “display:block” to my TDs.

The Solution

As of this writing, the fix seems to be to replace your <td> with <th> within your code. I have not found that using <th> causes any issues in other clients, but I wouldn’t be surprised if the next version of Outlook strips them out, or does something ridiculous, as they are known to do in their “updates”.

Thank you for reading!

Posted in Email Dev, Mobile | Tagged , , , | Comments Off on TD stacking not working on Outlook app in IOS

CSS-Tricks: Myth Busting: CSS Animations vs. JavaScript

Conclusion

Are CSS animations “bad”? Certainly not. In fact, they’re great for simple transitions between states (like rollovers) when compatibility with older browsers isn’t required. 3D transforms usually perform very well (iOS7 being a notable exception), and CSS animations can be very attractive for developers who prefer putting all of their animation and presentation logic in the CSS layer. However, JavaScript-based animation delivers far more flexibility, better workflow for complex animations and rich interactivity, and it often performs just as fast (or even faster) than CSS-based animation despite what you may have heard.

Myth Busting: CSS Animations vs. JavaScript

Thank you for reading!

Posted in Animation, CSS3, JavsScript | Tagged , , , , , | Comments Off on CSS-Tricks: Myth Busting: CSS Animations vs. JavaScript

Get Started with ECMAScript 6

Really good article on the new features of ES6

ECMAScript 6 or ES6 is the latest standardized version of JavaScript. The exciting thing is it’s been approved today by the standards body and that means broader browser support is coming. ECMAScript 6 has been in the works for some time now – it was first announced in 2008. An ever increasing amount of JavaScript developers have been preparing for ECMAScript’s launch, and soon it’ll be unavoidable. It’s also worth noting not all versions of ECMAScript will take this long to release. They plan on doing smaller, yearly releases, so now’s a good time to get up to speed.

Many developers have switched to ECMAScript 6 in development and use a transpiler, a ES6 source to ES5 source compiler, to publish their code to browsers and environments that don’t support ES6 features yet.

Get Started with ECMAScript 6

Thank you for reading!

Posted in JavsScript | Tagged , , , , | Comments Off on Get Started with ECMAScript 6