Browsed by
Month: August 2016

THE GREAT FLASH CRASH

THE GREAT FLASH CRASH

It was the summer 2015 that saw Mozilla FireFox withdraw support for Adobe Flash and in doing so begin the irreversible move towards HTML5 within the advertising community. Up to that point most agencies had done their upmost to avoid adopting this new technology, siting investment costs and lack of perceived support across browsers. It was considered that HTML5 was only really necessary where Flash couldn’t be used, such as mobile advertising, where Apple had a huge market share.

In truth, people felt safe within an encapsulated environment that ran consistently across all browsers and had done so for a decade.

We couldn’t say we didn’t see this coming, Apple were lambasted for their refusal to offer Flash support on any of their iOS devices due to a perceived security risk, eventually conceding after petitioning by Adobe to allow app development only via Flash Air publishing which was considered more secure.

The whole reason for the shutdown was Adobes admission that at least three unpatched Flash exploits had been used by a group in Italy to steal around 38 million usernames and encrypted passwords. FireFox and Google soon after decided enough was enough and shut the plugin support down. Between them we are looking at around 50% market share globally of all browsers so this was always going to be big.

The chain reaction was huge, agencies desperately trying to find resource that not only knew how to code in HTML5 but also understood development for advertising which comes with it’s own set of rules and idiosyncrasies…

6 months previous to these events, TWO had been approached by a key client to look at producing HTML5 content for mobile advertising. Traditionally they had only deployed animated GIFs to this platform on the advice of their advertising agency, but being leaders in their particular sector they were looking to break new ground and so approached TWO to explore the possibilities as a global digital partner. After some period of R&D a frame work was developed along with a development methodology. In all this took around a month to perfect. In the coming months we were also invited to produced two campaigns in Flash off of the back of our willingness to support HTML5.

When the news came through about Flash our hard work of the previous few months paid huge dividends, as we were able to support our client and their advertising agency in transcoding more than 150 ads in the space of a month, ensuring maximum engagement whilst many competitor brands had to revert to animated GIFs for the interim period.

Today HTML5 plays a huge part in our business offering, and we now offer an interactive platform free of charge to our clients that allows them to amend content live on their published ads and collect live data.

Litmus Announces Microsoft Partnership

Litmus Announces Microsoft Partnership

litmus-microsoft

Last night during Boston’s Email Design Conference, it was announced that Litmus and Microsoft are going to team up to make email better.

Caitlin Hart, Program Manager at Microsoft was welcomed onto the stage by Kevin Mandeville and Justine Jordan who then described the long term plan for the partnership with Litmus.

Every email developer out there knows that Outlook is the biggest of many bug bears when it comes to email development due to the myriad of versions and platforms that Outlook runs on; the biggest issue being that the (desktop) application uses Microsoft Word to render email instead of Internet Explorer.

We’re excited to partner with Litmus, who has an amazing user base of passionate email marketers and developers that can provide us with real world examples of rendering bugs and errors. This will allow us to better identify and prioritise rendering issues to work on improving rendering in Outlook.

Caitlin Hart, Program Manager at Microsoft

Litmus announced as part of the partnership that it plans to include a ticketing system, so email developers are able to report all the issues they experience with Outlook directly to Microsoft. In addition to this, Litmus announced that new Microsoft email clients (Windows Mail 10, Outlook app for Android, iOS and Windows Phone) are going to be available for testing in the app, as well as allowing users to sign up for a free Litmus account that allows for Outlook render testing only.

We couldn’t be more excited about this partnership, and want to thank the Microsoft team for joining the campaign to #MakeEmailBetter.

Paul Farnell, CEO, Co-Founder at Litmus

Our Thoughts

Whilst Outlook and all of its annoyances aren’t going to be fixed overnight, this is a huge step forward. The fact that Litmus has managed to get one of the biggest email clients onside, willing to make changes to their products for US as email developers, is a great achievement.

We’ll be following up on this post with our thoughts on the changes that we think should be made to Outlook in the future, in order to #MakeEmailBetter.

Tom Riley
@MrTomRiley

Background Images: Part 1 – Content Images as background.

Background Images: Part 1 – Content Images as background.

Backgrounds Title Header

To follow-on from my talk at ‘The Litmus Email Design Conference 2016’ (#litmuslive) I’ll be doing a series of blog posts covering background images. They’ll feature key design considerations, prevent time consuming frustrations, some simple code solutions and some additional ideas for things like progressive enhancement.

Increase your Design Opportunities.

Background Images in email have a mixed reputation. Depending on your experience and approach, they can be a pain to work with, and many people find them too time-consuming, add too much weight, and/or restrictive. If this is the case I think it stands to reason that designers and developers when time is precious can potentially do what they can to avoid using them.

But if you use them in the right way there can also be some real design benefits to using them over and above just being to add live-text over an image, such as:

  • Create impactful designs without using too many images.
  • Help to frame content and add extra texture and depth.
  • Increases your creative options
  • It opens the door to more emotional design.
  • Can enhance the user experience with minimal effort.

We now know that we have that we have to be very focussed with our content, and that we have literally seconds to make an impact, something like a background image could be a good tool to have, and use in the same way as websites do to draw your attention.

Because email rendering can be awkward, and support can be sketchy my ideal scenario is to use backgrounds that are layout images, so if the background or the image is not supported you aren’t losing any thing from your content. You’re then not relying on the background image to deliver a message.

However probably the most frustrating part of using background images. Is when you have to use content images as backgrounds. Especially if that is a full width header image.

Content Images as backgrounds.

So with this situation I always aim for the same result. And I think I have a simple method of achieving this. The key thing to remember is that, email doesn’t have to look the same everywhere. So in that transition between desktop and mobile, regardless of the image, I aim for my content to remain the same size/easily readable on mobile. Immediately you then have another victory over “burning” the content in to the image. It also provides me with a simple mindset, and solution to aim for that I can build upon with very little effort.

To start, the thing to remember is that background images can be fluid. This is roughly the code set-up I like to use.

core_code

I’ve then set-up my image, and added inside the VML <DIV> the content to go on top, and forced it in to the position I want, at the foot of the screen.
For this I have used a top padding of 180px, but you may prefer to use heights instead.

NOTE: As a side note for anything horizontal I have spacing <TD> because there is a glitch with Outlook 2013 where horizontal padding has a habit of not working inside the VML fallback.

desk_robot

GMAIL APP

(please note that since writing this, Gmail has started supporting ‘background-position’ and ‘background-size’ on gmail addresses)

At this point I would test it in the Gmail App. To see what kind of result I get. Because if it’s not right in there. There is little I can do about it.
Thankfully it works quite well, but if not, I would go back to the desktop and try to find a workaround. Perhaps by repositioning the text, etc…

(Not featured in this example, but when setting the content up, I will often to start by setting things up in 2 floating table columns, even if one is blank. This give me a column that will stack on gmail and i can sometimes use it to my advantage to position things and then re-control on other mobile platforms.)

I’ve also set the position as ‘background-position: center top;” which shows the central portion of the image. This is made easier because the key area of the content (Mr.Robot) is narrow. However as you can see with the other example (Silicon Valley). You’re really looking to choose the ideal portion from either left, center, or right of the image when it’s a “busier” image.

You can however as Remi Paramentier (@HTeuMeuLeu) said at the same conference target the gmail app, and apply ‘background-size: cover;’ in shorthand and gmail reponds to that. So that might be something you want to work with and try out.

gmail_app_position

CALC and the GMAIL APP

UPDATE: This is now probably more relevant when rendering in the Gmail Apps on a non-gmail address.

If you’re looking for more precise positioning, you can always use CALC inline to reposition the background, and then use a media query to reposition again on supported mobiles.
The support for CALC has been fine for myself, however I have some potential issues on older Android devices. Worth looking in to though especially if you have a right-hand side image like the one below.

The one thing to be wary of here, would be to consider your text positioning. If you were to put text to the left of the image, it would just move behind it. So keep your text, above or below.

calc

THE TRANSITION TO MOBILE

So as mentioned, I have a straight forward formula for mobile, and although there are other options. I tend to always immediately aim for 1 of 2 solutions.

Because I have a flat background colour applied behind the image, I simply allow the image to shrink down on mobile to see how it looks, and more often than not, the combination of the image shrinking down and the content remaining not at this point will force that background colour to appear from behind the image. I then used media queries (often padding) to force to the content on to the flat colour.

(if this doesn’t work for you you can always apply and flat colour behind the content using media queries and see how it works out)

The second thing I do here is once I have that version right. I then apply background-size: cover !important; as a media queries style to see how it looks when the image fills the space. This can be hit and miss, often depending on the amount of content. But it’s a easy thing to try, to give you a different result.

For the really awkward scenarios

If you get really stuck, there is one solution I have gone to in the past. But it does tend to leave you forcing the desktop on gmail, or targeting it with other gmail hacks. You can use media queries to:

  • turn off your background image
  • remove any fixed heights or padding from your content. Leaving just the content
  • Apply a flat background colour behind it.
  • Turn on a mobile version image of the background image.

So that’s it for the first part. It’s a basic premise. If you have anything you wanted to add, please feel free to let me know.

 

Next time around I’ll be looking more at the other part of my talk. Patterns, Enhancement considerations, and Layering of content.

 

You can access my slides from Litmus here

 

Kristian Robinson
@joon82