The latest update to RSVPMaker focuses on more design freedom and better consistency for confirmation messages, reminder messages, and email broadcasts.
This push was inspired in part by a recent post on the SendGrid blog, How to Send On-Brand Confirmation Emails (+ Examples). Having noticed some shortcomings in the formatting of RSVPMaker email messages (which were annoying me as much as anyone), this project had been on my todo list anyway. The examples in SendGrid’s article nudged me to put it at the top of the list.
Here’s an example of a confirmation message for a wedding, created using these new capabilities, with the correct formatting for a section laid out using the Gutenberg columns block and a centered image below the spot where the registration details are included:
Here is the same example, viewed on a mobile phone.
Warning: Make sure you test any designs using columns on a mobile phone to make sure the way they reformat for mobile is acceptable. See note below.
Here’s a slightly darker example, for a pirate-themed event (see 3 Confirmation Message Design Examples).
Others with more design skills than I should be able to improve upon these examples (in fact, I’d love to see what you come up with). First, I needed to lower some barriers to designing a good email template in RSVPMaker, even for those with the skills to do so.
One of the challenges of designing HTML email is that the handling of CSS styling doesn’t work the same way as it does on the web. Formatting results tend to differ among email clients in annoying ways. In my experiments, the handling of CSS in the head of an HTML document didn’t work on Gmail the way Google’s documentation says it should.
The primary technique for combatting these problems is inlining CSS. Instead of having a p {font-size: large} statement in the <style> tag within the head of an HTML document (or a linked stylesheet), every paragraph gets markup like this:
The latest update to RSVPMaker incorporates Emogrifier, an open source CSS inline tool. An inliner allows the designer to embed CSS in the head of the document, then automates the process of applying that code to the appropriate HTML documents, taking id and class references as well as the document tree hierarchy into account. While it has a few limitations (documented at the link above), it works very well. And while packing all those style references into individual HTML elements may seem like it’s adding to the character count of your message, the process also strips away unneeded CSS code. For example, I’m able to incorporate a long and complicated stylesheet for the Gutenberg core blocks into the HTML fed into Emogrifier, but the code generated only includes styling for the blocks actually used in your message.
Here is how we set up the custom confirmation message for this event post, using the Gutenberg columns block to divide the content into two columns (message from the happy couple on the left, picture on the right). RSVPMaker supplies the default styling for the core WordPress blocks, so these should look correct in the email message.
However, mobile display can be problematic because of the lack of support for media queries (adjustments based on screen size). See the note on columns.
For enhanced presentation of this content, we have created a custom email template called “wedding” to be used in place of the default “transactional” email template.
Here is the code for the wedding template. Note that it includes a <style> section in the head of the document. Before the message is sent, all the message HTML is run through an inliner that extracts the relevant CSS rules and applies them individual html elements, taking id and class references into account. In addition to the styles you see specified here, RSVPMaker pulls in standard stylings for images, alignment, and core WordPress blocks.
A View default email styles link at the bottom of the page allows you to see all the styles included by default. These include the base styles for display of formats from the WordPress Gutenberg block library, as well as common formats such as image alignment for even “classic” WordPress styles. The styles you add to your templates will override these defaults. However, styles are included inline with the HTML of your template or your content will not be overridden by either the default styles or the ones supplied in the <style> section of your document. (See below for a workaround related to styling the RSVP button differently between templates).
You tell RSVPMaker to use this email template, rather than the default “transactional” email template, in the calendar sidebar of the editor …
… or on either the RSVP / Event Options screen or the Confirmation / Reminder Messages screen associated with the event.
Styling the RSVP Now! / Update RSVP Button
The styling of the RSVP Now! button (which turns into an Update RSVP button for confirmation messages) can be altered on the RSVPMaker settings page. Changing it here changes the button anywhere it appears on your website.
The same styling will be used in your email messages unless RSVPMaker sees a line like this in your email templates.
a.rsvplink {width: 8em; display: block; border: medium inset #FF0000; text-align: center; padding: 3px; background-color: #0000FF; color: #FFFFFF; font-weight: bolder; text-decoration: none;}If you have a reference to a.rsvplink in your template, it substitutes a simpler version of the button code that includes the class attribute but not the style attribute on the link. That allows the RSVPMaker inliner code to add the styling you specified without conflicts.
The example above is a black and white color scheme used in the Pirate Party example.
Columns Can Be Tricky
Although I have had some success using Gutenberg column layouts, they are not guaranteed to translate as well to mobile email viewing as they do to web viewing. Gutenberg uses media queries to adjust the formatting of columns, depending on screen size. On a screen too small for columns to be displayed side-by-side, those rules alter the formatting so the columns are stacked like blocks.
Media query CSS cannot be inlined, and media query references in the head of an HTML email document may not be interpreted properly by a mobile email client. So you’re likely to see the columns still displayed side-by-side even in an email client. The proportions may not always be correct.
For the wedding confirmation note shown above, the image in the right hand column happened to resize appropriately in the mobile version, but the results are not always satisfactory.
In one case, I was able to work around that limitation to an acceptable but not perfect extent by adding this to my template:
.wp-block-column {max-width: 50%}Other Useful CSS
You can style image captions using CSS like this.
figcaption {color: #333; font-style: italic}If your goal is to match or approximate the look of your website, consider studying what styles are applied to figures, headlines, and paragraphs that you might want to incorporate into your email templates.
using the Inspect tool in Google Chrome.