mailchimp-images

Fixing image size in Mailchimp RSS campaigns

Are you using MailChimp to manage your blog email subscriptions? If not, you should be. But you also need to make sure that the images you use don’t break your MailChimp email layout. Don’t worry, it’s much easier than you might think.

First, the problem.

There is a good chance that your email template is setup to be 600 pixels wide… with a content area smaller than that — if you chose a template with a sidebar than the content section is significantly smaller than that.

Due to the limitations of CSS support in most email clients you cannot easily (and consistently) set a “max-size” for images in your email campaigns. This means that if your blog posts include images that are wider than your MailChimp template’s content area, the template will simply expand to contain your images… but only in the section containing the blog posts, not the header or footer. The result if a broken template design.

Are your images the wrong size? Often, blog images are pulled into feeds at a size that’s much larger than necessary, which can alter the look of your campaign. The format of the images needs to be changed on the feed.

— MailChimp KB Article “Troubleshooting RSS in Campaigns”

That last sentence in there is MailChimp’s way of saying, “We’re not going to deal with that issue in our tools… you figure something out on your own.”

The geeky fix.

There are two ways to solve this issue. If you are a developer or if you want maximum control over your RSS feed, then you can customize your RSS feed to automatically filter images larger than your email template’s width. I recommend using a script like WP Thumb for real-time image resizing.

If you’re using WordPress then you can do this in a custom RSS feed template or via some WP filters. See here for options:

The easy fix.

If you don’t need this level of customization (and you probably don’t) then the simple fix is to use a solution that MailChimp provides but does not promote as much as they should: ChimpFeedr.

What is ChimpFeedr? It is an RSS aggregator. The main purpose is to allow you to combine multiple RSS feeds into one master feed that you can then use for an RSS to email campaign. Here’s how MailChimp describes it:

Enter a bunch of RSS feeds into ChimpFeedr, and we’ll mash ‘em up into one master RSS feed. Then, maybe you can use that master feed for your awesome RSS-to-email campaigns!

But how does this fix my image problem? Simple. This little checkbox will tell ChimpFeedr to automatically scan your feed(s) for large images and then resize them for you!

Screen Shot 2014-10-25 at 8.21.07 PM

And you don’t have to add more than one feed for ChimpFeedr to work. You can use it to filter just one feed. Here’s how:

  1. (Optional but useful.) Go to the archive page of your last email, open your browser’s “Inspector” window, and look at how wide one of your main content paragraphs is. This will give your your main content size (a.k.a. the max-width of your images). Mine is 564px and I am not using a template with a sidebar. A client’s was 360px and they were using a sidebar.
  2. Copy your full RSS feed URL… probably something like http://benstewart.net/feed/
  3. Go to ChimpFeedr and paste your feed URL into the box.
  4. Click the checkbox for “Resize Images?”
  5. Enter the content width from Step #1 in the “Scale down images…” box. If you didn’t do Step #1 then just keep the default or guess.
  6. Click the button and ChimpFeedr will say something like, “Your mix is being updated and will be accessible at:” then provide you a link to your new RSS feed.
  7. Copy the new RSS feed’s link and paste it into your browser. It will start off empty. Wait about 1-2 minutes then reload until you see your content.
  8. Login to MailChimp and edit your RSS to Email Campaign.
  9. Replace your old RSS feed URL in the settings with the new ChimpFeedr RSS feed URL.
  10. Confirm and re-start your campaign.
  11. Sleep a little easier each night knowing that your awesome content will look spectacular in your email template.

Now it’s your turn: What are your favorite MailChimp tips and tricks?

Screenshot 2014-06-05 11.34.06

Bootstrap Grid Calculation Explained

I recently got this question about the Twitter Bootstrap grid.

On the bootstrap website it says column width 95px but ones I see are 98px just wondered could you shed some light on it?

Here is my response:

Let met start with this… when using Bootstrap for front end development you can adjust the grid however you please using LESS variables inside the variables.less file then recompiling the LESS to CSS. Those variables get recompiled into the bootstrap.css file to make the grid whatever size you want at various breakpoints.

Consider the containers

By default you have three layers of containers that comprise the BS grid each with unique classes: container, row, column. You also have multiple breakpoints to consider but for the sake of simplicity and your specific question, let’s just deal with the large 1170px size.

Containers. For devices over 1200px Bootstrap’s default grid “container” is 1170px wide. It has 15px of padding on either side making the inside of the container a total of 1140px due to the box-sizing CSS for all elements being set to border-box by default.

Rows. Inside of each container you have a row which is 100% wide. That should be 1140px wide but Bootstrap adds a negative margin to each row (-15px by default… or half the grid-gutter-width setting) making each row 1170px wide.

Columns. Inside of each row you get your columns. If you create a 12 column row then each column would be 97.5px wide. We all know that half-pixels don’t really exist so most browsers will round these columns to render as alternating 97px/98px columns to make up the full 1170px width.

The real answer… and some math

In the real world you will rarely actually use 12 columns in your layouts so you really just need to account for the proper size of each container. Bootstrap uses percentages for this in the mixins.less file. The @grid-columns variable is a setting in the variables.less file and defaults to 12. Also remember that there are no partial pixels so browsers will round.

Here is the LESS equation to calculate column widths:

width: percentage((@columns / @grid-columns));

For example:

  • 1 column / 12 grid-columns = 8.33% * 1170px = 97.5px
  • 2 columns / 12 grid-columns = 16.67% * 1170px = 195px
  • 3 columns / 12 grid-columns = 25% * 1170px = 292.5px
  • Etc…

I hope that helps shed some light on the Bootstrap grid. This also means that my Bootstrap PSD templates (and probably every other one you might find) are not pixel-perfect. But then again, we don’t live in a pixel-perfect web world anymore.

bs3-ps-templates

Bootstrap 3 Responsive Grid Photoshop Templates (PSD)

I have been very pleased to provide a valuable resource to so many designers with my original Bootstrap Grid PSDs. But with Bootstrap 3 came a new default grid (and mobile-first mentality). Now, I am trilled to offer new, updated Photoshop templates for the Twitter Bootstrap 3 grid (download link below).

Inside the ZIP file you will find three PSD files. One for the 1170px grid, one for the 970px grid, and one for the 750px grid. Each template has guides and a shape layer showing you columns along with another shape layer showing the main container size.

I’ve also included a screenshot of the grid info from the Bootstrap documentation for quick reference.

I hope this helps make your design process a little more efficient as you help continue the mobile responsive web movement.

bs3-thumb

Download Bootstrap 3 Templates Here

Screenshot-2014-04-08-08.58.34

Louder Media Launches New ShaunGroves.com

My company, Louder Media, just launched the brand new ShaunGroves.com. Shaun is a blogger, speaker, musician, and advocate for children living in poverty throughout the world. He has amazing insights into life, art, wealth, and more. We were happy to partner with Shaun in developing this new website.

As you will see when you visit, we pushed the envelope in many ways with his site. The front page aggregates content from his blog and social media while also incorporating internal ad spots and creative background images. In lieu of using “infinite scroll” on the front page we decided to create an AJAX “load more” button which repeats the grid indefinitely.

There are lots of other goodies including the Tour page with integrated map, full on-site e-commerce store, and more.

And, as always, it is fully responsive.

I hope to post several of the creative solutions we integrated on Shaun’s new site here in the coming weeks (months?) but for now head on over to the all new ShaunGroves.com, read a post, and leave a comment!

airmail-things

My new task management setup with Things and Airmail

Several years ago I wrote a post about how I used Things as my primary task manager. I still get people asking about Things and how I have my workflow setup so here is a long overdue update.

First, am I still using Things for tasks? Actually, yes! I have moved away from Things a few times and I still constantly experiment with alternatives. However, for me, Things just seems to be the best overall system for keeping tasks organized and in sync between my Mac and iPhone. As they say, “it just works.”

There are other solutions that are much prettier (although Things 3 should update the UI). There are also solutions that offer features not found in Things such as  collaboration and commenting with others, a web interface for task management, integrations with third-party services like Basecamp, Jira, or a host of CRMs. If you need any of these features then by all means look elsewhere (Flow, Trello, Producteev, and Asana are great places to start). However, if you don’t actually need these features then maybe Things is still the best option.

But what about getting email messages into Things?

Here’s where my workflow has changed over the past several years. I no longer use Apple Mail (along with MailActOn or MailTags). As Apple made it more difficult to use Gmail (and Google Apps) seamlessly I tried several alternative email clients. I fell in love with Sparrow until Google bought and killed it. I am still waiting on Mailbox to make a Mac client to accompany their iOS app. But until that day comes I am (mostly) happily using Airmail.

The most recent update of Airmail added the ability to create a task in Things from any email message. That’s right… built into the app! No crazy work-arounds through iCal. I don’t even have to run it through an Alfred workflow. Now the only trick was to figure out how to use this feature which didn’t seem to have any documentation.

It turns out it is easy if you know where to look.

Airmail to ThingsFirst, select a message. At the top-right of the message pane you will see a small drop-down arrow. Click that arrow to reveal a (large) menu of actions to perform on that message. At the very bottom of the list you will see the “Create Things Task” option. Click that and the Things quick-add box will appear with the email subject as the task name and a link to the email message as the task’s note.

It is worth noting that Things must be open for this to work. If Things is closed when I click the “Create” option then it will open Things but the quick-add box does not open for me.

Also, I have not found the link to the message useful at all. It actually does not automatically hyperlink for me and so it really serves no purpose for me.

Screenshot 2014-03-17 09.09.39Finally, if you know me at all you know that I typically prefer my hands on the keys, not the mouse. Keyboard shortcuts are the key to efficient productivity. Thankfully, Airmail has a keyboard shortcut for this function and you will find it by navigating to the Messages > Dispatch menu.

If you don’t recognize those symbols, the shortcut is: “control + option + t”

Just hit that key combination when a message is selected and the Things quick-add box will open pre-filled with your message details.

That’s it! As you may have noticed, Airmail will also send messages to iCal and create Apple Reminders. I don’t personally use either of these (I highly recommend Fantastical for Mac and iOS instead of iCal) but if you do then I’m sure the process is similar to the Things workflow.

Do you use your email inbox as a task manager or do you have a way to get message out of the inbox and into a true task manager?

alfred-rdio

Alfred Workflow for Rdio with Keyboard Shortcut

After hearing podcasters rave about Rdio long enough I finally tried it and I am in love. Spotify is great an all, but Rdio is so much cleaner. As someone who cares about user interface design and usability it didn’t take me long to jump on the Rdio bandwagon.

However, when  I am working on my Mac listening to music I need quick access to basic Rdio controls. In the past I have used Alfred for this (I am even bought the Power Pack). So I decided to seek out an existing workflow that would allow Alfred to control Rdio.

I found a workflow that provides text commands but I really want keyboard shortcuts. So, I added them. And you can too! It’s easy.

First, download  this great workflow by David Ferguson. Double-click the file once it has downloaded and it should install and launch your Alfred Workflows Preferences. If it doesn’t open up Alfred (click the hat in your menu bar) and select Preferences…

Screenshot 2014-03-10 08.44.53Make sure you have “Rdio” selected in the left-hand pane of the “Workflows” tab.

Screenshot 2014-03-10 08.46.11You should see a set of workflow commands visually represented by boxes connected by lines. The boxes on the left represent the command you would type into the Alfred box. The boxes on the right are the actual scripts that do the work of controlling Rdio. The lines connecting the boxes represent routing… in other words, “if you do this command, this thing (script) will happen.”

Screenshot 2014-03-10 08.47.04

What we want to do is add another set of boxes to the left of the text command boxes. Each of our boxes will represent a global keyboard shortcut (or “hotkey”) to control one command for Rdio. Then we need to connect our boxes to the appropriate chains already in the workflow.

Start by clicking the plus sign at the top-right of the workflow screen. Select Triggers > Hotkey from the popup menu. Here you will enter your keyboard shortcut. Make sure you pick something very unique that will not be used by any other application. I like Ctl-Opt-Cmd and then an arrow key. I can hit all three with my left hand then the arrow key with my right hand. I will use the following:

  • Ctl-Opt-Cmd-Up for the Now Playing info
  • Ctl-Opt-Cmd-Down for Play/Pause
  • Ctl-Opt-Cmd-Left for Previous
  • Ctl-Opt-Cmd-Right for Next

Once you have entered your shortcut in the box at the top of the keep the other settings at their defaults (Pass Through and None) then click Save. Repeat this for your other keyboard shortcuts.

Screenshot 2014-03-11 08.35.54

Now it’s time to connect each keyboard shortcut to the proper command in the workflow. Hover over one of the hotkey boxes and you should see a small nub (half-circle) protrude from the right-hand side.

Screenshot 2014-03-11 08.42.09

 

Click on it and you should be able to drag a line connecting it to another box. You want to connect the right-hand side of each hotkey box with the left-hand side of each command box. This will pass your hotkey through to Alfred as if you had typed in the command you are connecting it to. Here is what the finished product looks like for me:

Screenshot 2014-03-11 08.42.24Now close the Alfred preferences window, open up Rdio for Mac, start playing something, and give it a shot. Now Playing, Play/Pause, Previous, and Next commands should all just be a keyboard shortcut away.

What music do you like to keep you motivated? Do you have other tips for improving your productivity with Alfred?

 

wp-template-order

WordPress Theme Development – Template Order

Process is the key to efficiency. Building a good theme development workflow will shorten your project timelines and help keep you sane. But which template file should you start with? Should you jump into the blog list (index.php) first, or maybe the standard page template (page.php). How about the 404 error page… that one seems easy, right? Even though you can start anywhere, there is a logic behind the order in which you create and style your WordPress template files. Here is a look at my process.

According to the Codex the only files you really need for a theme are style.css and index.php. If only theme development could be so simple. More than likely your theme will consist of many more files than that. WordPress has a specific template hierarchy it uses to decide which template file to use for each page request. Each template files serves a specific purpose. You can also create template parts containing blocks of code you can reuse in multiple template files.

But this is getting us away from the point of this post. Once you have figured out which template files you  need to create you have to decide where to begin… and more important you should know why.

1. style.css

Start here. Every time. You have to setup your theme’s information at the top of the style.css file inside your theme folder so WordPress can see your theme and let you activate it. However, you do not have to use this file for your styles. Since switching to LESS I now create a sub-folder in my theme folder for all of my LESS files and a sibling folder with all of my rendered CSS (either by Grunt or CodeKit depending on the project). I also keep  LESS and CSS files from included libraries/frameworks like Bootstrap, Foundation, or FontAwesome in the same folders. I do my best to include as many style assets as possible in my primary style.less file so they all get combined and minified into one file that I load in my theme.

The same goes for Javascript — keep it in a separate folder, concatenate, and minify!

2. functions.php

Speaking of loading the stylesheet into my theme, this happens in the functions.php file (not in the header.php template file!). In fact, I always create an “includes” folder in my theme folder for additional PHP libraries/assets. These get included (or “required”) in the functions.php file. Some of these libraries are things that I have created that include common functions that I use to my my theme development easier. At the top I define several PHP constants that I will use throughout my code. Then I include additional libraries. Last comes all of the theme-specific functions. My goal for this file is to keep all common functions in the includes folder and only theme-specific functions/variables inside the functions.php file itself.

This is where you will register your menus and sidebars. This is also where you will enqueue all of your CSS and Javascript assets to be loaded in the header or footer. You can also include any hooks or actions here (such as creating a custom Gravatar default for comments or custom excerpt length with read more link).

3. header.php & footer.php

Now we get into actual front-end development work… finally! You should start at the top and the bottom. Figure out the common pieces you’ll need across all pages (like branding, social media links, navigation, footer widget areas, and copyright info.) and put them in their place in the HTML. Then decide what container you want around all of your page content sections. Open that container tag in the header.php file and close it in the footer.php file.

4. page.php

Next you might think you should start with the blog list (index.php or home.php) but I say no. Start with something a little more basic. Assuming that your pages and blog posts will look similar you should start with the page.php template because it has fewer elements overall (no tags, categories, or comments) but it does have  pieces that will carry over to the blog post template (title, content). Don’t forget to use a loop-page.php template part for extra credit!

5. sidebar.php

Before you wrap up page.php you will have to make sure your sidebar is setup and included properly. Now that Jetpack includes the “Widget Visibility” functionality sidebars are much easier to manage. We typically include a sidebar (or widget area) specific to blog pages and another one that is general for all pages. Sometimes I will setup the theme to use the standard sidebar if the blog sidebar has no widgets. You can call a blog-specific sidebar file in your blog template files by creating a sidebar-blog.php file and using the get_sidebar(‘blog’) function.

6. single.php

Before you create your list of blog posts (index.php) you should go ahead and make sure you have styles for your single blog post template. This includes title, date, author, content, featured image, tags, categories, and comments (at least). Again, extra credit for using a loop-single.php file!

7. index.php (or home.php)

Finally, your main blog list. This will often be a reduced version of the single.php file for each post on the page — sometimes with full content and other times with excerpts. Also make sure you check pagination. As an aside, I’m sure there are times when a home.php file is appropriate but I do not personally use them for anything.

8. archive.php & search.php

These files are cousins of the index.php file so most of your styles are already in place. Just make sure pages (and other custom post types) show up well in search results… you probably don’t need to show a date or author for pages.

9. 404.php

This is totally unique from the other templates we have been working with. It is essentially the page.php file with a search box and other appropriate information to help guide a visitor back to the right path on your website.

10. attachment.php

I generally use WordPress SEO to turn off the attachment view functionality but it’s always a good idea to include a template for it just in case.

11. everything else…

This is where things get very theme-specific. For example:

  • Are you creating custom page templates for this site? I generally provide one page template without a sidebar that is full-width. I also generally have a unique front page template (not front-page.php but a separate page template intended for the front page).
  • Do you need custom post types? If so, you will want some sort of list page, single page, and possibly term/taxonomy archive pages.
  • Are you using any plugins that allow you to create custom page templates like a calendar or store?
  • What about author bio pages?
  • Do you need custom templates for unique taxonomies?
  • What about custom RSS feed templates for podcasting or adding custom meta fields to your syndicated posts?

All of that is possible but all of it should all come last in your workflow.

And now it’s your turn! How do do things differently… and why? Do you have any other suggestions to keep your development workflow efficient and orderly?

email-hosting-breakdown

Business Class Email Hosting Breakdown

Back in 2012 when Google killed the free tier of Google Apps I posted about some alternatives. Now that more than a year has passed I thought I would survey the landscape of the services we currently recommend to our clients. First let me say that I never recommend hosting email the same place (or at least on the same server) as you host your website. Using a dedicated email hosting solution is worth its weight in gold… even if you use a free one.

Here are all of the options my company, Louder Media, would recommend. I do not like the Microsoft solutions unless you really need it to be in the Microsoft ecosystem for some reason. Google is still my personal favorite but the other options are good as well.

If money is a concern you can opt for the Zoho free service or the Namecheap $10/year service. I have not personally used either of them and there may be some drawbacks such as a less-than-stellar interface but both companies have been around for a long time which is a good sign.

I will only list basic price (as of this writing) and the occasional notable feature. The rest is up to you…

Google Apps

  • $5/address/month or $50/address/year

Namecheap

  • $10/address/year – “Private”
  • $29/address/year – “Business”

Rackspace

  • $2/address/month
  • $10/mo minimum so you get 5 addresses to start whether you use them or not.

Zoho (free and paid options)

  • Free option up to 5 addresses
  • $2.50/address/month

Microsoft Outlook.com (free and paid options)

  • Free option with ads and required logins to keep account “active”
  • $20/address/year without ads or account expiration
  • Not as easy to setup and manage custom domains… I’ve done it.

Microsoft Office 365

  • $5/address/month

Remember, email hosting is a service so you do kind of get what you pay for. One of the main benefits of using a dedicated email hosting solution is that you don’t have to switch everything when you decide to move your website hosting elsewhere. So you should pick an email hosting company you want to be in a long-term relationship with.

Need someone to setup email hosting on one of these services? Need a website or domain name settings audit? Contact Louder Media today and we will help you find the right solution for your needs and budget.

Where do you host your email and how do you like it?