The Rock Collection

On my office desk sits a jar filled with rocks, none of which are rare or have any monetary value. Whenever my wife and I travel, we find a pocket-sized rock, tote it back home, and add it to our stockpile. For us, these random bits of earth represent life outside of work and remind us of our journeys together. I wholeheartedly encourage you to start your own worthless collection of priceless memories.

rock collection

Choose Your Role Models Wisely

I’m a proud husband and father, two roles I gladly devote a lot of my time to. I’m a homeowner and self-proclaimed mechanic as well—another way of saying I’m always fixing something. My family and I live in a beautiful New Hampshire vacation town surrounded by mountains and lakes but not much else. Simple errands, like doing groceries, require fairly long road trips. I also have many interests outside of work, including carpentry, photography, and enjoying the outdoors. All of these responsibilities take considerable time and commitment.

The work/life balance requires constant fine-tuning and part of that involves choosing realistic role models. It’s easy to be impressed by others in your industry who crank out work at an unreal pace (front-page Dribbblers, I’m looking at you). It can also be tempting to imagine how much more you could get done by working around the clock, but at what expense? Would you be neglecting other interests and people in your life? I respect anyone not afraid of hard work; the trouble is when determination turns into obsession.

If you do find yourself following someone else’s footsteps, take a moment to learn more about that person (and I’m not talking about just their work). Compare their lifestyle to yours and ask, “Are they a well-rounded individual? Do they share a similar amount of responsibilities as you do?” If the answer is no, then perhaps they’re not a good role model for you. Be inspired, always do your best possible work, but keep your priorities in mind.

More Navigation, Less Hamburgers

hamburglar likes your navigation

Hello. I’m one of your coveted website users and I have a secret to share with you: I still use a desktop! (*gasp*) Please, I beg you, stop punishing me for not always browsing the web on a mobile device.

If I’m viewing your website on a large screen, show me the navigation. Don’t hide essential links behind a hamburger icon on my 27-inch iMac; there’s no need and you’re requiring an extra click for me to use your website. Furthermore, navigation is a small but useful clue that helps users quickly recognize the purpose of a given website. For example, if your main navigation contains a “Store” link, I can generally assume you have products for sale. This is valuable information that should not be hidden and required to dig for when there is ample room to display it.

As the mobile web audience grows at an incredible rate, web designers have diligently and impressively crafted new techniques (e.g. Responsive Web Design). “Mobile first” is the new way of thinking, and rightfully so. However, let’s remember that the goal should be to accommodate as many devices as possible and that includes your old friend, the desktop.

A Beginner’s Guide to Coding Websites

When I first taught myself to code a website, it involved a lot of back and forth to my local bookstore. The computer section was literally a few small shelves with just a handful of books, only enough to get my feet wet. Today, learning to code has become increasingly easier, thanks to a plethora of in-depth online resources.

The following is, by no means, a complete list but should be more than enough to get any beginner started.

Interactive Lessons

Codeacademy

Codeacademy offers a really easy way to interactively learn coding basics. The lessons are hands-on and allow you to code directly in the browser. While the examples are fairly limited, they’re also free and cover many important building blocks.

Cost: Free.
Lessons: Websites and web apps.
Difficulty: Beginner to Intermediate.

Treehouse

Treehouse is unique in that it has an authentic classroom feel. You’ll learn by watching videos that guide you through each lesson and taking quizzes at certain stages. Similar to Codeacademy, there are also challenges for you to solve by coding in the browser. Treehouse does require you to sign up for a paid plan to access all lessons but, if you’re serious about learning to code, they have an extensive amount of information available. This service is great for beginners and even experts who want to expand their skill set.

Cost: Some lessons are free, then a monthly subscription is required.
Lessons: Websites and web apps, iOS and Android development, general business lessons.
Difficulty: Everything from Beginner to Expert.

Code School

Code School is nearly identical to Treehouse, also using video walkthroughs and interactive lessons. However, there are a couple key differences. First off, Code School appears to be a little more aimed at programmers with existing experience. Secondly, Code School has uniquely designed courses that some users may find more engaging (i.e. “Rails for Zombies”).

Cost: Some lessons are free, then a monthly subscription is required.
Lessons: Websites and web apps, iOS and Android development.
Difficulty: Some Beginner lessons but mostly Intermediate to Expert.

View Source

Another very effective way to learn how to code is to reverse engineer an existing website. Simply find a website you like, view source, and study the code. Just about every modern browser now includes a web inspector, which makes it even easier to poke around a website’s source.

There are also many websites that showcase interesting code examples, such as CodePen. A lot of the examples are fairly complex but it is still a valuable tool for learning what’s possible, regardless of your coding level.

Reference Sites

Remembering proper syntax for any web language can take time, especially when first starting out. Thankfully, there is a wide array of reference sites that are great for quickly looking up tags, browser support, and more. Find a reference site that appeals to you and bookmark it; you’re going to need it at some point. A few of my favorites are:

Keeping Up to Date

The internet changes incredibly fast, as do web development standards. The philosophies and techniques for building a website are vastly different from one year to the next. More often than not, I rely on Twitter to keep informed on the latest web news but there are many useful blogs and online magazines as well.

Books

Last but not least, you can still buy books. I would, however, recommend purchasing them as electronic copies if you can. The main benefit is access across multiple devices and you may receive book updates if the author makes revisions.

What I Learned From Blind Camp

fish-on-the-line-2

In the summer of 2002, I was a counselor at a camp for children who were blind or visually impaired. My mother, Patty, helped form the organization and was also camp chef (affectionately known by all the kids as “Patty Cakes” because of her excellent breakfast). The children’s ages ranged from 8 to 15 and I was in charge of the younger boys.

Camp ran for one week and was located on a beautiful dirt backroad with rustic cabins tucked into the woods, an athletic field, and access to a small lake. Unfortunately, all of this was situated on the side of a fairly large mountain with a massive incline. Did I mention these kids were blind? I really expected more problems but, to my amazement, the campers quickly memorized the walking paths and were not the least bit bothered.

The schedule varied each day and the kids rotated between playing beeper baseball (yep, it works just like it sounds), crafts, swimming, and paddling around in kayaks. Most campers had never had the opportunity to do these kind of activities and it was inspiring to see how quickly they adapted. None of them let their impairment get in the way of having fun.

However, not all of the activities were completely thought out, such as fishing. Imagine a handful of visually impaired kids standing on a crowded dock, wielding fishing poles for the first time. I don’t know what was caught more that day, the fish or my skin. There were some advantages, though. For the kids having no luck, I would ask to borrow their pole, quickly catch a fish, then hand it back and say, “Hmm, I’m not having luck either, maybe you should try again.” Wouldn’t you know it, they always caught something soon after that.

The most memorable part of camp for me was during the evenings when the kids were getting ready for bed. It was a chance for them to talk about their day, unwind, and enjoy the camaraderie of camping. As part of my responsibilities, I had to make sure everyone got enough sleep and the hardest part was keeping their books away! Note to self: you can read braille any time, day or night.

At the end of the week, the campers had one last hurrah by hiking the mountain that camp was based on (again, one of those activities you question afterward, but the kids were excited to go). The trail was a little under 4 miles roundtrip and some of the terrain was quite rocky and steep. Personally, if you had put a blindfold over my eyes and told me to do the same, I would have walked at a snail’s pace. Not these brave explorers! Eventually, I had to take the walking stick from one of the more rambunctious campers so that I could tether it to his backpack and keep him from running.

More than a decade later, I still cherish my memories from that summer. I witnessed true perseverance in those kids and was reminded to enjoy every day to the fullest. I’ll also never forget the night one of my campers flossed between his toes, immediately before flossing his teeth.

This comment thread is closed

Finding Inspiration on Dribbble

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" alt="" src="images/icons-shadow.jpg" 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.

Update 01/21/2014: At this point, you’re better off creating a similar solution using CSS3. Feel free to learn from this example but I highly recommend using pure CSS and no JS to achieve the same technique.

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.