Follow by Email

Friday, May 11, 2012

10 Commandments for Freelance Web Designers to Live By

Do you ever compare your work to the work of other designers? Are you afraid to ask clients for money?

If you are a freelance web designer, you know how difficult this lifestyle can be. From scheduling, to dealing with crazy clients, to managing your own work/life balance—there is a lot to juggle!

So to simplify your life a little, I am letting you in on my 10 Commandments of Freelancing that have helped me through many tough times. I hope they help you too!

10 Commandments for Freelance Web Designers to Live By

Freelance Web Designers Commandments

1. Thou Shalt Start Small, but Dream Big

Whether you are just starting out or have been freelancing for a while, remember, everyone starts small. If you keep working diligently at building your freelance career and believe you can succeed, you will notice positive growth over time. Don’t ever give up!

2. Thou Shalt Not Beat Yourself Up and Compare Yourself to Others


Image by Nighthawk

Low self confidence will impede your progress as a freelancer. Don’t let anyone ever tell you that what you do is easier than working a 9 to 5 job. Yes, you create your own schedule and there are many perks, but the mental battle can be fierce! You must constantly put yourself out there and you become vulnerable every time you submit work to a client.

Have you ever had these thoughts?

Will they like my work?
Will they reject it and think I am not qualified?
What if they don’t like it? Will I ever make a living doing this?

First, remember that your work is not a direct reflection of who you are as a person. Separating your personal worth from your work is half the battle. It’s OK to make mistakes and work through them. Mistakes do not define you; they make you stronger.

3. Thou Shalt Not Forget How Much You Know

You do not have to be the award-winning, perfect, millionaire-making designer to provide your clients valuable services. This doesn’t mean you should stop learning and growing in your craft. But, most web designers fail to realize how MUCH they actually know because they are so busy comparing their knowledge to other successful designers instead of serving their clients.

And if you have been working as a freelancer for a long time, it is easy to forget how much knowledge you have because your skills have become so commonplace to you. It is NOT common knowledge to your clients, if it was, they would not be coming to you for help! You have something to offer!

4. Thou Shalt Not Feel Guilty About Asking for Money


Image by johnridley

This commandment ties into the last one. If you know the value you offer, you will not feel guilty about invoicing a client. Your clients are paying you for your service and time and if you gave the project your all, you deserve every penny owed to you.

5. Thou Shalt Keep a Schedule or Face Procrastination

Procrastination is like our evil sidekick that vies for our attention. For me, it attacks when I hit an obstacle with a project. It’s much easier to check Facebook or respond to a friend’s email then to tackle an obstacle head on.

To avoid procrastination, create a weekly/daily schedule and assign hourly tasks. When I create a schedule the night or week before, I know exactly what needs to be accomplished and how much time it should take. If you do not create a schedule, you will be tempted to push a project back another day and convince yourself you will have time to finish it tomorrow.

6. Thou Shalt Not Work Yourself to the Bone

Some freelancers have the opposite problem of procrastination. If you stay up late at night and take on more projects than you know you can handle, you may need a reality check. The extra stress is not healthy, even if you need the money. Your health is not worth it!

If you feel like you are working too much, it may be time to raise your rates. Never underestimate what you are worth.

Don’t think that no one will pay you what you are worth. When you have this mindset, you take the low-paying projects and work harder than you have to. There are plenty of clients who pay for quality work.You just have to know how to brand yourself to look like the expert that you are and market your services accordingly. If you are confident in your services, your clients will be as well.

7. Thou Shalt Change Out of Your Pajamas


Image Credit

I know I am not the only one who, from time to time, stays in my PJ’s all day! Raise your hand or leave a comment if you are equally guilty! It’s way too easy for freelancers to roll out of bed and go straight to your desk.

On days when I am not leaving my office, I find it productive to get ready as if I am leaving for a meeting. When you remain in your pajamas, you will stay in “sleep mode.” When you get dressed for the day, you become energized and more ready to face the day.

8. Thou Shalt Get Up and Move Every Hour

Have you ever sat at your computer in a comatose state for more than 10 hours at a time?

For health reasons it’s good to get up and walk around every hour, even if for just a few minutes.

It gets your blood circulating. It’s not good to stay in a sedentary state for longer than an hour at a time.

9. Thou Shalt Say No!


Image by Oddball27

Remember that it is OK to say “no” to a project if it doesn’t line up with your skillset or your desired budget. You are hiring your clients just as much as they are hiring you. If you are not comfortable with a task or the nature of the work, pass on it. You will be happy you did.

10. Thou Shalt Not Work for Free

If you are just starting on your first few projects, you can offer free work in exchange for exposure, but most of the time it is not worth it. Clients will give you every reason to work with them for next to nothing and promise you grand exposure even though their website doesn’t even have enough traffic to track. Do your research and just say no!

Do you have other commandments you live by? I would love to hear more!

Powered by Qumana

Monday, May 7, 2012

Ultimate Guide to Responsive Web Design: 55 Stunning Tools, Tutorials, and Examples


It is estimated that within two years mobile internet users will overtake the desktop internet users. The rapid advancement of mobile internet has enabled more and more people to use their mobile device as a primary web browsing tool. What does it mean for web development? Well, the usual development for just a couple of screen resolutions is already dying out.

Mobile is the new trend and most of the businesses are recognizing it. Having a fluid and responsive website will not only make you cooler, it’s the new way of increasing conversions and engaging your visitors.

Not sure where to start? Responsive design might not be as big a mystery as you’ve imagined it. Indeed, there are frameworks and plugins that will make it much easier for you to create responsive designs. Continue reading and check out useful tools for creating responsive web design as well as 35 stunning examples of responsive web design.

Ultimate Guide to Responsive Web Design: 55 Stunning Tools, Tutorials, and Examples


1. Less Framework 4


Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

2. Gridless


Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

3. Mobile Boilerplate


Mobile Boilerplate is your trusted template made custom for creating rich mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

4. Skeleton


5. 320 and up


‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

6. Fittext


FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

7. Media Query Bookmarklet


The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.

8. Responsive testing


A quick and easy way to test a website design in multiple screen widths.

9. Media Queries


A collection of inspirational websites using media queries and responsive web design.

10. inuit.css


Inuit.css is a CSS framework built to work on small screens. Inuit.css has a custom grid system builder for creating fixed or fluid grid system igloos.

11. PhotoSwipe


PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

12. Adapt.js


Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page.

13. Adaptive Images


Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. No mark-up changes needed.


We know that not everyone learns through reading, for some its all about actually getting up and doing it. That is why below, we are going to take a look at some good tutorials on responsive web design for those just itching to start playing with it.

1. Responsive Design with CSS3 Media Queries via Web Designer Wall

Media queries are the backbone of responsive web design, and this function of CSS3 will definitely up your ante if you’re familiar with. In this tutorial, Nick La does a great job of introducing and explaining media queries while offering a tutorial for using them.

2. Fluid Images via Unstoppable Robot Ninja

The early adopters of responsive web design were mostly text-based sites, with very few images. This is easy to understand because the one question a lot of people had that made them wary about this new practice was how images would render. Well after going through this article by Ethan Marcotte, you won’t be one of the latter.

3. How To Design a Mobile Responsive Site via UX Booth

This is a great tutorial written by Elaine Simpson, going into great detail and giving a great process to follow when going about a responsive design.

4. Responsive Data Tables via CSS Tricks

Data tables are an important aspect of showing results, or grouped information on a website. With this tutorial, you’ll learn how you can keep this aspect with style.

More Tutorials

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website via Smashing Magazine

Context Aware Image Sizing via Filament Group

Awesome Tutorials To Master Responsive Web Design via Cats Who Code

Experimenting With Responsive Design via Lee Munroe

Optimizing your email for mobile devices with the @media query via Campaign Monitor


Trying to learn new material is always hard when first starting out, which is why having great written work on the subject is a great way of easing the learning curve. That is why before going any further, we’re going to take a look at some very useful books and blog articles on responsive design.

1. Responsive Web Design By Ethan Marcotte

It is only right to start off our listing of great resources on responsive web design with this thoroughly detailed book written by Ethan Marcotte. In this book, Ethan guides an exploration of understanding and appreciated what is responsive web design. Honestly, this book very well may be all you need.

2. Responsive Web Design: What Is It and How To Use It via Smashing Magazine

This article written by Kayla Knight for Smashing Magazine is probably the best, at the very least one of the best, published articles in the blogosphere on responsive web design. This will give you a good explanation of what exactly responsive web design is, how it works, and how you’ll leave knowing some cool ways of implementing it.

3. Beginner’s Guide to Responsive Web Design via Think Vitamin


If you’re looking for something informative, and more so straight to the point, as a good introduction to responsive web design then Nick Pettit wrote the article for you. Nick did a good job at offering a very easy to follow explanation of responsive web design for the less experienced web designer or developer trying to get their feet wet in this new practice.

4. Introduction to Responsive Web Design via 1stwebdesigner

This is a solid offering by Christian Vasile at introducing those new to this topic, while also doing it in a brief manner.

More Reading

Responsive Web Design via sitepoint

Responsive Web Design via A List Apart

Responsive Web Design Demystified via Elated

Seven Lessons Learned From Responsive Web Design via .Net Magazine

Responsive Web Design Techniques, Tools and Design Strategies


1. Briangardner



2. Notloremipsum



3. Fortysevenmedia



4. Brace Yourself



5. Osvaldas



6. Thegregthompson



7. Studiopress



8. Food Sense



9. 255creative



10. Paperstreetinteractive



11. Raewynbrandon



12. Gonzoblog



13. Zync



14. Techdept



15. Pelicanfly



16. Marijazaric



17. Raymacari



18. Handsomecopy



19. Jaypegams



20. Joshuasortino



21. 36creative



22. Whitelotusaromatics



23. Forefathersgroup



24. Dentsunetwork



25. Upperdog



26. Teehanlax



27. Weareduo



28. Unfold



29. Builtwithmomentum



30. Glorm



31. Quazarwebdesign



32. Agenciart



33. Apgdesign



34. Createdm


Powered by Qumana