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

Thanks to MJML
LGF • Views: 43,154

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
Nothing to See here… Except Russian as New President of Interpolwashingtonpost.com The advancement of worldwide Authoritarianism and Putin’s agenda advances at an ever increasing rate. I especially am entertained about the Russian official’s Tweet about arresting the entire Ukrainian Government. That should be good for a few laughs inside the ...
Rocky-in-Connecticut
13 hours, 45 minutes ago
Views: 66 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Katie Porter Wins in California Porter becomes the fourth Democrat to flip a Republican-held House seat in Southern California this cycle; Democrat Gil Cisneros now leads Republican Young Kim in the last uncalled race and is poised to become the fifth. Advertise with Mother ...
Thanos
5 days, 4 hours ago
Views: 182 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
European Court: Russia’s Arrests of Navalny Were Political The court’s highest chamber found that Russian authorities violated multiple human rights in detaining Navalny seven times from 2012 to 2014, and that two of the arrests were expressly aimed at “suppressing political pluralism.” It ordered Russia to pay ...
Thanos
6 days, 4 hours ago
Views: 189 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
“Documenting Hate: New American Nazis, ” Coming Soon… — ProPublica In the wake of the deadly anti-Semitic attack at the Tree of Life synagogue in Pittsburgh, ProPublica and Frontline present a new investigation into white supremacist groups in America — in particular, a neo-Nazi group, Atomwaffen Division, that has ...
Thanos
1 week, 1 day ago
Views: 243 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
Democrat Kyrsten Sinema Wins Arizona Senate Race, Flipping Second GOP Seat Democrat Kyrsten Sinema has defeated Republican Martha McSally to win the Arizona Senate race, the Associated Press projected Monday evening. With Sinema's victory to flip the open seat of retiring GOP Sen. Jeff Flake, she becomes the first Democrat ...
Thanos
1 week, 1 day ago
Views: 231 • Comments: 0 • Rating: 0
Tweets: 2 • Share to Facebook
Shares: 0
Comments: 0
: 0
I DONT KNOW HOW but THEY FOUND ME - Do It All the Time This footage was first thought to be a conceptual art piece produced by the band before making music videos had become standard music industry practice. While the exact date and circumstances under which it was produced are unclear, the ...
Thanos
1 week, 3 days ago
Views: 268 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
Sirintip - Don’t Give Up (Youtube Spaces Session) “Don’t Give Up”Music and lyrics by Sirintip Sirintip - voiceHorace Bray - guitarAndrew Freedman - keysJames Quinlan - bassNolan Byrd - drums Filmed at: Youtube Space New York Videographer: Matt MarlinskiAudio Engineer: Irving GadouryMixed by: Jonathan SmithMixed at: Galaxy ...
Thanos
1 week, 3 days ago
Views: 280 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
Muse Perform the Dark Side on Later… With Jools HollandMuse perform The Dark Side on Later... with Jools Holland on BBC Two (6th October 2018). For more performances and interviews from the show, subscribe now: bit.ly. Watch the whole episode here: bbc.co.uk
Thanos
1 week, 3 days ago
Views: 244 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
The Pentagon Has Prepared a Cyberattack Against Russia Officials say the new Trump cyberoperations order, National Security Presidential Memorandum 13 (NSPM 13), is designed to allow Defense Secretary James Mattis and Director of National Intelligence Dan Coats to approve retaliatory strikes without the approval of others in ...
Unshaken Defiance
2 weeks, 4 days ago
Views: 436 • Comments: 1 • Rating: 1
Tweets: 3 • Share to Facebook
Shares: 0
Comments: 0
: 0
Trump’s Orwellian EPA Disappears Climate Change Pagemotherboard.vice.com epa.gov pages that previously provided information about climate change have been changed from claiming that they are "updating" to an error message that reads, "We want to help you find what you are looking for," as revealed by a ...
Rocky-in-Connecticut
2 weeks, 4 days ago
Views: 581 • Comments: 0 • Rating: 1
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0