Web designers have a lot to deal with and we’re not just talking about the work that they are doing. Malfunctions, miscommunications, subjective tastes, colors that are not colors, micro-managers, fickle trends, bosses that don’t get it, clients that refuse to get it, and the list goes on.

(Image Source: Alan Guzman)

Perhaps, that is why there are so many of these Keep Calm and [insert tongue-in-cheek solution here] posters around to keep our collective chins up. Here are 12 Keep Calm posters that let you have a good glimpse into the designer’s daily struggles. And to all our beloved web designers, we share your pain(!) and we salute your courage to soldier on.

Read Also: 10 Things Freelancers Don’t Like Hearing From Clients

Keep Calm and Carry On. Having a bad day with designer’s block? Just keep calm and carry on! (Image Source: Graham Phisher)

Keep Calm and Save Often. It’s the oldest rule in the book, because if you don’t, well, we’ll let this Twitter stream say the rest. (Image Source: Alex Jane Art)

Keep Calm and CMD+Z. Previously known as the Undo button, this is the command that we wish to have a real-life counterpart to. (Image Source: Paweł Kadysz)

Keep Calm And Use The Force Quit. Then, breathe! Breathe like Vader! (Image Source: ron-guyatt)

Keep Calm And CTRL+ALT+DEL. You win some, you lose some, but if you stay calm, you can start again. (Image Source: Keep Calm And Posters)

Keep Calm And Google It. Don’t you feel all warm inside knowing that Google has your back? (Image Source: Manish Mansinh)

Keep Calm And Look Busy. If you ever wonder what the real purpose for social networks is, there you have it. Someone’s coming, look busy! (Image Source: Manish Mansinh)

Keep Calm And Make The Logo Bigger. Sometimes the client from hell deserves a chair in the face. Other times, we should just watch our blood pressure and make the logo bigger. (Image Source: Eleonora Anzini)

Keep Calm And Lorem Ipsum. They say a web designer’s experience is proportional to how much Lorem Ipsum he can recall. I can do… Lorem ipsum dolor sit amet. Good enough. (Image Source: Eleonora Anzini)

Keep Calm And Type On. Once the type is on, it’s hard to not spend a night perfecting its kerning. (Image Source: Alan Guzman)

Keep Calm And Flip A Table. Keep an extra table nearby just to flip it when things go south, then carry on soldier. (Image Source: Keep Calm-o-matic)

Keep Calm And Redesign The Web. Too many mobile devices to support? HTML5 and Responsive Web Design to the rescue. All hail HTML5! (Image Source: Vinícius de Thomaz Domingues)

Got your own piece of Keep Calm quote to share with us? You know what to do!

As a designer, you have a lot in common with a chemist. That’s right; you experiment daily in your "lab," testing and planning out the perfect, most thorough solution to your clients’ pressing needs. This is professional chemistry, or perhaps even "alchemy" – chemistry’s, shall we say, more metaphysical predecessor.

Through a process that to many clients can seem almost magical, you turn their leaden design problems into elegant solutions. And when they hand over that "gold" for a job well done, everybody wins! But even though professional chemistry is mandatory for every designer, there’s another kind of chemistry that many freelancers take for granted in the quest for gold: personal chemistry.

Recommended Reading: 5 Characteristics Of A Positive Work Environment

Freelancer-Client Chemistry

There are so many different kinds of clients out there. So many management styles. So many demands, so many deadlines, so many revisions, so many contracts, phone calls, emails, scope creeps, suggestions from the CEO’s mother-in-law… it’s enough to drive you crazy!

And with deadlines looming and bills needing to be paid, it’s easy for many freelancers to overlook the vital importance of developing a strong personal connection with the clients they serve. We’re going to explore three reasons why that’s a terrible idea, how it ultimately hurts designers, and what you can do to reverse the trend in your own freelancing career.

1. Starting With the Wrong Elements

First, let’s look at why good personal chemistry is so vital to a successful freelance career. In chemistry (and pardon the vague references – not a chemist) when you combine two elements together, one of three basic things can happen.

There can be a positive (as in good) reaction, like hydrogen and oxygen combining to form water, a negative (as in oh my god) reaction, like an atomic explosion, or no reaction at all, because the elements simply don’t interact with one another.

Staying Positive

We want to have a positive outcome whenever possible, which is why it’s important to start things off with the right "elements," the personality and temperament factors that make both you and your client unique individuals.

First, take some time to give yourself a quick personality test. What’s your temperament like – not just as a professional designer, but as an overall human being? Are you the nurturing type? A bold self-promoter? A sensitive artiste? The "elements" that make up who you are as a person will always determine how you work, and how you deal with other people.

Read Also: 5 Ways To Tame Difficult And Problematic Clients

Making The Connection

Next, ask yourself what types of clients you normally deal with, and compare them to the types you think would be ideal. Two brash, temperamental control freaks, for example, should not be teamed up together under most circumstances.

Working against your natural tendencies is never a good idea. There are exceptions, of course, but in general, you want to pair up with clients who complement, not clash with, your personality.

2. Working With Volatile Chemicals

The reason it’s so important to have good interpersonal chemistry with your clients is because you want to create long-term relationships with them. A string of one-off gigs for quick logos, business cards, or WordPress themes might seem like a good idea when you’re strapped for cash, but they’re actually hurting you in the long run.

These types of jobs require more effort to find, they’re usually less lucrative, and they certainly don’t have a continued payoff. All this means that you’re expending more time and energy for less money.

Read Also: How To Become A High-Demand Designer (And Get The Good Clients)

Solace in Repeats

Repeat clients, on the other hand, are people you get to know and appreciate over a long period of time. They like your work, and they like you. They recommend you to their friends. They’re always giving you new and challenging work.

When things aren’t going so well with a long-term client, however, it can turn into a nightmare. Demanding clients, say, the kind who might pay a retainer so that they can have access to you anytime – even if it’s 3 a.m. – can become such a nuisance that they may actually cause you to have an internal reaction all by yourself (we usually call that a meltdown – not pretty).

Mix With Care

Let’s be honest – we freelancers obviously like things a little bit crazy and unpredictable. But too much volatility in your clients can drain your mental resources and make you too tired to give each of them the value they’re looking for. Paring down your client base to the types of people who best suit your style is essential to keeping what’s left of your sanity intact.

3. Not The Right Reaction

Have you ever noticed that the way someone addresses you has an effect on how you react to them? If someone is rude to you, you’re more likely to raise your voice or be more defensive. On the other hand, if they’re friendly and non-threatening, you’re likely to react in the same manner.

These are social cues that rely on and make up a huge part of communication. Like we went over earlier, some elements, when placed together, have a negative reaction to each other, or simply don’t react to each other at all. Getting the wrong first reaction with a potential client can tarnish the entire process.

Being Real

Adjusting the way you communicate can be helpful in small doses, but it makes for a much more genuine and valuable professional experience if you make decisions about who you are and how you present yourself, and stick to them. If this means cutting certain kinds of clients out of your contact list, that’s probably for the best.

There are an infinite number of people out there looking to hire designers, and there’s no reason you need to resign yourself to working with clients who don’t suit you.

In Conclusion

Your so-called "golden" client, who provides a mutually beneficial, long-term business partnership, may not actually exist. But if they do, they’re probably not going to just drop in your lap. No one simply "finds" gold lying around – you have to go discover it.

The types of clients you’ll have the strongest chemistry with most likely behave a bit like you do. Like you, they’re busy providing a valuable service to people they can get to know and trust. Also like you, they won’t be eager to work with someone who’s not professionally or personally ready to receive them.

Most people don’t want to work with generic, all-purpose "service providers" – they want to work with other people. People they like. Surprise them by being your genuine self, and they might just surprise you back.

What types of clients do you usually take on? Got any horror stories about times you decided – and later regretted – to take on a client who was a total mismatch chemistry-wise?

Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a number of methods of measurements used on the Web, specifically in CSS, namely Pixel, EM and Percentage.

In this post, we are going to run through these units to get further insight into these units of measurements.

PX

Pixel is a fixed unit measurement and the smallest unit on screen measurement but don’t confuse this with the Pixel that defines screen resolution. The Pixel in CSS has nothing to do with the screen resolution. When we try viewing a web page fixed at 1024px width say on a tablet with 1024px by 480px screen resolution, the web page will not fit in the screen.

I’ve been experiencing this issue in the past and found out that the Pixel in CSS is actually not a linear unit – it is in fact a radial measurement. Basically, the Pixel in CSS measures the length of the display area instead of the screen resolution, so the 1024px screen resolution does not mean that the screen is also 1024px of the length.

More On PX

I’m not an expert on the technicalities in this matter but if you know Trigonometry, and want to find out more, check out the following explanation from Sean B. Plamer: CSS px is an Angular Measurement.

Finding The Display Area

So, how do we find the actual display area of a device? Luckily, there is a handy special calculator to roughly estimate the display area in format of Pixel, CM to PX. We simply need the length of the device in cm and the PPI (Point Per Inch) / DPI (Dot Per Inch) which you can get these from the device box. With this, it turns out that the tablet I used is merely 953pxin length.

Recommended Reading: Pixel Identity Crisis

Pixels Font Size in Photoshop

When working on Photoshop, we will find that the font size is by default set to Pt (Points). The Pt unit is ideal for print styles. To not confuse this with px when we are translating it to Web documents, we can change the units from the following menu: Edit > Preferences > Units and Rulers.

There, you get a window option as shown in this screenshot below. Choose ‘pixels’ for the Type unit.

And, we have px for the font size.

EM

EM is a relative measurement. In CSS, EM refers to the multiplication of the default font size from the device or the document itself, that is why I personally word EM as EMphasize, but of course don’t take my word for it.

Here is an example; let’s say in a document, the font size is assigned for is 16px. 1em is equal to 16px, 2em is equal to 32px and so on. Although EM is traditionally used for font sizing and in fact it is the standard unit used in browser styles for measuring font size, we can also used EM to define an element’s length.

The only constraint when working with EM unit is it is not quite intuitive, but there are two practical ways we can handle this. First, we can use this calculator, PX to EM; it’s a handy calculator that I use often.

Another way is to set the document pixel base to 10px, so we can calculate it more easily; for instance setting 15px at 1.5em. Well, I hope you get the basic idea with this example.

Percentage

It is more straightforward with percentage, which measures relatively to the parent length. When the parent width is 800px then 50% would become 400px. In recent years, as Responsive Design starts becoming the web design standard, percentage unit is adapted more frequently in the wild.

Alright, let’s take a look at the following example; this code below defines .container and .main class selector with 60% for the width, but these classes refer to different parents thus they generate different lengths. The .container will take 60% of the browser viewport width, whilst the .main will take .container width as its direct parent.

 .container { width: 60%; margin: 100px auto; background-color: #eaeaea; padding: 1%; height: 250px; font-family: Arial; text-align: center; } .main, .aside { line-height: 253px; } .main { width: 60%; height: 100%; float: left; background-color: #ccc; } .aside { width: 40%; height: 100%; background-color: #aaa; float: left; } 

Thus, it will give us the following nice result:

As percentage is also a relative unit, so it has a similar constraint like the EM unit as well. It is not obvious how much a percentage 15px is of 500px? This generally happens when we translate px unit from the design stage to web document in many cases. There are two ways we can take to this matter, either we do it traditionally with a calculator or if you are comfortable with using CSS Pre-processor, you can utilize the percentage() function from Sass.

Recommended Reading: Responsive Web Design in Sass Part 1: Fluid Layouts and Fluid Images.

Final Thought

There are many discussions on the best practices of using units in web design. But ideally the PX unit should be used when the properties generally need to be precise e.g. the border-radius and box-shadow horizontal or vertical offset, whilst for the EM unit as suggested by W3C is better used for font sizing. Percentage is the ideal unit to use on responsive layouts.

Share your thoughts on the subject.