Customizing MailChimp Using Translations

It seems like email opt-in forms are here to stay on websites, so I’ve spent a lot of time playing around with customizing and embedding them. While I love how easy MailChimp is to use, I find that it’s not entirely straightforward to customize the wording used, especially the form validation and confirmation messages.

Fortunately, it is entirely possible once you understand that MailChimp bundles all wording changes to those areas with language translations. There are two places to look to modify the wording, whether it be to a different language or just to a different way of saying the same thing in English.

1. Thank You Messaging

One of the most common wording requests clients’ have is for the confirmation message on embedded forms after the email address is submitted. By default it’s a pretty long message, which is both not that user-friendly (in my opinion – I’m a fan of short messages), and is hard to style into many opt-in areas.

You can find the fields to “translate” that wording when you go to edit or style the account forms. It’s a bit of a trip to get there:

Lists > click on list name > “Signup forms” tab > General Forms

Select the “Signup thank you page” from the dropdown list of different forms and form states, then click on the “Translate it” tab. You’ll see the available text strings:

mailchimp-translation

The three to edit for that inline confirmation message are the “Almost finished…”, “To complete the subscription process…” and “We need to confirm your email address” lines. You can’t leave fields blank so you’ll have to come up with something short and pithy or cheat by breaking your sentences over the fields.

You can edit the regular page text for the MailChimp-hosted confirmation page separately from these fields, so I think breaking it over fields is safe but fair warning that I haven’t tested it super extensively to find any edge cases.

2. Error Messages

The newer MailChimp embed code has actually taken away most of the need for my custom embedding method, although I still use my method when I need multiple forms in a page since I can customize the selectors.

Either way, you end up with form code and script code, something like:

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//youraccount.us1.list-manage.com/" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <!-- form code here -->
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[3]='FNAME';ftypes[3]='text';fnames[4]='LNAME';ftypes[4]='text';fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

As a side note, I always completely delete the included style components and in the above snippet I’ve also removed the actual form components and a bunch of the script contents to make it shorter. You can customize the form fields, labels, placeholders, etc., just by editing the HTML, although be careful to keep things like IDs and names the same unless you really know what you’re doing.

In order to translate the validation messages, you can add the following snippet inside the MailChimp-provided embed code, before the closing </script> tag:

/**
    To customize your embedded form validation messages, place this code before the closing script tag.
 */
$mcj.extend($mcj.validator.messages, {
    required: "Please enter your email",
    remote: "Please fix this field.",
    email: "Please check your email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: $mcj.validator.format("Please enter no more than {0} characters."),
    minlength: $mcj.validator.format("Please enter at least {0} characters."),
    rangelength: $mcj.validator.format("Please enter a value between {0} and {1} characters long."),
    range: $mcj.validator.format("Please enter a value between {0} and {1}."),
    max: $mcj.validator.format("Please enter a value less than or equal to {0}."),
    min: $mcj.validator.format("Please enter a value greater than or equal to {0}."),
    mc_birthday: "Please enter a valid month and day.",
    mc_date: "Please enter a valid date.",
    mc_phone: "Please enter a valid phone number.",
});

Then you can edit the text strings inside the quotation marks to change the wording. Again, this is a place to be judicious in your changes since it error messages are pretty important to user experience.

Customize MailChimp inline form messages using translations – who knew!?

Eight Things Designers Can Do to Improve SEO, Accessibility, and Performance

I love it when designers I work with ask for tips on how they can up their game and improve their sites from a development perspective, but I sometimes end up feeling bad because I don’t always have very concrete suggestions to give.

This post is an attempt to change that by providing eight specific things designers can pay attention to as they work on the visuals for a website to ensure that it’s optimized in terms of SEO, accessibility, and performance.

Eight Design Tips for SEO, Accessibility, and Performance infographic

Just to note, I’m definitely not an expert in these areas, and I’m not trying to suggest that these tips will get you all the way “there” in any of them. Nothing in web design and development is really that cut and dry. These are just a starting place.

Definitions

Before I dive in, let’s make sure we’re on more or less the same page about what these terms mean.

SEO: Search engine optimization, or making sure that a website is easily and correctly indexed and displayed by search engines. SEO also involves finessing a website so it appears higher in the results for various terms and search phrases.

Accessibility: The extent to which a website is accessible (usable) by all people. A lot of the time we think of this as meaning “people with various disabilities or challenges to access” but that’s kind of limiting, as you can read about in this great A List Apart article.

Performance: The speed with which a website loads across devices and at various internet connection speeds. Can also tie into how smoothly interactions function, but generally load speed is focused on the most.

1. Content Hierarchy

If you take a website down to the bare bones by removing all the images, styling, and special effects, you’re left with text and links down a page. Remembering that is foundational to strong SEO, performance, and accessibility.

A bare bones website is going to perform really well without any extra work. If a site has a strong outline and clear content hierarchy, that further aids accessibility and SEO.

What happens is that we get a little crazy with design and functionality and code, and/or we don’t have a clear content structure laid out from the outset, and we end up loading a lot of extra stuff (slow!), making it harder to navigate the content via keyboard, and confusing the heck out of search engine crawlers.

One of the best places to start is with that bare-bones content hierarchy. Outline the page and figure out the levels of headings (go back to your school outline days and use multi-level lists), and how the actual content should flow in terms of order, priority, and sequence. Then let that inform your design choices.

Quick Tips:

  • Don’t skip the outline – actually write it out and use indented lists to determine the hierarchy
  • Keep your heading styles as consistent with our your outline as possible, as search engines use heading levels (H1-H6) to understand how content is organized
  • Try not to mix up the content hierarchy or sequence during design

2. Page Flow

You can think of page flow as the highest level of the content hierarchy – it’s basically the way the content flows across pages. Most often, this shows up in web projects as a sitemap.

Sitemaps and the way pages link back and forth to each other are important for SEO and they also impact how easy it is to navigate across a site (accessibility). This comes into play in navigation structures, and also in overall content organization

Quick Tips:

  • Keep important content only one click away from the home page
  • Make sure that high-priority pages or pages that you want to be more easily discoverable are linked early in the site (e.g. header navigation)
  • Cross-link between pages, and use clear phrases as the link anchors (the clickable text) so that it’s clear to search engines where the links go and what the linked pages are about
  • Work with the client to figure out which content belongs on separate pages vs. which will actually be easier to find and understand if it’s combined on the same page

3. Image Usage

It’s probably not news to you that the more images you have and the larger the images, the slower the page loads. Remember, though, that that includes both content images (e.g. the images in blog posts) and layout images (e.g. backgrounds and other design elements).

Every time you add an image, ask yourself if it merits the performance hit. The answer may be “yes” a lot of the time, which is fine as long as you’re making that determination with the tradeoffs in mind.

Keep in mind that many image areas/ layout graphics can be handled in a variety of ways with small adjustments to the design that may lead to big wins in performance. This is a place where it helps to either have a basic understanding of CSS or to have a quick conversation with your developer to check your options.

Quick Tips:

  • Avoid using images to replace text, generally considered a bad practice for both accessibility and SEO
  • Where possible, use design treatments that can be done with CSS
  • If you need a large background or patterned area, use a repeating graphic where the individual tile is as small as possible (and provide your developer with the tile graphic)
  • Keep varying resolutions in mind and use SVGs/ icon fonts for as many graphics as you can (especially icons and logos)
  • Consider how layout graphics will work/ appear across various devices (very small screens to very large screens) and how that impacts resolution, scale, and file size
  • Edit, edit, edit!

4. Font Usage

Fonts are files and every additional file adds to the page load time. Just like images, it’s best to be judicious in your usage so that you’re not loading a ton of files just for one minor design effect.

Remember, you’ll generally need at least four weights for just your body text (normal, italic, bold, and bold italic), so if you add a display font for headers you’re already at five weights. Carefully consider every new font and weight and make sure they have the impact that merits the file size.

Quick Tips:

  • Keep track of font weights and styles as you design so you can be consistent (it’s also helpful to share a list with your developer once you’re done as part of your style guide)
  • Old-school “web safe” fonts are still a thing in that you’re not dealing with loading fonts if you use them – while they may not work for all designs, if they work for yours don’t be afraid to use them!
  • Common fonts, like those from Google fonts, may already be cached in your visitors’ browsers (if they’ve visited other sites that are loading the same fonts), so they can be a good choice for speed
  • Tools like Google fonts and Typekit give you file size data to use in when weighing adding a new font weight against performance
  • For accessibility purposes, make sure you’re checking web fonts across browsers for legibility

5. Special Effects

Yes, animations, sliders, carousels, and lightboxes are kind of fun and can be nice for user interaction purposes, but they also add complexity to the page, can be really hard to adjust to smaller devices, and can cause all kinds of accessibility issues.

Don’t add effects and features just to add them or to please the client – make sure they truly serve a purpose based in user experience design and focused on the site goals.

Quick Tips:

  • For every feature you consider adding, think through how it should work across various contexts (desktop, mobile device, keyboard navigation using the tab key, etc.)
  • Familiarize yourself with enough research on common features to be able to present intelligent counter-arguments to clients who want sliders just because they like them
  • Make your page design work first without the fancy features, then add them as a bonus layer for users who are able to use it given their device settings (also known as “progressive enhancement”)

6. Form Structures

A trend in form design (for everything from contact forms to newsletter opt-in forms) has labels being replaced with placeholder text. (Placeholder text is the in-field text that disappears once you click the field.)

There is plenty of research explaining why this is bad, and there are some interesting proposed alternatives.

If it’s something really really obvious (like a single email input field for a newsletter opt-in), it’s going to matter less than if it’s a complex multi-field form.

Select (drop down fields) also come up a lot in form design because designers want to customize the way they appear. Unfortunately, this is nearly impossible to do with cross-browser support. There are javascript solutions, but it’s best to either not try to change selects, or to just change the view before they’re clicked and then use the browser/ device default from there.

Here’s an extensive post explaining and showing more on the topic of select/ drop down menus.

Quick Tips:

  • For any forms longer than a field or two, keep the labels and consider it a design challenge
  • Read this excellent post on label patterns, as well as all the other posts and articles it references
  • Use standard select/ drop down menu styling or communicate to the client that on click the select will remain browser standard even if the initial view is customized
  • Consider the order of fields in terms of what users will expect when they’re entering their info into a form

7. Icon Usage

Just like placeholders are not really good replacement for form field labels, icons are not necessarily good replacements for buttons with text and clear button styling.

Research shows that icons don’t always increase usability, and that for all but the most recognizable icons it’s a good idea to use text labels alongside each icon.

This comes up a lot with hamburger icons for menus (research on hamburger icons is available), but is also true for other types of icons.

There are also all kinds of issues with icons and accessibility when they’re completely replacing words, which makes for more work for your developer to ensure that screen readers are saying the right things (or anything at all) when they hit those icons.

Finally, icons are another thing to load in the page (and they can actually get pretty heavy depending on how many you use and how you’ve created and implemented them).

Quick Tips:

  • Where possible and logical, pair icons with words
  • Icons are one of those things where too much creativity can kill usability – use familiar icons, especially for important links
  • To maximize display quality and performance, use SVGs and/or icon fonts and provide clear info in your style guide about where your developer can grab those files to implement
  • Read this extensive article on accessibility practices for icon fonts

8. Clear Interactions

Last but not least, think about each action your users will want to take with your design and make sure it’s super clear how they can and cannot interact with it.

If something is interactive, it should look interactive – there should be a hover state of some kind, at minimum.

Conversely, if something is not clickable, it shouldn’t be styled like a button, nor should it be created with an element like a link or button that has been disabled (bad for accessibility).

Quick Tips:

  • Be sure to include hover and other interaction states in your designs, clearly indicated for your developer via layer comps or highlighted layer groups and/ or a style guide
  • Use your design to focus visitors on the key interaction points and guide them to want to interact
  • Use strong phrases and keywords in links for better SEO (no “click here” links please)
  • Keep in mind that some users won’t actually have a real hover state (whether it’s due to keyboard navigation or a touch device), and account for those instances in your design
  • Don’t hide vital content behind hover states

Here’s the bottom line:

Everything in your design should be there for a reason, whether it’s an image or a font, and that reason should be weighed against potential performance, accessibility and SEO implications.

Design Concept: Responsive Logos

I tweeted about this project awhile back but I can’t get it out of my head so I wanted to share it here. Designer Joe Harrison has done up a responsive demo of a bunch of well-known brands’ logos showing how the logos might shift across different sizes.

responsive Guinness logo concept

responsive Coca Cola logo concept

While this isn’t exactly a new concept (lots of designers incorporate a mark or alternative branding looks for different sizes/ applications), it isn’t something I’ve seen a whole lot of on the web. I’d love to see more of it, though!

On the actual website for the project you can see the logos shift as you resize your browser – it’s simple but very cool.

See more »

The same designer has a similar concept for responsive icons that is also worth checking out.

Two “Where Have You Been All My Life” WordPress Plugins

There’s a type of WordPress plugin that provides functionality that is simple and targeted but so useful that once you’ve got it you wonder how on earth you functioned previously.

Here are two such plugins that I’ve started using recently and now install on almost all of the sites I work on:

1. Schedule Posts Calendar

schedule post calendar screenshotIf you ever need to schedule blog posts to publish in the future (which I think is probably everybody who blogs), you’re familiar with selecting a post date and time.

The problem with the “normal” way of doing this is that you’re just looking at numbers. For me, that means I have to reference a calendar to figure out the day of the week for each date.

Yes, it’s a total first world problem but it’s annoying and it’s unnecessary given that there’s a handy little plugin called Schedule Posts Calendar that adds a calendar picker to that area, letting you click to select a date (and time).

A calendar picker for scheduling WordPress posts? Yes please! It also has a “Today” button in case you want to jump to present.

2. Admin Collapse Subpages

Some sites end up with a lot of pages and subpages, which the admin “All Pages” screen is really not well set up to handle. At a certain point a humongous list of page titles with hyphens indicating hierarchy is basically unusable.

Don’t worry! The Admin Collapse Subpages plugin does exactly what the name implies:

pages with subpage collapse screenshot

It gives you that nice little +/- next to each parent page so that you can collapse all the subpages. So easy, so functional.


What are your must-use utility plugins for WordPress?

Creating a Alphabetically Ordered, Searchable Directory Page in Shopify

The more I use and play around with the “blog as content structure” technique to create complex Shopify layouts, the more I find ways to take it a bit further. In this post, I’ll show an example where I created a directory page where the entries are sorted into groups and displayed in alphabetical order, and then can be filtered via an in-page live search feature. Here’s the final result:

A Favorite Design peddlers page

A. Favorite store locations page (design by Sarah Connor, code by me, an Aeolidia project)

Here’s the full code for the page template:

In this model, each state is a blog post. The title of the post is the name of the state (or the country, for international places) and the store locations are the body of the post, like so:

post content structure in the admin

We tagged all international posts with “international.” More on that tagging shortly.

Let’s take a look at the two things that level this code up from previous examples – the sorting and ordering, and the search feature.

Sorting and Ordering

There are two levels of sorting going on here – the alphabetical sorting and the sorting by U.S./ international.

This is the code that sorts all the location names alphabetically:

{% assign sorted_articles = blogs.peddlers.articles | sort: 'title' %}

I feel like liquid filters are not that well documented and are kind of hard to find when you’re figuring stuff like this out – I don’t think I even know there was a “sort” filter before I made this particular template. There are a couple of sort examples in the documentation but it doesn’t tell you all the attributes you can use to sort, which would be nice to have right on that page.

At any rate, we’re using that snippet to create a variable sorted_articles with the blog articles from the “Peddlers” blog sorted alphabetically by title. As the docs note, the case of the title matters, so it’s important to be consistent with your capitalization.

Then, I looped through those articles twice (using the variable in {% for article in sorted_articles %} to make sure we’re looping through the alphabetized set of articles). Here’s that code, abridged so you can see the part doing the work:

{% assign sorted_articles = blogs.peddlers.articles | sort: 'title' %}
{% for article in sorted_articles %}
    {% unless article.tags contains 'international' %}

        <!-- post content -->

    {% endunless %}
{% endfor %}
{% for article in sorted_articles %}
    {% if article.tags contains 'international' %}

        <!-- post content -->

    {% endif %}
{% endfor %}

Just inside the first loop we’re using unless to make sure that we only display posts without the “international” tag – all the U.S. locations in this case. Conversely, in the second loop we use if to make sure we only display locations that do have that tag. That’s how we split out the two sections of the page.

The columns under each state are done with CSS3 columns, nothing too crazy there.

In-Page Search

The sorting and ordering is cool, but the client also wanted a way for customers to easily find locations in their area without scrolling all over the page. Since I’d already used jQuery Quicksearch on my own bookmarks page, that came to mind as an easy way to accomplish quick on-page search, so that’s what we did.

Here’s the code for that piece of things, separated out:

{{ "jquery.quicksearch.js" | asset_url | script_tag }}
<script>
jQuery(document).ready(function($){
    $('#peddler-search').quicksearch('.columns p', {
        'show': function () {
            $(this).show();
            $(this).parents('.location').find('h3').show();
        },
        'hide': function () {
            $(this).hide();
            $('.location').each(function(){
                if ( $(this).find('p:visible').length == 0 ) {
                    $(this).find('h3').hide();
                }
            });
        }
    });
});
</script>

The first line includes the script file from the theme’s assets directory (you have to download it and add it to the theme – it’s not hosted remotely – and you need to also already be loading jQuery).

Then, you initialize Quicksearch on the search input field (#peddler-search in this case). The first parameter, .columns p, is the unit to search. You can think of it as the block that gets returned as the result, if that helps.

The show and hide options define how the search results should act as the user enters parameters. In this example, we’re saying that any positive (matching) results should be shown and the H3 element for their location block (the name of the state) should also show. Any results that don’t match should be hidden, and if all the paragraphs (locations) within a state block are hidden, then the H3 should also be hidden. This combination ensures that the state name appears only when there is at least one result in that state.


While I’m really happy with how this particular page turned out (one of my favorite things about working with Aeolidia is the way we work as a team with the client, myself, the designer and others on the project to creatively address the client’s needs and solve problems), the real reason I wanted to share it was to illustrate just how powerful Shopify templates can be once you start pulling in blog content structures and a little bit of jQuery. It’s endless, really, what you can accomplish!