I didn’t make any of the illustrations, I basically borrowed some illustrations from things I’ve bought or downloaded. You really have to see these full size to fully appreciate them.

Here they are, click on the thumbnails to get larger versions.

Skull & crossed swords with a pirate ship in the misty background

Mix Tape.

Nintendo Gameboy Game

I designed this website to evoke the feeling of old world wine and whiskey labels. We wanted to  convey not only the benefits of our technology, but use imagery that was pertinent to the industry.

Full disclosure: I am a partner in Vine & Grain and currently work as the Marketing Director in the company so I had near complete creative control on this one.

Along with the public pages of the website, I also created a training section for our clients. The section is run within the same WordPress install and using the same theme. The pages sit behind a login and our clients each get a unique username and password. I used a user manager system to restrict access for our clients to only the training section, not any of the WordPress backend. We upload and host videos locally that help our clients understand our product.

Within the same WordPress installation and theme, I also created sales tools for our sales team to use in the field. The pages also sit behind a login and I used the same user manager to restrict the sales people to only the relevant pages.

To see a sample of these pages, please email me.

Omnispring also has another company called TRS Wireless that sells wireless supplies and services. Their previous site had no online store set up and very little information for the customer. It was a seriously under-performing site.

We designed a new site based on the design for their sister site, Omnispring. We designed this to be clean and help them to soar above their competition. We developed an online store for them to sell their products as well as the ability to update their pages with their information.

These are the comp images they approved. The images are placeholders only and don’t correspond with their actual products.

TRS Wireless Home

Product Category Page

Product Page

Omnispring’s website hailed from the early 2000′s and was in desperate need of an update. One of their main complaints with the site was not being able to update the out-dated information and pricing. Obviously a dose of WordPress was in order.

I designed the site to be clean and accessible for the user while giving them a sense of comfort in requesting their services. Many of the competitors in their arena have horrible looking and performing sites, so a clean design would help them stand out from the crowd.

I developed the site so they would be able to update virtually every aspect of the information including:

• Promotional Slider on the top
• Package information and pricing
• Pricing tables for additional services
• Order forms for packages and additional services.

Also see their sister site TRS Wireless

Homepage:

Packaged Services Page

Brandon Smith is one of the best chef’s in Philly. He’s cooked for Oprah and several heads of state to name a few. He added catering to his restaurant’s offerings and needed a website. They turned to me to build them an online presence.

I designed their website to be bold and exciting. It helped having killer photography to work with. I had to develop the site so it would be easy for them to update themselves. I created a section for uploading the menus and recipes. I also created a section for listing news and for listing upcoming events. They also requested an easy to update gallery, and thus far they’ve been able to update everything themselves. They are very pleased with how the website is working for them.

RP Realty wanted to build a property search website that would allow people to view houses in their locations and request a showing from one of their agents. They are providing the development themselves.

Property list page:

Listing Page

The National Guard has a department for Officers that helps strengthen their abilities and they needed an improvement to their repository for articles, announcements and interactions. While at Hooah, I created this design. I put together the basic HTML and CSS layout and their development team developed the site and integrated it into the back-end. The client was very happy with the result.

Phoenix wanted a site they could send to potential investors to find out more information on the company before investing. The site they wanted was simple, a basic brochure site with basic functionality and a place where their sales people could download the latest documents for their clients. The documents are all behind a login so only they can access. I used a user management system to restrict access for the sales people to only the pages relevant to them.

The Problem

Take for instance one simple place with a lot of room for improvement, the previous and next buttons. These buttons are pretty damned common on blogs and image galleries and seem pretty self-explanatory so you would think they were pretty much all the same, right? Not as far as I can tell. It seems obvious to me that we need a convention for this often over-looked and commonly last minute addition to the navigation.

Now, let’s get into the nuts and bolts of it. From what I’ve seen on most blogs, when you’re on the landing page, which you could technically call either the first or the last page, the button says Previous while the Next button is greyed out or not shown. Why? Well, when you’re considering the sequential nature of blogs, it makes sense to consider the latest post the last post and every post before it was “Previous” to it. This is logical, but doesn’t make sense from a navigation point-of-view.

A better way to approach this issue is to look at it as we would a magazine, newspaper, or book. As English speakers, we read left to right and when we’ve cracked the spine on any reading material, we flip the pages from our right to our left, unless you’re one of those people who flips to the last page to spoil the whole book for yourself, but that’s another story all together. If this is the case, if you imagined your blog like a magazine, and people were reading your latest post first, where would you put your latest post? The first page, right? If this is the case, then your viewers would go to the NEXT page, not the previous.

Also think about how you would list the pages of your blog, 1 2 3 4 5 and so forth. and it would probably look something like this:

PREVIOUS  1   2    3    4   5    NEXT

This seems obvious to me, but I still find myself in the middle of a multiple page blog and have to pause to think, do I click previous or next? What did I click before? Or I’ll click on next and it will take me to the page where I just was. This is way too much work for a visitor to have to go through and too much for someone to think about. It’s not about dumbing down, it’s about giving our viewers which we rely on and easier and more enjoyable experience. The less they have to think, the better they’ll feel.

A Solution

Frustratingly, WordPress defaults to  « Older Entries meaning well intentioned designers take this cue and simplify it to simply Previous. We can’t really fault these guys, they meant well, but it’s a common mistake that takes the logic the WordPress developers had in mind and flipping it so it doesn’t make as much sense anymore.

There are a few ways to put the right code on your page, and they’re very easy.

The first and probably easiest way is suggested by WordPress. (They even mention the disconnect between the default and how it should function, imagine that!)

So here’s how it works:

At the bottom of the page you want this to show up in, put this code:

<div class="navigation"><p><?php posts_nav_link(); ?></p></div>

You can wrap it in a div so you can apply styles to that div. This is a basic code, but you still have to add some pieces to make it look the way you want. Now, figure out what you want to separate the buttons, along with what you want the buttons to say, Next, Next Page, Click Here To Continue Through My Blog Of Multiple Pages, whatever. Now, here’s a breakdown of where to put these parameters:

<?php posts_nav_link('separator','prelabel','nextlabel'); ?>

Here’s an example of how it would look with a vertical line character “|” and Next and Previous for the parameters:

<div class="navigation"><p><?php posts_nav_link('|','Next Page','Previous Page'); ?></p></div>

It’s as easy as that. Now go forth and make your blog make more sense.

If you’re working with shortcodes, you’ve no doubt come across phantom <br> or <p> tags. WordPress automatically adds these in with the wpautop() function. These tags can effectively break your carefully coded content and cause you hours of frustration, not to mention calls from your clients.

Fortunately for you there’s an easy fix to the problem. We could just do away with the wpautotop() function, but that would cause a lot of other issues within the visual editor, a big problem when working with client sites. However with a simple php function we can eradicate those return and paragraph tags in your carefully coded shortcode content. In your theme’s functions.php file before your shortcodes, insert the following code:

function parse_shortcode_content( $content ) {

    /* Parse nested shortcodes and add formatting. */
    $content = trim( wpautop( do_shortcode( $content ) ) );

    /* Remove '</p>' from the start of the string. */
    if ( substr( $content, 0, 4 ) == '</p>' )
        $content = substr( $content, 4 );

    /* Remove '<p>' from the end of the string. */
    if ( substr( $content, -3, 3 ) == '<p>' )
        $content = substr( $content, 0, -3 );

    /* Remove any instances of '<p></p>'. */
    $content = str_replace( array( '<p></p>' ), '', $content );

    return $content;
}

									

And then add this line into your shortcode function or functions:

$content = parse_shortcode_content( $content );
									

Voila! You’re done. Now go test your now finally working shortcode.

Thanks goes to Donal MacArthur for this incredibly useful bit of information.