The Blog

What Dribbble Does For Me

Dribbble is described as a show and tell for creatives, a place where designers and developers can share small screenshots of what they’re working on. Personally, I’ve found it to be much more. On top of receiving helpful criticisms of work-in-progress, Dribbble has become one of the best online sources for design inspiration.

Not long ago, I regularly browsed online design galleries to aid in finding inspiration when starting a new project. While I occasionally benefited from this kind of research, I realized that I was paying a dangerous amount of attention to momentary trends rather than actual design decisions. Gallery websites offer eye candy and that’s it, no in-depth analysis or critical discussions. Dribbble, on the other hand, encourages helpful feedback for design authors, which in turn teaches other viewers what went right or wrong in a particular design.

However, Dribbble is still young and is not perfect (nor should such be expected of it). For example, I’ve noticed that there are very distinct designer cliques that tend to hog the ball a lot. These designers can post shots of just about anything, even if the quality is mediocre or worse, and still receive praise of the highest sort. This isn’t really a problem with Dribbble though and has more to do with too many designers trying to be water boy for the all-stars.

To help level the playing field, I’ve done a couple things: First, I started checking out more shots from the “everyone” category instead of only those deemed “popular”. You’d be surprised at how many quality pieces go unnoticed because they weren’t fortunate enough to receive hundreds of likes. Secondly, I’ve tried to spread the word about any talented designers I find on Dribbble who I think deserve more recognition than they’re getting.

So, without further ado, here are some of latest favorites:

Seriousron has a unique artistic style with excellent use of solid shapes and grunge textures. Brutal Bands design remains one of my favorite shots on Dribbble.

Rick Murphy posts some really cool shots that always remind me of vintage posters. The colors and textures he uses are outstanding.

Michael Spitz is, hands down, one of the best logo designers I’ve found on Dribbble. He has an incredible knack for portraying a company’s target message using only what is essential to the design.

Martin Karasek is one of the more recent Dribbblers I’ve stumbled across and I’m really impressed with his GUI work. Whether it’s icons, an app, or a website, it looks like Martin can handle it all.

Matthew Skiles continually cranks out very clean designs that are usually different than the normal trends, which is awesome. His most recent shots have featured a beautiful exploration in textures and also icons.

10 Common Freelance Questions Answered

One of the aspects I love most about my job is learning something new everyday. How we connect with others via the internet is continually evolving and, as a result, the requirements of a web designer are rapidly change. The current design tools and web languages used today will, in all likelihood, be outdated a year from now. For me, part of the fun in learning modern practices is getting to share that knowledge with the web community. Below are answers to the top ten questions I’ve been asked over the last couple years of being self-employed:

1. What do I need to start freelancing?

First and foremost, you need to set up an online portfolio. Staking your claim on the web will get your name out there and gives you a place to refer potential clients. Once the work starts rolling in, your reputation will attract the most attention but an online portfolio is essential from the start. Core components of your portfolio should include:

  • Most importantly, a showcase of your best work. Keep it simple and to the point—always choose quality over quantity. The key is to focus on doing good work first and making money second. If you work hard and produce an excellent product, the money will follow on its own.
  • A brief bio. No need to make this overly long but share enough details so that people can get a sense of who you are and what your ambitions are.
  • Some form of contact. Make it easy for clients to get in touch if they’re interested in working with you.

That’s really all you need to get your portfolio of the ground. Later on, you can add a blog, full resume, and whatever else you’d like but start off small in the beginning and stick with the basics. Think of your portfolio as an online business card.

A few other portfolio tips I’ve learned over the years:

  • Create a professional e-mail account as soon as possible. The last thing clients want to see in their inbox is some cheesy address. It’s also a good idea to stick with whatever e-mail you choose so you’re not constantly handing out your new address or reprinting business cards.
  • When you create your first web hosting account to store your and/or client websites, it’s a good idea to purchase your domains through a reputable domain registrar rather than through your hosting company. Most web designers start with a small shared hosting plan and gradually upgrade to better plans from there, which often means switching hosts. When that day comes, the last thing you want is to also have to transfer a slew of domain names to the new account. Keep all your domains with one registrar and simply point the nameservers to whichever host you’re with. Then, in the future, you’ll be free to switch hosts all you want and the only thing your domains will need is updated namserver details.
  • Take advantage of using social networks for marketing purposes. You would be amazed at how many work leads can be generated from promoting your services to friends and family.

2. How do I handle my first paid jobs?

Your first clients will likely have small projects and even smaller budgets. That’s fine early on; you need the experience and projects to display in your portfolio. However, don’t undervalue your worth as a designer/developer. Too many clients misunderstand web design as a service and see it as something anyone can do. Once you get a handle on gaining clients and keeping your projects on track, start thinking about what your hourly rate should be.

An entire article could be written on pricing alone but the basic idea is to find an hourly rate that covers your expenses but allows you to remain competitive. Don’t forget that if you’re working freelance full-time, your expenses include items such as sick days, vacation, health insurance, equipment costs—the list goes on. Take some time to research and see what web designers commonly charge. There are countless discussions and surveys regarding this subject.

Once you begin work for a client, it is essential to get into the habit of tracking your time. Keeping excellent record of your billable hours is an absolute must in order to stay on track and within budget. Also, having an accurate work history can be invaluable when it comes to estimating future work. After you’ve completed a handful of projects, you’ll be able to compare their size and total hours to get an idea of how to quote an upcoming job.

Time isn’t the only thing you should be recording. Make sure to store a complete history of discussions with the client. This can be a true lifesaver when (not if) you have a client that starts wanting more than was agreed to. Using a service like Projecturf or Basecamp will help you keep a detailed history of conversations with the client so they can never say, “Hey, you promised me the world and all I got was this website.”

Lastly, don’t underestimate the rewards of working hard. Anyone can pick up a web design book and start coding pages but clients want more than that. Doing the work is one thing but being dedicated to the job puts you ahead of the competition. That edge could come in a variety of ways, like working late to get a project done on time, or delivering more than was promised. Little things like taking the initiative to work on the next step for a project without needing to be asked can go a long way.

3. How should I communicate effectively with long-distance clients?

These days, you can work just about anywhere in the world as long as you have an internet connection. More companies are turning to freelancers all the time because it’s often cheaper than hiring in-house workers and it also allows companies to broaden their search for talent. However, working remotely means that clients have to trust that you’re making progress on their website instead of your golf swing. Frequent communication solves this problem.

Contact the client regularly throughout the week, whether by phone, e-mail, Skype, or any number of other ways. Don’t like to talk on the phone? That’s fine, but make up for it with e-mails or online chats. The point is it doesn’t matter how you communicate with the client, just as long as you’re doing so clearly and often.

My preference is to send an e-mail on Monday that lays out my goals for the week with that client. A call would work too but most of my clients are in California with a three-hour time difference so e-mailing tends to be the best method for me in the morning. During the day, I keep a very detailed list of completed edits in my Billings timer slip and I then e-mail the client that list every evening.

Storing all of my work notes in Billings slips achieves two very important things: 1) The client gets daily updates on progress and 2) it allows me to create a thorough record of everything I completed on the project. When the job is done, my invoice includes all of those task notes in my Billings’ slip comments and the client can see exactly what they’re paying me for. For busy projects with lots of daily summaries, it’s not uncommon for me to generate an invoice upwards of 20 – 30 pages long.

4. How can I avoid being distracted while working from home?

One of the worst things you can do when trying to work is leave yourself vulnerable to time-consuming distractions like Twitter, Facebook, or even e-mail. Close them out of your browser, shut down any social apps, and focus on the task at hand. If you absolutely need to check something like Twitter for work reasons, set a limit on your time. If you say, “I’ll just check my feeds for one minute, then get back to work,” it will almost always end up being an hour or more before realizing you just watched a marathon of crazy cat videos.

What I like to do is organize my OS X Spaces by category. For example, I create 4 horizontal Spaces and use the first one for everything related to communicating and scheduling (Mail, Adium, iCal, Billings), the second for development (Coda), the third for design (Photoshop, Illustrator), and fourth for miscellaneous items (iTunes, VMware Fusion). Organizing my spaces like this helps ensure that when I’m focusing on a specific task, like coding, only the tools I need are visible while I’m working.

The trick is to focus 100% on one task before switching to something else. If you try to juggle too many projects at the same time, none of them will receive the attention each deserves.

5. What is the best way to keep projects on track?

The fact is you won’t be nearly as productive as you could be if you don’t set goals. Being self-employed means wearing many different hats because you not only have to do the work but you also have to manage all aspects of the business. If there is anything a freelancer always needs, it’s more time, so be very efficient with the time you do have.

I start by recording all of the tasks on current projects in one good to-do app. Things and The Hit List are two popular choices on the Mac but there are countless options available and you should try a bunch before deciding on one. This gives me an overall picture of what is to be done for each project. I also continually add to these lists as the project goes on since every job ends up needing some kind of additional edits or adjustments.

Each morning, I select a group of tasks I want to get done and this helps me chisel away at my larger to-do lists. For example, I often make a checklist in a simple text file and leave it open on my desktop while I work (sort of like a sticky note but without the paper). I’ve tried using a to-do app to handle this as well but haven’t found a solution simple enough for these basic lists, although I’m currently enjoying SimpleTask (I’ll have to wait and see if it stands the test of time). Even though a project may have hundreds of tasks to complete, breaking it all down into these daily chunks makes tackling edits much more manageable.

For other tasks or events that may or may not be work related, I create new events in iCal with reminders that pop up on the day they’re due. For me, this has been the ideal way to remember everyday things like appointments, when to pay taxes, sending invoices, backing up my computer, etc.

Finally, I have a list of long-term goals, things that remind me of what I’m working toward. For example, I’m getting married this year and would like to own a house the following year. I also have dreams of writing a book someday, and building an old muscle car. Goals like these keep me motivated to do well so that I can accomplish what I want in life.

6. Should I do all the work myself or hire other people?

For the longest time, I didn’t want to outsource anything. I’ve always taken great pride in my work, which is a good thing, but it has also made it hard to hand the project reigns over to someone else. I still prefer finishing a job on my own but I’m learning to delegate certain parts to others who can help.

Having someone else do my coding, for example, doesn’t work for me. When I receive the finished product, I spend so much time reviewing and changing the code that I might as well have done the work myself. Design, on the other hand, is much easier for me to let someone else work on. As long as the finished product meets the design requirements and isn’t a layer mess, I’m happy. You might be the opposite and would rather keep your hands on every pixel in the design but have no problem letting someone else code it. Regardless, recognize the type of work you’re comfortable sharing with others and don’t try to do everything on your own.

Seeking help doesn’t need to be limited to the work itself either. For example, I’ve been making financial decisions based solely on my own research for years now. This includes managing assets in my retirement portfolio, figuring out how to handle personal versus business income and expenses, and so on. In truth, I really enjoyed watching the market and keeping an eye on my assets, but it has also required more of my time.

A few weeks ago, I finally met with a financial advisor and wish I had to done so a long time ago. Fortunately, we concluded that I was already on the right track with most of my decisions but there were still a few incredibly helpful tips I learned from the meeting. It can be a tremendous relief to get solid answers on questions regarding retirement options, how to handle expenses, and all the other financial concerns regarding self-employment.

7. How should I organize my website files?

Every project is unique but there are usually some aspects that you can count on being the same. For example, whenever I start a new web development project, I create a folder structure that contains the following:

  • Client Name
    • Project Name
      • Design
        • Any design files, like Photoshop or Illustrator documents, end up here. If the job consists of multiple design aspects, say a logo and a website, I’ll create separate folders for each within this design directory. As I finish with design files, I use the file color labels in OS X to signify what state a design is in. Red means finished, yellow is in progress, and green tells me to focus on that design next.
        • Crops
          • This is where I put sliced elements of a design, including things like logo, navigation, backgrounds, buttons, etc.
      • Development
        • Current
          • The main files and folders of a website project, including items such as HTML, CSS, JS, images, includes, etc. Of course, items like CSS or JS would have their own folder within this directory to keep everything organized.
        • Archives
          • At the beginning of every development day, I copy and paste the entire “Current” directory into a new folder here and label them in numerical order. This is a primitive form of versioning that allows me to revisit previous states of a web development project. There are many services you can use to do this same thing (in fact, I also use Dropbox in conjunction with this method), but I’ve found the trusty copy and paste to be most reliable.
      • Documents
        • Whenever new documents are received from the client, I create a new folder here with the day’s date. Adding the date to each new folder is a good way to keep record of when the client delivered files. It also makes it easier to match downloaded files with their corresponding e-mails in case there were any included notes in the message.
      • Assets
        • Again, new folder added with the latest files received from client and labeled with the date.

8. Do I really need to backup my computer?

From the moment you start using your computer for work, to store personal photos and documents, or anything at all important, you should be making backups. Between the cheap cost of hard drives and the nearly unlimited backup solutions available, there’s no excuse not to routinely backup your system.

Don’t think one external drive sitting next to your computer will be enough, either. Always have at least one copy of your important files off-site in case of things like burglary or natural disasters. There are many online services that can help too, although my personal feeling is that storing your private files on someone else’s servers is never a good idea.

One of the easiest ways to store off-site backups is to buy two hard drives, keep one with your computer, and leave the other at a safe location. Every couple weeks, rotate the drives and continue backing up. There are many places you could choose to leave your second drive, such as a safe deposit box with the bank. Find what fits your preference and stick with it.

9. Is it hard not getting paid on a regular basis?

I’ve found that there are many ways to stabilize the ebb and flow in money coming. For example, passive income is, in my opinion, one of the best way to stay self-employed. Think of any of the big-time designers, like Cameron Moll or Dan Cederholm; they all have books and side projects that create monthly income (i.e. Authentic Jobs and Dribbble) on top of their regular work. However, that doesn’t mean you need to be an author or develop an entire application on your own. There are countless ways to make passive income, such as stock photography, themes and templates, affiliate links on a popular blog, reselling hosting, etc.

Think of it this way: If you work 8 hours a day and your hourly rate is $80/hr, your daily income will forever be $640. The only way to make more money would be to increase your hourly rate (not very common) or work more hours (far too common). Now, lets say you recently created a set of icons that are averaging $100/week in sales. Your monthly income just went up $400 without having to raise your hourly rate or work longer days. Obviously, it will take some time upfront to create sources of passive income (like an icon set people want to buy), but it’s well worth it in the long run.

Another good idea is to not put all your eggs in one basket. I try not to rely on any one source of income so that if a project falls through, I’ll still be able to pay rent that month. I also bill on a monthly basis, which further helps make income more predictable.

 

10. How can I work long hours but avoid burnout?

The balance of work and life is one I’m forever trying to perfect. In my experience, being self-employed means working longer days than an average job because you’re in control of the entire business. On top of that, freelance work can often be unpredictable. Some weeks will be fairly slow while others are overflowing with deadlines to meet. It’s critical to be disciplined with your work time for both physical and mental reasons.

It can be very easy to think you’re getting ahead by working late every night but, more often than not, burnout will set in and negate all of your forward progress. I’ve spent days on difficult work problems before, only to solve them in mere hours after finally taking a break. Simply put: you will get a lot more done in a shorter amount of time when you’re well rested than you would being drained from exhaustion.

Take the time to unplug from the computer. This includes staying fit, and I don’t mean just exercising your fingers on the keyboard. The secret is to find a healthy activity that you enjoy or you won’t keep up with it. Personally, I like biking outside or hiking local mountains more than going to the gym. Your mileage may vary but the point is to find an exercise you like doing.

I also believe that money alone cannot make you happy—to enjoy life and feel truly accomplished, you need to make time for family and friends and go on adventures beyond your computer desk. I’ve been on intense projects before that demanded incredible amounts of time and it was sad to look back and say, “Wow, I worked on such-and-such a project for this many months now and haven’t done anything else.”

To help remind myself of what’s important every day, I came up with The Rule of One:

  • Get at least one thing accomplished. Even if you only finish one task that day, doing something is better than doing nothing.
  • Learn one new thing. I’ve never, ever been able to go through my news feeds and not find at least one useful article or tutorial to learn from. Don’t forget: the web changes incredibly fast and you need to keep up with it to do good work.
  • Do one nice thing for someone else. I don’t care if it’s as simple as shoveling your neighbor’s steps or holding the door for someone at the store. Make it a point to help at least one person every day and your reward will be knowing that you improved someone else’s life.

It’s No Secret: I’ve Been Busy

One look at the dust on this blog and it’s obvious that I haven’t had a lot of spare time for personal projects. Over the last year, I’ve been a part of some incredible client jobs (such as version 2.0 of Projecturf), moved home and office, spent nearly every weekend at friends and family events, and recently became engaged to my fiancée. While I’ve had no shortage of new web ideas during this time, I just haven’t been able to work on them — until now.

Design Kindle

Design Kindle is a personal project that I’ve wanted to get off the ground for some time now. The web design community is such a welcoming, sharing group of people and the idea behind Design Kindle is to give back. The site will offer a growing collection of handcrafted, premium quality design files absolutely free. You’ll be able to download files instantly without signing up, joining a membership, or paying a single penny. The initial file types available will be graphics, vectors, and coded websites, but other categories will likely be added in the future. All resources will be free for both personal and commercial use.

I’m very excited to see Design Kindle come to life and the list of free files will continue to expand. Development is nearly finished and the site will launch in early September. To thank those who support the project and help spread the word, there’s going to be an iPad giveaway. Check out Design Kindle for details on how to enter and be sure to follow on twitter for more updates. Also, stay tuned for more personal projects on the horizon.

Create a Realistic Hover Effect With jQuery

For one of the projects I’m currently working on with Rareview, we wanted to add a rising hover effect to a set of icon links. Using jQuery’s animate effect, I experimented with icons that have reflections and others with shadows. Here is a demo with two examples:

jquery-rising-hover-2

The HTML and CSS are both straightforward and have a structure and style common to many web navigations and menus (for the sake of post length, I’m not including HTML/CSS code examples here but you are free to snoop around in the demo or view the files in the download below).

In a nutshell, the JS appends the reflection/shadow to each <li>, then animates the position and opacity of these elements and the icon links on hover. I’ve added .stop() to eliminate any queue buildup from quickly mousing back and forth over the navigation.

// Begin jQuery
 
$(document).ready(function() {
 
/* =Reflection Nav
-------------------------------------------------------------------------- */	
 
    // Append span to each LI to add reflection
 
    $("#nav-reflection li").append("");	
 
    // Animate buttons, move reflection and fade
 
    $("#nav-reflection a").hover(function() {
        $(this).stop().animate({ marginTop: "-10px" }, 200);
        $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
    },function(){
        $(this).stop().animate({ marginTop: "0px" }, 300);
        $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
    });
 
/* =Shadow Nav
-------------------------------------------------------------------------- */
 
    // Append shadow image to each LI
 
    $("#nav-shadow li").append('<img class="shadow" src="images/icons-shadow.jpg" alt="" width="81" height="27" />');
 
    // Animate buttons, shrink and fade shadow
 
    $("#nav-shadow li").hover(function() {
    	var e = this;
        $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
        	$(e).find("a").animate({ marginTop: "-10px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
    },function(){
    	var e = this;
        $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
        	$(e).find("a").animate({ marginTop: "0px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0px", opacity: 1 }, 250);
    });
 
// End jQuery
 
});

Please note, for the purposes of this quick demo, I did not bother including support for IE6.

View Demo or Download

Update 06/01/2009: I updated the shadow example so that it has more of a bounce to it.

Update 07/08/2009: As Cody Lindley points out in the comments (thanks!), this example does not require the UI and could work with jQuery alone (I’ve updated the link in the post). However, this being a navigation example, I’ll leave the UI script in the demo and download for users who want to experiment with animating text, background, borders, or outline colors.

4 Months Self-employed: 10 Lessons Learned

The transition from working for an employer to being self-employed does not happen over night. I took the leap at the start of 2009 and the experience has been both amazing and enlightening. Over the last four months, I’ve worked on some incredible projects with very talented people and learned a lot of lessons along the way. Here is my top 10 list:

1. Set a routine. Anxious to start bringing in paid work and getting personal projects off the ground, I quickly overbooked my first few weeks of being self-employed. The more, the better, I had thought. Mornings gradually started later while I continued to work long nights. The fix was to incorporate some kind of daily routine. Having a set schedule has helped productivity and ensures that I’m available for e-mails, conference calls, or other client needs throughout regular work hours.

2. Archive everything. Maintaining a well organized work history is essential. I store client discussions, contact lists, project notes, estimates, invoices, expenses, inspiration, and many other work related items so that I can easily reference them in the future. There are a number of applications and services I use to help me keep everything in order but the main ones are: Things for project to-do lists and notes, Coda for development and site organization, Billings for time tracking, estimates, and invoices, Netvibes for following web news, Apple Mail for checking multiple e-mail accounts, and Time Machine to back everything up.

Out of all the different bits of info I keep, project hours is one of the most important. My previous jobs led me to believe that time sheets served little more purpose than to prove I was working. However, since being self-employed, I’ve found it critical to log all of my hours in order to monitor current project budgets as well as create estimates for upcoming work. I use Billings to make new slips for each project task and jot down what was completed and how long it took. I also break the slips down by categories so I can see how much time was spent between research, account management, design, development, and so on.  At the end of a large project, it’s not uncommon to have a PDF upwards of 20 pages long with all of my task notes. Not only do clients appreciate seeing exactly where my time was spent but each completed project gives me a very clear and detailed outline for comparing future estimates with.

3. Find the work/life balance. This is probably the most important, and difficult, lesson to learn. I also don’t believe this is something you can ever perfect; it takes constant effort to stay balanced. There is a fine line between being dedicated and being obsessed. When working for an employer, it’s much easier to put in your hours and then not worry about the job after quitting time. When self-employed, you have a huge amount of responsibilities and it becomes very easy to justify spending any spare time on your work, whether that means getting ahead on a project or lining up future jobs. Personally, this is part of why I love being self-employed; I enjoy the satisfaction of knowing my success, or failure, is a result of my own doing. However, the danger is when working too much begins to interfere with seeing family, friends, or taking a little break. It all comes down to finding your own balance and keeping everything in moderation.

I’ve also learned that my mood is often tied directly to my work and that can be both a good and bad thing. On the one hand, the pressure to continually make progress has been a strong motivator and, as long as I have met my goals that day, I can go to bed with an accomplished feeling. On the other hand, inevitable slow patches or days that simply don’t go well can weigh heavily on me that evening or, worse yet, all weekend if it is Friday. Finding your “shut off” switch can really be valuable to both your personal and professional life. Go for a bike ride. Play a video game. Do anything that will shift your mind away from work at the end of the day.

4. Communicate as often as possible. Always keep clients informed about of your progress and how you plan to meet the next milestone. Frequent discussions will bring up any questions you or the client may have throughout the project and will help reduce client surprises and revisions. It is also a good idea get to any kind of feedback documented in writing. For example, say a client gives the ok on a design but later decides he or she doesn’t like the look once development begins. By having the previous design approval in writing, it’ll be much easier to steer the project back to the original agreement or justifying added costs if the client insists on new changes. Projecturf is a great tool for managing these types of discussions. I’ve tried Basecamp, activeCollab, and a many similar services but Projecturf is, by far, my favorite.

5. Pay is not everything. When considering a new project, also think about what you can learn from the job and what the client relationship is like. Will the work be an exciting challenge or boringly simple? Does the client seem easy or difficult to deal with? These questions are just as important as what the project will pay. Burnout is usually the cause of overly easy projects and/or doing work for nightmare clients. Taking on enjoyable, meaningful projects for people who appreciate your work will keep you and your clients happy.

6. Dedicate a few hours each week to self-promotion. Write a new blog entry, check in with past clients, join in online web discussions or local meetings, spread the word and let people know you’re available for hire. Doing the work is only half the battle; you need to line up your next projects and keep your calendar booked in advance. Clients want to see life in the people they hire and regularly updating your site with fresh content is an easy way to do that. Posting tutorials or code examples is also a great way to substantiate your work knowledge.

7. Find your zone. One of the many benefits I’ve found in being self-employed is that I feel like I am working toward my own goals rather than someone else’s now. To remind me of life dreams and things I want to achieve, I have family photos and motivational art decorating the walls. Having a creative, inspiring work environment can be a wonderful aid to productivity. I’ve also learned that music can play an important role. It is much easier for me to work (especially when coding) with some kind of background beat instead of listening to the clacking of keys and mouse clicks. Everyone has their own preference but I like songs with no lyrical content, or in a different language. Movie soundtracks, for example, can be very inspirational without the distraction of voices.

8. Separate business finances from personal. Setup a business-only bank account and credit card to help divide business income and expenses from personal. Take the time to record all business costs throughout the year to save yourself from digging through receipts come next April. Usually, a good first step is to meet with a local CPA to find out exactly what you can and can’t write off. It’s worth the effort to figure out how to properly deduct as many expenses as possible, otherwise taxes will quickly decimate your income. I’ve been used to having federal taxes taken out of my paychecks before receiving them so it was rather painful to send out both my 2008 taxes and this year’s quarterly estimated taxes this month. The good news is there are many expenses you can deduct when self-employed like health care, hardware and software, office rent and supplies, and other work related items. Of course, these deductions need to be directly tied to your job but you’d be surprised how quickly they can add up.

9. Passive income can help stabilize cash flow. Most of my work is charged based on the project, not hourly, with 50% up front and the remaining 50% upon completion. Obviously, there are often gaps with no pay at all and that can be worrisome with monthly bills such as housing, health insurance, etc. Passive income can be a great complement to your main sources of revenue because it often follows a consistent pay schedule (i.e. affiliate advertising) and continues to work around the clock.

10. Be professional. Don’t write e-mails like you’re texting from a phone. Don’t post wild weekend photos on your work blog. Don’t spend all day on Facebook (or don’t create an account and eliminate the urge altogether!). Use common sense and present yourself and your work in a professional manner. If you end up working with a client for a long time and become good friends, there’s usually room to be a little more informal, but first impressions are everything.

Rareview Raises the Bar

rv_newsite

Today, Rareview launched the latest version of their website, boasting their signature style and impressive Flash and Javascript enhancements. The work section, in particular, was creatively organized and includes notes for certain work screenshots. The blog was also updated and I lent a hand in creating the new WordPress theme.

Check out the new Rareview site and their latest projects. I guarantee it is unlike any other agency you’ve seen before.

Creating Passive Income on the Side

Most independent contractors will agree that the ebb and flow of work can often book months at a time as well as create dry spells with no projects at all. I’ve been fortunate in being flat out since beginning to work for myself in 2009 but that hasn’t stopped me from preparing for possible downtime. Creating passive income, no matter how large or small the amount, is always a good idea when you don’t have a steady paycheck to rely on.

Envato, a rapidly growing collection of resource sites (and much more), is a great place to start if you’re a designer or developer looking to make some extra cash. Whether you’re handy with coding, designing, video, or audio, Envato has a site where you can sell stock files. There are many benefits in selling stock but the main attraction is potentially making numerous sales off of a file that you only need to create once. Add enough files and you may find yourself with a consistent stream of side money to help supplement your main sources of income.

The process is as simple as taking a quick seller quiz, uploading your files, then letting time take care of the rest while you continue with your main work. Chances are, most designers and developers already have leftover files or incomplete ideas that could easily be finished and sold as stock (just remember that the work needs to be yours and free of copyright). Envato also has multiple communities where you could become an author and write tutorials on what you know best, although writing a tutorial wouldn’t count as being passive income since you would only be getting paid once for each submission.

Recently, Envato launched Graphic River, one of the few stock websites I’ve found that allows authors to sell Photoshop files (nice!). I enjoy working in any of the Adobe Creative Suite applications but Photoshop has always been a personal favorite of mine. I quickly signed up for a new account (which works on all Envato sites, by the way) to read more on the fine print and test out the author program. The payment rates are 25% for non-exclusive sellers and between 40-70% for exclusive members, depending on how many sales your files make. The difference between exclusive and non-exclusive membership is whether you want to sell your files on multiple websites or only on an Envato marketplace. Compared to similar stock sites, such as istockphoto, Envato offers slightly higher rates, especially if you think your files will make a lot of sales.

One thing I was not impressed with was the Graphic River upload form, which seems to still be a work-in-progress. There are a small handful of files you need to upload for each submission, such as thumbnail, preview, etc., and every time I uploaded a new asset, the form fields I had already populated would reset. Hopefully that gets ironed out soon. Here’s a look at my first upload (click to visit the file’s Graphic River page):

crystal_ball

Update #1: After testing out the Graphic River seller program a little more over the last week, the file upload and review process certainly requires a lot of patience. I have a feeling the interest in Graphic River is more than Envato anticipated, or was initially prepared for, and it shows in the timeliness and quality of responses from the file reviewers. It has been taking at least two to three days before my files are looked at and the reason I was given for one of them being rejected was laughably short and vague. I responded to the reviewer, kindly asking what the issue was and how could I improve it, but did not receive a straight answer until e-mailing two more times after that. Even then, I learned that there was nothing wrong with the file other than it simply wasn’t to this particular person’s taste. The reviewers should do themselves a favor and give honest critiques so that authors who have files rejected can know how to make the work better and ultimately improve the overall file selection of Graphic River.

Pirates and GoDaddy: Equally Disappointing

articlems2

Shifting Creations is no stranger to being ripped; the design has been stolen several times over the last four years. Surprisingly, the number one way I usually find out one of my sites has been copied is because the designers neglect to remove my contact details from either the contact form or the vcard. Note to website thieves: if you’re going to steal someone’s work, at least follow through with the job!

Usually, I don’t bother pointing out the infringing website and deal with the matter very quietly but since this seems to be a stubborn case, I figured I would outline some of the steps I take in case this happens to you. I start by sending the offending party a polite DMCA notice via e-mail (here is an example). The keyword here is polite. There is no reason to automatically assume the website owner knows they have stolen your work and, often, they are less likely to cooperate if you immediately start the conversation with an angry tone. I’ve heard all the excuses, everything from, “We didn’t know, our intern created it,” to, “I was just testing it out to learn from your site.” I rarely believe any of these stories but go along with it anyway and kindly ask that they take the site down as soon as possible.

If the matter continues and I have not received contact or a reason to believe the design will be removed, I do a quick WHOIS lookup to find out where the site is being hosted and then contact that company. To date, every host I’ve dealt with regarding a similar issue has been very understanding and quick to aid in taking down the stolen materials. GoDaddy, however, has decided to make the process even more of a hassle.

I’ve contacted their support multiple times now and, after supplying every bit of info I could think of, the only responses I’ve received have been the same robotic messages that don’t clearly explain what my claim is missing. I understand there need to be certain measures in ensuring my request is valid, but I’ve been amazed at how little GoDaddy is willing to help or even send a human response instead of copying and pasting. Regardless, I will continue to pursue the issue until the design of ArticleMS Skins has been removed. Until then, here are a couple highlights to check out before the site is down:

  • The contact page clearly still has my contact details (duh!).
  • I love the copy in the footer stating, “Skin Modified By ArticleMS Skins,” as if that makes it ok to steal a design.

The funniest part of it all is I’ve also been receiving e-mails from potential customers of ArticleMS Skins, asking me where to send payment. Evidently, stealing my work hasn’t paid off very well for them.

Update #1: GoDaddy has finally suspended ArticleMS Skins until the site owner indicates they are ready to remove the infringing content.

Update #2: ArticleMS Skins is back online with a new design (hopefully, this one is original).

How I Chose to Say Farewell to IE6

attention_ie6

The web community has been abuzz lately with talk about dropping support for IE6 and rightfully so! I couldn’t agree more for most sites, though I’m sure there will be the occasional client who either requests IE6 to be included in testing or it turns out their audience actually does use IE6 according to the site’s stats. Nonetheless, the majority of mordern websites could certainly do without supporting IE6. I would guess somewhere between 30% of my development time is spent fixing the crippled browser, if not more, and I’m looking forward to an enormous decrease in frustrations! It was always a frightful thing to fire up Windows and find out what horrors IE had done to a perfectly good site. I don’t blame the browser either; the problem was for too long (way too long) IE6 still had a large user group. Thankfully, those numbers are continually decreasing and I’ve decided this is the year I’ll be dropping support for IE6. If a future client requests the browser to be supported, that’s fine, but it will come at additional costs for the extra development and testing time.

As for how I’m going to ignore the outdated browser, I wanted to notify IE6 users of the issue rather than assume they already knew they were using an outdated browser. My solution was to create a warning message that gets inserted after the opening <body> tag via Javascript. Conditional comments ensure this message (as well as the HTML code within the body) will only appear for IE6 or previous versions. The message is styled in a very Microsoft-esque way so even the hardest-core IE6 user will be able to recognize it. :) Where does the link point to? Firefox, of course.

This site is currently using what I’ve dubbed the “Attention IE6″ script so go ahead and open IE6, then visit www.adrianpelletier.com. I’ve configured the script to work in conjunction with jQuery because that is the framework I was already using but I’m sure you could easily adapt it to fit your own needs. I’m posting a download link for anyone who cares to use this approach on their own website. The setup is very simple, just include the following conditional comment in the <head> of your document.

1
2
3
4
5
<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/attention_ie6.js"></script>
<![endif]-->

Next, download the following files and place in the appropriate Javascript, CSS, and images directories:

Download

And so, farewell to IE6. I cannot say that I will miss you.

Update 05/31/2009: I want to emphasize that this experiment is not a fix-it-all solution by any means. As stated above, a large majority of modern websites would have no problems dropping support IE6. For example, this site currently receives around 3% of users on IE6 and that number continues to drop. That’s not a large enough audience to worry about, in my opinion. There are, however, still specific scenario’s where IE6 maintains a much higher user percentage (i.e. corporate businesses that place restrictions on browser updates). In those cases, I do believe IE6 should be included in development testing.

I also do not advocate blocking or punishing IE6 users. My intentions with the above approach were to 1) inform the user that they are using outdated technology and 2) warn that the site may look as it should. However, I have not restricted the user’s access to the site’s content and would never recommend doing so.

I don’t consider this article to be the final answer, not by a long shot. However, I would hope that ideas such as these will at least strike up conversations and thoughts about advancing web development and what the next step should be.

New Year, New Job, New Site

The start of 2009 has already brought many changes. For starters, I am no longer full-time with Hatchling Studios and now work independently through Build Interactive (website still in progress). Working for myself has been a long time dream of mine and I’m ecstatic with how well the transition has been so far. While the state of the economy continues to trim jobs all over the country, the amount of available work for freelancers and small studios has skyrocketed, from what I’ve seen. Larger companies are more often choosing to outsource rather than continue paying for premium office space, equipment, employee health care, vacation time, and all the other expenses of running a company. I’ve taken this opportunity to really focus on lining up great projects and have been involved with some high-end, large-scale websites that I look forward to announcing on this site in the near future.

This year also marks the retirement of Shifting Creations, the previous incarnation of my online portfolio. Shifting Creations was the first site I ever developed and underwent several redesigns during its four year lifetime. One of the difficulties I eventually ran into was separating business from personal and the site was often conflicted between the two. The obvious solution was to create two sites: one strictly for business while the other remains dedicated to my writings and other biographical information. So far, the change has been well received.

A few notes about the process for creating this new portfolio site: I decided on WordPress as the CMS and chose to have the blog be the main focus. The Résumé page is a new addition, something Shifting Creations always lacked. This was also one of the few sites where I started building the page structures in HTML/CSS prior to finishing the designs in Photoshop because I knew exactly how I wanted the grid and certain elements to be laid out. It was an interesting experiment but I think the final design touches ultimately took longer to finish by developing this way. The actual coding was handled in Coda, my new favorite text editor (more info regarding this app and why I chose a Mac coming soon). Mint takes care of the stats and, even with Google’s decent free alternative, I still believe this is the way to go.