Sometimes, in our rush to out nerd each other, designers and web devs try and over-complicate the simple things. For example: animation. Sure, there’s nothing cooler looking than a really slick animation, and clients are always looking for the coolest and slickest. But when budgets become a concern, advanced scripting comes into question and deadlines come barreling down on you like  that boulder barreling down on Indiana Jones, then maybe you should be looking for a quick, effective solution to a pretty easy problem to solve.

No, no, no. Just… no.

Enter: the animated .gif.

I’m not talking about those cheesy blinking “under construction” .gif’s, no. There’s no reason to make your page look like a 1996 GeoCities page. Animated .gif’s have come a long way since those nightmares. What I’m talking about is adding a little something to your email design, for an extra pop when you want your email to stand out in your users inbox.

Now “movement” can be done in all sorts of ways on a website: any front end developer worth his or her salt can bounce, fade in/out or effect text and images on hoverstates fifteen different ways with a few lines of CSS, and even more with JavaScript, Flash or video. But achieving animation in an email is a whole other animal.

Email clients occasionally support video. Let me clarify… Apple Mail and iPhones support video in email. That’s it. Everyone else either shows fallback content or an empty image box, which is unacceptable when you’re trying to stand out in your customer’s inbox. Flash content is a big no-no – most email clients home automation security settings prohibit ActiveX controls like Flash from running. And don’t even think about trying to embed JavaScript in an email, the majority of web-based email clients will strip out your JavaScript content automatically and disable any active scripting contained in the campaign. Using JavaScript is a sure way to get your campaign sent straight to the spam folder.

But what about an animated .gif? Totally acceptable! The .gif has been around since 1987, and is supported by all browsers and email clients.

Animated .gif’s are a great way to add something special to an email campaign. Like when our client Burger Lounge wanted to spice up their monthly birthday emails, we immediately thought this would be a great place to use an animated .gif. And as it turns out: it was!

We built our .gif to match the movement on the Burger Lounge homepage, and optimized the animation down to nice nimble 300Kb file size. To make the email even more user-friendly, we built the email in a responsive manner, ensuring that the message get delivered no matter what type of device the guest was using for checking email: desktop computer, tablet or mobile phone. This is something we’ve been doing for quite a while now using our direct email program, contact:solved.

Animated .gif’s are supported in almost all major email clients.

Through compatibility testing of animated .gif’s in all the major email clients (shown in this graphic) we were able to verify that animation works perfectly in all these email clients:
• Apple Mail
• Lotus Notes
• Outlook 2000
• Outlook 2002 (XP)
• Outlook 2003
• Outlook 2007 *
• Outlook 2010
• Outlook 2011
• Outlook 2012 *
• Outlook 2013 *
• Android
• Gmail on Android
• Outlook.com on Android
• BlackBerry
• iPhone
• iPad
• Windows Phone
• AOL Mail
• GMail
• Outlook.com
• Yahoo Mail

* We did run into some compatibility issues with animated .gif’s working correctly in Outlook 2007, Outlook 2012 and Outlook 2013… but there is a workaround. Just make sure that the first keyframe in your animation contains the full animated message: this way, the full message in the image is still delivered in cases where the animation is not shown.

The lesson here is simple: animated .gif’s still have a place in modern day web design. No, they aren’t the main ingredient in your dish. They can, however, add flavor and texture to sites and emails when you need.

Have you seen an animated .gif used effectively in an email campaign? Do you have any opinions about using animated .gif’s in web or email applications? Share it here, we’d love to know what you think!

The post Animated .gif’s are cool again? first appeared on fathead design, inc..

There are already a ton of excellent tutorials for making a seamless background pattern in Photoshop or Illustrator, and I probably won’t be saying anything that hasn’t been said better elsewhere, but I thought I’d walk through my process for these.

Let’s take a recent (and ridiculously complicated) pattern I made for a restaurant client who sells Asian street food.

When I set out to write this blogpost, it occurred to me that not too long ago, I wasn’t allowed to make website background patterns this big or complicated. We’ve come a long way, and I was curious about why that was. So I asked Gregg. He was sitting 20 feet away from me at his desk, but I was feeling antisocial, so I IM’d him.

Ok! Nice. That’s good to know.

Gregg was very excited to talk complicated geeky things with someone, and he immediately walked over to my desk with a copy of CSS3 for Web Designers, opened to a chapter about layering multiple background images over each other for a super neat scrolling effect. I read it, and understood …most of it.

But let’s get back to business. The background image I had made in my proofs had a red vector pattern laying over an orange texture. I had planned on making it one flat image, but now I want to separate them and do this nifty parallax scrolling thing. The red vector part is a bit complicated.

…so we’ll leave complicated Illustrator vector patterns for later days. Let’s focus on the wood pattern, and a shortcut for quickly making a nice, seamless texture pattern in Photoshop. This is the technique I use for things like Scratch’s blackboard pattern, Tommy Lasagna’s marble pattern, any of your more “organic”, random textured patterns.

Start with a square of the pattern you want. This is a layered combo of a few free wood textures I found online, and tweaked and saturated until it was a 900 pixel square of just the right shade of yellow-orange.

I’ve got guides at all four edges, and guides bisecting it vertically and horizontally. You want these to be as precise as possible, so turning on your “snap” feature is helpful here. *That’s under the “View” dropdown in Photoshop’s menu bar. You can pick exactly what to snap to; in this case just snapping all works pretty well.

Take your block of pattern, and move it directly down, so what used to be the middle point is sitting exactly on the lower guide.

Now duplicate your layer, and slide it straight up, so the middle is sitting right on that topmost guide.

Clip off the edges (again, snap helps you be more precise here) and turn off the guides. Now your top and bottom edges will line up perfectly, and all you have to do is fix your new middle.

Some judicious cloning and healing brush will create the illusion of a smooth, seamless texture. A trained eye can see where you probably cloned it, but this is going behind another pattern, so it’s pretty forgiving. I should really give a tutorial on how to clone judiciously now, but that would take a lot of explaining, and my “method” boils down to “push those pixels around til it looks nice.” Maybe that will be a future blog post: Pushing Things Around Until They are Pretty.

You’ll have to do the same process from left to right as well as from top to bottom, but once you’re done, you can crop to the guides, and you’ve got a perfectly serviceable repeating pattern, ready to be dropped into the background of your site!

The post Let’s make a seamlessly repeating pattern! first appeared on fathead design, inc..

To use this template, do the following…

1. Download the perch_seo_and_meta.zip file here.

2. Add the <?php perch_content(‘Perch Meta’); ?> tag to your site’s page, in the same area from where you call your meta information.

3. Add the page_seo.html file to your /perch/templates/content dir.

4. Refresh your page from the user side, and the Page SEO field should show up as a template choice in the Perch admin.

Choose the Page SEO template in the Perch Admin

Now, specifics about these templates…

• I added a Page Title meta area to the very top of the template – though a lot of SEO folks say Title and Page Title are the same, there’s some weight behind the TITLE being weighted for use by the human user & the META TITLE being used by the bots. META TITLE will show up in search results higher, so I like to just go ahead and add both. Research shows that there are no penalties for using both.

• You don’t need an Author tag in the template, reasoning behind this is because that Author info should not change from page to page. Author info is included in the master php slug at the top of your page called _meta.php (which I’ve included for you use in the .zip). It looks like this:

_meta.php file

• Speaking of that  _meta.php file, it will aggregate the following info (in this order):

– CharSet
– CMS generator
– Perch Template
– Refresh rate (at 300) *
– Copyright Line (including .php call to keep your current year info current)*
– Author Tagline *
– Revisit Call *

 * everything asterisked can be universal to all pages, so should remain the same for ease of implementation.

Then, in all your .php pages you call the _meta.php page just after the <title> tag. I’ve also included a sample index.php page for reference.

index.php file example

I typically keep all my meta information in a separate .php file that gets called at the top of the page load before my CSS & JavaScript. Using this methodology, your template areas get pulled into every page to allow customization as needed on a page by page basis, and the universal items stay in the _meta.php file.

A note about robots: I’ve always found it best to use the “follow everything, index everything” school of thought. So to achieve a <meta name=”robots” content=”all,index,follow,” /> tag, set the Robots section of the template as such:

Perch “robot data” settings

And lastly, when you finish adding all your meta info thru the template, be sure and set these fields to be accessible by Admins only.

Access Settings in the Region Options Panel

Your everyday site users should be set up as Editors, not Admins – and by restricting access to the SEO settings, you’ll keep curious backend users from undoing all your hard work.

Let me know if you use this on any projects, I’d love to hear your feedback! If you have any suggestions on changes or modifications to my templates or methods, post a comment, I’d appreciate your input!

The post Adding Manageable SEO Content to Perch CMS first appeared on fathead design, inc..

The project in question was for our client Pecking Order, who wanted a site with a very handmade feel – perfect for a pretty extensive sprite use.

Pecking Order Sprite : Full Size

The quick solution to the problem was this: dev as you see fit, and just let your sprites grow however large you want them to grow. When you’re ready to launch, grab your master sprite .psd and do the following…

1. Draw horizontal guides at an exact horizontal proportion all the way down. Personally, I would recommend 2000px.

2. Then, create NEW sprites by cropping your master sprite at a slightly higher height than the 2000px height – doesn’t really matter, however tall you feel comfortable working with. However, lock your top cropping at those horizontal guides. Now, you’ll have three new sprites, all of varying heights – but all originating from points falling exactly 2000px down from the master. Don’t worry, this will make sense in a minute.

3. Name these new sprites the same name as your master but appended – ie: if your mastersprite is named “mastersprite.png,” name your new cropped ones “mastersprite-top.png,” “mastersprite-mid.png” and “mastersprite-btm.png.” Like this…

4. Now, open your CSS document and do a quick scan on all your sprite graphics.
• Do a find/replace to change ALL your sprite names to “mastersprite-top.png”
• When you find one that has a y-value of greater than -2000px, change the name to -mid.png and subtract 2000 from that y-value. So…

.cateringheader {
display: block;
background: url("../images/mastersprite.png") no-repeat -300px -3039px;
height: 158px;
width: 456px;
overflow: visible;
}

becomes

.cateringheader {
display: block;
background: url("../images/mastersprite-mid.png") no-repeat -300px -1039px;
height: 158px;
width: 456px;
overflow: visible;
}

5. Repeat the same process for any item with a y-value of greater than -4000px, changing the name to -btm.png and subtracting 4000 from that y-value.

6. Then, do future you a favor and notate your CSS sheet like so:

/*
*
Helpful note: when building sprites for mobile, images should not be any deeper than 2560px (iOS especially has an issue with sprites larger than 2560px deep). iPad will render these sprite graphics in landscape mode but _not_ in portrait. Devices rendering at 420px and lower are spotty at best. Emulators (including Adobe Shadow / Edge Inspect and Safari's User Agent will not pick this up.
*
* holla.
*
*/

At this point you might be thinking to yourself “Wait – having multiple sprites on a project… doesn’t that kinda negate the entire purpose of spriting?” No, not at all. It’s much better for site optimization to deal with three sprites like I’ve outlined, rather than deal with hundreds of small background images that have to get loaded individually.

Now, go find your 7th grade algebra teacher and tell her you were wrong – you did end up using that math in your everyday life.

The post Sprites: Physical Depth of Images as Relating to Responsive Design first appeared on fathead design, inc..

This happens to me quite often, and I finally found a workaround for this within my local MAMP dev environment.

1. Open up the config.inc.php file within the phpmyadmin dir with your favorite code editor. In your local MAMP environment, it should be located here:

Hard Drive » Applications » MAMP » bin » config.inc.php

2. Do a search for the phrase $cfg[‘UploadDir’] – it’s going to look like this:

$cfg['UploadDir'] = '';

3. Change it to look like this:

$cfg['UploadDir'] = 'upload';

4. Then, within that phpmyadmin dir, create a new folder & name it upload.

5. Take that large .sql file that you’re trying to import, and put it in that new upload folder.

6. Now, the next time you go to import a database into phpMyAdmin, you’ll see a new dropdown field right below the standard browse area in your “File to Import” section, like this:

Select that dropdown, and your file will show up right there. Hilight the db, and hit “Import” – and you’re golden!

The post Importing large .sql files into phpMyAdmin under MAMP first appeared on fathead design, inc..

1. Click on “Settings”

2. Click on your account in the Accounts list, and click on your address to get into the Account main screen.

3. Scroll to the very bottom of the Account window to the “Advanced” tab. Click on the “Advanced” button.

Here’s the Advanced settings in your iPhone’s Mail settings. This is where your iPhone keeps track of the Mail folders on the email server – just like the folders in your MacMail or Outlook application on your computer. Basically,  we just need to toggle the Trash folder off, save the settings, and then toggle it back on again. If your iphone is broke or is malfunctioning then visit this iphone repair san diego to help you. To do that, we…

4. Click on “Deleted Mailbox”.

5. You’ll see the Trash can checked as “Active”. Simply select a different folder – doesn’t matter which one (for this example, you could just select “Suppliers”.

6. Once you’ve selected a folder other than the Trash folder, save your settings by backing out of these windows until you get back to the main “Account” window. Click “Done” in the top right of the screen (refer to the first photo on this page) and back completely out of your Settings.

7. Now, click back into your Settings, and get back to your Mail settings – we’re going to re-select our Trash folder.

8. Go back thru the exact same steps we went thru above and get back to the Advanced folder listing (refer to the second photo on this page).

9. Re-select your “Trash” folder.

10. Save your settings once again by backing out until you can click “Done”.

That’s it, if you need more help then read this article – you should now be able to delete mail out of your account from your phone.

The post Settings to Adjust on your iPhone for Deleting Mail first appeared on fathead design, inc..

Installing OSX on a i5 Mini using Target Disk Mode

Man, do I hate OSX v10.7, aka “Lion.” Like, I really, *really* hate it. In a production environment, you don’t need a version of your everyday OS acting all hinkie… but that’s what Lion has been doing since I was forced into using it on a new Mac Mini I got about a month ago for dev.

After numerous attempts to wipe & install 10.6.8 (after having backed up files using a USB 3 duplicator, of course) using an external DVD drive, I was coming up dry. No luck, so it’s time to get creative.

Luckily, there’s a way to get rid of that nasty “not ready for primetime” OS as long as you’re not scared of getting your hands dirty. Here’s the methodology I used, based on this thread over on the Apple discussion boards… you’ll need the following:

• a new Mac Mini (referred to here as Mac #1) running OS 10.7 with either an i5 or i7 processor.

• another Mac (either MBP or iMac is fine, referred to here as Mac #2), as long as it’s fairly recent and has an installed i5 or i7 processor.

• the original OS 10.6 install discs that Mac #2 came with (those are the grey ones).

• a FULL RETAIL INSTALL version of OS 10.6 (that’s the one with the Snow Leopard on the cover)

• a FireWire 800 cable

The process…

1. Grab your Mini, and go to System Preferences » Startup Disk. Tell it you want to boot it into Target Disk Mode.

2. Hook up the FW800 cable between the Mini and your i5 Mac (for me, I used my 2.4 i5 MBP), and restart the Mini in Target mode. The Mini should pop up on your Mac’s desktop as an external disk.

Now, here’s where you get creative…

3. Launch Disk Utilities, nav to the Mini, and erase the entire disc. Personally, I always do a “zero out data” and (depending on time & existing data) possibly a low level format.

4. After the format & erase is done, pop the RETAIL version of the 10.6 installer disc into Mac #2, and hit “Install.” Tell it you want to do a new install of the OS on that Mini (that’s Mac #1) sitting on your desktop. Your Mac #2 will quit every open app and go into an install mode – this is okay. It needs to do this to install 10.6 on Mac #1.

5. IMPORTANT STEP: about 20-30 minutes into the install, Mac #2 will try and restart. HOLD DOWN YOUR OPTION KEY AT THIS POINT. Your Mac will be at a grey screen here, showing you available discs for booting. Here’s where you eject the retail version of 10.6, and pop in the 10.6 install disc that Mac #2 came with. Once that newly inserted 10.6 disc shows up, highlight the disc and choose it as your boot volume.

6. The install will pick up where it left off, installing all the i5 or i7 proprietary drivers along with the remaining 10.6 pieces. When the install is done, Mac #2 will want to reboot. Again, this is a good thing.

7. After reboot, the Mac will restart using Mac #1 (that’s the Mini) as the primary drive. Yeah, you might be *using* Mac #2, but you’re booted to the Mini so it’s all good. Run thru the registration process, then run all OS updates until you are running a full clean version of 10.6.8.

8. Select “Shut Down.” This will shut down Mac #2, but Mac #1 is still on and in Target mode. Push & hold the power button until the Mini shuts off completely.

9. Unhook the FW800 cable. You’re done.

10. Power up both Macs. Mac #2 is just as you left it, and Mac #1 is running a rock solid version of 10.6.8.

Let me know how your install goes in the comments!

The post Installing OS 10.6.8 on a Mac Mini built for 10.7 – yes, it’s possible. first appeared on fathead design, inc..

We use ChartBeat on a daily basis, and today our ChartBeat control panel was pretty fun to watch. We launched a website today for The Rumpus Room, a restaurant owned by our client. The Bartolotta Restaurant Group (based in Milwaukee, WI), and watched the traffic grow all day using this handy, nerdy tool. ChartBeat is used for monitoring realtime user stats on a daily basis by sites like BoingBoing, Threadless, Starbucks, Groupon, The Onion… and every single hosting client of fathead design.

Check it out for yourself – just click this link and you’ll get a look at the realtime stats for this site, which you just contributed to by reading this post.

The post Rock Out With Your .doc Out first appeared on fathead design, inc..

It is also kind of gross. Staying in touch now includes so much, well, touching. Hands all over everything with touch screens within arms reach everywhere. Businesses, to malls, to grocery stores, to airport bathrooms. Ew. The element of touch to the mix not only has the Felix Unger’s of the world a little freaked out, but I think it has really boosted sanitizer sales planet wide. I have a crystal clear memory of one of my first iPad encounters. A client meeting was planned and the little glowing beast was the star. On it proofs were presented and passed around, touched, handled, fondled, retouched and touched again. At meetings end, it was a fingerprinted, smudgy, dirty mess only a crime lab would love. I certainly didn’t want to touch it. At all.

Moral of this little technology unleashing is this… I think we are all on the right path. I think that ultimately all this will jibe even smoother, more elements will be developed, added and easier to use. I am delighted at what the future holds. I just think, no, I know, I just know that for the time being at least, I should buy some stock in Purell, cause, well, ew.

*this of course excludes the flying cars we were promised.

The post iSanitize… or “ew, technology.” first appeared on fathead design, inc..

What did I do on my summer vacation? Contemplated the rendering of border-radius in different browsers, of course.

While packing for our family summer vacation, my 11 year old daughter timidly asked me if I was going to bring my laptop with me to Mexico. She didn’t have to explain why she was asking – she’s probably still haunted by the vacation we took to the Dells a couple of years ago where I spent two solid days sitting by the pool on my laptop, fixing an ecomm project for a new client that had gone horribly wrong. The nightmare was no fault of ours, we inherited the nightmare from the client’s previous development firm – it was just bad timing that it happened right when I went on vacation.

I told her I thought her mother wouldn’t let me go if I tried to bring my computer, because we were going on vacation – and we weren’t going to work on vacation this time (admittedly I’m a bit of a workaholic, to put it mildly). Of course I would bring my iPad*… but only so she and her brother could watch movies during the flight. I promised her I wasn’t going to work, instead I was going to be the Dad I wanted to be for an entire week: playing with my kids on the beach for seven days straight. Totally unwired.

Fast-forward a few days, where she and I were laying on the beach in Mexico – resting for a bit after playing in the ocean. She brings out her DS, and I bring out a book on web design – specifically CSS3 For Web Designers by Dan Cederholm, from the A Book Apart series. My daughter looks at me and says “Dad, why are you reading a work book – you’re on vacation! Read something interesting!

I’ll tell you what I told her – this sort of stuff is interesting to me. Sure, we’d been planning this vacation for six months… but I’d had this book sitting on my desk for about the same amount of time. Of course I’d already read it cover to cover, along with the other three books in the series that have so far been published. Any real web designer worth anything is already waist deep in CSS3 and HTML5, implementing it more and more into every project possible. But the opportunity to read thru the entire series again, uninterrupted by phone calls, IM windows, text messages, site alerts or deadlines, well that was an opportunity upon which I wasn’t going to miss out.

So with the sound of the ocean in the background, and the smell of suntan lotion and salt in the air, I told her this… I honestly love what I do. I’m lucky to have an occupation where I enjoy going to work in the morning, work with co-workers and clients who I truly enjoy spending time with, and constantly get to learn new things.

Yeah, I might not have been “totally unwired”. Sure, I Facebooked pictures of my kids playing in the pool and getting henna tattoos, and I FourSquared my location from the beach whenever I was close to the one wifi spot at the resort… but hey, she played on her DS.

*Confession: I do have Gusto installed on my iPad, just in case I need to edit a site in an emergency. But sssh… don’t tell my kids.

The post What I Learned On My Summer Vacation first appeared on fathead design, inc..