Enter the Future Friendly Manifesto. In order to become more future-friendly, we must:

1. Acknowledge and embrace unpredictability.
2. Think and behave in a future-friendly way.
3. Help others do the same.

I want to expound on what I think it means to be future-friendly and why you need to care.

Provide Real Worth

People’s capacity for bullshit is rapidly diminishing. As technology becomes more ubiquitous, people are getting used to the idea of interacting solely with things they want to interact with whenever they damn well please.

For companies and creators who have long enjoyed force-feeding their own flavor of bullshit to the masses, this is a very scary thing. However, this doesn’t need to be the case. The opportunity exists for creators to reach people, however it can’t be in the insincere methods of the past. Instead, we must deliver real worth.

Content Like Water

In order to provide real worth, we must deliver strong, purposeful content to people wherever they may be. Currently, this includes a plethora of mobile devices, tablets, e-readers and more, but this is just the beginning.

Instead of chasing down the latest and greatest device of the month, focus your efforts on creating worthwhile content that is properly structured to go anywhere. Because it will be going everywhere.

“We need to build smarter content, not smarter containers.” — Stephanie Rieger

Beyond the Desktop

One small step for man. One giant step in the right direction. I’m in the web world and I think it’s amazing that 50% of web designers still don’t consider mobile. I hate to break it to you, but people aren’t lining up around the block to get the latest Dell tower. It’s time to acknowledge the diversity of connected devices and prepare for even more diversity. We don’t know what the future holds, but we need to be ready. Take that first step in the right direction and begin designing for diversity.

Pragmatic Idealism

No one has the answers. In fact, we all have a hell of a lot more questions. We know that we can’t predict the future and that things can’t change overnight. But we can move in a more future-friendly direction. And that’s going to take all of us. It’s going to require rethinking how we work, the tools we use and most importantly the things that we make. Let’s advocate for better tools: CMSes, browsers, design tools and better interplay between devices.

Into the Great Wide Open

Let’s embrace the unpredictability of the future. Let’s create meaningful content for people and encourage others to do the same. The future is ours to make —friendly.

Thank you

I had the surreal opportunity to spend several days tucked away in a remote house outside of Nashville with a group of amazing people. It’s one thing to get to meet your heroes. It’s another to collaborate with them. I want to thank my fellow mobinauts that have forever changed the way I think:

• Josh Clark
• Luke Wroblewski
• Lyza Danger Gardner
• Jason Grigsby
• Scott Jehl
• Scott Jenson
• Jeremy Keith
• Bryan Rieger
• Stephanie Rieger

Know What You Want

I was a little bit surprised at how many students responded with “I don’t know” when asked what they were interested in pursuing after graduation. Its OK to not know precisely what path you want to take, but you should have a general direction locked down at this stage in the game.

Think hard about the question “What makes me happy?” I know it sounds like a bunch of bullshit, but ignoring this question at the beginning of your career is a good way to end up miserable pretty quickly. I know you’ll want to jump at any opportunity that presents itself, but make sure that opportunity aligns with your passions in life. Every step you make in your career should bring you one step closer to your true passion in life. Its up to you to make that happen.

Know what you want then learn how to get it. Simple-sounding, but in reality quite challenging. Here’s some advice on helping you with the logistics of finding a job that coincides with what your passions:

Make a Great First Impression: the Cover Letter

You can pour hundreds of hours into a snazzy portfolio, print up business cards and buy some new dress shoes, but none of those things will matter if you end up in someone’s trash folder. Here’s some tips on making a memorable introduction to a potential employer:

• Make your cover letter the body of your email Don’t attach two documents. The email body is more direct and effective.
• Never use “Dear Sir/Madam” or “Dear Hiring Manager” to start off your cover letter. That’s a quick way to find yourself in the trashcan. Learn who you’re sending it to and address them by name. Call them up to find out whom to address your application.
• Learn about the company. Explicitly tell them why you want to work there. “I’d love to work at Company XYZ because I think your work is superb and…”
• Explain why you’re a good candidate. “I feel like I would be a great fit for Company XYZ because I’m a hard worker and I’ve had experience in ________ and ______.
• Show some personality. Obviously take into account the kind of company you’re applying to, but you can really stand out by leaving behind the dry formal bullshit that the recipients typically have to sift through all day.
• Include a link to your portfolio site. Don’t bury the biggest asset you have.
• Don’t come across cocky/arrogant. You don’t know as much as you think you do.
• Say Thank You. You’re taking up their time so make sure that’s appreciated.

When I was hiring people, my process was: scan the cover letter, click on portfolio link, check out portfolio, then eventually come back and read the resume if I was interested. Your cover letter sets the tone for your portfolio and your resume. Make it count.

Nail your Resume

Once a potential employer has made it past your cover letter (and portfolio site if you’re me), they’ll take a peek at your resume to learn more about you. Some tips to make your resume stand out from the pack:

• Design your resume. Especially true if you’re a designer, but a clean, well-laid out design turns heads and reinforces your skillset.
• Include an objective first. In one sentence, describe who you are and what the hell you want to do. “I am a passionate web designer and developer looking to build high-quality standards-complient websites in an agency environment.” Boom.
• List out your skills. Especially true for developers, knowing what languages/tools you’re familiar with is crucial for someone quickly scanning your resume.
• Include only relevant experience. Nobody gives a shit if you’ve been delivering pizza for two years and that its helped you “build character” and “learn team skills”. If its not relevant to the job you’re applying to, leave it out. Instead…
• Elaborate on relevant experience. The space you freed up removing your babysitting job just gave you more space to describe how your job at the school paper gave you a ton of relevant experience as a copywriter.
• Use only strong verbs to lead off bullets. Created, managed, customized, led, developed, designed…the list goes on. Keep your phrases active and constructive
• Pick your best GPA and go with it. Use whatever’s higher, your major GPA or your overall. Include any Deans’ List/other achievements if you got ‘em.
• Link to your Portfolio Many times your portfolio will be passed around to different people so its important to give everyone the opportunity to view your work
• Deliver as a PDF. Don’t deliver a Microsoft Word document. Period. You should be making it in Illustrator or InDesign anyways. PDFs assure your well-designed resume gets seen in the way its supposed to.

Again, when I was making hiring decisions I would be looking at resumes only if the cover letter and portfolio were up to snuff. So its 100% crucial to really nail your portfolio.

Make Your Portfolio Work Hard

Your portfolio is more than just a platform to show your work off. Your site is a reflection of you and all you stand for. With that in mind, make sure your portfolio website is a great representation of you as a designer/developer/writer/whatever, but more importantly, as a person.

• Let them know who you are immediately. Much like the resume’s objective, potential employers should immediately know who you are and what the purpose of your website is. Leave out the cute “Click around to learn more about me!!!!!”
• Include omnipresent contact info. Your site’s no good if I can’t get a hold of you. Your phone number and email address should be included on every page of your site.
• Put your best work first. People aren’t going to peruse every piece of work you’ve done. They’ll click on the top one (if you’re lucky) and check it out. If they like that they might come back and check out the next two items on your portfolio. No one cares if you’ve made 100 sites, they care if you’ve made 2 or 3 great sites.
• Code It Right. When I was hiring web developers, the first thing I’d do when visiting portfolio sites is view the page source. As soon as I’d see presentational table tags or Dreamweaver-specific Javascript, I would leave. Period. Portfolios are great places to show off some of the newest techniques that may not be ready for client work yet. Just be sure you can comfortably talk about your coding decisions in an interview. If you’re a designer not focused on coding, you should still build your site right. Understanding how your designs get implemented is extremely valuable.

The Interview: Be a Boyscout (Be Prepared)

If your cover letter, resume and portfolio all work in your favor, you’ll hopefully land an interview or two. This could be the last step before you land that job and naturally you’ll be a bit nervous. But its important to translate that nervousness into excitement while at the table with your interviewers. Here’s a few tips on how to seal the deal in an interview:

• Know your shit. A great way to ruin an interview is to make it really clear that you don’t have a clue what you’re doing. Check out the next section (Soak Up the Industry) for ways to avoid these awkward, awkward situations.
• Get excited. One of the best ways to overcome the fact that you don’t have much experience is to show how interested you are in learning more. “Oh yeah, I’ve heard about some CSS3 techniques and would love the opportunity to implement them in projects!” Because at the end of the day, no one knows everything, and you have to prove that you’re willing to learn whatever it is to get the job done right.
• Dress the Part. You might think I’m saying “wear a tuxedo” but I’m not. I’ve had some awkward developer dudes in front of me WAY overdressed and that tells me they don’t understand agency life. However, if you’re applying to a more corporate obviously you’ll need to dress that part a little better. Ask the person you’ve been corresponding with if you don’t know what to wear.
• Bring plenty of resumes. Nobody’s had a chance to dissect the resume you sent the HR person; they’re too busy. Be prepared for people to scrape over your resume and ask questions on the fly.
• Be Prepared to Explain Yourself. Be prepared to go into detail about any projects you’ve worked on. Pros, cons, technologies/programs used, who you worked with, how long it took. You’d be surprised how many interviewees clam up when asked to explain their work in detail. Properly explaining the process is a good way to make it seem like you know what you’re talking about.

At the end of the interview, thank them for their time and shake hands. Its OK to send a follow-up email later that day or the following day. If all goes well you’ll be called in for another round or better yet, you’ll get the job.

Soak Up the Industry

This isn’t really a step in the job application process, but rather something you need to be doing constantly. Know your industry. Read. Listen. Watch. Observe. Write. Comment. Immerse yourself in all the rich treasures your industry has to offer. This is the beauty of the internet. There’s tons of resources for you to take advantage of. Here’s a list of highly recommended reading for aspiring creative/web professionals:

• Designing with Web Standards This was the first book ever recommended to me and I’m so thankful I read it (and reread it after the 3rd edition came out). Zeldman’s book will help guide you down the path of righteousness and goodness when it comes to designing websites with web standards.
• Smashing Magazine This is one of the most popular design blogs in the world and is known for publishing some thorough, high-quality articles on a huge array of design-related goodness
• Don’t Make Me Think A fantastic book about usability and simplicity for the web.
• Web Designer Wall A great site with some nice in-depth tutorials and insights into web design.
• The Element While not a web design book, this book is essential for helping you find your true passion in life. You’ll feel like conquering worlds after you read this.
• PSD Tuts A great tutorial website for designers looking to hone their skills and learn some new tricks. Keep in mind its important for your work to be original, so try to use these resources as guides rather than following them step-by-step
• Six Revisions Another great web design and development blog

There’s literally thousands more, but the biggest suggestion I can give is get Google Reader and start subscribing to sites that interest you. Especially in that post-graduation/pre-job phase, you’ll have plenty of time to learn up on all the cool stuff happening in your industry.

Go Get ‘Em

At the end of the day, its up to you what direction you want to take when choosing a career. The important trick is to find that thing (or things) that you naturally love to do, and pursue it with all of you. Its easy to work when you love what you do. You’re not going to land your dream job right off the bat, but its important to keep your eye on the prize. Make every step in your career a step towards what you naturally love to do. Feel free to leave a comment or email me and I’ll be more than happy to get back to you.

Web Designer’s Checklist

Web Designer's Checklist

HTML5 Readiness

HTML5 Readiness

HTML5 Test

HTML5 Test

CSS3 Please

CSS3 Please

Here’s a couple added bonuses:

on Quirksmode

HTML5 Compatibility Test

Is HTML5 Ready Yet?

Is HTML5 Ready Yet

Is HTML5 Ready Yet

CSS Sprite Technique Using Color Overlay in Photoshop

As a web developer working with designers who provide me with a plethora of assets, I often find myself in situations where I need to create rollover states in Photoshop for text assets whose fonts I don’t have installed on my computer.

How often have you seen the dreaded:

“The following fonts are missing…Font substitution will occur”

dialog when trying to simply change the color of the font in your design? This usually occurs when you’re creating an image sprite using those fancy-schmancy non-web fonts designers love so much.

While I highly recommend using Cufon or SiFR to dynamically replace web text with the correct fancy font, I treat navigation text differently.

Why? For one, Cufon and SiFR rely on Javascript and/or Flash in order to achieve the correct result, and I’ve had instances of bugs in both of them. Also, a bad instance of FOUC can help ruin an otherwise elegant design.

So instead I use the Fahrner Image Replacement and a well-designed image sprite to accomplish my top level navigation systems. It requires extra effort on my part and isn’t as flexible as using the aforementioned techniques, BUT in my experience its a more bulletproof solution.

Now back to the situation at hand: I have this great-looking font in my PSD but don’t have it on my computer. I need to make rollovers for all these navigation states and I can’t click into the text without altering its appearance. What’s a developer to do? Here are the required steps:

1. Duplicate the Photoshop layer and position according to the sprite design
2. In the layers panel, double click on the layer to bring up the Layer Style dialog box
3. In the left column of the Layer Style dialog, select Color Overlay and change to the desired color
4. Lather, Rinse, Repeat for as many elements needed to complete the navigation
5. Save out PNG or GIF (depending on file size)
6. Style using CSS to create the rollover effect

Photoshop's Color Overlay Dialog Box

At the end of the day, this technique may be tedious but its very reliable. Users without Javascript enabled can see the design in all its glory, you don’t have to bother the designers to send you over every single font they have, and at the end of the day you’ve built a nice fully-functioning navigation system with one image and some CSS know-how. Don’t you feel good about yourself?