Mister Nifty » Brian Fegter

The Cardinal Sin of Design

Brian Fegter — Tue, 27 Sep 2011 07:54:21 +0000

About ten years ago, I was sitting in a graphic design class and the teacher asked us to present a composite image for a mock ad campaign. The first image presented was of a skyscraper and was stretched disproportionately vertically and horizontally. I’ll never forget the look of disgust on the teacher’s face as he lit into us about maintaining proportionality and ratio aspect. Our show-and-tell turned quickly into a diatribe that lasted the remainder of the class. He repeated “Stretching an image disproportionately is the cardinal sin of design” so many times it burned in our brains. We dared not present an image that looked to be stretched or skewed in any shape, manner, or form.

Since that unforgettable mental lashing, I’ve always been keenly attune to aspect ratio in typography and photography, especially in the church world. If you’re not familiar with aspect ratio, it is simply the relationship of the width of an image to its height. For typography (fonts), each letter must be treated as an image and maintain the ratio of height to width. When the width of an image or font is increased, the height must also be increased to maintain aspect ratio and vice versa, or else it will appear skewed and awkward. There is never an instance when fonts or images should be proportioned outside of their original aspect ratio. This is the cardinal sin of design.

Here are some examples of skewing an image.

Original Image – I shot this at my brother’s wedding last month
Skewed Horizontally
Skewed Vertically

There is a cognitive dissonance that is created when looking at the last two images. Even though, at a glance, the images look fine, the mind red flags the image and says “There’s something not quite right here.” There are three things that happen when you present a skewed image in print or on screen:

You distract from the message as the mind will try to reconcile the proportional offense
You do a disservice to the photographer and present their work inappropriately
You lessen the quality of your production

Certainly, completely untrained eyes will miss a slight skewing of an image, however, most people will catch it either consciously or subconsciously. The bottom line is that someone worked hard to create a beautiful photograph. Don’t diminish the quality of the photo by stretching it. The two ways to properly resize a photograph are cropping and maintaining aspect ratio while resizing.

Cropping means you cut away parts of the original image to fit the dimensions of your project. Cropping is perfectly acceptable and a frequent practice in design. A cropped image might not be the original image size, however the subjects still maintain their proportionality. If you must resize an image, the rule-of-thumb is always downsize, and never upsize (unless you are using an algorithmic software such as Genuine Fractals). When downsizing an image, grab a corner of the image and press either the SHIFT or CONTROL key (possibly the COMMAND key for Apple users) while dragging the transformation handle toward the center of the image. If the bounding box adjusts the width and height automatically and the image stays intact, you’ve succeeded. If not, try again or read the application’s help section to find the keystroke assigned to lock aspect ratio. This applies to typography as well.

A few weeks ago I walked into the foyer of our church to find a sign company employee installing custom letters on the wall. Our church uses a script font for our taglines. I was horrified to see that the sign company designer had skewed the script font vertically and the letters looked absolutely stretched. I asked several people if they saw something wrong, and they replied “No.” I then held up a printed piece with the proper proportionality of the script font next to the lettering on the wall and their eyes opened wide. They could not believe how much of a difference it made.

The truth is, it’s a bit more difficult to spot stretched typography if you aren’t a designer. So, what’s the point? Why are you being so petty? I’m glad you asked. Font faces were created to be beautiful and portray a message with style and elegance. Skewing a font diminishes the quality of the font just as the integrity of the images above were harmed. If it’s a popular font, it certainly will be a recognizable error to the masses. Church identities are mainly communicated through typography. When a logotype is skewed and stretched, it directly affects the quality of the brand. We should always put our best foot forward when communicating the message of the Gospel to the community. Certainly, there are people who would be turned off by a cheap looking stretch job.

The number one reason why designers skew and stretch is to fill up white space. White space is a powerful concept that helps direct readers to key points and then directs them to a sub point. When you’re tempted to stretch a font’s height to fill up vertical space or make an image fit your project size disproportionately, remember that this is the cardinal design sin. There’s never a good reason to stretch images or fonts. Saints resize proportionately, sinners stretch and skew.

Go forth and sin no more.

The Cardinal Sin of Design is a post from: Mister Nifty

Stay Connected

My Favorite New Writing App WorkFlowy

Brian Fegter — Wed, 21 Sep 2011 05:31:14 +0000

I stumbled upon a simple web application called WorkFlowy. At first glance I was a bit bored to be honest. I thought, “Oh great, another online text editor and outline application.” But, I gave it a shot to see if I could organize an idea quickly. After writing a few outlined notes, I had the WorkFlowy epiphany. I accidentally pressed a key combination and it navigated the entire page into the sub outline I had created. I pressed it again, and it took me one level deeper, showing me only the information connected to that grandchild bullet. In other words, the zoom in/out feature makes one text document not just one book, but a library of information that I could navigate through with simple key strokes.

When you traverse an outline, WorkFlowy displays breadcrumb links to help you zoom out from your current position on the document. You are given one document to create a world of information. Main points are like books, child bullets are like chapters, etc… You can literally map your entire ministry on one easily accessible document. The search feature is simple, quick and accurate and helps you find information fast. The plethora of keyboard shortcuts makes traversing your document super fast.

Finally, the ability to export specific contextual information in plain or rich text is off the chain – yes I throw down some slang when I’m tired. If you’ve been kicking the can to get an idea organized, or you simply need to diagram your workflow to help your productivity, WorkFlowy is a jewel.

I recommend everyone to start your Workflowy document today. It’s dead simple and free to use.

Go to WorkFlowy

My Favorite New Writing App WorkFlowy is a post from: Mister Nifty

Stay Connected

Free video converter for Android, iPad, iPhone formats

Brian Fegter — Wed, 17 Aug 2011 15:54:29 +0000

Miro is a super simple and free video converter for Mac that allows you to convert a plethora of video formats for quite a few mobile devices. I’ve used this plenty of times to optimize and convert videos for mobile devices. Video conversion is typically a techie task, but Miro makes it dead simple for anyone to easily convert videos.

Here’s a screenshot of the video conversions that are available.

What are you favorite video converters? Let us know in the comments.

Get Miro Video Converter here

Free video converter for Android, iPad, iPhone formats is a post from: Mister Nifty

Stay Connected

NiftyMaps – Print Google Maps The Easy Way

Brian Fegter — Tue, 26 Jul 2011 04:21:58 +0000

NiftyMaps is a small application to help you easily generate branded Google Maps printouts.

NM was originally created for our church outreach visitation efforts. Typically, our admin staff would browse Google Maps and print off dozens and dozens of ugly Google Maps for the team. This was painstaking as it took many hours to complete this task. I built NiftyMaps to generate a large number of maps within minutes, formatted in a nicely branded template.

Features

Control your destiny with granular settings in the config file
Allow a list of approved recipients to receive lists of generated map links
Easily add your own branding
Beautifully simple branded map template
Google short URLs for easily sharing a map with a friend
Archive your generated maps via email.
Password protection for sending map lists via email.
Does not use a database! No high techyness required.

Screenshots

Requirements

Google Maps API Key (signup link included)
Google Services API Key (signup link included)
PHP5 or greater
Must have mail() enabled in PHP5 (no SMTP support yet)

Demo

Check out our demo here: NiftyMaps Demonstration

Installation

Upload the /maps folder to your web server
Open and configure /inc/config.php in a text editor (Notepad++)
Enjoy yourself!

Investment Cost

Nifty Maps is a one time investment of $10.00 including lifetime bug/update patches (posted on this page).

Purchase Now!

Other Stuff

This product has no official support forum and is sold as-is. No refunds will be afforded as this is a digital product. Please submit bug reports below in the comments. I will release patches on this page on a regular basis (on this page). For general inquiries, use the contact form above.

NiftyMaps – Print Google Maps The Easy Way is a post from: Mister Nifty

Stay Connected

Devs – It’s Okay To Have Fun

Brian Fegter — Mon, 27 Jun 2011 16:45:36 +0000

Recently, I was assigned a task for my job to create a jQuery script that deleted elements from a sortable list, and then gave the user the ability to undo the delete action. I thought I would have a little bit of fun with a doctrine I don’t subscribe to at all, but it worked for this application.

I created a hidden element to store unwanted list items:
.
Then I created a hidden element wrapper for the undo button that shows once the delete button is clicked:
.
Once the undo button is clicked, I set a Javascript variable to count the number of items in “purgatory” as follows: var lostSouls.
So, in a nutshell, when a user clicks delete, they send the unwanted list item (lostSoul) to purgatory. When they click undo, the user rescues the lostSoul from that dreaded holding cell.

The point of this silly story is that you don’t have to get bored with your job. There are plenty of other ways to keep the ‘fun’ in functional, especially with long boring code blocks. If you enjoy what you do, you never have to work a day in your life.

Devs – It’s Okay To Have Fun is a post from: Mister Nifty

Stay Connected

To print or not to print a social media icon, that is the question.

Brian Fegter — Sun, 26 Jun 2011 04:18:47 +0000

I took this photo at the gas pump this morning. It didn’t set right with me. This was an sticker advertisement for a fuel supplement and the designer appended the default social icon trio to the bottom of the ad. I stared at this while my gas was pumping (sans the fuel supplement) and tried to figure out why this irked me so much.

Frankly, I don’t mind social icons on websites that much as they serve the function of directing a user to a certain URL. Placing social icons on print collateral seems to be counter-intuitive to me. The default web behavior is to click on the icon and find pure social awesomeness (or not) beyond the home page. The printed icons in question are commonly used on websites everywhere. There was a dissonance in my brain where Mr. Subconscious was saying “Click click clickety click those bad boys” the Mr. Conscious was retorting “Idiot, this is a print ad.”

The cardinal sin of this ad is they have required the user to go on a clueless scavenger hunt. They are technically saying, “We’re somewhere in the adjacent galaxies of Twitter, Facebook, and YouTube, now come find us. We hope you remember the name of our product for your search.” This creative director had a misfire on one of their cylinders when approving this ad. It is tantamount to telling the customer, “We have a store in the United States. We’re not going to tell you where it is, but we’re going to represent its location with this awesome Google Maps icon that tells you we are super duper tech savvy.”

The bottom line for me is placing social media icons on print media is simply ineffective without…usernames. Icons without context never get searched. People will remember a simple user name like SaveMoneyOnGas, but probably won’t remember to search “Super Mileage Booster Fuel Supplement Twitter Feed.” The point of all of this is what we do on the web doesn’t always translate to other forms of media. You have to adjust for the user experience by supplying enough information in each media form. These days, it’s extremely probable that your print media won’t make it to the user’s office space, therefore rendering your cute, cuddly icons useless.

Don’t be one of “those” that just drag and drop the cliche’ social media icon trio into everything you do without thinking about its user experience ramifications. My personal thought is that people who overuse social media icons for the sake of proving their techno guru-ness are trying to compensate for not being tech savvy at all. Any thoughts from the peanut gallery?

To print or not to print a social media icon, that is the question. is a post from: Mister Nifty

Stay Connected

Wordcamp St. Louis – August 6, 2011

Brian Fegter — Wed, 22 Jun 2011 13:07:20 +0000

If you’re a WordPress freak like I am, don’t miss Wordcamp St. Louis this year. The company I work for is putting on this venue to help others learn and become more acquainted with WordPress. You will also be able to rub shoulders with influential WP guys and network with designers and developers. It’s a one-day event of awesomeness that goes from 8am to 5pm at Maryville University. If you register early, the cost is just $20.00. Late bloomers will have to pay $30.00. I will be there taking photos and helping out as a gopher here and there.

Go get your register on at 2011.stlouis.wordcamp.org

Wordcamp St. Louis – August 6, 2011 is a post from: Mister Nifty

Stay Connected

Build Your Own Server Tutorial

Brian Fegter — Fri, 20 May 2011 10:17:49 +0000

Several people have asked me how I moved Mister Nifty over to Rackspace Cloud Servers. It’s not as easy as a shared hosting environment because you have to build your own server. In the following screencasts, I will show you how easy it is to create a server, a database, and install WordPress in under 15 minutes. The tutorial does not include server security or DNS mapping for your domain, but it’s enough to get your feet wet with web servers.

The first thing you need to do is open an account with Rackspace Cloud Servers. A server running 512MB with 10GB of space will run you about $20-$25/month. You pay for the bandwidth you use. So, if you have a low traffic site, your costs will stay low.

Next, watch the following screencasts to setup your server:

In under 15 minutes you can have a full-blown WordPress site running on your brand new server!

To map your domains you will need to check out this tutorial about virtual hosts if you wish to use more than one domain on your server. You will also need to add your DNS to Rackspace by selecting your server and clicking the DNS tab. Your configuration should look something like this: http://d.pr/DC4x You will need to change out the IP for your own server IP. Finally, you will need to point the @ record of your domain’s DNS to the IP of your server. This can be done where you purchased your domain name.

Again, this tutorial is meant to be a beginners guide to building a server. There are many distributions of Linux. I’ve selected Ubuntu because it’s what I’m familiar with. If you have any questions or suggestions please place them in the comments below.

Build Your Own Server Tutorial is a post from: Mister Nifty

Stay Connected

Free WordPress Theme Options Panel

Brian Fegter — Tue, 10 May 2011 03:54:00 +0000

If you’re a WordPress developer or a shade tree coder looking to integrate options for your theme into the Worpdress administration panel, look no further. The company I work for just made our options framework available to the public for free under GPL2. This means you can download the framework, drop it in your theme, hook it in and start making some awesome options. Here’s some of the features we’ve built into the framework:

Image uploading
Typography Engine – works with Google Webfonts and font-face fonts
Layout Engine – register new layouts for your users to choose from
SEO – helps get your site get more visible
Style Engine – similar to the layout engine, but for changes only to color/images etc…
Multiple input types – text, textarea, dropdown selects, page dropdowns, category dropdowns, multiple selects, multiple text inputs (user can dynamically add more), checkboxes

This is just some of the awesomeness built right in. You can take it and make it your own with your own branding. You can always follow us online for updates as well when we release more awesome features. The next release will have automatic updating for a one-click solution to get the latest package.

If you have any questions drop me a line. I’ll help steer you in the right direction.

Get the Theme Framework here.

Free WordPress Theme Options Panel is a post from: Mister Nifty

Stay Connected

Media Temple Web Hosting Issues

Brian Fegter — Mon, 09 May 2011 14:17:19 +0000

——-Update for those who’ve read the article already———-

I have been contacted by several people saying this issue is my fault because my wp-config WordPress files are hard-coded with the MT database servers. When MT changes my DB settings, I have to change my config files. This is not true at all. I use the MT server variable which Media Temple controls. When they change this variable, it puts my sites back online.

————————————————————————-

First, I apologize for Mister Nifty being down erratically the past three weeks. The issue has arisen with my web host, Media Temple. MN gets a fair amount of traffic, but nothing substantial in comparison to other major tech blogs. We get 5,000-7,000 unique hits per month. I have several other sites that get minimal traffic on my shared hosting plan as well. I really don’t need anything more than a shared hosting plan for the traffic and data storage I use. I’ve had several other web hosts in the past with the same configuration and I never had issues with keeping my sites in a shared environment.

The past three weeks have been an absolute nightmare for me. The Saturday before Easter the director of an orphanage that I host called me frantically that their site was down and this was the day of their big launch fundraiser. We had setup a Paypal donation solution for donors to give. This was rendered useless because their site was down. We had to copy/paste a Paypal button link every time someone wanted to donate. That evening I contacted support and they ‘fixed’ the issue.

They said my sites were bursting (unusually large traffic to the databases) and they moved me to a dedicated database environment so my account didn’t affect others in the shared pool. I totally understand and I really didn’t mind them doing this. The only thing I had issue with is all of my sites run on WordPress, a database-driven platform. Once they migrated me to the dedicated environment, they failed to hook all the databases back up again leaving every last one of my sites with horrid database connection errors. I was pleased that the sites were up again on Saturday evening.

On Easter Sunday, I was at church preparing for our service and I start getting a barrage of text messages from churches freaking out that their sites were down and they couldn’t pull up their embedded streaming players. Since I was at church, I couldn’t take care of this issue until after service. I contacted support after holding for over an hour, they fixed the same exact issue as the night before. Needless to say, every site I had was down on Easter Sunday. Hundreds of people who view webcasts didn’t get to see the services on Easter Sunday of all days. This was just insult to injury as the issue had been ‘fixed’ the night previous.

Over the next two-three weeks, I’ve experienced this same iteration no less than ten times with MediaTemple. I’ve spent about 6-7 hours talking to techs and emailing support. I’ve talked with their Twitter support, fielded calls from senior techs and the issue still remains. I woke up to another automated email this morning telling me that they moved my databases again. I visited MN only to find a database error as Media Temple did not hook the databases back up again after they migrated.

You can imagine how frustrating this has been as I have to stop what I’m doing and call Media Temple or wait for ticket support to get back with me. I will say that their Twitter support is very quick and responsive. I’m pretty upset that the MT techs keep pointing the finger at me for taking up too many database resources and won’t look at their own issue of hooking databases back up when migrating a customer. Every single tech except a senior tech named TJ has pointed the finger at me and inferred that this was my fault. This can’t be my fault that the DB’s aren’t hooked up properly when I had nothing to do with the migration. I asked to speak to an executive but was denied by one tech who said it was impossible to connect me to someone of the executive level. I’m hoping someone from MT reads this and kicks this up to a supervisor’s supervisor’s supervisor’s supervisor’s executive supervisor.

Needless to say, I’ve lost trust with six people whose sites I host and they are finding other solutions because of MT’s persistent issues. It’s disheartening, but I have to move on. I’m switching hosts so that Mister Nifty can bring you all the goodness you enjoy on a consistent basis. I hope you will look elsewhere as Media Temple when shopping web hosting. If you have any good hosting suggestions for others, please post a comment below. Thanks for your patience and again I apologize for the downtime.

Media Temple Web Hosting Issues is a post from: Mister Nifty