Next painting based on Ray Collin’s Seascape series painting after digitally manipulating the photo
https://blog.rememberlenny.com/2016/03/07/next-painting-based-on-ray-collins-seascape-2/
How to write Desktop-first responsive emails
Most web pages are written with the assumption that all the content is loaded, then the CSS determines the priority for styling. In emails, you have to design your CSS/class/markup base on the assumption that you can have some parts of your code NOT run.
When it comes to responsive layouts, you have to design for the case where desktop is default (without the media queries) and any media queries are added, only if its possible to run inline styles. In the case where you have things like Gmail, where the style tags are stripped out, you need to account for this.
Inliners
Most email browsers don’t read style tags. As a result, you have to write your emails with all the CSS properties as style tags in the html tag. This is called inlined CSS. Instead of writing the raw HTML with inlined CSS, there are many services or libraries for inlining a block of HTML and CSS.
The problem with email inliners, like Rail’s Roadie, was that it was inlining the media query styles that would run on mobile, which broke the default desktop layout. By having roadie ignore certain styles, we control the designed layout to render the desktop mode in all cases, and then serve the inline style tag with media queries to be run where possible.
To make things more complicated, Outlook is very outdated. Specifically, there are a lot of CSS3 properties and even CSS2 properties it doesn’t render. As a result, outlook has some legacy hacks where you can use comment flags to tell Outlook NOT to render certain content.
Basics
For responsive emails, where you use media queries, you have to keep a few things in mind.
1. The email is being inlined
2. Email browsers render CSS2 on average
3. You have some email browsers that have comment hacks (ie. outlook)
Where to start
Write Desktop-First HTML and CSS
Based on this factor, you have to code your emails to be desktop-first. The CSS, without any media queries, need to look good on desktop email browsers. This way, you can assume at the very least, the email looks like this:
Add Media Query for mobile CSS
Considering you want to add a media query, you need to add an inline media query on the email. This is pretty straight forward for desktop rendering. For example, you would get something like this:
Setup your inliner
The problem comes up in emails, the two conditions above don’t work perfectly. For CSS to render in emails, it needs to be inlined. This means that the desktop or media query conditions don’t jive well together. This why we started with the Desktop-First css structure. One you inline your css, when theres a media query, you get this mess:
Consider your inliner to ignore media query for inline
When you have a media query, the media queries CSS gets inlined, and consequently overrides the desktop CSS. As a result, you get markup that looks broken. To prevent this, you have to queue your CSS inliner to ignore the media query CSS. To do this, you separate the media query CSS in a seperate style tag and you flag it in the inliner. In the case for Roadie, thats the `roadie-ignore` flag. This way you get this:
Wrap up
By setting the inliner to ignore the media query style tag, you allow all email browsers to render the working desktop CSS. In the case that the email browser will parse the style tag, it can view the media query and optionally render the mobile styles when relevant. This is how you can have cross-email-browser functional CSS emails!
This was written as a comment in a pull request for C2, a project at 18F. We are using this responsive email structure to make our transactional emails better for our end users. We are also doing some awesome stuff. Reach out if you want to learn more.
Inspired by Ivan Aivazovsky’s (1817-1900) painting the Ninth Wave (1850) and Kawandeep Virdee’s sunset remixes
https://blog.rememberlenny.com/2016/03/04/inspired-by-ivan-aivazovskys-1817-1900-painting/
On email newsletters for Big Media
Publishers are finding that the best way to access millennial audiences is through email. New email newsletters are drawing attention from media execs and celebrities and attracting corporate level ad partnerships. Publications are taking email newsletters promotion seriously, with prominent signup placements on every page.
Buzzfeed reported a 23% month-over-month rate of growth on traffic-to-site generated from newsletters. The New York Times boasted 14% growth over a 6-month period from February 2015, to August. The Transparency Market Report forecasted a 20% compounded annual growth rate for email market capacity from 2012 to 2018.
Big Media companies are missing a huge opportunity to reach loyal audiences through email. Email newsletter lists are growing at an exponential rate, but the methods for using them haven’t changed.
“There’s tremendous opportunity for marketers who perfect their email tactics” — Kristin Naragon, Adobe’s Director of Email Solutions
Dynamic channel
Email is treated as a one-track one-way broadcast channel. Layouts and content are statically created and sent out to entire email lists. Personalization and dynamic content is not yet a norm. Email has the potential to operate as a smart social channel where publications are able to personally connect with users. By not investing in technology or tools to make this possible, media companies are missing a huge opportunity.
“When it is read in the e-mail newsletter format, it’s so much cleaner, and the images and the words — it’s almost a throwback to reading magazines.” — Jessica Gross
Innovative brands
Readers love email as a medium to receive content online. Email has proved itself useful for innovative brands and companies. The internet admires niche email newsletters like Amy Webb’s technology writeup “Notes From The Near Future” and Melody Kramer’s “Sandbox”. Curated digests like The Daily Skimm or Hype Machine’s weekly “Stack” boast large open rates. Tech startups, such as Quibb and Nuzzel, have used email as their primary medium for distribution and growth. Calculated content production and circulation strategies have allowed massive growth and scale using email.
Social channel
“We’ve found that not only is email one of the top 5 or 6 referrers of traffic, but visitors from newsletters are some of the most engaged readers spending 3 minutes longer on the site than other channels.” — Dan Oshinsky, Director of Newsletters at BuzzFeed
Compared to other social networks
Each service has an ideal publishing time, appropriate technique for recirculating older content, and intricate engagement strategy. Twitter can have the same article posted multiple times a day. Facebook descriptions and titles are meticulously targeted at communities. Instagram crops are made irresistibly beautiful. In each case, there is a science.
Email is better than social platforms on a number of fronts. Email doesn’t fight opaque algorithms to surface, like Facebook. Emails aren’t buried in a user’s timeline, like Twitter. Email is prominently visible on every device a user may use. Email is recoverable through client search. Emails can be viewed over and over again.
Email user behavior and identifiable qualities should be used to optimize email pleasantness. The industry standard, as reported by Mailchimp, is 20–30% open rates. This signals a horrible “platform”. Similar reports state 1–3% open rates. This is even worse. That means out of 100 people who you sent an email to, approximately 25 people looked at it. Of those 25, it is still just one to two people who clicked on something. This is horrible. Email can perform much better.
Email campaigns that randomly segment email databases, for A/B tests on designs are missing the point. Email services only track the metrics around emails that are concerned with technical functionality. Dashboards report open rates, click-through, email driven entries, and bounce rates. There is so much more opportunity.
Once someone signs up to an email, you can find out a lot of things. You know the IP address of the person who signed up. That means, you can estimate where they are. That means, you know their time zone. That means, you shouldn’t send them emails in the middle of the night. Right?
Once they open their first email, you can also find out a lot of things. You know their IP address again, so you can verify your first assumption. You can also start a trend graph of when this user likes to open emails. That is what time of the day they should get the email, based on that time zone we discovered.
Personalizing based on usage
If they happen to click on something, then you have even more data. You could classify your links and content before sending the email, and begin identifying the user’s interests. If you have images, then you can start understanding the trends in image performance in relation to the user.
There is real value to users, beyond the creepy reality that comes with tracking. When publications are making quality content, that users are legitimately interested in, the distribution mechanics are important. This method for targeting could be used for sleazy marketing emails and spam, but thats not the focus.
Napkin math
Operating on basic assumptions, you can begin to estimate the potential financial benefit to a technically developed email strategy. Take the email newsletter list size, take the average site entries per email, multiply it by the ad impressions per visit, and estimate the cost per ad impression (CPM).
Using conservative numbers, we can estimate actual monetary value. Imagine a email newsletter of 100,000 users with a 10% click through rate. Assuming two page views per visit and two ads per page view (around industry average), you have 40,000 ad impressions generated a day. At a CPM of $5, thats $200 a day, or $6000 a month, or a bit more than $72,000 a year. The ad impression revenue alone is a significant sum that would manage costs of employee and tools. Add email sponsorships and the emails are even more valuable.
Big Media companies have email lists that are a factor of three to five times larger, around 300,000 to 500,000. The clickthrough rates are also much higher, closer to 13–20%, on well designed newsletters, as seen in Buzzfeed and the NYTimes. The CPM for larger brands are also much higher, from $5 up to $15, based on the audience. Assuming the new variables for Big Media, the $72,000 a year in revenue skyrockets to hundreds of thousands and millions.
Investment in developing email has an undeniable revenue opportunity for Big Media. Assuming a large organization, CPM will be static from year-to-year, but open rates can be optimized. If the vectors mentioned above are utilized, I believe existing open rates could be doubled. Beyond design and subject line optimizations, there are large-scale technology improvements that could make a difference.
Email is worth exploring.
Thanks for reading. If this was interesting to you, follow me on Twitter.
Thoughts on Media is a community publication on Medium, curated by ReadThisThing.
On ad supported websites from a developer’s perspective
I’ve worked at media companies for over three years. Watching the recent discussions about ad-blockers, advertiser’s impinging on reader’s rights, and the growth of content distribution networks (read: Facebook, Apple News, RSS readers), I want to share how it feels to be a web developer.
Websites are complicated, but with thorough planning, complexities can be managed. Media companies often operate on a editorial calendar, which forces a perpetually reactionary state of building. In other words, developers are caught in a whirlwind of reactions: to urgent ad campaigns, soon-to-be published articles or published pieces requiring new features. Even developers with the best intentions, who know best practices of building optimized sites, are constantly under-fire. Business needs and the developer’s desire to keep a fast and clean website become inversely related.
First, working in a media company as a web developer is a lot more complicated than it looks. The process starts with a content producer’s desire to make high quality content for a loyal audience. The website is used to gather stories, edit, and publish. Developers spend time optimizing the website’s content for discovery (read: validate HTML, SEO and social sharing). Writers spend time researching stories and write on captivating topics. And editors and producers spend time preparing and shaping stories for their overall audience. These parts keep the editorial machine moving.
For established brands, companies prepare direct-sales plans, during which publishers create ad inventory. Ads are sold on the tune of unit-per-thousand. This means a thousand impressions of the advertisement are sold at a single price. For example, $15 per thousand impressions. In most cases, the advertisement inventory is sold based on a contractual agreement between the advertiser and the publisher. The agreements are based on common requirements from organizations like the IAB, but can also include specific requirements, per-advertiser. As a result, inventory pricing and qualifications can vary.
Requirements around inventory can vary greatly. Definitions have only been getting more stringent in the past years. Requirements around viewability, conversion, and targeting are important for advertisers. Billable impressions require a rendered ad to be have at least 50% of the creative in-view to the user for at least 1 second. Conversion and targeting is based around certain agreed clicks on the ad or specific types of users. In regards to demographics, advertisers can specify contracts to require traffic to be domestically based, targeted by age, or catered to user interests.
Publishers are responsible for providing the space on their webpage to render the ads. These predetermined places on the webpage are reserved for ads and packaged as available inventory. The actual placement for these ads are agreed upon based on interests from the editorial designers, as well as the business team. The editorial influence seeks to protect the diginity of the site’s content. The business team considers the various parameters that determine a valid ad impression, and seek to reduce the wasted page-view opportunities.
The techniques around tracking user activity have entirely changed in recent years. Media companies employ countless individuals responsible for understanding on-site behavior. Oftentimes, using 3rd party tracking services, such as Google Analytics or Omniture, publishers track the top-level site metrics around traffic activity. The basic metrics to watch are unique viewers, number of page views, and referrer traffic. Advanced software is implemented to gain further insights to help editorial parties understand their progress in order to grow their audience.
The collected data is used to target company specific performance indicators, often driven by business needs. The larger the organization, the more tools are used to infer insights from the existing site traffic. The more 3rd party tools a business group can implement on the website, the easier their job becomes. Unfortunately, the methods for implementing these tools are not always ideal.
Traditionally, the addition of 3rd party tools is facilitated and monitored by the web developers. With new tools, such as Tag Managers, 3rd party tools can be added in the form of scripts, without the notice of developers. In the immediate, this solves a problem for the marketing and business group, who need to gather data on a tight turnaround. For the developers, the practice of haphazardly adding scripts can counteract the attempts to improve the website’s performance. Because the number of people who can add scripts to the site is uncoordinated, this can lead to unnecessary overlapping functionality.
In the worst cases, the publishers who create partnerships with brands for ad inventory sales are inundated with unnecessary bloat. Each advertisement on a webpage comes with its unique set of creative assets and tracking files. While a publisher may have its own set of site traffic tools, each advertisement may also contain their own.
The combination of 3rd party tools, business intelligence tracking, advertisements, and advertisement specific 3rd party tracking tools create a path of unmanageable complexity.
Given these circumstances, there isn’t a clear way forward. Simplifying the website’s permitted scripts or restricting the tooling used by the website isn’t always an option. The growth of an organization often ties directly into the increase in unnecessary scripts and stake holders
No wonder content distributors are gaining traction. Content producers will never be entirely out of business, but the profit margins continue to thin. The distribution channels that can leverage content feeds, such as RSS or Facebook, can create frameworks that control the entire tracking, ad serving, content loading, and user platform.
I imagine in coming years, media companies will re-approach the importance of highly performant websites. The difficulties in managing the on going complexity are solved when engineering influences are prioritized in business level discussions. I’m excited to see how tech teams reshape the digital media landscape. There’s a lot of interesting stuff ahead.
Thanks to Jihii Jolly, KC Oh and Alex Godin for editing and ideas.
Thoughts on Media is a community publication on Medium, curated by ReadThisThing.
If this was interesting to you, follow me on Twitter.
On print and digital news consumption
Wednesday and Thursday, I decided to read a print newspaper on the way to work. This set off a Twitter discussion with Alex Remington.
https://twitter.com/lamthuyvo/status/662678353040834561
Wednesday, I picked up a free WSJ before getting on the subway and spent my 40 minute commute paging through the domestic, international and business sections. Thursday, I bought a NYT late edition and spent my crowded morning commute fumbling through the stories with a folded newspaper under my arm. Even through the pain of navigating a newspaper on the train, I came away feeling informed and connected to the world around me.
I always knew that there was a huge difference in reading the news in print and online. This experience heightened my awareness. Print content is contextually laid out. Digital content is consumed in isolation.
The presentation of articles intertwined amongst one another is a powerful design structure. Online, articles on a feed or website are expected to be an isolated piece of content. Any ads, recirculation modules, or call-to-action pop-ups are annoying.
On a newspaper, the front-page’s brief exposure to a number of articles is immediately valuable. By scanning the page, I am immediately informed about a number of topics, and can make my own decision to continue reading.
The digital equivalent lacks an effective solution for the “scan-and-chose” experience. Editorially curated index pages are dead. People find content through their preferred link feeds; be it Facebook, RSS feeds, or some link aggregator. People expect to find a link they want to visit, then click it with the expectation of exploring that content.
The design principle of adding content in the middle of these article is synonymous with “taking away the users attention”. Placing links to other content in the middle of an article is a surefire way to reduce article completion rates and increase bounce rates.
Still, the experience of reading a print newspaper article and being able to transition to another article is a great experience. The closest equivalent online is an infinite scroll article that transitions you into another article before you know it. It feels sneaky and KPI driven. The newly loaded article is a new ad impression opportunity and page-view. The problem is that the metrics that drive the digital businesses’ feel like they lead the design principles.
So the question stands, with all our digital content, what do users want and how do we give it to them?
https://twitter.com/alexremington/status/662338293258825728