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.

Helpful HTML5 Resources to Get Started

Yes You Can Use HTML5 Today! via Sitepoint

This article is a fantastic place to start sinking your teeth into HTML5 and how to make the transition from XHTML to HTML5. This template provides a great jumping off point for someone just starting to experiment.

Browser Support for HTML5 via Deep Blue Sky

A perfect snapshot as to where modern browsers stand in regards to supporting HTML5. And as no surprise Internet Explorer’s support makes everyone weep bitter, bitter tears (to be fair, the author clumps all IE’s together when IE8 actually supports quite a few features).

Dive into HTML5 by Marc Pilgrim

This gorgeously designed site goes thoroughly into depth about HTML features, how to apply them today, theories and much more.  Sidenote: this site has the best use of @font-face thusfar.

Tutorials and Demos

Coding a HTML5 Layout from Scratch via Smashing Magazine

As usual, Smashing Magazine provides a thorough explanation every step of the way to create an HTML5 layout.

HTML 5 Demos

Concise List of Demos for each of HTML5′s new features

Great Websites Built using HTML5

Design Intellection

This gorgeous, clean design is representative of what html5 is striving to achieve.

Don’t Panic

I like the colors and the structure

HTML5 Gallery

A regularly updated gallery of sites constructed with HTML5

Cool Experimental Stuff

HTML5 Canvas and Audio Experiment

Absolutely amazing visuals that highlight HTML5′s ability to really do some real amazing animation.  This is why people are calling HTML5 the “Flash-killer” although that’s not happening anytime soon. This one’s my favorite

Chrome Experiments

Not necessarily all done with HTML5, but there are some amazing applications of it highlighted on this site

Canvascape

First person shooter done entirely using the canvas element

Additional Resources

23 Essential HTML5 Resources via Carsonified

Great round-up of demos, explanations, and other HTML5 resources

HTML5 Doctor

News and explanations from the front-line of HTML5 development.  Great resource for finding out what’s current, why HTML5 is being built the way it is, and learning about elements in depth

Designing with Web Standards, 3rd Edition by Jefferey Zeldman

The 7th Chapter is devoted to HTML5, its origins, its future and how it will further web standards. An essential read for many reasons, the HTML5 chapter is an added bonus.

@HTML5watcher on Twitter

An automated aggregate of people posting about HTML5 on Twitter. Sometimes a bit redundant, but a great resource nonetheless

The Future of HTML5 via Carsonified

Great video of Bruce Lawson’s lecture on the future of the new HTML

Room for More

These are just some of the examples and resources I’ve come across that really highlight the power and potential of HTML5.  I’d really love to make this list grow so if you have any cool HTML5 resources, fresh new sites or super baddasswicked examples of cool experimental stuff, I’d love to see them. Let me know in the comments or hit me up on Twitter.

Why Bother with Landing Pages?

Its easy to understand why web designers overlook temporary landing pages: tight deadlines, the hassle of creating and maintaining a page that will only be discarded later, etc.  But there are immediate benefits of exerting that extra effort to develop a great landing page:

You’re Building the Site Already

You’re busy slicing and dicing the static content of your gorgeous future website, so before it gets chucked into a CMS, throw the skeleton up (header, footer, container) as your landing page.  Even though the full site is still being developed, site elements can be introduced and built upon later.

While developing the Complete Care Chiropractic website, I introduced what will later become functional elements of the site, but in the interim are simply placeholder divs to frame the temporary content.

Complete Care Chiropractic - the prettiest thing in the world? no. Beneficial? Absolutely.

Also keep in mind that the landing page will not be discarded, but rather dispersed when the full site gets developed.  For example, I created a “Make an Appointment” form that will later live on its own page, but in the meantime is readily accessible to any user looking to quickly book an appointment.  In fact, every element on the current page will be used elsewhere in the final build. Will it look the same? No. Will it be coded the same? Perhaps.

Think of the Users

Think of the site’s target audience and their need for your site. What are their primary goals in visiting your site? What would they benefit from more: a splashy hip graphic saying “coming soon!” or a one-page site that can help them acheive their primary goals.  I choose the latter.  Caution the user that the full site is on its way, but in the meantime you can….

Capture User Data

I’ve seen tons of temporary sites that fail miserably in this department.  Users will navigate to the site, perhaps a site they are even excited about, and be stuck with a neat-o keen graphic and nothing else.  Temporary landing pages are perfect for generating buzz about an upcoming web project,  so why not turn your lack of site into a promotional opportunity. A simple newsletter signup notifying users on the website’s release can help your site gain momentum out of the gates, instead of wasting all those views on a cool looking graphic and nothing else.

Search Engine Optimization

Complete Care Chiropractic had no web presence prior to the site I’m currently developing.  Because of this, its imperative that I get something up NOW instead of waiting for the final product.  There needs to be substantial content online so Google knows what the site is about, we can start targeting keywords, and we can feel confident when providing the inbound link to relevant sites.

What Not To Do

• Ignore a landing page all together – there are too many benefits landing pages provide
• Wait too long – stop perfecting the design and get something online, like yesterday. There’s plenty of time for perfection once you safely have a landing page up.
• Only include a graphic - a picture is worth 1000 words, but 1000 words doesn’t get you very far in regards to landing pages. Only providing graphics will keep your ADD users happy for about 2 seconds before they’re off to a cooler website.
• Not optimize your landing page – Why am I not seeing my site in Google? Maybe because the only thing in the body is an image tag with an alt=”splash page”. Instead,  use keyword-rich, relevant title, header and link tags to get started on optimizing your future site.
• Ignore email addresses you’ve gathered- You actually spent the time to collect important user data, and you aren’t marketing to them?! That doesn’t make a lot of sense. Try rewarding those early adapters instead with a discount or some cool incentives instead.

Conclusion

Landing pages are a great way to jump start your site’s web presence and ease the transition from going to zero to full blown website launch.  Giving users the ability to meet their primary goals on your site will keep them happy until the rest of the site is built.  Capturing email address and other user info is a great way to build an audience once the site launches, and if you properly optimize the landing page, users AND search engines will keep coming back for more.

Web Developer Toolbar

This plugin is the one I hands-down use the most.  The ability to isolate an HTML element and see what CSS is controlling it is invaluable, especially when working with complex CMS systems or frameworks.   Quickly disabling CSS is a great way to quickly see how any site is structured.   Edit CSS has been a fantastic recently discovered feature, and has saved me tons of time.  Before this I would have to work in my editor, save, possibly upload, then refresh the page to see my changes. With Web Developer Toolbar, I can see the changes made immediately on the fly. Amazing.

View image information to quickly retrieve essential image properties of both CSS background images and image tags.  Display Ruler is an often used feature to help take care of some of the guesswork of how wide an element is.  Resize is another quickie to make sure your design can properly be displayed in lower resolutions (yes there are still people rocking 800×600 resolutions, bless their hearts).

There are tons more features that the Web Developer Toolbar offers, but I find myself coming back to the features mentioned above time and time again.  Learn the keyboard shortcuts and you’ll be rollin’ like Fred Durst and Rick Astley in a Pillsbury factory.

IE Tab

This little goblin saves me from opening up IE seperately. Simply click the button, and the page renders as Internet Explorer right from within Firefox.  Very seldom do I have to brush the cobwebs off that big ole’ blue lowercase ‘e’ buried somewhere in my quicklaunch menu.

HTML Validator

Another quick little lifesaver. One day, me and my programmer buddy Mike decided that we were only going to write in XHTML strict (at the time we were coding in transitional, simply because that’s what things were defaulted to). Well, the HTML validator extension was perfect for that transition to step up to the big leagues. In your status bar, it gives you a huge red ‘X’ or a big green check’ depending on how your code checks out. When you click the icon, it gives you the page source with all the errors listed in order and how you can remedy them. This has saved me on thousands of occasions. Note: Make sure if you’re writing XHTML you use the SGML Parser in the options.

ColorZilla

This is a tool I feel I don’t utilize to its maximum potential. It’s great nonetheless. I mostly use it when I find myself going “What’s that background color again?” or “What color font is that?” It beats going through your CSS for those oh-so-cryptic hex values. I say I don’t use its full feature sets because apparently you can create palettes, save favorites and so on, but mostly I just use it to copy hex values into my CSS or Photoshop files.

Honorable Mention: Firebug

A lot of people (and when I say a lot of people, I mean most web developers I read about) use this tool as their meat and potatoes for web development. This is only an honorable mention for me simply because I only recently started using it heavily. I really like it so far, and a lot of the features overlap with the Web Developer Toolbar (which is why I still don’t use it as my primary tool).  The coolest thing about it I’ve found is the way you can hover over your code, and it will visually show you what block you are hovering over right in the browser.  Its similar to Web Developer Toolbar’s “ViewStyle Information” except it does it without a click.   Also, you can edit HTML and CSS right from within Firebug, however, I haven’t done it so much because I prefer the plain text editor style of Web Developer’s Edit CSS tool.  I’ll play with it more and see if my mind changes.  Overall though, it seems like its packing a lot of heat and I’m excited to get my hands dirty with it. Let me know if you have any cool Firebug tips that help you out.

Alright, that about covers it. No, this isn’t a crazy “Wow I’ve never heard of any of these!” Firefox plugin list.  These things are popular for a reason: they work.  They are going to help me perform everyday tasks more efficiently and that’s what keeps tons of people using them.   Let me know if you have any tips or other extentions that you can’t develop without.

Also, keep a heads-up because I’ll be writing a post on my favorite non-developer plugins.