Q&A: The Pinterest-Style Grid a.k.a Masonry

I’ve had a lot of clients and designers ask me about creating a “Pinterest-style” grid for their website, and when someone asked on Twitter earlier this week for a recommendation of a jQuery plugin to handle the effect, I thought it was probably time for a tutorial.

About the Technique

If you’re just kind of curious about this technique, this first section is probably all you’ll really want to read. The later portion of the post gets into a more in-depth tutorial with code, but let’s start by talking terminology and reasons you’d actually want to use this layout model.

Technical Terminology

The actual name for this style of cascading “grid” where images or boxes of varying heights and widths flow neatly together with even spacing is masonry layout or masonry grid. Underneath the name is the idea that the “bricks” of the layout can vary but the spacing between (where the mortar would be, or in layout terms, the margins) is always consistent.

Pinterest is definitely the best-known example but if you’re looking for wider information or examples of the technique, masonry is the broader term to use.

From a Strategy Perspective

When compared to more traditional grids with a fixed height and width for every item in the grid, masonry grids have the advantage of NOT limiting the images that can be displayed. Whereas traditional grids require images to be cropped to fit, with a masonry layout the person maintaining the content will never have to think about aspect ratio when uploading their grid images.

This is especially nice for photographers, who usually want to highlight their composition by displaying the complete image for each photo:

Sabra Lattos masonry grid

Sabra Lattos Photography, designed by small shop

It’s also a great technique for situations where you’ve got to use third-party graphics that may not be uniform, as in this example that showcases event posters:

Rare Device shows grid

Rare Device, designed by Meg Lewis of Ghostly Ferns for Aeolidia

And in this example showing products from a variety of websites:

The American Edit Must-Haves grid

The American Edit, designed by MAEMAE Paperie

Masonry grids are a nice way to break up a page layout and keep things feeling consistent while allowing for variety, as in this example, where longer quotes are accommodated without making the page feel unduly messy (also, note that the layout model works for both text and images):

GREER Chicago Press & Praise grid

GREER Chicago, designed by Meg Lewis of Ghostly Ferns for Aeolidia

Create Your Own Masonry Layout

Now for the technical part of the post, let’s look at how to actually make this kind of layout happen. There are a couple of different jQuery plugins out there for this, but my favorite is David DeSandro’s Masonry.

History Note

For those of you who are into this sort of thing, I am fairly certain that this Masonry plugin was the original inspiration/ tool behind Pinterest’s version. I’ve had that in my head for awhile now, but when I went to check Google to see if I could verify it as fact, the closest I could get was this old post where the author hints that Pinterest based theirs on his but specifies that they use their own version. So not totally conclusive, but pretty close.

Anyway, Step 1: Include the Scripts

As with any jQuery integration, one of the first steps is to actually include the scripts in your site.

Expand for WordPress Directions

In WordPress, it turns out Masonry is already bundled with WordPress core (as are a number of common scripts), so you don’t even have to upload the file yourself. However, the version bundled is currently a bit behind so you may want to handle it manually until that gets updated.

If you’re using the bundled version, all you’ll do is enqueue it using the name WordPress has given it:

function emitheme_scripts_method() {
add_action("wp_enqueue_scripts", "emitheme_scripts_method");

The second parameter makes sure jQuery is loaded before Masonry, and while the current version of Masonry doesn’t actually require jQuery I believe the WordPress-bundled version does.

If you were only using Masonry on a particular page template, you could use a conditional to only enqueue the script on that page, e.g.:

function emitheme_scripts_method() {
  if ( is_page_template( "page-masonry.php" ) ) :   
add_action("wp_enqueue_scripts", "emitheme_scripts_method");

In case you’re wondering, Emi is the name of my starter theme, which will be released in the next week or so.

If you want to use the most recent version of Masonry, you’d download the file from the masonry site and then upload it to your theme and your enqueue snippet would look like this:

function emitheme_scripts_method() {
  if ( is_page_template( "page-masonry.php" ) ) :   
      get_template_directory_uri() . "/assets/vendor/masonry.pkgd.min.js",
add_action("wp_enqueue_scripts", "emitheme_scripts_method");

Note the added file path parameter.

Evidently, this version issue is on the radar to be fixed but that fix introduces some other interesting potential issues/ differences, which you can read about in the Trac ticket notes if you’re so inclined.

Expand to view Shopify directions

For Shopify, the snippet to include is:

{{ "masonry.pkgd.min.js" | asset_url  | script_tag }}

That goes in the theme.liquid file in the <head></head> section.

Make sure to actually upload the file itself as well – it’ll go into your theme’s assets directory.

If you’re using images in your layout, you will likely also want to include imagesLoaded in order to have the layout adjust to the images after they’re loaded.

WordPress Example

To do this, just upload that file to your theme (I put mine inside a /assets/vendor/ directory structure), and then add it to your enqueue function:

function emitheme_scripts_method() {
  if ( is_page_template( "page-masonry.php" ) ) :   
      get_template_directory_uri() . "/assets/vendor/masonry.pkgd.min.js",
      get_template_directory_uri() . "/assets/vendor/imagesloaded.pkgd.min.js",
add_action("wp_enqueue_scripts", "emitheme_scripts_method");

Shopify Example

Or add another line for it in Shopify:

{{ "masonry.pkgd.min.js" | asset_url  | script_tag }}
{{ "imagesloaded.pkgd.min.js" | asset_url  | script_tag }}

Step 2: Create the markup

The markup structure is pretty simple, just a container with a bunch of items in it. For example:

<div id="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

If this were a grid of posts in WordPress, the loop might look something like:

<?php if ( have_posts() ) : ?>
  <div id="grid">
    <?php while ( have_posts() ) : the_post(); ?>
      <div class="item">
        <?php the_post_thumbnail(); ?>
        <h2><?php the_title(); ?></h2>
    <?php endwhile; ?>
<?php endif; ?>

It doesn’t have to be <div> elements in the group – it could be list items or just images.

As a note about images – I find it helpful to include the width and height in the image markup. In WordPress, this isn’t automatically there depending on which image template tag you use, so just something to keep in mind.

Step 3: Initialize Everything

Here is the snippet to initialize Masonry on your grid:

  var $container = $("#grid");
  // initialize Masonry after all images have loaded  
  $container.imagesLoaded( function() {
      columnWidth: 150,
      itemSelector: ".item",
      gutter: 15

You can put that in a number of places depending on how you’re setting up your theme but a good place to start if you’re not sure would be in the footer, before the closing </body> tag.

If you are NOT using imagesLoaded then your snippet would be more like:

    columnWidth: 150,
    itemSelector: ".item",
    gutter: 15

We’ve set three options in those snippets:

  • Column Width (adjust that to match your items/ layout)
  • Item Selector (the class on your grid items, or you could do something like #grid li if you were using a list)
  • Gutter, which is the horizontal spacing

All the various options are listed on the Masonry site.

Step 4: Style It

I typically give my items some basic CSS styling to get started:

.item {
  float: left;
  margin-bottom: 15px;
  text-align: center;

The bottom margin handles the vertical spacing, where the gutter option handed the horizontal spacing. Usually I want to center all the content in each grid item, so the text-align handles that as well.

There you have it, Masonry grids!

Twitter Strategy Tip: Images vs. Twitter Cards

Last week when I was hopped up on sinus medicine I mostly stayed away from blogging and social media, in part because all I did outside of client work was try to keep up with my children and sleep, and in part because I was a little worried my normal filter wouldn’t be working at full capacity.

I think I probably proved that second reason true with the comments I left on this Shopify blog post about Twitter Cards pointing out that the examples in the post actually mostly don’t show Twitter Cards and instead are just photos attached to tweets.

While I still feel kind of bad for pointing out something seemingly so trivial, I’m ok with how I did it and upon non-medicated reflection it still does bother me a little bit that the examples are wrong, mainly because (a) accuracy and (b) there are strategic reasons when using a photo makes sense and strategic reasons for using Twitter Cards and they’re for different purposes, at least in my book.

So in an effort to make usefulness out of grumpiness, I thought I’d explain why I use both techniques, and why I consider them two different sides of a similar strategic coin.

Twitter Tip: Photos vs. Twitter Cards

Why Use Twitter Images?

According to this Mashable article (and I believe it, from my own Twitter usage), including an image in a tweet dramatically increases share rates. Not only do images tell the viewer more about the content of the tweet, but they are very eye-grabbing given that they’re partially expanded in the timeline in the desktop app and some other Twitter clients.

Twitter Cards, which usually include both an image and some kind of text, are created on the site side via meta tags in the markup, so you don’t have any control over whether a link you share from someone else’s site supports them. From my unscientific research looking through my Twitter feed, most sites (even many you’d expect to be on top of this type of thing) do not support Twitter Cards. A quick way to check is to view that site’s own Twitter feed, as you’ll probably find links to their own content in their tweets.

Images, however, are completely within your control, since you can just upload them directly to the tweet using Twitter’s built-in tools. As such, when sharing third-party links, unless you’re certain there is Twitter Card support, it’s a good idea to include an image manually.

I do this a lot with various resources I share, using quick screenshots I’ve grabbed from the linked site, e.g.:

Why Use Twitter Cards?

As mentioned, Twitter Cards are content summaries, often with images, that you can set up for your own site by adding some simple markup. There are a few different types of Twitter Cards, including a “large image” card that looks similar in many ways to a tweet with a photo uploaded, and “gallery” cards, which show multiple images.

Here’s an example, although currently you don’t get the full effect of the large image via embedded tweets so you may want to click through to see the tweet on Twitter:

The benefits to using Twitter Cards over tweets with photos are:

  1. If you set up Twitter Cards for your site, every link to your site will automatically have them, even if the person tweeting the link doesn’t bother with images (which is most people tweeting your links)
  2. The Twitter Card is generated from the regular link URL, so you don’t need to have both a link URL and a photo URL hogging characters in order to show a photo and direct people to your site
  3. Twitter Cards provide even more information about the content, usually including both title and a short excerpt along with the image.
  4. There are multiple kinds of Twitter Cards for different purposes, including the aforementioned multi-image gallery cards and even video cards.

So, in my opinion it makes sense to implement Twitter Cards for your own site and then you’ll default to using them when you share your own content. As a wonderful bonus, everybody else who shares your content will have their tweet’s share-ability boosted via the extra content in the cards.

When you don’t have control over the link’s content, then it makes sense to use an uploaded image instead.

Further Thoughts

Of course I can’t leave at just the baseline explanation, so here are a few more related thoughts on Twitter images and Twitter Cards:

Images for Every Tweet?

Just to clarify, I don’t think you have to use an image or Twitter Card for every single tweet. One of the things I like about Twitter (compared to Facebook, for example), is that it’s very text-focused and requires more thought put into words than I see in much of the rest of the internet.

For some types of content sharing, images are really a useful way to both help readers understand what it is you’re linking to, and to encourage further sharing – that’s when these techniques come into play.

What happens if you use both?

I couldn’t find documentation outlining what happens if you post a Twitter Card-enabled URL along with an uploaded, but never fear, I tested it out. It turns out that the uploaded image has priority over the Twitter Card display. In retrospect, this seems obvious, so nicely done Twitter.

A Twitter Cards Tutorial

If you’ve made it this far and are like, “SOLD, now how do I do it?” then you will be pleased to know that I’ve got a tutorial on setting up Twitter Cards ready and waiting for you. Go forth an increase share-ability!

Q&A: Four Methods for Client Education & Training

Q&A: Client Education & Training

I’ve been asked a few different times how I handle teaching clients to manage and update their content once their site is finished. While I enjoy hearing from my clients after we’ve wrapped a project and often work with people ongoing to add templates or on new projects, it’s important to me that clients are able to manage all of their content without relying on me and my team.

In order to make that happen, I use four different methods for sharing information with clients and training them to use the content management system to manage their content and their site as a whole.

1. Documentation

For early decision points and also for general information on website concepts, I provide a lot of documentation in written format in one of two places.

Blog Posts on Common Topics

A lot of my documentation for clients is right here on my blog. Many of my posts are just elaborations on answers I’ve first sent to clients via email, which is great because once they’re published I can just send the link instead of re-answering the question.

My posts on backing up & updating WordPress, prepping images for the web and aspect ratios are all examples of blog posts that started out as client education emails.

Non-Post Documentation

This is for things that come up again and again in email conversation with clients but aren’t necessarily right for blog posts, I’ve started compiling additional documentation via HelpScout using their Docs feature.

Documentation via HelpScout

There is some overlap between this content and my FAQ page. The difference is that the HelpScout documentation, while not protected or completely hidden, is intended for clients, whereas the FAQ is more public-facing. The integration with HelpScout email (which I use for my general email inbox, shared with my business assistant) is partly what makes this a great system for us, as we can really easily insert links to the articles into emails.

2. Admin Structures

When we’re actually building a site, my team and I make sure to prioritize the content management experience of the end user, making it easy for the client to update their content even when it means a little more work for us.

While this is not explicitly part of client education, it is an approach that makes our client education needs down the line more manageable.

Example Admin Structures

In practice, this means we use tools like Advanced Custom Fields to create really clean, nice-looking, intuitive admin screens specific to each page template.

Scouted Recommendations Model

Click to zoom, from the Scouted NYC case study

You can see more examples of how we’ve done this for various sites by looking through my case studies.

3. General Tutorials

Since I use existing content management systems that already have great structures for many things a client will need to do, I also make make use of existing documentation where possible. This saves time but also ensures that clients get really really great information – better than I’d be able to provide.

WordPress Video Tutorials

For WordPress, I provide clients with access to WP101′s premium video tutorials, which I’ve licensed and share via a private area on my site:

WP101 page on ZoeRooney.com

These videos cover all the WordPress “basics” including working with blog posts, categories, comments, menus, widgets, and plugins. The videos are a higher quality than I’d be able to provide and are updated with changes to WordPress core.

Shopify Written Documentation

For Shopify, I link out to specific pieces of documentation in the Shopify manual and I’ve also been impressed with the third-party Shopify & You e-book (affiliate link), which is $39 and very very thorough.

4. Custom Tutorials

While those general resources have proven to be quite helpful, since we customize the admin to handle the various page templates we’re creating for clients I typically also create a informal video tutorial covering our customizations. I’ve found that video is great because the client can watch and re-watch it at their convenience, rather than feeling like they have to absorb all the information in real-time via a screen share or real-time training session.

Example Site-Specific Video Tutorial

Here’s an excerpt from a recent tutorial I created for Clara Persis:

That’s about half the video, and the rest of it walks through the remainder of the pages.

Underneath the Videos

You can see from watching that example that these videos are not rehearsed – it is just me talking through the pages and features one by one the same way I’d do it if I were sitting at the computer next to Clara. The informal, unscripted nature ensures that I can record these videos quickly, which keeps it feasible.

Technology-wise, I use Quicktime (the regular version that comes with Macs) to record along with the microphone built into my UrbanEars headphones. I then upload the video my Vimeo Pro account via the built-in Quicktime “Share” feature and email the review page link to the client, with permission set such that only people with the link can access the video, no sharing is allowed, and the client can download the file to their computer if they so choose.

So that’s it – the four methods I use to education clients and help them learn to use their site! Of course, I also try to be flexible to meet clients’ individual needs, so there have been times when I’ve supplemented these methods with phone and/or screen-share training, or even with in-person training for an entire team. Usually, though, the videos and written documentation are a great, lasting solution for both me and my clients.

Show Forum Description at Top of Single Forum Page in bbPress

I’ve been playing around with bbPress for Neatly Polished – it’s only the second time I’ve used it and the first time in a context where I’ve been able to do whatever I want with it. You can set a description for each forum, which shows by default on the parent forum’s page in the area boxed in purple-ish (the second box):

bbPress forum description

In the screenshot, we’re looking at a parent forum with a couple of subforums. You can see in the screenshot that I also added the current parent forum (the one that we’re on right now) description right under the title, boxed in the brighter more orange color. (Note to Self: Next time use more disparate box colors.)

I was surprised the top description isn’t shown by default, because it makes sense to have a reminder of the forum’s purpose right on the forum page itself. Once I got into the template files and system, however, it started to make more sense.

bbPress works by putting the forum content inside the page template in the area where you’d usually have the_content(), so it turns out that the area right under the title is actually outside the bbPress-specific template.

In order to put the description there, I edited my content-page.php file (or it could be in the page.php file, depending on how your theme is structured) and added the following right below the title (lines 3-5, which are highlighted):

And now the forum description is shown if we’re on a sub-forum page, just like you see up top in the screenshot! (Better bbPress conditional via Isabel Castillo.)

The Things You Really Need to Become a Front-end Developer (Hint: Not Just Code Skills)

A week or two ago, I was on one of those forays through the internet where I started on a Tweet or a blog post someplace and rambled through comment links to posts to other posts and ended up on this post from 2012 entitled “How to Get a Job as a Developer in Less Than Six Months.”

I liked that post, especially the points about transparency and reaching out to people telling them what you can do, how hard you’re willing to work, and how enthusiastic you are about what they’re doing. It reminded me of an email I received back when I had a WordPress Developer job listed.

That email included some generally good things (a nice informal tone without being too casual, a friendly request to get coffee sometime), as well as the following:

I’m certainly not qualified (yet) for a WordPress position, but I figured I’d write you an email just to introduce myself and see what you’d think of potentially joining forces in the future.

In addition, the email very briefly mentioned what the writer WAS qualified to work with, which included javascript and jQuery, and also that she was taking time to volunteer at industry conferences.

The email resulted in a phone call, and eventually a part-time associate developer position, even though the writer wasn’t “technically” qualified for the job as I had listed it.

Last week I was at a Ladies in Tech meetup and got to talking with Lisa Yoder and Lauren Galanter about the skills people really need to get into web development as a career. Lisa is on an upcoming Philly Women in Tech panel on career paths, and Lauren has also been doing a lot of thinking about career changers, while I’ve been thinking about this more from a hiring perspective.

We were talking about how hard it can be for someone new to a field to figure out what skills they need to build before they’re qualified for various jobs.

The most recent job I posted was for a junior developer. I’ve realized after a few rounds of hiring that in order to find the people I really want, I have to be very very clear on what I need folks to have coming into the role versus what I will train them to do. It turns out, I am willing to teach a large percentage of the technical skills.

These were the technical prerequisites for the junior developer job:

  • Strong to excellent HTML and CSS skills
  • At least a little experience with Sass and jQuery
  • At least a little experience with responsive design

I also specified the following:

You’ll be working with all of [the things in that list] plus Git, Gulp, WordPress, and possibly Yeoman (as well as new technologies that come up over time).

That was all of the technical stuff in the listing. In contrast, here’s what I wrote about the so-called “soft skills” I was looking for:

You’re perfect for this job if you’re highly detail-oriented yet efficient. We sweat every design detail in our projects, but we also work quickly – those two things need to coexist if you’re going to do well in this role.

While I fully plan to provide a lot of on-the-job training, I also expect you to be self-motivated. You’ll need to be able to independently seek out information where it exists (you should be good friends with Google and not afraid of documentation). Ideally you’re someone who is alway learning and trying out new things just for fun.

You’ve also got to be a nice person with good communication skills, especially in writing.

You can see that I am much more definitive about those skills and attributes than I am about development skills.

I will hire someone to code websites who does not yet know all the technologies and languages we work with, but I will not hire someone who does not have the communication skills and does not demonstrate attention to detail.

I will hire someone to work on WordPress sites who has never built a custom theme, but not someone who isn’t excited by digging up answers and learning new things.

As I was reading that post from 2012 and thinking about that email job-application-that-wasn’t, and talking to Lauren and Lisa, and writing up resources on becoming a developer, and also noticing a strangely large volume of tweets about tenacity as a key “skill” in web development, it just all sort of coalesced in my head.

If you have the curiosity, the communication skills, the interest, the enthusiasm, the tenacity, and you actually care, you can learn just about any front-end dev language you want.

If you have all those things and are able to honestly, clearly, humbly present them to a potential employer, along with showing them how hard you will work, then I would posit that you can find yourself a job even before you meet every last technical requirement.

All this to say that while a foundational level of coding skills is of course necessary for a development job, I actually think it’s the “soft skills” that matter more.

The soft skills are the ones that will keep you progressing as the technology changes and will make you enjoyable to work with. They’re the ones that will keep the clients happy and will help ensure you don’t burn out.

I would guess I’m not the only person doing some hiring who feels this way and who responds positively to an honest email and a skill set that may not be all the way there yet, but comes via a person who is willing to work hard to get there.

PS: Incidentally, I’ll be thinking about ways in which I can write more specifically here and on my page about learning to be a developer about useful soft skills. I would love for you to share resources, posts, etc., that you’ve found helpful in this regard in the comments.