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!

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

 

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?

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?

Is GoDaddy killing Media Temple?

I would have to say that this article by Marco Arment sums up my thoughts on GoDaddy buying Media Temple.

For years I have been encouraging my friends and clients to run away from GoDaddy as quickly as possible. Why? Many reasons. First, their marketing is very questionable. Second, they do everything they can to upsell or bait-and-switch their own clients to gain more money. Third, they provide a sub-par service in general.

That hasn’t changed.

At one time Media Temple was the bee’s knees of web hosting for a while. Since that time they have kept much of their status among the run-of-the-mill website owner even though many people further in the industry have moved on. I have always viewed them as a little overpriced but generally a good option for website hosting.

That ends now.

Moving forward it is my recommendation that anyone who shares my views on GoDaddy’s business practices remove Media Temple from your list of potential website hosts. If you already have an account there, move it. Where? Let me give you some options (and none of these are affiliate links).

First, if you are a (gs) customer then you are basically looking for low to mid-range shared hosting. Try…

  1. If you are a church or ministry you should talk to Chuck over at Flock Hosting. He provides free hosting for churches as long as your needs are pretty simple (as most churches’ needs are).
  2. Site5 offers “shared cloud” plans which would be comparable to the (mt) grid. They also have standard shared hosting, VPS, and Cloud VPS plans.
  3. Running WordPress? Managed WordPress hosting services are all the rage right now. Check out WP Engine, Page.ly, or ZippyKid.
  4. VPS.net has a “cloud sites” option that might suit you as well, although their website has so many options it can kind of be confusing to figure out which plan you really need.

If you need more power and you are used to the (dv) service then you want something VPS or elastic. How about…

  1. VPS.net can give you a VPS (cloud server). You can even pay for management services if you want a professional to keep an eye on things for you.
  2. Amazon AWS has everything you need between their servers (EC2), DNS (Route 53), simple storage (S3), and CDN (CloudFront) services. You do need to know how to get it all started or  find someone to do that for you. They do have several levels of support available, too.
  3. Rackspace Cloud Sites is great if you want something elastic that is already setup and ready to go. Pricing might seem odd since it’s pay-as-you-go once you pass the threshold but it’s a good service with good support. They also have Cloud Servers if you can do it yourself.
  4. Site5 offers managed and unmanaged VPS servers at competitive prices, too.

Hopefully this list will help point you in the right direction. Just remember that no hosting solution is perfect. While reliability is paramount, a fast and helpful support staff is just as important.

Of course, if you need help migrating to a new host or if you want consultation on the right hosting fit for your needs please give me a shout over at Louder Media.

More on Responsive Web Design for Non-Coders

Following my post last week answering some questions about RWD I got another email with some additional questions. This time the focus is on responsive images, standard breakpoints, CSS frameworks, and WordPress in general. Here we go…

Q: how do i know what size to make my ‘master’ header image or inset images, so that they will scale (always down and never up, i would assume? to retain best quality) properly? make them the largest size that they will ever be used and the code scales from there?

Doing responsive design well requires a lot more communication between the designer and the front-end developer. You always want to start with the largest image that you will need and then be able to downscale. However, you don’t have to serve that large image to everyone. You can create multiple sizes of your main images and use some clever CSS, PHP, and/or JS tricks to serve the most accurate size image for each device.

This works especially well for theme files because you can crop them however you want and then create very specific CSS rules to do whatever you want with them. However, for user-uploaded images (like images in blog posts) you need a different kind of solution. You also have to consider retina devices which need double-size images to look crisp.

This opens up a whole new conversation about how to manage responsive images properly — a conversation I won’t get into here. It’s still a new technology so the techniques are a little hack-ish right now but there are a lot of smart people trying to figure this out. Just to demonstrate a little of the conversation you can see Chris Coyier’s post on RWD image solutions.

For WP images (not theme images but user-uploaded images for posts, etc.) you can check out:

Q: with all of the different frameworks available, is there a ‘standard’ or best one to use as my ‘base’ for responsive designs? i don’t really want to write any code myself but i do want to prep the design elements so that they work in the responsive environment when i hand the design over to my developer. is bootstrap referring to wordpress only?

Each CSS framework is different. There is no one specific CSS framework that is necessarily better than another. None of the frameworks are WordPress-specific per se. However, you can get WordPress starter themes that have CSS frameworks integrated. Your framework decision really comes down to the preference of the front-end designer because he either has to use the framework’s built-in styles for elements or change the styles depending on what he needs to accomplish with the overall site design.

Here are a couple of resources that let you use Bootstrap’s default element styles in your PSD designs:

 

Many of the available CSS frameworks are based on some sort of 960px grid and then sort of standard device screen size breakpoints. However, these breakpoints are entirely in the hands of the front-end developer since they are declared in the CSS file(s). You can set breakpoints wherever you want; it’s just often easier to use the default ones set in your chosen framework — which have been chosen by the framework creators for a reason.

More on breakpoints:

Bootstrap is not a WordPress-specific framework. However, you can incorporate it into WP themes and it is great. There are other WordPress “starter” themes that include their own responsive CSS frameworks. I think it all comes down to a design/development shop picking one tool and getting really good at it rather than bouncing around to different ones project-to-project.

Here are some WP-specific starter themes that don’t use Bootstrap:

My Bootstrap Responsive Grid PSD post also lists some WP starter themes that do use Bootstrap. Although, now I suggest any developer roll his own because Bootstrap becomes so much more flexible when you have the ability to fully customize the pre-configured LESS files for each project’s needs.

Quick Reference: Best Google Apps Alternatives

Now that Google Apps is no longer free I wanted to research the best free and paid alternatives for my clients. Here is a quick reference guide of my results. Do not consider this an endorsement for any of these services.

Outlook.com (free)

  • confusing setup process
  • unlimited free email users (account admins must have Live accounts)
  • 7GB Skydrive storage
  • calendars and contacts
  • unlimited storage (so they say)
  • 25MB email attachment size
  • no IMAP support
  • ActiveSync support
  • ad supported (in sidebar) or pay

ZOHO Mail Lite (free)

  • up to 3 users
  • only 1 domain
  • business email with calendar, tasks, notes, contacts & more
  • 5GB mailbox
  • push mail, mobile sync
  • email support only

Rackspace Email

  • $24 / user / year (min. $10 / month charge)
  • 25GB of storage per user
  • mail, calendar, contacts, tasks, notes
  • POP / IMAP
  • 50MB attachments
  • add mobile sync (ActiveSync) for $1 / user / month

Hover (Email Forwarding)

  • from $4 – $5 / user / year

Hover (Full Email Hosting)

  • from $6.50 – $35 / user / year depending on features and quantity
  • POP / IMAP / webmail
  • calendar and file sharing options
  • 10GB mail storage / user

ZOHO Mail Standard (paid)

  • $24 / user / year (or $2.50 / user / month)
  • business email with calendar, tasks, notes, contacts & more
  • host multiple domains
  • more users, more groups
  • 10GB mail storage / user
  • push mail, mobile sync (some limitations on iOS)
  • email/phone support
  • up to 15GB for $3.50 / user / month ($36 / user / year)

Google Apps

  • $50 / user / year (or $5 / user / month)
  • 25GB mailbox
  • 5GB Google drive
  • mail, calendar, drive, docs, talk, sites

FuseMail

  • $24 / user / year (min. $10 / month charge)
  • 10GB Mailboxes
  • webmail with calendars, contacts, tasks and notes
  • phone, email & live chat support
  • IMAP, POP3, SMTP, webmail
  • mobile sync + collaboration
  • unlimited aliases and domains
  • phone, email and live chat support
  • up to 25GB / user for additional $1 / user / month

Have you used any of these services? Any others that I left off of the list?