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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// Begin jQuery
 
$(document).ready(function() {
 
/* =Reflection Nav
-------------------------------------------------------------------------- */	
 
    // Append span to each LI to add reflection
 
    $("#nav-reflection li").append("<span></span>");	
 
    // 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" width="81" height="27" alt="" />');
 
    // 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.

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, which, in my case, meant offering to drive my girlfriend to and from work each day. Having a routine 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.

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.

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):

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.

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).

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.

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.

With the topic of bean bags highlighting a number of my daily feeds, I sent the fine folks at Sumo a friendly e-mail with my curiosities. Wouldn’t you know, shortly after, a charcoal green Omni showed up at work. Being the guy who always receives too many packages at the office, it was comical to see the near head-height shipment towering beside my desk.

Without previously knowing about Sumo’s products, I was both surprised and impressed to see the quality material of the Omni upon opening the package. This isn’t the cotton twill you remember from 3rd grade; I’m talking about a thick, robust nylon covering that remains clean and comfortable (although you should check out other available Sumo styles if you’re looking for a different feel). In less than a week, the Omni has dutiful served as front row movie seat, laptop workstation, and bed to the fattest tabby cat in New England.

The Omni is a great addition to our home office. If I was still in college, I would probably ditch my undersized bunk bed for anything Sumo.