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

Thanks to MJML
LGF • Views: 39,565

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.

Donate with
PayPal
Square Cash Shop at amazon
as an LGF Associate!
Recent PagesClick to refresh
The Warped World of 1950’s Marriage Counselling (This article was previously written for the closed Yahoo group "Intertel Atheists" on September 27, 2014.) I am the manager of that Yahoo group, and the author of the article. Rights to articles at Intertel are retained by the ...
Anymouse 🌹
11 minutes ago
Views: 83 • Comments: 0 • Rating: 1
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Mad Men: Inside the Men’s Rights Movement—and the Army of Misogynists and Trolls It Spawned - Mother Jones On a balmy afternoon last June, dozens of demonstrators carrying “Stop the Violence” and “Rape is Rape” placards descended on the Hilton DoubleTree in downtown Detroit. They had come to protest the first-ever national gathering of the men’s rights ...
Birth Control Works
18 hours, 31 minutes ago
Views: 233 • Comments: 1 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
Men Legally Allowed to Finish Sex Even if Woman Revokes Consent, NC Law States - Broadly ne May evening in 1977, Beverly Hester was sexually assaulted. According to the summary included in the North Carolina Supreme Court decision State v. Way, she testified that the perpetrator, Donnie Way, threatened to beat her if she didn't ...
Birth Control Works
18 hours, 37 minutes ago
Views: 230 • Comments: 0 • Rating: 0
Tweets: 3 • Share to Facebook
Shares: 0
Comments: 0
: 0
4 USAF Aircraft Destroyed or Damaged in a Week Thunderbirds F16 flipped when landing after their practice flight for Dayton Air Show. Two people hurt. 📷WHIO pic.twitter.com/LRcuVucKIm &mdash; Tom Podolec CTV News (@TomPodolec) June 23, 2017 A few days ago an F-16 crashed on takeoff at Ellington AFB, ...
Unshaken Defiance
20 hours, 42 minutes ago
Views: 235 • Comments: 0 • Rating: 0
Tweets: 4 • Share to Facebook
Shares: 0
Comments: 0
: 0
The Mets, Jets, and Dems; My Triumvirate of Lost Causesblog.timesunion.comFor pictures, click on the link above. The Mets, Jets, and Dems; my triumvirate of lost causesBy Rob Hoffman on June 26, 2017 at 5:53 AM0I’m in a slump. This is an undeniable fact, and not one of those alternative ...
rhoffman
2 days, 1 hour ago
Views: 284 • Comments: 1 • Rating: -2
Tweets: 2 • Share to Facebook
Shares: 1
Comments: 0
: 1
Why Are So Many Queer Girls in Juvie? The findings come out of years of research done by Angela Irvine and Aisha Canfield for the National Council on Crime and Delinquency (both now work at Impact Justice). For this particular statistic, they anonymously surveyed 1,400 girls in ...
Birth Control Works
2 days, 14 hours ago
Views: 276 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
North Carolina Televangelist Indicted on Charges of Tax Crimes Coontz, 50, is described on his website as a "pastor, evangelist, television host, author, humanitarian, philanthropist, businessman." "a 2011 BMW, a 2011 Regal 2500 boat, a 2012 BMW convertible, a 2011 Lexus, a 2011 Land Rover, a 2006 Ferrari, ...
Tarkloon
3 days, 11 hours ago
Views: 348 • Comments: 1 • Rating: 2
Tweets: 1 • Share to Facebook
Shares: 1
Comments: 1
: 1
Isaac Asimov’s Best Arguments of All Time, Part One ➤ #Subscribe: goo.gl➤ Facebook: goo.gl➤ Twitter: goo.gl➤ Google+ : goo.gl➤ Site: goo.gl➤ Thanks for watching :) #Sciencetoday is channel uses for #education, #teaching, #review, #commentary, or research... If you have any issues with content, please contact us, for an ...
Tarkloon
3 days, 12 hours ago
Views: 304 • Comments: 0 • Rating: 2
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
AWOLNATION - Hollow Moon (Bad Wolf) (Official Video) AWOLNATION's official video for "Hollow Moon (Bad Wolf)". Watch the new AWOLNATION video Run (Beautiful Things) - YouTube From AWOLNATION’s new album, ‘RUN’, available now at:iTunes - smarturl.it CDs, Vinyl + Bundles - smarturl.itGoogle Play - smarturl.it Stream ‘RUN’ ...
Tarkloon
3 days, 12 hours ago
Views: 255 • Comments: 0 • Rating: 1
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Judge Fines Kris Kobach $1K for Misleading Court on Materials He Brought to Trump Meeting Just another GOP liar, it's all they know how to do. WICHITA — A judge has fined Kansas Secretary of State Kris Kobach $1,000 for misleading the court about the contents of materials he was photographed taking into a ...
Tarkloon
3 days, 16 hours ago
Views: 626 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 2
Comments: 2
: 2