For Newbies

Posted by Pete Schuster on April 16, 2013

I was contacted today by a fellow front-end developer who is new to the field and is looking for advice. He was hoping to put together a portfolio, but was having trouble getting started. He wanted to know how he should make it. Backbone, Bootstrap, how should it be built? And what’s a portfolio site without any work to show? He hasn’t done any client work, so should he just find other sites and redo them? So after I gave him my response, I decided to do a little write-up for some tips and advice for those people looking to break into the field.

Sell Yourself

Designs get stale and tastes vary from person to person, so don’t worry so much about the portfolio, focus on yourself. If you don’t have any work to show, or the work that you have isn’t very good, think about what separates your from the pack and work on that. Don’t just throw some jokes together about being a ninja, or guru, or wizard… talk about your strengths and what drives you. It’s easy to be playful, be sincere and get taken seriously.

Limit the Tech

Flashy websites are about as dated as Flash websites. Stick to HTML5 and CSS3 as much as possible. Save the hardcore techie stuff for a “side projects” or “personal projects” portion of your site where you experiment and demo your chops. Checkout Jessica Hishe or Paul Lewis for examples on well executed projects that feel complete and emphasize your interests. If tech is your thing, provide links to your projects, contributions, forks, etc on GitHub.

Keep the design simple. Focus on typography, color, and negative space. Take the time to make the site responsive with a mobile first approach. The how doesn’t matter so much, but if you’re going to make a portfolio site, make one that will last for a long time and that is easy to update and maintain.

Engage the Community

Add a blog to your site and begin to write about your interests, share tips and tutorials, or give your opinion on the happenings of the community. Start a Twitter account, keep update-to-date on what’s going on, and find fuel for your blog entries. Listen to podcasts and learn about the latest “Hot Drama” from shows like ShopTalkShow or Frip Frap.

Final Thoughts

Ultimately, you’re selling yourself, not just a set of skills or a list of work. Skills can be taught and good work will come with time, but showing employers that you’re dedicated and passionate will be your most valuable asset.

Respect Your Users

Posted by Pete Schuster on April 16, 2013

The mighty Brad Frost recently posted a video of a “Death to Bullshit” speech he made at a Creative Mornings. In the speech, he explained the ever increasing age of information overload we live in. As more and more users come online and content/videos/pictures get simpler to make and share, it’s easy to become overwhelmed with all of it.

Users Adapt

Users learn how to filter out the good from the bad, and become increasingly frustrated when something is wasting their time. In this age of information, there is an abundance of choice, and solutions are easily found elsewhere. Content is curated by the masses, filtering out the crap and allowing the signal to rise through the noise.

It’s no longer enough to simply have a website, you have to have a great website. A website that loads quickly and is easy to navigate. A website that doesn’t inundate the user with popups, cross sells, ads, etc that take away from their experience on your site. In Brad’s speech, he talks about how lucky you should feel that users come to your site. By giving them a bad experience or wasting their time, you’re basically slapping them in the face. Don’t slap users in the face… they don’t like it.

It may be obvious, but the content/videos/pictures you release on the web for others to consume should be the best product possible.

Learning to Say No

Posted by Pete Schuster on March 22, 2013

A hard lesson to learn if you’re a freelancer to learning to say no to money. This is especially true for WordPress freelancers. There are a lot of WordPress projects available to dive into. In that bunch, however, there are a lot of awful projects to get roped into. Because the barrier of entry into WordPress development is so low, there are a lot of low client expectations out there about how a project should be structured and how much it should cost. Below are some ways I’ve found to weed out the good projects from the bad and keep your sanity.

Canned Messages

Gmail gives you the ability to create canned responses to send to people. A large number of leads I get in from my website contact form are people asking about my pricing and rates. Instead of looking into each person and whatever attachments or documentation they send, I find it most efficient to simply send them my rates in a canned response. Not only is this saving you time and keeping your inbox clean, but its weeding out people looking for a $10,000 website but only willing to pay $200. Below is what my canned response looks like.

Hello,

Thanks for reaching out. My hourly rate is $50 an hour. My development project rates starts at $2,500. If you could send me more information about the project and any related links or documentation, I can take a look and get back to you with a quote for the project.

Looking forward to working with you and thanks again for reaching out.

-Pete

Raise Your Rates

Raising your rates should always be in the back of your mind when dealing with clients. 5 clients at $1,000 each is the same as 1 client at $5,000. Not to mention, that $5,000 client is going to be way easier to deal with because they know your worth. Don’t undercut yourself to get the job, hold steady with your rates. If you can, get the client to give you a number first, ask them what kind of budget they’re dealing with. If they don’t have a budget, they don’t have a plan, and it’s probably best to pass on the work.

5 clients at $1,000 each is the same as 1 client at $5,000.

Write a Proposal

Proposal writing can seem daunting, but once you’ve done one, its really easy to use that as your template moving forward. By writing out a proposal and a scope of work, you let the client know exactly what they’re going to receive. Breaking down each milestone with payment and deliverables, as well as line items of each step in the process can help to keep the client in line and yourself on track.

Be Honest

The most important rule to learn is to be honest. If you don’t want to work on a project, say so, don’t make up an excuse. If you’re freelancing, you most likely have a well paying job as your main source of income. Don’t put yourself through the pain and aggravation that comes with some projects if you don’t have to. If the money isn’t right, but the project seems cool, don’t do it. If the money is there, but you get a bad vibe from the client, don’t do it.

In the end, don’t waste your personal time for money if something about the project is off.

I find myself many times a few emails deep with the client. They seem knowledgeable, they have an appropriate budget, but when they send you the design… it’s awful. At this point, just be honest with them. You may be concerned about hurting their feelings or ruining the relationship, but honesty is key. Simply tell them “I’m sorry but I’m going to pass on the project, the design doesn’t appeal to me.” That’s it!

Building a business is tough, especially when you don’t have work coming in. Spend that time learning new things, working on personal projects, or simply kicking back with some Star Craft 2. All in all, keep positive, be honest, and know your worth, and everything will be fine.

The CSS Important Flag

Posted by Pete Schuster on March 21, 2013

This post is part of a series on techniques that marked a paradigm shift in the development of my skills.

In CSS, the important flag is used to outweigh other properties of an element even inline styles. With the “!important” flag appended to the end of a given property, that property will take precedence on the styling of the element regardless of the specificity of other selectors in the cascade. In other words, dropping an important flag is like dropping a nuclear bomb on your element.

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS

1
2
3

p { margin: 0; text-align: right !important; }
 
#main p { text-align: left; }

As you can see from the example above, the “!important” flag out weighs the ID selector and styles the paragraph with text-align: right.

In order to maintain a stylesheet that modulular and in coherence with OOCSS and SMACSS, I find it’s best to avoid using IDs and the “!important” flag all together. Sometimes, however, the “!important” flag can come in handy when dealing with third party integretions or even with error messaging.

HTML

CSS

1
2
3

.third-party-widget { z-index: 10 !important; }
 
.third-party-widget p { font-family: sans-serif; }

In the example above, we included a widget from a third party via javascript that outputs some HTML with inline styles. The z-index of the widget is conflicting with some overlays we have set up on the site, and we want to get rid of the Papyrus font because… yuck. We can outweigh those inline styles with the use of the “!important” flag.

HTML

CSS

1
2
3

.widget { padding: 20px; color: #eee; background: #333; }
 
p.error { color: red !important; }

In this final example, we’re using the “!important” flag to ensure that our error messages are always styled properly regardless of context or its position in the cascade.

The important flag is a very handy tool, but like anything else, if used too much or without planning can quickly turn your stylesheet into a war of specificity. Be sure to use the important flag with care.