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

Thanks to MJML
LGF • Views: 43,584

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:

$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
A Science Journal Funded by Peter Thiel Is Running Articles Dismissing Climate Change and Evolution - Mother Jones everal articles on the site argued against the theory of evolution, for example, and at least one dismissed the overwhelming scientific consensus on global warming. Later, through tax documents and interviews, I would learn that all of Inference‘s funding ...
Thanos
12 hours, 4 minutes ago
Views: 123 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
20 Things I Don’t Know About Youblog.timesunion.com Who is the average blog reader? More importantly, who is the average Hoffman Files reader? What does this individual look like? Are they predominantly female or male? Are there certain ages of individuals who favor perusing the blog pages? ...
rhoffman
4 days, 4 hours ago
Views: 250 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
Lower Prescription Drug Prices Lure Americans to Mexico to Buy Meds "At that point I started tearing up. I could not believe how inexpensive it was and how easy it was," Greenseid says. "I said to [the pharmacist], 'Do you have any idea what it's like to get insulin in ...
Thanos
6 days, 9 hours ago
Views: 191 • Comments: 0 • Rating: 1
Tweets: 2 • Share to Facebook
Shares: 0
Comments: 0
: 0
California Gov. Gavin Newsom to Pull National Guard From Border With Mexico - Los Angeles Times Love the new Gov. In released excerpts of his speech, Newsom says he is giving the National Guard a new mission so that troops would not take part in the White House’s “political theater” and instead “refocus on the ...
Unshaken Defiance
1 week ago
Views: 265 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
It’s a Miracle! …Or Is It? SOURCES ARE BELOW:The charity I strongly endorse is called ASRI. It’s a hospital in Borneo that provides affordable health care to villages on the edge of a national park in return for a pledge not to cut down trees, ...
Thanos
1 week ago
Views: 277 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Drug Companies Are Sitting on Generics—43% of Recently Approved Aren’t for Sale Posting for that friend who loves to tell me that Trump and capitalism will find a way to produce needed drugs and make them cheaper... There are huge markets going untapped, and stagnant pools of decades old capital out ...
Thanos
1 week ago
Views: 247 • Comments: 0 • Rating: 1
Tweets: 1 • Share to Facebook
Shares: 2
Comments: 0
: 2
Facebook Fights Multibillion-Dollar Privacy Class Action SAN FRANCISCO (CN) – A federal judge on Friday rejected Facebook’s argument that it cannot be sued for letting third parties, such as Cambridge Analytica, access users’ private data because no “real world” harm has resulted from the conduct. ...
Thanos
2 weeks ago
Views: 313 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
The Specials - Vote for Me (Live - the One Show) (2019) (HD) 1979 to 2019... Celebrating 40 years of what is arguably one of the most important and influential music genres/ movements ever to influence the British music scene in it's history... 2 Tone... which for many became much more than ...
Thanos
2 weeks, 2 days ago
Views: 320 • Comments: 0 • Rating: 2
Tweets: 1 • Share to Facebook
Shares: 1
Comments: 0
: 1
Vampire Weekend - Harmony Hall (Official Audio) Harmony Hall/2021 available everywhere now: smarturl.it Lyrics: We took a vow in summertimeNow we find ourselves in late December I believe that New Year’s EveWill be the perfect timeFor their great surrender But they don’t remember Anger wants a ...
Thanos
2 weeks, 2 days ago
Views: 291 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
Feel It Still - Portugal the Man (’60s ‘Mr. Postman’ Style Cover) Ft. Joey, Adanna, Nina Ann Get the song: smarturl.it | Subscribe: bit.ly 2019 World Tour Tix: pmjtour.com | Our first video of 2019 stars Joey Cook, Adanna Duru & Nina Ann (in her PMJ debut!) in a "Mr. Postman" inspired take on "Feel It ...
Thanos
2 weeks, 2 days ago
Views: 352 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0