Three Quick Links: Responsive Images

three quick links for responsive images graphic

I’ve been generally following along with the conversations out there on responsive images but haven’t really felt it necessary to deep dive and actually do things with code yet.

Ok, that’s not entirely true – I’ve made big shifts in how I work with layout graphics such that I use almost all CSS and SVG/ scalable graphics. But for content graphics, I’ve mostly just been keepin’ on and waiting for some of the early back and forth to resolve itself.

I think we’re there, just about, so I’ve finally committed to some reading on responsive content images – here are three great resources. While there are tons of great articles out there, these stand out as particularly useful on this topic:

1

Responsive Images in Practice, from A List Apart, is extremely long and in-depth. It’s everything you need to know to implement responsive content images using all the major, forward-looking techniques. Start here.

2

It’s basically impossible to learn about newer techniques without referencing CSS Tricks, so I won’t try. There’s a great article there that talks about how srcset is the thing to use if you’re just changing resolutions. It also links to a bunch of other interesting resources.

3

Finally, one of the big barriers to responsive content images is that most of us aren’t actually coding all our content images. Never fear, there’s a WordPress plugin that seems to be the standard for handling responsive content images. You can also use it for themes, although I’m not sure I’m convinced you should (instead probably work on not using bitmap graphics in themes, I think).


I think I’ll probably start tackling some of this code in my Shopify starter theme – that seems like a place where optimizing graphics like this could go a long way, and since Shopify generates a ton of image sizes it seems like it should work pretty well.

What are you thinking and reading about responsive images these days?

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!?

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?

Industry Tips for Responsible Code

I recently was introduced to a new (I think) site called Code Responsibly via a comment on my post about the importance of soft skills for developers and I think it merits its own post.

Code Responsibly is a simple but powerful project with 10 tips from some really smart people in the industry (but, refreshingly, not all the “rock star” names you see all over the place) with the goal of helping developers avoid “reckless code.”

tips from Code Responsibly

I especially love how the tips focus not on which language is best but on general things we can all always stand to improve on, no matter where we are career-trajectory-wise. The two tips shown above are major areas I want to focus on in 2015 (along with learning and quality which also appear on the list and are baselines for my practice).

CHECK IT OUT

On Naming Media Queries & Abstraction

Yesterday there was some conversation on Twitter about naming media queries using variables, sparked by this tweet from Brad Frost:

At first I read that tweet and thought to myself, “I think I might disagree…” I know that those words are a little tricky because the person using the site at “mobile” width could very well not be on a mobile device, but I’ve used them myself in some cases because they’re still fairly general and easy to remember. Better than “iphone 5, “iphone 6s, “13 inch macbook pro” as another person jokingly suggested.

I skimmed through the replies to that tweet and saw various tweets from people who use name their media query variables after TV show characters or colors and thought to myself, “I ABSOLUTELY DISAGREE!”

Then, I noticed that Brad’s response when Alex Carpenter asked him what he suggests instead:

I calmed back down at that point because, upon pondering a bit further, I think I actually do agree with Brad.

I can absolutely see why it’s probably not a good idea to bring context into media query variables – since the context is really pretty distinct from the width these days it’s a false association. However, I think it’s worse to abstract too far and come up with variables that are memorable to you but will be confusing as heck to other people who may encounter your code down the line (or who don’t appreciate the same pop culture references).

Moving forward, I think I’m going to try to stick to neutral terms like those Brad suggested in his second tweet, maybe using something like t-shirt sizes as suggested by one or two other people: xs, s, m, l, xl. That feels like a good level of abstraction without taking it too far.

I’m curious, though – for those of you who use media query variables, what do you use? What do you think about super abstracted/ personalized variables?