Archives for October 2013

Mixer Madness!

MIGHTYminnow hosted the Oakland Chamber of CommerceAfter 5 Mixer” last night. It was great fun connecting with other local business people, enjoying delicious Urban Legend Cellars wine (our favorite!), and generally learning about what’s going on in Oakland.

Thanks to everyone who attended, to the Vegetarian Gourmet for the yummy food, to Urban Legend Cellars for the wine and to the Chamber for putting it together!

BXYeno8CcAM9O2x

20131024_194204

20131024_185453

photo 2

Mm Plugin: jQuery Responsive Select Menu

jQuery Responsive Select Menu

Automatically turn your standard WordPress navigation menus into responsive select / drop-down menus when the screen is below a certain width.

Download Now » See Demo » GitHub Repo »

jQuery Responsive Select Navigation Menu

The responsive select menu in action.

jQuery Responsive Select Navigation Menu

Settings for the responsive select menu.

jQuery Responsive Select Menu gives you a simple way to make your navigation menus responsive for mobile devices like phones and tablets (iPhone, Android, Kindle, etc). The plugin lets you specify a width at which to turn your normal menus into responsive, drop-down select menus – a proven method for solid, responsive navigation.

You also get specify some other handy settings including:

  • CSS class/ID selectors to specify exactly which menus to affect
  • The width at which to switch from normal to responsive navigation menus
  • The character/spacer to add to sub-items in your drop-down select menu
  • A “dummy” first term to add to the top of your drop-down navigation (e.g. ⇒ Navigation)
  • Whether to show the current page, or the top-level “dummy” item, as the default

Languages/Translations

MIGHTYminnow’s Favorite WordPress Plugins: Widget Context

MIGHTYminnow's Favorite Plugins: Widget ContextOur next stop in MIGHTYminnow’s favorite WordPress plugins is Widget Context. This plugin allows you to specify exactly where your widgets do and don’t show up. Using widget context, you can tell a widget to only appear on a certain page, in a specific section (e.g. all pages under About Us), or everywhere on your site except for in certain circumstances (like excluding posts from 2008). We use Widget Context on just about every site we build to do things like the following:

  • showing related blog posts only on blog pages
  • adding page-specific related content
  • showing other event links on event pages
  • adding related testimonials for page-specific products or services

MIGHTYminnow's Favorite Plugins: Widget ContextOne of the big perks of Widget Context is that it adds controls right onto your existing widgets, which means you don’t have to navigate away from your Widgets panel to make changes. These added controls are where the magic happens, allowing you to choose a “context” for your widget in one of two ways:

  1. Checkboxes
    Choose from some common selections like Front Page, All Posts, 404 Error, etc
  2. Target by URL
    Specify a URL pattern (yes, you can use wildcards!) to match

Depending on how many pages you want the widget on your sidebar to show up, you either choose to show or hide the widget on selected posts/pages that match the criteria you’ve selected. If you know that you want the widget on all blog related content, you might choose the Show on Selected drop-down option and check the boxes for Blog Index, All Posts, and All Archives.

The URL targeting feature is pretty handy as well, allowing you to target a specific page, a page and all of it’s sub-pages, and much more. To target a specific page, you use the UNIQUE part of the URL. For example:

  • A single page:
    To add a widget just to this page: http://www.mysite.com/services/, you would include “services” (without the quotes) in the “target by URL” box.
  • Child pages:
    To add a widget to all child pages of services, but NOT services itself, you would add “services/*” (without the quotes) in the “target by URL” box.
  • A site section including parent and child pages:
    To add a widget to the services page and all its children, you would add “services*” (without the quotes and without the slash from the example above) in the “target by URL” box.

Notes:

  • When entering multiple pages to target, each page goes on one line and you don’t want to have a blank line after the last one.
  • The URLs for pages you target can be complex – adding widgets to a deeply nested page or section works the same as the above, just include the complete string for the unique part of the URL, like: “services/web/hourly”, “services/web/hourly*” or “services/web/hourly/*”

Thoughts? Comments? Questions? As always, we love to hear from you. Check out the comments section below.

MIGHTYminnow’s Favorite WordPress Plugins: Events Manager

Events ManagerIf you are an organization that hosts frequent events (like we do), Events Manager / Events Manager Pro is a must have. This is a free WordPress plugin, with an optional “Pro” upgrade if you need to take payments. Events Manager offers a robust array of settings and features, which makes it really easy to create and display events, registration forms, and much more.

(Free) Features We Love:

  • Screen Shot 2013-10-10 at 2.08.24 PMTemplates & widgets
    Events Manager makes it extremely simple to output your events in a bunch of different ways. The plugin comes with great default templates for events list, calendar, and widget views – plus you have the ability to set up your own templates using simple placeholder tags (e.g. #_EVENTTITLE)
  • Google integration
    Google Maps are seamlessly integrated, meaning your guests can see a map of each event location, and can even look up directions from their location – all from within the page they are viewing. Events Manager also integrates with Google calendars and iCal, so your guests can add your events to their personal calendars in one click.
  • Categories and tags
    Just like WordPress’ Posts, you can categorize and tag your events. Additionally, you can output custom lists of particular categories and tags.
  • Create multiple tickets
    If your event has separate prices for members and non-members, or if you have different levels of entry (1-day pass vs. conference pass), you can create different tickets for these groups.
  • Timing and recurring events
    Events Manager really shines when it comes to scheduling your events. The plugin places a huge number of possibilities at your fingertips, including the ability to custom schedule recurring events. Whether your event is all day, 7-9pm, or recurs every Thursday at noon – you’ll easily be able to set it up in Events Manager.

(Pro) Features We Love:

  • Coupon Codes
    You can set up multiple coupon codes for specific discounts (fixed-price or percentage). You can also limit the number of coupons available and/or set an expiration date.
  • Online Payments
    Probably the #1 pro feature is the ability to take payments through PayPal, Authorize.net, and other offline payment methods. We use Events Manager Pro on the MIGHTYminnow site to facilitate class registrations through our payment gateway.

For Love. Part Two.

This is the continuation of “For Love. Part One.

The Time(s)

First, I’ll tell you that all told, making a new, responsive, beautiful (if we do say so ourselves) website for Rocket Dog took over 200 hours. But I’m getting ahead of myself.

The Design: Adobe Flash & Photoshop

Some time ago, we received a great Flash animation for Rocket Dog that was created by a talented designer and animator named Justin Klein. Kathy Allbright, of Allbright Design, then took that animation and created some sketches of what she thought a new website for Rocket Dog might look like, where she included Justin’s great animation in the masthead. Then time passed. Quite a bit of time, honestly, because 200+ hours (of unbillable time) is difficult to find. Unless you make it a priority. A real, concrete, front-of-the-line priority. Which is what we did, this summer. We made making Rocket Dog Rescue a shiny new website into our top priority.

The Process

Choosing Technology

Platform: WordPress

wordpress logoAt MIGHTYminnow, we like to build websites with WordPress. We do this because our clients find WordPress websites easy to maintain and we find them fun and (relatively speaking) easy to build. For some things we think other CMS’s are appropriate (or even better), but for a nonprofit like Rocket Dog Rescue, WordPress is the perfect solution. Using custom post types and Toolset’s Types and Views Plugin, it is easy(ish) for us to build in a structure that makes it simple for RDR volunteers to add dogs and success stories, place or remove slides on the home page slide show, feature news items and especially promote the dogs they have saved (and are trying to place) and highlight the adoption events they hold every month.

Framework: Genesis (plus Cobalt Genesis Extender)

On top of WordPress, we like to add the Genesis Framework. Genesis is great because it has one, two and three column layouts built in to every theme, the home page is pretty easy to lay out (especially if you add Dynamik or Genesis Extender), and many of the base themes are already responsive.

Base Theme: Genesis, but Mobile First

Mobile First Child Theme for Genesis 2.0All that said, one of our preferences is to have our responsive themes use media queries in a “mobile first” way, and therefore to have phones and tablets only load the styles that are relevant to them, with the style sheet defining the universal rules (that apply to all screen resolutions) first, then working its way up to rules that are specific to larger displays. Simply put: we like our theme to load as quickly and efficiently as possible, especially on mobile devices. Genesis has a base child theme that is great, but we decided to rework it to be mobile first. Enter our new Genesis Mobile First Child Theme. This Genesis child theme is what we used as a basis for the Rocket Dog site, but we also made the reworked version available to our community online.

Wireframing / Designopment*

MIGHTYminnow usually follows an approach to website design and development that we call Discover * Develop * Design * Theme. In most cases we first build a website with a “brown paper wrapper” type look, holding off on colors and other design elements, and instead just focusing on getting all of the blocks in the right spots on the page. That’s step one. We then take this plain Jane website (all blocked out and signed off by the client) and we send it to a designer to create a look and feel using Photoshop. We find that giving the designer an actual website to design from makes their job easier and minimizes the number of revisions we need to make, since the layout and visual hierarchy of the page are already established. Even for responsive sites, we usually just ask our designers to submit a desktop design. We then use this base design to extrapolate mobile elements and modifications during our theming phase, working back-and-forth with the designer as needed to decide how the site will reflow on different devices and at different breakpoints.

homeWe followed this process to some extent with the Rocket Dog redesign, but because we were using pre-exisiting sketches from Allbright Design and because we were doing a lot of “design in browser” or “design in Live View of Dreamweaver” to style elements that were not present in the Photoshop comps, what would normally be an un-styled wireframe started to take on a design pretty early in the process. The one place we really “wireframed” before theming was on the home page, where we used Genesis Extender to lay out all of the boxes and then start feeding in the content so that we could determine how the design sketches should be adapted to the real world needs of the client. A lot of the design elements were created in tandem with the development, using a collaborative approach that allowed us to build the features and determine the design for them as we went.

The idea of designing as you go, especially as it relates to responsive breakpoints and media queries is an idea Ethan Marcotte jokingly called “designopment,” about which he says:

Our goal is to get beyond the pixel limitations of Photoshop, and begin building a design that can flex and grow inside a changing browser window, that can scale to different devices. So the development team quickly begins producing a responsive design: converting the fixed grid into a fluid one, discussing ways to flexibly handle different types of media, and then finally applying the media queries that adapt our design to different resolution ranges.

Ethan Marcotte

This is the approach that we took with the Rocket Dog Rescue redesign, and we think this approach works very well. We hope you agree, and we’d be happy to get feedback on our efforts (on behalf of the dogs). More about our process in part three of this post, coming soon…

« Part One

For Love. Part One.

We are a small company. MIGHTYminnow, small but strong. That’s sort of our unofficial tagline. And at our size, the bottom line is a real consideration. Rent, payroll, expenses… Estimates, calculations, hours, invoices… These mechanisms (which we sometimes find quite tedious, in all honesty) are necessary components of our day-to-day. They are the business counterparts to the creative and technical work we really love to do.

We love making websites. Especially websites that can be easily maintained and that work well on every device and at every size. But making websites takes time and expertise, and for the reasons mentioned above, this usually costs money. Done well, with proper time and care, with tailoring for devices and screen resolutions, it can cost a lot of money.

So here’s the big reveal. And we’re nervous to tell you this, but here goes.

Sometimes money isn’t our motivation. Sometimes we do things for love. (And by “things” I don’t mean sprinkling rose petals on the bedspread, I still mean making websites.) Sometimes we make websites, for love.

Enter Rocket Dog Rescue

rdr-logoMIGHTYminnow and Rocket Dog Rescue have had a long relationship. We haven’t been with them since the start, but we’ve been making them websites since 2007 and in web years (or dog years), that’s a long time. Like MIGHTYminnow, Rocket Dog has an unofficial tagline: for the love of a dog. That’s why they do what they do, and they make nary a dime doing it (in fact, we’re sure it costs them pretty dearly). Out of the depths of their giant hearts, they find the strength to get up every day and rescue – meaning save the lives of – dogs who are destined, by no fault of their own, to be euthanized. That’s huge, generous, and amazing. Rocket Dog saves, one after the other, abused, neglected and abandoned dogs, and to date their courageous and loving volunteers have saved over SIX THOUSAND DOGS. That’s truly inspiring.

It inspires us, and we feel that Rocket Dog deserves all the help it can get. We also believe that the dogs Rocket Dog is working to save *really* deserve all the help they can get. And one of the things that we feel could help Rocket Dog to save more dogs is to have a really great website where people can see the dogs that are up for adoption (or who need a foster home), read their stories, connect with their photos, and see all of the vital information about each dog. And we believe that this website should be beautiful, functional, mobile phone and tablet friendly and overall awesome.

So we made them one…

Part Two »

Mm Plugin: Super Simple Related Posts

Super Simple Related Posts

A super simple widget to output related posts based on categories, tags, or custom taxonomies. You get to decide how the posts are related (categories, tags, custom taxonomies), what to show (posts, pages, custom post types), and a whole lot more.

Download Now » See Demo » GitHub Repo »

Super Simple Related Posts

The Super Simple Related Posts widget

The Story

This plugin came about as the result of a recent project in which we needed to output related content on pages and posts in a unique way. We often create a lot of custom post types and taxonomies using Toolset’s amazing Types & Views plugins, and we needed a way to show related content based on specific criteria (e.g. post type and taxonomy).

The other thing we needed was an alternative to some of the many resource-intensive “related content” plugins out there – and make no mistake, there are MANY. Yet a lot of these plugins work their magic by querying your database, running post content through algorithms, and performing processes that put a heavy strain on the server. So much so, that they sometimes get banned from premier hosting companies like WP Engine. So, with all this in mind, we developed this handy plugin and decided to share it with the world.

How it Works

In short, SSRP gives you a widget that can output a list of content related to the current page/post by any category, tag, or custom taxonomy. Let’s look at a real-world example to demonstrate what the widget can do. We recently utilized this plugin on a fundraising site that incorporates several different post types for their knowledge base:

Post Types

  1. Blog Posts (built in WP post type)
  2. FAQs (custom post type)
  3. Articles (custom post type)

. . . as well as a few custom taxonomies shared across these post types. . .

Custom Taxonomies

  1. Life Cycle (e.g. Beginning, Middle, End)
  2. Industry (e.g. Music, Sports, Arts)

So to sum up, we have a bunch of posts, FAQs, and articles – all of which are classified with Life Cycle and/or Industry taxonomies. With Types & Views it’s really easy to set something like this up, and we often end up using numerous custom post types and taxonomies on the sites we build. So in this case, an example of a typical FAQ might look like this:

  • FAQ: How do run a fundraiser for my team?
    • Life Cycle: Beginning, Middle
    • Industry: Sports

So now comes the fun part – related content. We want to display related content in the sidebar of our FAQ, and we want to be able to dictate exactly how it appears. That’s where Super Simple Related Posts comes in. Using this plugin, you can decide what type of content you want to output (posts, FAQs, and/or articles) as well as the taxonomy (category, tag, or custom taxonomy) by which to select related content. Back to our example. . .

Output

Using SSRP, you might choose the following settings (note: these are just a few of the many settings you’ll be able to modify):

  • Posts Types to Include: FAQs, articles
  • Show Posts Related By: Life Cycle
  • Number of Posts to Show: 3

With those settings, your SSRP widget would output the following when viewing the above FAQ on your live site:
FAQs
Beginning

Middle

Articles
Beginning

Middle

As you can see, SSRP give you the ability to add functionality much like you might find on a site like Amazon.com, which offers sidebar suggestions based on the content you’re looking at. Here are other blue shoes for you to look at. Here are more books written by American authors. Here are all the other long-haired crazy cat photos. You get the idea.

In Conclusion

Whether you’re using WordPress straight out of the box, hand-coding your own custom post types and taxonomies in functions.php, or using the awesome Types & Views plugin to work some serious magic, Super Simple Related Posts might be just what you’re looking for. Head on over to the official WordPress.org site to learn more. And, as always, if you have any questions, comments, or feature requests, we’d love to hear from you. WordPress.org: Super Simple Related Posts Plugin »

MIGHTYminnow is looking for a new minnow!

MIGHTyminnow is looking for a half time (20 hours a week) marketing and general office assistant. The hours are Monday through Friday from 1-5pm, although some flexibility is required. This is a great opportunity to get hands-on experience working on a wide range of duties and projects. Ideally, we would like to find someone who is interested in web development, marketing or graphic design. Here is a general description of the position.

Duties:

Office Management

  • Making Coffee for the morning
  • Greeting visitors of the office, making sure they have water/tea/coffee and snacks if they want
  • Answering the telephone and directing it to the appropriate person
  • Keeping up with weekly and biweekly fruit and water delivery
  • Placing orders to keep kitchen and office supplies stocked
  • Running errands to the grocery, bank, post office, etc.
  • Filing mail, receipts, etc.

Marketing

  • Create email newsletters to send out bimonthly
  • Ensure that weekly blogs are written, published, and promoted
  • Post to our social media outlets (Facebook, Twitter, Google+, LinkedIn) daily
  • Write monthly reports on the analytics of MIGHTYminnow’s website

Requirements:

  • Must come in to our Downtown Oakland Office (Located 1/2 block from 12th St./City Center BART station)
  • Must have experience in social media, blogging, Google analytics, etc.
  • Must have experience with Adobe Creative Suite – specifically Photoshop
  • Must be very organized and keep the rest of the office organized
  • Must be deadline-driven and keep others in office on top of deadlines and tasks
  • Must be attentive to detail
  • Integrity and passion for your work is a must
  • Excellent communication skills both verbal and written
  • Strong time management skills
  • Ability to work independently with guidance from manager

Bonus:

  • Experience with WordPress
  • Experience with Mailchimp
If you feel you would be a good candidate for this position, please contact us so we can get your resume and cover letter. If you know anyone who would be interested, please pass our information along!

Who is Dolly?

Plugin DirectoryIn keeping with our Plugin-themed posts, we would like to solve a plugin mystery that seems to confuse and sometimes irritate WordPress users who have not heard the history of Hello Dolly. This plugin is the world’s first official WordPress plugin and was created by Matt Mullenweg, a founding developer of WordPress.

Hello Dolly PluginThere were two purposes for creating this plugin. The first is that, when activated, the administrator will see a lyric from Louis Armstrong’s Hello, Dolly in the upper right part of the admin screen. This is only really helpful if you would like to get the song stuck in your head.

Hello, DollyThe second purpose of this plugin was to show users building websites the power of the plugin. Since this was the first plugin, no one knew why they should care about, build, or install plugins. This one showed how you could add on to the core of WordPress to enhance your website’s appearance and functionality.

There are now almost 25,000 plugins that have been downloaded over 435,000,000 times. Hello Dolly set the precedent of what a plugin could do for your WordPress Website.

Interestingly, our favorite host (WPEngine) has banned this plugin from their servers as it has no practical value. I guess they aren’t very nostalgic.