Posted 02.23.2015

Posted 02.23.2015

Caught in the Wild – My Home Workspace

I’m always fascinated by other people’s workspaces. I’m not the only one. Plenty of posts and entire sites, even, have been devoted to this subject. You don’t have to look far on Tumblr, Pinterest, or Dribbble either.

I thought I’d share my own.

My Workspace

On the Wall

Soft Tiles

Behind my computer, I have a bulletin board for inspiration and mood boards. It’s made out of Soft Tiles, you know, the mats you put on the floor for kids to play on. We just hung it up on the wall with nails. Perfect.

Rode Podcaster

Rode Podcaster

On the far left, I have a Rode Podcaster
on a Swivel Mount in the corner of my desk. One of my goals for 2015 is to start a podcast with my friend Darrel Girardier. It’s coming.


Epson V100 Perfection Scanner

Also on the far left (you can see the edge of it), I have a Epson Perfection V100 Photo Scanner. It’s not the latest and greater scanner out there, but it’s more than perfect for what I use it for: scanning in textures, photos, and hand drawn illustrations — things that need to be scanned at a higher resolution.

For on the go, scanning, I’ve been really pleased with Evernote’s new app, Scannable.

For scanning receipts and documents quickly, I have a Fujitsu ScanSnap Scanner.


iPad Mini

I have an iPad Mini. I was an early adopted and started out with a 3G iPad 1. Eventually, it started having issues where apps would randomly crash. I upgraded to a wireless iPad mini for Christmas. I love the smaller size. I use it for reading (and testing websites), so the smaller size makes complete sense.

It’s sitting on a Twelve South HiRise.

I also have a Samsung Galaxy Tab 4
for testing websites. Even though I didn’t pay a ton of money for it, I know I don’t use enough to justify the purchase.


Acer Monitor

I have two 21″ Acer Monitors
21” acer monitors that I bought at a really good price at a Black Friday sale. They’re mounted on Tyke Supply Dual LCD Monitor Stand, which is so much better than the stack of books I had them on before.

They’re connected to my laptop via a TripleHead2Go. (I wrote a post about the configuration.) I can keep the laptop open, and run in a T configuration, but lately, I’ve enjoyed keeping my laptop in clamshell mode. For whatever reason, I feel more productive instead of trying to manage more space.


Harman/Kardon SoundSticks III Wireless Speaker System

I just have a cheap pair of $35 speakers from Target. They seem to do the job just fine. Although, I’m not going to lie, I do have my eye on these (Harman/Kardon SoundSticks III Wireless Speaker System).

Wacom Tablet

Wacom Intuous 5 Tablet

I have a Intous 5 Touch Wacom Tablet. It’s fantastic when I do any heavy masking in Photoshop or Illustration work.

MacBook Pro

Macbook Pro

I have a 15” MacBook Pro (Retina), 2.6 GHz Intel Core i7, 16GB of Memory, with a 1TB Solid State drive. It’s been a great machine. It’s the 3rd Mac Laptop I’ve owned in the last 11 years. I ran its predecessor into the ground.

Even though I know I need the real estate and power for print projects…and I can’t imagine trying to run Chrome Inspector tools on a smaller screen, I still eye the Air. I can’t get over how small and light it is!

I have a wireless keyboard and trackpad. I try to get away with as few wires as possible. The track pad and I have a love hate relationship, so I’ll still pull out my Magic Mouse (It’s not the track pad’s fault, it’s all me. I’m just old school like that.)


ikea vika fagerlid

My desk is an Ikea desk top (hollow) with Vika Fagerlid legs (apparently, they don’t sell them anymore).



Lastly, you’ll see my moleskine. I do all design work, there, first. – ideas, wire frames, illustrations, everything. — And I’m kind of a pen snob, too. Pilot G2 0.7.

In the Comments

What are some of your favorite pieces of your workspace?

Posted 02.20.2015

Posted 02.20.2015

A Modular Approach to WordPress Theming, Using Flexible Content

I do a lot of WordPress Development. I wouldn’t necessarily consider myself a WordPress developer, I have experience on other platforms, but I use whatever tool will meet the client’s needs best. Recently, that means WordPress.

One of the things I’ve started doing is coding custom themes so they’re modular. What does this mean?

I just launched On the home page, each “stripe” is considered a module. This gives Bill the freedom to rearrange the elements on the home page on the fly. If he has a podcast release that day, he can move the podcast stripe to the top, increasing its visibility.

ACF Flexible Content Demo

As a designer, I don’t feel like the design of the site is being compromised because I’ve designed how each section should look. It’s just providing more flexibility and more value to my customers accommodating their digital strategy.

So, how did I pull this off?

The trick is the Advanced Custom Fields (ACF) plugin. — It’s one of those WordPress Plug Ins I could not live without.

Let’s walk through the setup.

Within WordPress

I have the ACF Pro Plugin installed. Once it’s activated, it gives you a Custom Fields nav item in the left sidebar. Click on that and then the Add a New Field button.

Add a New Field within the Advanced Custom Fields plugin

Let’s call this field group “Home Page” but you can really call it anything you like. This label is will be displayed on the “Edit Home Page” above our form fields.

Naming the Field Group within ACF
On the new Field Group screen

Naming Flexible Content Field

How the field will be displayed on the Edit Home Page screen

Before we start adding fields, let’s adjust our Location rules. I want this field group to display on the home page only. Meaning, Bill will have to click on Pages and then find the Home page to edit. There are several ways I could set the rules.

I could say if the Page is equal to Home.

Locations within ACF

or I could say if the Page Template is equal to Home.

Locations Options within ACF

Personally, I prefer the second option since the template itself is really dependent on these fields.

Then, in the Options box, below that, we can control the display and the other elements on the page. I try and hide all the elements I don’t need to minimize confusion:

  • Content Editor (all content is within the stripes, no need for body copy which all means, no need for an Excerpt)
  • Excerpt
  • Comments
  • Author (don’t need to set an author for the home page)
  • Featured Image
  • Send Trackbacks
  • Custom Fields (this refers to the WordPress built in Custom Fields, not the Advanced Custom Fields we’re creating)
  • Format
  • Categories
  • Discussion
  • Tags

Options within the Advanced Custom Fields

Now for the fun part, the actual fields. Click the Add Field button. I’m going to name this “Home Page Content”, but call it whatever you like.

The Flexible Content label within the Edit Page Screen

On the new Field Group screen

Label on the Edit Home Page

How the field will be displayed on the Edit Home Page screen


If you’re looking at my screenshots, I have a few other fields on the home page (background, subheading, and tertiary heading), in addition to the flexible content fields we’re creating. I don’t go into details about those fields, here, since our focus is on the flexible content.

You can see that the Field Name gets filled in automatically based on how you name the label field. I usually keep the default name unless it adds in dashes (“Home – Page” becomes home_-_page).

Select Flexible Content from the Field Type dropdown menu.

You can add instructions if you’d like. I usually leave this blank unless it’s a link (I’ll remind people to include the http://) or an image (I’ll include the image dimensions).

Within the Layout Row let’s start naming our stripes. We have 5.

Let’s name the first one “Receive Email Updates.” We don’t need any additional fields here since it’s simply a MailChimp Signup Form.

Click on the Add New link under Layout to add another row.

Add New Layout Row

Name this one “New Podcast”. It will automatically pull in the most recent podcast. The only additional fields we might need is a background image. Click on the Add Field button. Name it (Podcast Background Image) and select Image from the Field Type dropdown menu. In this particular case, I’m going to select the Image URL radio button, but the Image Array option is useful when you want to grab a particular size and include the alt text.

Podcast Background Image within ACF

Click on the Add New link under Layout to add another row. You get the idea. I went through the same process for the “Testimonials” (no input fields), “From the Blog” (no input fields), and the “Services” stripe with the following input fields:

  • Column 1 Heading
  • Column 1 Content
  • Column 2 Heading
  • Column 2 Content
  • Column 3 Heading
  • Column 3 Content

Within the Code

Within my WordPress theme folder, I have a subfolder called partials. This includes smaller elements that I can reuse in other places on the site. In the case of Bill’s site, that folder contains a file for every stripe:

  • stripe-email.php
  • stripe-podcast.php
  • stripe-services.php
  • stripe-testimonial.php
  • blog-excerpt.php
Wordpress Theme Folder Structure

You’ll see the folder structure in the left pane and the code for the services stripe on the right.


You’ll notice the “From the Blog” stripe is not prepended with “stripe”, that’s because that element is not only used on the home page, it’s also used to display a blog excerpt on the archives, categories, and tags pages.

My page-home.php template has this code. I tried to include comments, explaining what each section does:

<main class="main" role="main">
<?php // open the WordPress loop
if (have_posts()) : while (have_posts()) : the_post();

	// are there any rows within within our flexible content?
	if( have_rows('home_page_content') ): 

		// loop through all the rows of flexible content
		while ( have_rows('home_page_content') ) : the_row();

		if( get_row_layout() == 'receive_email_updates' )
			get_template_part('partials/stripe', 'email');

		if( get_row_layout() == 'new_podcast' )
			get_template_part('partials/stripe', 'podcast');

		if( get_row_layout() == 'services' )
			get_template_part('partials/stripe', 'services');

		if( get_row_layout() == 'testimonials' )
			get_template_part('partials/stripe', 'testimonial');

		if( get_row_layout() == 'from_the_blog' )
			get_template_part('partials/blog', 'excerpt');

		endwhile; // close the loop of flexible content
	endif; // close flexible content conditional

endwhile; endif; // close the WordPress loop ?>


You’ll notice that my if statements do not have brackets ({ and }). They’re not needed since there’s only one line of code after the condition. However, if you need to add additional lines within the statement, be sure to insert those brackets!

If you see the have_rows() and get_row_layout() functions, that’s all ACF. You can get additional documentation for the Flexible Content fields on ACF’s site.

The get_template_part() function is built into WordPress (more information within the WordPress Codex). The first parameter of the function is the folder name (partials) and the first part of the file name before the dash (remember I named my files stripe-email.php?). The second parameter is the fiel name after the dash (email).

The get_template_part() function is great for other places in your WordPress themes, not just within Flexible Content. I mentioned the blog-excerpt.php snippet is also used within the archive.php template:

<?php if (have_posts()): while (have_posts()) : the_post(); ?>
	<!-- article -->
	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<?php get_template_part('partials/blog', 'post'); ?> 
	<!-- /article -->
<?php endwhile; ?>

The beauty in this method is if I need to change the way the blog excerpt is being displayed, I only have to change one file! I don’t have to remember every place that a blog excerpt is being implemented.

Other implementations

This modular method is also useful for formatting content. I used it on the portfolio section of my site.

I knew each page would need a different format depending on whether it was a website or a print project and what assets I have for each.

Posted 02.18.2015

How to Segment your MailChimp List into Groups


The “Problem”

I know that I have a variety of interests and (for now) I want to blog about all of them in the same place. However, I’m not so naive as to believe that everything I’m writing about, is something you’re interested in too. I want to make sure I don’t bother you with content that’s not useful and interesting to you.

So…you may have noticed, if you sign up for my email updates, you have the ability to pick which categories you’d like to receive updates for.

Sign up for Email Updates

If you’re intersted in implementing a similar solution on your site, I thought I’d explain how I accomplished it on mine.

Publishing within WordPress

Categories within WordPress

  1. Each section (Photography, 101, Design, Programming, My Life, and Finder’s Keepers) is set up as a category within WordPress. When I’m posting, this makes it easy enough.

Creating a List within MailChimp

  1. Within MailChimp I have a single list for updates. Inside the list, I’ve created Groups for each category. To do so, go to the Lists page and click on the Create List button.

Create a List within MailChimp

  1. Fill in the form appropriately. (Note: You will probably be asked at some point to confirm that you have access to the Default “from” email so make sure it’s an inbox you have access to.)

Create a MailChimp List

  1. Next, under the Manage Subscribers dropdown, select Groups.

In MailChimp Manage Subscribers

  1. Click on the Create Groups button.

MailChimp, Create Groups

  1. As you can tell from the form options, there are several ways you can implement groups on your signup forms. Obviously, I went with checkboxes. Then, just fill in the details. When you’re done, click on the Save button.

Create a Group in MailChimp

  1. I didn’t have any addresses to import, so I clicked the Done for Now button.

MailChimp Groups, Done for Now

Creating a Campaign within MailChimp

  1. Then, within Campaigns, I have a Campaign set up for each category. On the Campaigns page, click on the “Create a Campaign” Button

MailChimp Create a Campaign

  1. Select an RSS-Driven Campaign from the menu

Choose a Type of Campaign within MailChimp

  1. From WordPress, I’m using a separate RSS feed set up for each category. This functionality is actually built into WordPress by default. It’s just a matter of figuring out what your URL is.

    Once that’s been determined, enter the the feed URL into MailChimp. Choose when you want to send out updates and on what days. Then, click the next button in the bottom right.

MailChimp, Create a Campaign

  1. Select the list you want to send to. Select Send to a new Segment. Then, select Group: Categories from the dropdown (NOTE: Instead of “Categories”, it may say whatever you labeled it as within the Campaign) and whatever category you want to send to. Click the next button in the bottom right.

Send to a MailChimp segment

  1. On the next screen, name your campaign. There are several other settings you can modify, I tend to keep the defaults. Then, click the next button in the bottom right.

Modify MailChimp Campaign Details

  1. Select the Theme you want to use. I won’t go into email templating here, but there’s a good Basic RSS theme that accomplishes our purposes just fine. Click on the next button in the bottom right.

Select a MailChimp Theme

  1. Make any tweaks to the design and content you want displayed. Then, click the next button.

Modify the MailChimp Design Template

  1. On the last screen, make sure your settings are correct and there are no issues. If you’re good to go, click Start RSS button in the bottom right.

MailChimp Start RSS

Getting the Embed Form

  1. Within MailChimp, go back to the Lists page, next to your list, select Signup Forms from the Dropdown form.

MailChimp List Signup Form

  1. I typically go with the Embedded Forms option.

Embedded MailChimp Form

  1. Make any changes to the form being displayed, then, copy and paste the code onto your site.

Embedded MailChimp Form

Badda-Boom! Badda-Bing!