Tech Note: The “Email an Article” Makeover, Now Mobile-Friendly

Thanks to MJML
LGF • Views: 39,248

Image via Shutterstock

In the past few days I’ve been working on a part of the LGF site that’s been woefully neglected for too long: our “Email an Article” feature, which you get to by clicking the little envelope icon below each article — the one that looks like this:

Would you believe this code hasn’t been seriously worked on for 10 years?

In a way it’s kind of cool that it was still functional despite the lack of attention, but with the advent of mobile devices it really started to show its age. The idea of the feature is to send a nicely formatted HTML email that contains most of the article, with images and links and all that good stuff. (It also includes an alternate non-HTML version for people who don’t want HTML in their emails.)

But on mobile devices, this HTML code was … well … less than optimal. Not perfect. Oh, let’s face it, it sucked. On some mobile devices it looked OK, but was shrunken down to an unreadable tiny size because it wasn’t scaled to the mobile screen. On other mobile devices it looked flat out awful, because they didn’t support CSS properly, or a myriad of other reasons.

The thing about mobile HTML email is that it’s a real nightmare to code, with so many devices out there, each with its own quirks and bugs. That’s one reason why I hadn’t done much with the code for a long time, because it was a daunting task.

But I’m pleased to announce that I recently discovered an open source framework called MJML that makes all of these compatibility headaches disappear like magic. Instead of writing the HTML directly, you code it with MJML’s custom tags first, then compile it to the special HTML that works in emails. Here’s a sample of what the MJML code looks like:

<mjml>
   <mj-head>
     <mj-title>Hello MJML</mj-title>
   </mj-head>
   <mj-body>
     <mj-container>
       <mj-section>
         <mj-column>
           <mj-text>
             Hello World!
           </mj-text>
         </mj-column>
       </mj-section>
     </mj-container>
   </mj-body>
 </mjml>

The MJML framework gives us a vastly improved “Email an Article” feature that looks great on almost any mobile device or desktop computer. The HTML version now scales beautifully to fit the screen size of whatever device you’re using to view it, and it works even with the most troublesome email clients (I’m looking at you, Microsoft Outlook). And as a bonus, our emails now include links to share the articles to Facebook and Twitter.

I always like to end these Tech Notes with a tip for programmers, so here’s something I figured out while working with MJML that wasn’t obvious and wasn’t in their documentation.

Since I use PHP to generate the email for this feature, I build the MJML code as a string. The official docs for MJML only describe how to compile the code from a file on disk and write the resulting code back to the disk, but this seemed like way too much overhead. So I worked out a way to use PHP to pass a string into the MJML compiler and get back a string of compiled HTML code. And here it is:

<?php
$mjml = '[[ MJML CODE HERE ]]';
$html = trim(
	shell_exec(
		'echo -n ' . escapeshellarg($mjml) . ' | mjml -i -s -m'
	)
);
?>

This uses PHP’s shell_exec command to pipe the MJML string to the MJML command line compiler, and return the compiled code in the variable $html. The trim command is in there just in case there’s some white space at the beginning or end of the compiled code.

Jump to top

Create a PageThis is the LGF Pages posting bookmarklet. To use it, drag this button to your browser's bookmark bar, and title it 'LGF Pages' (or whatever you like). Then browse to a site you want to post, select some text on the page to use for a quote, click the bookmarklet, and the Pages posting window will appear with the title, text, and any embedded video or audio files already filled in, ready to go.
Or... you can just click this button to open the Pages posting window right away.
Last updated: 2016-01-01 10:29 am PST
LGF User's Guide RSS Feeds Tweet

Help support Little Green Footballs!

Subscribe now for ad-free access!Register and sign in to a free LGF account before subscribing, and your ad-free access will be automatically enabled.

Recent PagesClick to refresh
Letters From Women Pleading for Abortion, Sent in 1917, Mirror Emails Sent Today In the early 1900s, desperate American women wrote letters to the founder of Planned Parenthood begging for help with unwanted pregnancies. A century later, they're sending eerily similar messages to an international abortion-by-mail service. "I'm in the family way ...
Birth Control Works
1 hour, 44 minutes ago
Views: 137 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 1
Comments: 0
: 1
Pregnant Women Are Being Arrested for Crimes They Didn’t Know They Committed Laurie was five months pregnant when she used methamphetamine. She'd previously been on anxiety medication, but her doctor switched her to an opiate when she told him she had history for drug addiction. She said the opiate made her ...
Birth Control Works
1 hour, 46 minutes ago
Views: 200 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 1
Comments: 0
: 1
Manchester: Defiant and Proud Everybody reading this will have some connection to Manchester. Whether it's music you love (*waves at Charles*), football you enjoy, science you respect or that radical tradition you've read of, Manchester is a World City we all have some ...
Paul Canning
5 hours, 15 minutes ago
Views: 310 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Inclusive Approaches to Preventing Violent Extremism - Carter Center Violent extremism fractures communities, fosters division, and exacerbates political conflicts. It knows no religious, national, or ethnic boundaries. Violent extremist movements continue to fuel the world’s most violent wars in Africa and the Middle East, and right-wing ethno-nationalist extremism ...
Birth Control Works
6 hours, 35 minutes ago
Views: 176 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 1
Comments: 0
: 1
Love It or Hate It-What Saudi Arabia Is Buying in Its $110 Billion Arms Deal Huge deals with israel, and Saudi Arabia. Our industrial war machine grows apace. TanksSaudi Arabia is expecting 153 M1A1/A2 tank structures, which will be turned into 133 Saudi-specification M1A2S main battle tanks. Twenty additional tanks will replace those from ...
Unshaken Defiance
7 hours, 28 minutes ago
Views: 219 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 1
Comments: 0
: 1
On Trump and RussiaPresident Trump’s remarks regarding Russia as a candidate for President of the United States should have alarmed Americans regardless of party. Candidate Trump went out of his way to praise Vladimir Putin’s Russia, while simultaneously belittling the President of the ...
HappyWarrior
1 day ago
Views: 201 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Work, Not Sex? the Real Reason Chinese Women Bound Their Feet Girls who had their feet bound didn't lead a life of idle beauty but rather served a crucial economic purpose, especially in the countryside, where girls as young as 7 weaved, spun and did work by hand, Bossen said.Read ...
Birth Control Works
1 day, 8 hours ago
Views: 308 • Comments: 2 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Why Are All the Anti-Abortion Democrats Men? A troubling pattern emerges if you start looking at who in the Democratic Party supports women's reproductive rights and who doesn't. Though disappointing, it's far from surprising that all of the anti-abortion Democrats are men. Let me put that ...
Birth Control Works
1 day, 8 hours ago
Views: 395 • Comments: 1 • Rating: 1
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Virtual Reality Can Help You Feel More Empathy for Women Harassed at Abortion Clinics It's hard to understand what it feels like to be confronted or bullied outside a women's health center — until it happens to you. I'd never had that experience until last year, while reporting on the Supreme Court case ...
Birth Control Works
1 day, 8 hours ago
Views: 403 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Families of Chechen Gay Men Pressured to Sign ‘No Complaint’ Documents, Org Says The existence of anti-gay pogroms in Chechnya first surfaced in the independent Russian newspaper Novaya Gazet in April, reporting that hundreds of people had been detained and at least three are now thought to have died. Since then, police ...
Birth Control Works
1 day, 9 hours ago
Views: 296 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0