FortySeven Media

Articles in Design

Jonathan Longnecker

Jonathan Longnecker

April 06, 2012

Paper for iPad

If you're tired of going all analog on your Moleskine notebook and want to embrace the new hotness, check out Paper for iPad. It's a free app with several brush types availble for in-app purchase, and it looks like it's a ton of fun to use. I have a lowly iPad 1, but if you managed to snag an iPad 3 with the massively hi-res display Paper will be sure to please. Oh, you might want to pick up a stylus, too.

Paper is free on the App Store.

Jonathan Longnecker

Jonathan Longnecker

March 01, 2012

CSS Faux Browser Style on Your Images

Faux Browser CSS

While working on the new 47m site we decided that we wanted our portfolio images to look like they were in a browser. Easy enough, right? But I didn't want to save out every image with some fake browser thing at the top. That would be a huge pain if we ever wanted to change the style in the future. CSS to the rescue!

Let's start with your markup:

<div class="faux-browser">
   <img src="/images/image.jpg" />
</div>

I've opted for a pretty simple browser design, but you could totally get crazy with url fields, back/forward buttons. That would probably require an image, though and I was trying to avoid that. To get the browser are at the top we need the containing div to use the :before CSS selector.

Then add some CSS:

Keep Reading
Jonathan Longnecker

Jonathan Longnecker

February 27, 2012

Tumult Hype: An Easier Way to Deal with CSS3 Animations

Hype

Do webkit transforms make your head spin? Wish that cool thing you just did in CSS3 actually worked in more than 2 browsers? Hype to the rescue! It slaps a GUI on what you want to do and spits out CSS and Javascript code for those browsers that aren't in the cool club yet. Did we mention it supports mobile browsers, too?

Hype looks very promising!

Go check it out

Jonathan Longnecker

Jonathan Longnecker

February 16, 2012

Redesigning the FortySeven Media Site - Part Uno

FortySeven Media New 2012

Note - I was going to have this all be one article, but it was too big and I don't want to bore you. So! Part Uno will focus on the design and stragegy while Part Dos will focus on the dirty technical details - from HTML5 & CSS3 to Responsive layouts and ExpressionEngine programming. Part Uno begins now:

Have you ever climbed to the top of a mountain, cooked a whole pound of bacon, ate it, hiked back down and built a mansion with your bare hands? That's what it felt like redesigning the FortySeven Media site.

Version 1 of fortysevenmedia.com was super gray and boring (seriously, it was gray). We were afraid to be ourselves and thought that in order to make it as a design studio we needed to be stuffy, businessy and impersonal.

FortySeven Media 2007
2007 - So much grey. Why oh why?

Next year we sat down and decided that if we were going to have our own company we should darn well act like it. With version 2 we overhauled the identity, made snarky pages like “Don't Hire Us,” created a blog and before we knew it, we were getting business from all over the place.

FortySeven Media 2008
2008 - The retro was strong with this one.

We had stumbled onto something, and quite frankly re-designing that kind of success is scary, especially when it provides for your family. The Lizard Brain was in full effect. We got talked about quite a bit when we launched the old site and we didn't want miss that magic this time around. Every time I sat down to work on it I just got overwhelmed. Could we make something nearly as iconic as the first go around? Turns out it didn't matter, because after waiting 4 years we were becoming obsolete. Don't get me wrong, the business was doing better than ever, but the jobs coming through the contact form were less interesting than they were a few years ago.

Keep Reading
Jonathan Longnecker

Jonathan Longnecker

February 06, 2012

Pears - Common Patterns of Markup & Style

Pears
They're not juicy fruit, but they're still pretty cool.

Pears is a great idea from the Simplebits and Dribbble mastermind Dan Cedarholm - Create common UI patterns with the HTML and corresponding CSS for basic styling for a quick reference too. I think we all do this to an extent with snippets in our code editors, but this goes a bit further “pearing” them together (see what I did there?).

Even more interesting, it's also an open source Wordpress theme so you can use the framework to make your own pears.

Go check it out!

Jonathan Longnecker

Jonathan Longnecker

February 02, 2012

We’re Doing A Kicktastic Workshop at Converge SE 2012

Converge SE 2012

Those ConvergeSE guys have great timing! Right on the heels of our brand new site they've launched the conference site. Besides the awesome scrolling design and robotic battle dinosaurs (scroll down and see what happens to him!) the conference itself looks amazing. 

Nate and I will be doing a workshop based on the Kicktastic project we're working on, so if you want to find out our secrets in person, register on February 16th. We'll try not to ruin the otherwise great list of speakers.

ConvergeSE is April 27-28 2012 in Columbia, SC.

Go check it out!

Jonathan Longnecker

Jonathan Longnecker

February 01, 2012

Jonathan Longnecker

Jonathan Longnecker

November 01, 2011

Nest - The Thermostat You Actually Want to Buy

Nest

I never thought I’d be looking for a way to scrounge up the extra money to buy a thermostat, and yet here we are. Nest looks like a fantastic product from former Apple employees Tony Fadell and Matt Rogers. Packed with all kinds of sensors, gorgeous industrial design and intelligent software that learns your routines, you can tell the details have been sweated over for a long time. Take a look at the installation guide to see what I mean.

Long story short, these guys are tackling a huge problem with current iterations of thermostats and helping us to save energy and money, all while making it fun. Go check it out →

Jonathan Longnecker

Jonathan Longnecker

October 11, 2011

Gradient App - A Fine Way to Make CSS3 Gradients

Gradient App

Background gradients in CSS3 are a pain. Multiple syntaxes, color stops all over the place. And that’s just for a linear gradient. Anything other than that makes my head hurt. Thankfully Jumpzero has just released the beta of their Gradient App.

It’s a beautiful, simple app that makes it easy to select the exact colors you need, the direction and type of gradient, and then it spits out all the vendor prefixes you could possibly imagine. It will even do RGB and RGBA in addition to HEX codes. The UI is really great and I find myself actually enjoying making gradients. Who’d have thought?

I have no idea what Gradient will eventually cost, but you can grab it for free while it’s in beta. So go do it. Now!

Jonathan Longnecker

Jonathan Longnecker

September 09, 2011

Jonathan Longnecker

Jonathan Longnecker

September 07, 2011

Jonathan Longnecker

Jonathan Longnecker

September 05, 2011

Adaptive Images Made Easy

Adaptive Images →

As we’re working on a new version of the ol’ FortySeven Media site, we’re looking at putting together one of those fancy adaptive/responsive layouts. The one thing that has always seemed difficult was images. Even if you can scale an image down, you’re still probably loading the full size image on mobile which defeats the whole purpose.

This looks like a nice, easy solution.

- via Chris Coyier

Jonathan Longnecker

Jonathan Longnecker

September 01, 2011

The Web Type Revolution

The Web Leaders Hate Typography →

The choice of a typeface, the care given to kerning and to readability—it all sends a powerful signal. When your business card is nothing but Arial on a piece of cardboard, you’ve just told people how they ought to think about you… precisely the opposite of what you were trying to do when you made the card in the first place.

I love that Seth Godin is bringing this sort of awareness to people who never thought about it before. And thankfully we’re smack in the middle of a type revolution on the web. It’s only going to get better from here.

Jonathan Longnecker

Jonathan Longnecker

August 31, 2011

Jonathan Longnecker

Jonathan Longnecker

August 30, 2011

Get Rid of Pesky Zip Files After Unzipping in OS X

Remove zip file after unzipping

Quick Tip: Remove Zip Files in Mac OS X After Unzipping →

Mac OS X’s built-in Archive Utility is a handy tool that lets you easily expand ZIP files downloaded to your computer. However, the zip files by default stay behind, leaving your Downloads folder cluttered. Luckily, there’s a way to modify the preferences and have the downloaded zip files sent to your Trash.

This has always bugged me, and I’m glad to finally have those zip files magically disappear after unzipping. Sometimes it’s the little things, you know? Thanks, Tony!

via Chris Coyier

Jonathan Longnecker

Jonathan Longnecker

July 13, 2011

Kicktastic - A New Project to Tell You Our Secrets

Kicktastic. We've made 50% more money this year than last year. Want to know our secret

We’re excited to announce a new project – Kicktastic!

Here’s the deal: We’re making 50% more money this year and we want to let you guys (and girls) in on what we’re doing differently. It will of course be done in typical 47m fashion with loads of style and fun, but we need to know if you’re interested.

If you are, please take a minute, go to http://kicktastic.com/ and sign up to be notified when it’s ready!

Jonathan Longnecker

Jonathan Longnecker

January 24, 2011

What’s Up With the Twitter for Mac Icon?

Would the real Twitter for Mac Icon Please Stand Up?

Here’s the thing. I really try not to gripe about things like an application icon. If it’s horrible you can always go make one yourself, right? But the Twitter for Mac icon saga warrants some kind of discussion.

In case you didn’t know, Twitter for Mac is actually sort of Tweetie for Mac 2. The difference being that Twitter hired the creator, Loren Brichter and so version 2 was aptly re-named. In fact, the original Tweetie for Mac was so good that many people kept using it long after it went months without updates and no promise of a new version.

Keep Reading
Jonathan Longnecker

Jonathan Longnecker

December 29, 2010

A Look Back at 2010 for FortySeven Media

It’s time for the semi-regular year end post from FortySeven Media! 2010 was a nutty year filled with lots of traveling, some great client projects and some even better personal projects. Let’s get started, shall we?

Speaking, Conferencing and Traveling

While we got our first taste of web conferences back in 2009, 2010 took it to a whole other level.

LessConf

image

First off was LessConf in Atlanta. With speakers like Jason and David from 37 Signals, Cameron Moll, Chris Wanstrath from GitHub, Dan Martell, Clay Hebert and Peldi Guilizoni of Balsamiq we were energized and encouraged to keep making kick-awesome stuff.


EECI2010 US

image

Next was EECI2010 the US Edition in San Francisco. I got to speak at this one and we were reunited with a bunch of our old friends from the Leiden conference back in 2009. The city was fantastic and we even got to meet a few of our long-distance clients while we were there!

Keep Reading
Jonathan Longnecker

Jonathan Longnecker

November 30, 2010

FortySeven Media Camden Military Redesign Featured in .net Magazine

.net develop/discover/design

A few months back we were fortunate to get an email from the fine folks at .net magazine asking us if we’d like to write an article for their upcoming issue. Why of course we would!

Well, its finally out now and you can read all about our makeover process for Camden Military. We talk about the design process, photography shoots, the backend setup in ExpressionEngine, Wufoo form integration and the benefits they’re already seeing in traffic and conversions. Pretty exciting stuff!

.net FortySeven Media article - Camden Military Re-design.

Keep Reading
Jonathan Longnecker

Jonathan Longnecker

November 03, 2010

Designing the Kick Awesome Show Site: HTML5, CSS3, Fontface & Responsive Layouts

Kick Awesome Show

Funny story. Nate and I started the Kick Awesome Show mainly to pull the suck out of Mondays. I mentioned I was frustrated with spending the entire morning answering emails that came in over the weekend (seriously, enjoy your time off, people!) and not ever getting much done in the afternoon. We’d been talking about ways to post to the blog more regularly and somehow we came up with spending Monday afternoons shooting a web show. We tried it and we’ve been amazed to see something we started for fun become watched by so many of you so quickly.

After just a few episodes we realized it was time to move it to it’s own site. Fortunately this gave us an opportunity to invest in some serious HTML5, CSS3, Typekit and Responsive design. And a bit of iPad magic, too. Read on to find out more.

Keep Reading
More Articles:     < 1 2 3 4 >  Last ›