I had the opportunity to chat with Tim Smith of The East Wing podcast the other day. If you have a few minutes and want to listen to me ramble about design, clients, education have at it!

Saying ‘No’ is one of the most difficult things in the world for me.

I like making people happy. I like designing and developing awesome internet things. I also really like making money. So why the hell would I say no to projects that help me do all of these things?

OMG! People will pay me to make websites?!?!

In the beginning saying ‘Yes’ to every project that came my way was exciting. Hell yes! People think I’m awesome enough to make something AND pay me for it!!! While this was awesome for a while, I ran into some projects and clients that were’t a great fit for me.

When you are first starting out, it’s difficult to turn down jobs. If you don’t work you don’t get paid! It took me a while to figure out which kind of projects weren’t the right fit: outside of my skillset, or outside of what I enjoyed doing, or clients that weren’t the right fit personality wise. It’s ok to pass on work, and odds are you probably know someone who is a better fit for the job!

Remember why you are freelancing!

One of the reasons I quit my 9-5 was so I could choose the projects I worked on and the people I worked with. While I was saying ‘Yes’ to everything I was forgetting the very reason why I wanted to work for myself.

After a few not so great experiences I finally trusted my gut and said ‘No’ to a project.

There were a few red flags (or rather animated neon flashing neon marquee tags) that came up:

1. Visual design was not a priority
2. Technical specs of the project were hard to pin down
3. Timeline was very short

Part of me wanted to work on this project because the subject matter was cool. But my gut was telling me this will turn out badly, overbudget, over hours and may ruin my upcoming out-of-the-country vacation. So I took a risk and said NO!

Recommend someone else

I emailed the client and informed them that after the initial stages of the project, it turns out that this was just not going to be a good fit. I was short and sweet with the email and referred the client to a few other designers and developers and that was that!

I was a bit scared of saying no because this would have been one of the biggest projects to date that would have landed. I was also a bit scared because if I say no to this WHAT ELSE WOULD I WORK ON?!?!?

Long story short: other awesome work came in (thanks to other friends who pass on projects as well). I was much happier and I enjoyed my vacation.

So moral of the story: Trust your gut! Say ‘No’ when you need to.

Have you said no?

I’d love to hear about your experiences with saying no to a project. Did saying no turn out well? Did it turn out horribly? Leave a comment and tell me about it!

Photo by mslavick

If you don’t already know I do a weekly/monthly podcast with my friend @cmdshiftdesign called Pagebreak Podcast. If you are into books and articles related to design, development, coding, marketing etc you should go check it out!

Listen to the latest Snippet Episode!

So you may have noticed that things look a bit odd on my blog these days. I gutted my years old WordPress them and am starting over from scratch. Its about time I gave my own blog and website some love!

I’ll be attempting to ‘design in the browser’ with my little bits of spare time. So stay tuned and feel free to check back and view source.

This is a guest post written by @jimmynotjim

On Monday my feeds, as I’m sure yours as well, blew up with the launch of BostonGlobe.com. It’s been a much anticipated launch both within and out of the design community. I was excited to get home and check it out on a browser other than my iPhone just to see how (and to try and decipher why) they handled the content. It didn’t take long for the Negative Nancy’s to start complaining and cut into that excitement.

A few were unimpressed. With all the hoopla surrounding ‘Responsive Design’ lately the Globe fell short of their expectations. Most though complained about the subscription requirements. The number of people expecting free access was outstanding. One tweet read “The future of web design is behind a paywall, something not quite right about that…” and another “A holy screw you to The Boston Globe for paywalls” and even “I’ve always craved something between a newsletter and an AOL keyword that I can’t show my friends” from one ‘web star’.

Surprisingly, I wasn’t shocked. I myself am a child of Napster and have ‘shared’ more music, movies and software than I care to mention, but at some point I grew up. I realized that if I want to get paid for my hard work, I should be paying for someone else’s. I guess some people never grow up, but I digress. I’m not here to add more noise by complaining about the complainers, but to point out what I believe they are missing in hopes of opening their eyes.

First, this is more than just a responsive layout for a blog. A newspaper as large as the Globe has multiple layers of content, a wide spectrum of readers, and who knows how many stakeholders with their own opinion on what’s important. I think @simplebits tweet said it best, “Congratulating @beep, @scottjehl, & @filamentgroup on their groundbreaking work with 1,659,230 requirements for the new http://bostonglobe.com.”

The fact that they were able to pull this off is frankly a miracle. Did anyone else happen to sign up for a free account and explore the site? If not you really should. You can easily and intuitively access back issues, save articles for later, use swipe gestures on mobile, and connect with the writers and editors directly. I’d like to see these naysayers examples of ‘dime a dozen’ responsive sites that offer as much for as large of an audience, I can think of only a few who come close.

The second issue, about the paywall has really gotten under my skin. When Apple came out with the first iPhone and announced they had changed the game, did everyone complain about the price of admission? No, they stood in lines for hours and shelled out hundreds of dollars for that precious piece of design. Should we expect the people that spent who knows how much time and effort on this project (and all the writers and editors who will publish to it) to go unpaid? We’ve all read the quotes about the average person being more likely to get struck by lightning/eaten by a shark/in a plane crash than clicking an ad, I’m willing to bet everyone at the Globe has too.

How is a paywall any different than a subscription to Netflix, Hulu Plus, Rdio, etc? Why is it were willing to throw our cash at entertainment services (or Apps and even Apple themselves) but aren’t willing to squeeze out a few bucks (basically a large coffee) for well researched, thought out, written and edited news? I’m sure this question was asked and researched at the Globe, I doubt they spent all this effort and said, ‘eh, lets just do a paywall’. I would hope Ethan et al. would have put up a decent fight if it wasn’t.

As I stated before, this isn’t just a responsive layout, it’s a multi-layered service offering a well thought put and executed experience. A premium news service like that deserves a premium price. After all, if all we want is sound bites that barely scratch the surface, we have plenty of crappy sites from AOL, Yahoo and the other failing web giants to look to, or we can always just visit the Globes free version Boston.com (that’s right, they do offer free content).

Just so it’s clear, I’m not saying the Globe site is perfect for me or anyone in particular, but with as broad a viewership and the number of moving elements they had to work with I think they did an exemplary job. So what’s your take? Did the Globe’s design fail to meet your expectations or are you in the “it should be free” camp? Are you as happy with the results as I am? I’m curious to hear everyone’s opinion.

About @jimmynotjim

My name is James, but you can call me Jimmy (and even Jim if you like). I’m a 29 year old carpenter turned web nerd, living and working in Boston MA. In addition to design I enjoy photography, drawing, cooking, camping, hiking, and of course spending time with my loving family.

Twitter: @jimmynotjim | Web: JimmyNotJim.com

A few months ago I did something crazy: I QUIT MY JOB. I had noticed a growing trend in my attitude towards my work in general. I was more excited about what I was working on before and after the hours of 9-5. So I took a bit of a leap of faith and decided to strike out on my own.

If you follow me on twitter, I’m sure you know how things are going for me since I’ve been doing the freelance dance. This blog post is a bit of ‘status update’ that is more than 140 characters. I’ll talk a bit about running a business, organization, income, friends, sanity and the future.

(Awesome illustration of me by my friend Jimmynotjim)

Business Stuff

At my last job I was surprised by the amount of meetings and phone calls my boss had scheduled on a daily basis. It seemed as if he was always running from meeting to meeting. Well guess what?!?! This is happening to me, but I’m keeping things in check.

I am keeping in person meetings to a minimum. While they may be helpful for some clients, most times an email, phone call or skype screen sharing session with an agenda will suffice. Point here is that I always ask or set an agenda before a call.

I’m also surprised by the amount of time I spent writing estimates, tweaking contracts and attempting to get invoices paid. Not that I have had any huge problems, but this is stuff that just takes time. Probably more than you realize. This is why I’ve accounted for some ‘admin hours’ in my estimates. Just a bit of padding to cover this time.

Organization

At the core of all this business stuff is organization. I’m not a hugely organized person by nature so I have to work hard at staying organized. Emails, invoices, contracts, multiple versions of designs, coded templates, wordpress installs, version control, OH MY! Luckily I’ve found some super awesome web apps that help save my ass on a daily basis:

• CurdBee – Invoicing & Time Tracking
• Basecamp – Collaboration, Client Corralling
• Git & Github – Saving my ass, Collaboration, Version control
• Mint – Keeping track of finances
• Kodery – Saving all those wordpress code snippets I can never remember!
• Gather Content – Getting specific content from clients

Income

One of my biggest fears after making the jump was income. I had a pretty decent salary at my last job, so my goal was to try to make at least the same wages. As you all know freelancing income tends to come in waves. $2,000 here $6,000 here $500 there. This is all fine and dandy, but my expenses are regular and need to be paid. This freaked me out a bit so I was on the lookout for a steady gig.

Luckily a friend recommended that I inquire about a part time teaching job at a local school. (CDIABU). I’ve done some public speaking in the past and survived (and rather enjoyed it!) so I gave it a try!

I managed to impress someone (or convince them I was sane) and now I’m teaching a few classes on nights and weekends. (HTML & CSS, WordPress, Illustrator). This part time job (~6-10 hours a week) allows me to chill a bit about money and at least pay my rent and buy beer. This has been great for me so far! Teaching is awesome and incredibly rewarding.

Friends

One of the reasons I was able to make the jump to full-time freelance was because of my awesome designer / developer friends out there. You know who you are! There seems to be no shortage of web work out there and every web designer and developer tends to be busy. Luckily my friends are all busy and have passed on several clients and project leads to me. I can’t tell you guys how thankful I am for this. Seriously! If you are looking to make the jump to freelance I would recommend having a network of awesome friends that do what you do.

That being said I hope to return the favor or pass work along in the future to my friends. Right now I am so busy and its the best thing in the world!

Happiness and Sanity

One of the biggest things I’ve noticed since making the jump is that I am much much happier! Not that I was unhappy when I had a job, but now I’m in control of my own schedule. If I want to work from 2pm-10pm I can! If I want to get up and drink coffee and write a blog post before working – I CAN! And thats what I’m doing right now!

Freelancing has provided me the freedom to control my own schedule and control which projects I work on. I can’t emphasize how enjoyable (or sometimes scary) this is. No more working on powerpoint slides because someone ‘told me so’.

Aside from the work side of things I’ve been able to spend more time on myself. I’m one of those crazy runners – so when I get the urge to run I run! No matter what time of day it is!

The Future

So now that I’ve been on my own for a bit I’d like to plan where I see my business going. I have been working on a variety of things here and there and I’m getting a good idea of what I like best. I’ve worked on a few iPhone apps as well as with a few startups. These tend to be my favorite projects because entrepreneurs are just so damn excited about what they do! That enthusiasm tends to rub off. I love hearing people pitch their biz and try to excite others.

Besides my ‘ideal’ client, I’m planning on doing some of my own ‘non-client’ work. Here’s a few things I have in the works:

• posters / prints
• writing a small ebook
• custom wordpress themes? themeforest?

So this is my ‘state of things’ post a few months in to freelancing. I’ll do another post at the 6 month mark and hopefully I’ll be doing some of the things I mentioned and business will be good!

This weekend I gave a talk at WordCamp Boston with my friend Jake (@redlist) on customizing the WordPress admin interface for clients. If you missed the talk this post is intended to be a brief recap of what we covered.

As someone who uses WordPress on a daily basis I tend to ignore most parts of the admin interface. I know exactly where everything is and it takes me a matter of milliseconds to find most things. But lets take a step back for a second and remember who we are making websites for: the end users and our clients. As web designers and developers we spend so much time on the public facing side of a website that we sometimes forget the admin interface and most importantly the client that will hopefully be managing and updating their site.

In this talk we discussed 4 things you can do to simplify the WordPress admin and make it more usable for non-technical clients.

Our Fake Client:

For example purposes we will be making a site for a fake client. Their site requirements are pretty simple:

• Movie Review Site
• About Us Page, Contact Us Page
• Links in the sidebar

Custom Post Type

If you look at the default WordPress admin screen you notice a slew of options in the left hand side bar. Most of these options are useless to a client. Posts, Pages, comments, links, media appearance, settings, plugins OH MY! Luckily we can simplify this pretty easily based on our clients specific content.

Since our client’s site is primarily for movie reviews we will create a custom post type of ‘Movies’ which will appear as an option in the left hand sidebar. This makes it pretty clear to the end user that this is where you go to add movie reviews to your site.

Adding a custom post type is actually pretty easy with the help of the nifty Custom Post Types UI plugin. The plugin page has a helpful short screencast and overview of the plugin.

Once we add the custom post type it shows up in the left hand menu as ‘Movies’.

Custom Fields

Along with adding a custom post type we will also add some custom fields to simplify the writing experience for the client. Our clients movie reviews have 3 specific pieces of content:

• Movie Cover / Screenshot
• 1-5 star rating
• A brief review

We will be using these custom fields instead of the main WordPress WYSIWYG interface to avoid confusion on the clients part and to free them from the burden of styling and placing the content. Floating and styling elements in the write editor can be a pain for clients.

We have also found that the default custom field panel in WordPress to be confusing to non-technical users. Instead we will be using a plugin called Custom Field Template that allows us to simplify and make things easier for the end user. This will make the expierence of writing a movie review much like filling out a simple web form:

1. Upload thumbnail movie image
2. Rate movie
3. Write a brief review

Here’s what our writing screen looks like after adding a custom post type and custom fields:

Here’s what our post looks like when the custom fields are inserted into our template:

Admin Menu Editor

Now that we have simplified the option for adding a movie reviews and writing the review itself, let’s focus on cleaning up the WordPress menu system.

With the Admin Menu Editor plugin we can remove, rename, customize and assign access levels for menu items per user. For this example our client only needs access to pages, media, links, comments and movies. We will hide everything else to make things much simpler. I’ve assigned administrator only access to everything but these 5 options so when a user with the access level of contributor or author etc logs in they will only see what they need!

We will also rename a few things: change media to upload photos, Comments to manage comments and links to manage links.

Admin menu editor also has some advanced options for changing icons for the menu items as well as more granular access levels.

Custom Admin Branding

Along with simplifying the menu and customizing the content types we also need to spend a bit of time customizing the color scheme of the admin interface. These customizations can make the backend of the site feel less threatening and foreign to your client and hopefully make them feel like this is their website. The whole goal of simplifying and customizing is to encourage your client to take ownership and control of their website.

The Custom Admin Branding plugin allows you to easily customize several aspects of the WordPress admin: login screen, admin header, admin footer, and also allows custom css.

Our WordPress login screen with a custom logo:

We spent a few minutes adding logos, colors as well as digging around in the WordPress admin css. Custom admin branding also allows for custom css that will override the default WordPress css.

Since our clients site is light blue we have utilized the same color scheme in the admin. We have also added the clients logo to the login screen as well as header and footer of the site.

Fluency Admin Theme

If all else fails and you don’t have time to make a custom admin theme you can always find a pre-made theme out there and tweak the colors a bit. The Fluency Admin Theme seems to be one of the better WordPress admin themes out there. It comes prebuilt with a variety of colors schemes and allows for adding a logo to the login screen etc.

Cleaning up the dashboard

Along with simplifying the number of menu options the end user has access to we can also customize the dashboard of our WordPress site. The dashboard is the first thing a user sees after they log in, and the default screen can be pretty busy.

Selecting screen options in the top right corner allows you to turn the dashboard widgets on and off. We have turned off all of the default widgets and installed two widgets that are relevant to our imaginary client:

Google analytics dashboard widget

Dashboard twitter widget

We added these two widgets so our client can see how their posting schedule corresponds to their site traffic, as well as encouraging them to manage their social media presence.

In the upper right corner of the screen you will notice a screen options tab that allows you to customize the WordPress dashboard widgets:

The Final Product

Here’s what our WordPress admin interface looks like after all the customizations:

Hopefully this looks much less intimidating to a non-technical user vs the default admin screen.

Slides and your thoughts!

I’d love to hear about how you customize the admin interface for your clients. Leave a comment and let me know what you think!

If you were at our WordCamp Boston talk please take a second and rate how we did! I’m always looking for feedback on how I am doing when rambling in front of a group of people. If you leave feedback I’ll give you a hi-five! Use the button below:

Slides from the presentation:

Looking back on this past month of work and freelancing I’ve noticed a trend in how my work turns out. I’m noticing a relationship between the amount of time I spend sketching and scribbling in my notebook and my satisfaction with the end product. Take a minute and listen to my little audio ramble and let me know if you guys are the same way.

A quick audio post from a little while ago, but still on my mind this morning. What sort of relationship do you set up with clients before beginning a project? What sort of expectations do you establish upfront? How much time do you invest in this phase of a project?

Listen to the audioboo and then share your thoughts!

And @107designs awesome audioboo reply:

Would love to hear what you guys think!

Leave a comment and chime in!

Hey guys! Long time no post… I’ve been busy working on awesome client projects as well as crafting an identity for my new company: Rocket Mouse Design. Over the weekend I wanted to whip up a simple landing page with some simple CSS3 animation. I learned a few things along the way and wanted to share.

Not So Simple…

So I have a rocket in my logo (which is still a work in progress). I wanted my rocket to launch on my ‘launching soon’ landing page. Sounds easy right? I can picture the code in my head. I ran into some snags along the way and learned a few things.

What I wanted to do was translate the position of the rocket after a few seconds (or on hover) and make it fly off the screen. So I did something like this:

#rocket {
-webkit-transition: 1s;
}

This makes the animation take 1 second.

And then on hover make it fly off the screen. I chose to use the body element because its the whole thing!

body:hover #rocket {
-webkit-transform: translate(0,-600px);
}

Check it out in action:
http://jsbin.com/agicu4/5

Wait… Rockets Don’t Do That…

You will notice that after the hover the rocket comes back! (what kind of rocket does that?!?!?1)

I needed the animation to run its course and then stop. After a bunch of googling I gave up and tweeted about it.

Luckily I have some awesome and helpful friends on twitter that pointed me in the right direction.

After some reading and research, it looked like animation-fill-mode in conjunction with animation-iteration-count was what I needed. Here’s the most succinct explantions I’ve found:

“The animation-fill-mode property allows you to define the styles of the animated element before and/or after the animation executes. A value of backwards causes the styles in the first keyframe to be applied before the animation runs. A value of forwards causes the styles in the last keyframe to be applied after the animation runs. A value of both does both.”

From http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

The ‘animation-iteration-count’ property defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once.

From http://www.w3.org/TR/css3-animations/#the-animation-iteration-count-property-

So here’s what the code looks like:

#rocket {
position:relative;
top:0px;
-webkit-transition: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
}

Check it out in action:

http://jsbin.com/omowi5

This Isn’t Working! WTF?!?!??!

Well it seems that I’m kinda dense (derp!) and didn’t realize that animation-fill-property only works with keyframes. So lets get some simple keyframes in there!

I don’t know about you, but looking at complex css animations with keyframes is kind of overwhelming. Lucky for me I really only have 2 frames in this animation. So I can use the from and to syntax, which basically created a 0% keyframe and a 100% keyframe.

#rocket {
position:relative;
top:0px;
-webkit-animation-name: rocket;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay:5s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
}

@-webkit-keyframes rocket
{
from {top:0px;}
to {top:-600px;}
}

See it in action: http://jsbin.com/efoni5/10

Don’t Forget To Clean It Up!

And with some nifty css shorthand properties here’s the cleaned up css:

#rocket {
position:relative;
top:0px;
-webkit-animation:rocket 2s 5s 1 normal forwards;
}

@-webkit-keyframes rocket {
from {top:0px;}
to {top:-600px;}
}

I’ve always been kinda iffy about css animation – because things get complicated really fast. In this case I think the animation adds a bit of fun and context that will help make my site memorable.

Check out the landing page and subscribe if you want to know when its launched!

http://rocketmou.se

How About You?

So thanks for making it to the end of this post! I’d love to hear about how you guys are using CSS3 animation in your web design work and what snags you have run into. Chances are others out there are running into the same problems.