BlogmyQuery – BMQ

“What? Another “Equal Height Columns” article? Enough already!” If this is what you think, then think again because this solution is different. It does not rely on any of the usual tricks. It does not use images, nor extra markup, nor CSS3, nor pseudo-classes, nor Javascript, nor absolute positioning. All it uses is border and negative margin. Please note that this article will also demonstrate different construct techniques and will brush up on a few concepts.

1. Centering columns without a wrapper div

This layout will be built without a wrapper div:

The basics

We use the background of body and the border of one of the columns to create background colors that vertically fill the “row”.

The markup

<div id="header">
	<h2><a href="#">Header</a></h2>
	<p>Lorem ipsum...</p>
</div>

<div id="sidebar">
	<h2><a href="#">Sidebar</a></h2>
	<p>Lorem ipsum...</p>
</div>

<div id="main">
	<h2><a href="#">Main</a></h2>
	<p>Lorem ipsum...</p>
</div>

<div id="footer">
	<h2><a href="#">Footer</a></h2>
	<p>Lorem ipsum...</p>
</div>

Tip: always include links within your dummy text to spot stacking context issues.

About using body as a wrapper:

• always style html with a background to prevent the background of body from extending beyond its boundaries and be painted across the viewport.
• never style html with height: 100% or the background of body will be painted no taller than the viewport.

The CSS

html {
  background: #9c9965;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
}

#header {
  background: #9c9965;
}

#sidebar {
  float: left;
  width: 200px;
  background: #d4c37b;
}

#main {
  border-left: 200px solid #d4c37b;
}

#footer {
  clear: left;
  background: #9c9965;
}

What do these rules do exactly?

• We style html with a background to prevent the browser from painting the background color of body outside our layout.
• We style body with auto margin to center the layout; the width is set using percentage. The background declaration is for #main.
• We style the background of #header to mask the background color of body (the same goes for #footer).
• The background color of #sidebar matches the border color of #main. This is the trick we use to make our columns appear as being of equal height.
• The footer clears any previous float so it stays below the columns, at the bottom of the layout.

If you take a look at this first step, you’ll notice that the heading in #sidebar is not vertically aligned with the heading in #main and that we have some gap at the top and bottom of the #sidebar. This is because out of these two containers, only one is a block formatting context. So margins do not collapse in #sidebar while they do in #main. This also means that #main will not contain floats and that applying clear:left to any nested element in there will clear #sidebar as well.

So to prevent any float and margin collapsing issues we make all the main boxes block formatting contexts.

#header,
#footer {
  overflow: hidden;
  zoom: 1;
}

#main {
  float: left;
}

#sidebar {
  margin-right: -200px;
}

Note: if things look a bit different in IE 6 and 7 it is because in these browsers default margins do collapse inside block-formatting contexts. The following should also be considered:

• overflow and zoom on #header and #footer make these elements new block formatting contexts.
• For #main we use float rather than overflow to prevent potential issues if we had to offset some nested content.
• The negative margin keeps #main into place because now that it is a float, its border box comes next to the margin box of #sidebar (the negative vlaue must match the dimension of the said box).

If you look at the second step, you’ll see that the border of #main hides #sidebar. This is because of the stacking context. In the flow (tree order), #main comes after #sidebar so the former overlaps the latter.

Positioning #sidebar brings it up in the stack.

#sidebar {
  position: relative;
}

Note: if you make #main a new containing block you’ll revert to the original stack order. In this case, you’ll need to use z-index to keep #sidebar on top of #main.

If you look at step three, you’ll see that we are almost there. The last things to do are mostly cosmetic. I’ve inserted a base styles sheet:

<link rel="stylesheet" type="text/css" href="http://tjkdesign.com/ez-css/css/base.css">

and then added these rules:

html {
  height: auto;
}

body {
  border: 1px solid #efefef;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom: 2em;
}

Why do we need these rules?

• We can reset the height on html so the background of #main is not cut-off at the fold (this styling is inherited from the base styles sheet).
• We can draw a border all around the layout.
• Because the base styles sheet only sets top margins, we can create gaps at the bottom of the main boxes via padding.

Note: The rule for html is shown here, but it makes more sense to remove that rule from the base styles sheet rather than overwriting the declaration here.

This is the last step for this first layout. It relies on these simple rules:

html {
  height: auto;
  background: #45473f;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
  border: 1px solid #efefef;
}

#sidebar {
  float: left;
  position: relative;
  width: 200px;
  margin-right: -200px;
  background: #d4c37b; /* color must match #main's left border */
}

#main {
  float: left;
  border-left: 200px solid #d4c37b; /* color must match #sidebar's background */
}

#header,
#footer {
  clear: left;
  overflow: hidden;
  zoom: 1;
  background: #9c9965;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom:2em;
}

2. Creating a 2-col-layout with two borders in between the columns

We’ll build this one with a single wrapper for our two columns, and we want to paint a vertical border between the two columns.

The basics

The wrapper div allows us to be a bit more creative here. The background of the wrapper is used to paint the background of one column, while its left border is used to paint the background color of the other column. The vertical border will be done by overlapping the right border of the left column with the left border of the right column.

Note: if you have use a fixed width layout (vs. fluid like here), then the wrapper can be used to create the two background colors as well as the vertical border at the same time. This is done by using the left border for the left column, the right border for the right column and the background for the vertical border. Yes, this means the content box is one pixel wide and that negative margins are used to pull the columns into place.

Markup

<div id="header">
	<h2><a href="#">Header</a></h2>
	<p>Lorem ipsum...</p>
</div>

<div id="wrapper">
  <div id="sidebar">
  	<h2><a href="#">Sidebar</a></h2>
  	<p>Lorem ipsum...</p>
  </div>
  <div id="main">
  	<h2><a href="#">Main</a></h2>
  	<p>Lorem ipsum...</p>
  </div>
</div>

<div id="footer">
	<h2><a href="#">Footer</a></h2>
	<p>Lorem ipsum...</p>
</div>

CSS

We start with the generic rules from the previous demo:

html {
  background: #45473f;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
}

#header,
#footer {
  overflow: hidden;
  zoom: 1;
  background: #9c9965;
}

#sidebar {
  float: left;
  width: 200px;
}

#main {
  float: left;
}

To which we add position: relative:

#wrapper {
  display: inline-block;
  border-left: 200px solid #d4c37b;
  position: relative;
}

#sidebar {
  margin-left: -200px;
  position: relative;
}

Note: there is no need to use clear on the footer since #wrapper contains both floats.

• Rather than using overflow/zoom, we use inline-block to create a new block formatting context (this declaration also triggers hasLayout). The left border will paint a background color behind #sidebar.
• Negative margin is used to bring #sidebar outside the content box of the parent’s container (to make it overlap the border of #wrapper).

The case of IE6: If the above rules use position: relative (twice), it is because of IE 6. It is applied on #wrapper to prevent #sidebar from being clipped outside of its content box. It is also applied on #sidebar to make sure that the elements are “always” painted with the proper offset.

If you look at this first step, you’ll see that we have everything working, but the vertical border is in between the columns. You should also notice that in browsers other than IE 6 and 7, there is a small gap at the bottom of #sidebar (at the bottom #wrapper actually). This is because #wrapper is styled with inline-block so it is sitting on the baseline of the line box. The gap you see is the “descender space” (the space reserved for descenders in lowercase letters).

So these are the rules to remove the gap and create the vertical border:

#wrapper {
  vertical-align: bottom;
}

#sidebar {
  margin-right: -1px;
  border-right: 1px solid #888;
}

#main {
  border-left:1px solid #888;
}

What do these rules do?

• vertical-align: bottom makes #wrapper sit at the bottom of the line box rather than the baseline.
• the two borders (for #sidebar and #main) overlap because of the negative right margin set on #sidebar. This overlap guarantees that this “common” border will be as tall as the tallest column.

If you look at step two, things look much better. The last things to do is to add the base styles sheet and the same rules we used at the end of the first demo:

<link rel="stylesheet" type="text/css" href="http://tjkdesign.com/ez-css/css/base.css">

and then add these rules:

html {
  height: auto;
}

body {
  border: 1px solid #efefef;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom: 2em;
}

This last demo for this layout includes the above rules.

3. Creating a three column layout with a border in between the columns

We’ll build a layout with a single #main-wrapper, one containing all the divs. This approach complicates things a bit, but it also allows to tackle new challenges. Please note that with this layout, the vertical borders will not show in IE 6 and 7.

The basics

We use the wrapper to create the background of the three columns. The left and right borders of the wrapper will be used for the two side bars while its background will be used for the main content.

The markup

<div id="wrapper">
  <div id="header"><h2><a href="#">Header</a></h2><p>Lorem ipsum...</p></div>
  <div id="sidebar"><h2><a href="#">Sidebar</a></h2><p>Lorem ipsum...</p></div>
  <div id="aside"><h2><a href="#">Aside</a></h2><p>Lorem ipsum...</p></div>
  <div id="main"><h2><a href="#">Main</a></h2><p>Lorem ipsum...</p></div>
  <div id="footer"><h2><a href="#">Footer </a></h2><p>Lorem ipsum...</p></div>
</div>

CSS

We start with the generic rules from the previous demos:

html {
  background: #45473f;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
}

#header,
#footer {
  overflow: hidden;
  zoom: 1;
  background: #9c9965;
}

#sidebar {
  float: left;
  width: 200px;
}

#main {
  float: left;
}

To which we add:

#wrapper {
  border-left: 200px solid #D4C37B;
  background-color: #ffe3a6;
  border-right: 200px solid #D4C37B;
}

This code sets the background color for the three columns. In the same sequence as the above declarations.

If you look at this first step, you’ll see that we have achieved the background effect we are looking for, but things look pretty broken. Everything shows inside the wrapper’s content box.

These next rules should fix the display of the three columns (zoom: 1 for the #wrapper and position: relative for #sidebar and #aside):

#wrapper {
  zoom: 1;
}

#sidebar {
  margin-left:-200px;
  position: relative;
}

#aside {
  float: right;
  width: 200px;
  margin-right: -200px;
  position: relative;
}

#aside is given a width and floated to the right. The negative margins pull each side bar over the wrapper’s border — outside of the content box.

Note:IE 6 and 7 needs #wrapper to have a layout, hence the use of zoom. IE 6 needs the two position declarations for the same reason as in the previous demos.

If you look at step two, you’ll see that #header does not stretch across the entire layout and that #footer is nowhere to be found.

These two rules should take care of everything:

#header,
#footer {
	margin-left: -200px;
	margin-right: -200px;
	position: relative;
}

#footer {
  clear: both;
}

The negative margin on both sides of #header and #footer stretches the two boxes outside of the wrapper’s content box. clear:both makes the footer clears all the columns. This is step three.

Once again, the position declaration is for IE 6. Just remember to always position elements that you offset.

What’s next?

You know the drill. We insert a base styles sheet in the document:

<link rel="stylesheet" type="text/css" href="http://tjkdesign.com/ez-css/css/base.css">

and add the usual:

html {
  height: auto;
}

body {
  border: 1px solid #efefef;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom: 2em;
}

Step four shows how things look before we tackle the vertical borders.

Adding vertical borders

The following technique is inspired from the companion columns technique (Ingo Chao) and the Nicolas Gallagher method.

To get the effect we want (two borders touching each other), we use generated content to which we apply a background color and a border.

The CSS

html:before {
	content: ".";
	position: absolute;
	height: 20px;
	background: #45473f;
	left: 0;
	right: 0;
	z-index: 2;
}

body {
  border-top: 0;
}

#header {
  border-top: 1px solid #fff;
}

#wrapper {
  position: relative;
}

#header,
#footer {
  z-index: 1;
}

#wrapper:before,
#wrapper:after {
  content: ".";
  position: absolute;
  width: 1px;
  height: 2000px;
  background: #9c9965;
  bottom: 0;
}

#wrapper:before {
  left: 0;
  border-left: 1px solid #fff;
}

#wrapper:after {
  right: 0;
  border-right: 1px solid #fff;
}

body {
	position: relative\9;
	z-index: -1;
}

OK, so what’s going on here?

• The fake borders get out of the container (at the top), so the first rule paints generated content on top of them. Note that we would not need this rule if the color of the fake borders was the same as the page’s background (html), or if there was no gap between the top of the viewport and the layout.
• Because these borders are painted over the border around body, we move the top border from body to #header.
• To properly position the fake borders, we need to make the wrapper the containing block for the generated content.
• We bring #header and #footer above the stack so they hide the fake borders which are painted inside the wrapper (from bottom to top).
• This is the generated content we use to create the columns.

The case of IE 8: The last rule is for IE 8. Without this, IE 8 would not paint the generated content over the borders that escape the wrapper (at the top). If this declaration is sandboxed via the “\9″ hack, it is because Gecko browsers would make everything unclickable/unselectable.

Note: these pseudo-classes are not supported by IE 6 and 7, so in these browsers, there are no borders between the columns.

Things to consider

The third layout uses one main wrapper, but it would make more sense to use a inner wrapper instead to hold only the columns. In case this route was taken here, then it was only for those of you who are stuck with this type of construct, but want to implement this solution for equal height columns.

When absolutely positioning elements inside a containing block with wide columns like in the last two demos, remember that the reference is the padding box, so 0 for right or left may not be the value you would want to use.

Further reading

• Faux columns
• Ultimate multi-column liquid layouts
• Doug Neiner Method
• Nicolas Gallagher Method
• Balance your CSS Columns with JavaScript
• Absolute Columns
• Companion columns

(ik) (vf)

© Thierry Koblentz for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: borders, CSS, height columns, negative margins

by Bhanu Ahluwalia

Designing wallpapers in Photoshop is mostly admired among designers. And why shouldn’t it be? You are free to decorate your desktop any way you like. You can go for abstract, nature, typography, simple, contemporary or any other style you want. Besides this, designing wallpapers is also a fulfilled way to master new techniques. Today’s post provides you a compilation of the techniques available in Photoshop; for beginners as well as for experts! So take your time and have a look at these tutorials — and take your creativity to the next level!

Save the Planet Wallpaper Concept — In this tutorial, all you will need is a picture of an apple and one of the earth; merging them together makes an interesting wallpaper concept.

Creating a Simple yet Creative Graphic Typography Wallpaper Design — This tutorial helps you create a simple but creative graphic typography wallpaper.

How to Make a Simple Green Wallpaper in Photoshop — In this tutorial, you can see how a simple green wallpaper is made using Photoshop.

Duality Wallpaper — This DUALITY wallpaper is inspired by an amazing fractal freeware called ContextFree.

Mother Nature Artistic Wallpaper Design — Easy techniques to make an artistic mother nature design wallpaper using Photoshop.

Create an Intensely Grungy Wallpaper — In this tutorial, the artist shows you how to create an intensely grungy wallpaper.

Forest Fairy Wallpaper — In this tutorial, the artist shows you how to make a Forest Fairy Wallpaper.

Creating nice wallpapers for your desktop — Here the artist has made a beautiful apple wallpaper and shares the technique with us.

Creating a Very Shiny Summer Wallpaper — Learn how to create shiny summer wallpapers.

Creating A Final Fantasy XIII Wallpaper — Wallpaper inspired by the game “Final Fantasy XIII”.

The Screamusic Wallpaper Tutorial — Simple techniques to help your creativity.

Creating a Wallpaper Based on Making of the Logo — This tutorial will show you how the creation of a logo can help you create the rest of the elements of the corporate style and even into a wallpaper.

How to Make a Wallpaper — Here you can make a wallpaper using produced custom brushes, colour gradients and non-standard fonts with Photoshop as a main application.

Creating A Graffiti Car Wallpaper — Here you can learn how to create a graffiti wallpaper for a hot looking car.

Create an Astonishing Soccer Desktop Wallpaper Using Photoshop — In this tutorial, the artist will be creating a very simple but nice looking desktop wallpaper.

Matte Painting Wallpaper — In this tutorial, we will make a fast matte painting wallpaper. Matte painting is actually based on a photo with different hand painted elements.

Stunning Abstract Wallpaper Design — This tutorial shows you some simple ways using the pen and brush tools to create a really cool abstract wallpaper.

Making of nine and venue wallpaper — In this tutorial, the artist shows you how to make a nine and venue wallpaper.

Create an Abstract Wallpaper for World Cup 2010 — This tutorial will show how to create an abstract glowing background using the various brushes and warp transformation tool.

Create a Futuristic Abstract Wallpaper — In this tutorial, the author shows you how you can use filters to create wallpapers with abstraction in futuristic style.

Graphic Wallpaper: Hit-Girl — In this project walkthrough the artist shows you the different techniques that went into creating a graphic featuring the show-stealer Hit-Girl.

Clash of the Titans: Medusa — The Gorgon Queen Medusa is back in the Clash of the Titans; here the artist felt very inspired and so has created a wallpaper of Medusa.

Creating Avatar Movie Wallpaper — Here is an interesting tutorial how to create an Avatar movie wallpaper.

Desktop Wallpaper Calendar February 2010 — Here the artist has created this wallpaper calander keeping Valentine’s Day in mind.

How to Create an Abstract Colourful Background with Bokeh Effect in Photoshop — In this tutorial, you’ll learn how to create an abstract colorful background using the bokeh effect and the rest of Photoshop’s drawing tools, blending modes, and lighting techniques.

If This is Your First Night of Fight Club… — Here you can learn the techniques on how to make a gritty fight wallpaper.

Create a Fantastic Grayscale Wallpaper in Photoshop — In this tutorial, the artist explains how to create a fantastic grayscale wallpaper in Photoshop.

Creating Your Own Custom Gaming Wallpaper — In this tutorial, you can create your own Super Paper Mario Wallpaper.

How To Draw Mother And Baby Turtle Wallpaper — This tutorial shows you how to make a lovely mother and baby turtle wallpaper.

The Warrior Angel — Here’s a walkthrough of the creation of a wallpaper featuring a mystical warrior angel.

Quick And Dirty Space Monitor — In this tutorial, the artist has created his own custom Space Monitor Display.

Creating a Celebrity Wallpaper — Learn how to create a celebrity wallpaper.

Wall-E Cartoon Style Wallpaper — You must have watched Wall-e movie. This tutorial shows you how to make it immortal as a wallpaper.

(ik)

The Web has continued evolving since its inception, as have those who have devoted their professional lives to working in and around this massive communication tool. We have had to roll with the changes, and like with any major environmental shifts, we have had to adapt. During this shifting of our online existences, something quite interesting happened… interesting in a somewhat frustrating manner. The expectations of the client base, our colleagues and even our friends have risen to new, unreasonable heights.

Though this is not an isolated instance of schedule disrespect, we do understand that not every potential client or colleague is going to hold on to these extremely elevated expectations, so this post is directed only at those who do. Do not misunderstand, there is nothing wrong with having expectations about a profession, but when you allow those unchecked presumptions to take you to a disrespectful place, then a line is being crossed. One that we hope to clearly draw in the sand, for any and all of those who share in this frustration, with this article today.

What’s the Crux?

Basically, at the forefront of this disrespect is the issue of time. After all, timing is everything. And it further seems, that when it comes to time, it is always on the verge of running out on everyone. From somewhere, came this overwhelming sense of urgency that seems to have tightly gripped so many people and it is not letting up. And for some reason, they expect this sense of urgency to be completely contagious. For everyone to pick up on this pressing sense and let it push them into action as well. Which is understandable for sure, but it is not entirely fair.

It also makes assumptions that further disrespects these professionals and their other clients. It assumes that they can devote all of their attention and time to you and your project. Which just further implies an importance that your project has over any and all else. Which it does. To you. But can you reasonably expect the same from everyone who operates off or online, who has their services offered to millions of members of the public? One would not think so, but it happens. For some reason our time, no matter the professional arena in which we hang our hat, is considered 100% theirs once a contract is in place or the agreements are made and the work begins.

Sometimes it is necessary to pull yourself away from work and just take a break. Image credit: Petra Fritz

Suddenly like doctors who are on call, no matter the day or the hour, seemingly with no consideration given to our schedules whatsoever, we are expected to be available and at the ready whenever the client needs us. Our websites and e-mails are treated as virtual help desks that we should be manning 24/7/365. Twenty four hours a day, seven days a week for three hundred and sixty five days a year. No interruptions or distractions are allowed. Life, which typically has a tendency of getting in the way, is not permitted to do so for the actively, online business professional. How is that reasonable?

Once upon a time, there were those of us playing this business game who believed that it was completely unnecessary and unreasonable for us to take our work home with us. We’ve surely had times, when it was not easy to let the work stay behind as we clocked out, but it was not a constant element of our jobs. And there were those of us who believed that was just the way this game would play out. But we were apparently mistaken. It seems that to some members of the public, we have apparently connected dots which have led to a misunderstanding of our accessibility. What some might even label as a reluctance to understand rather than a simple misunderstanding.

Where Have All The Weekends Gone?

Time was, people would have a solid work week, which was commonly a day or two shorter than the full seven day cycle that filled our calendars. They would put in their forty plus hours squeezed into about five days and take two for themselves. It was not only welcomed, it became expected. But then something began to change. The landscape shifted, and those expectations were no longer extended to all fields of business. Including those whose business was largely, if not all, based online. Suddenly, these weekends were no longer sacred.

We were not allowed to be away or out of reach, not for a day, so certainly not for two. But why? Is this simply a reflection of the way that our ‘jobs’ are viewed by those outside of the field looking in? Is this a lack of respect, or is it something less sinister than that? Is it a personal thing that we need to cope with on our own? Is it a matter of self-organization and saying ‘no’ to people having such high expectations? Truth be told, it is almost certainly not any one answer, but more a combination of them. After all, we are dealing with a large segment of the world populous, so generally there is not just one route to the heart of this issue.

How Did We Get Here?

So just exactly how did we end up here? Maybe if we can understand how this came about, we can effectively combat these misconceptions that have led to this place of unrealistic expectations. This would make things go smoother for both the clients and the professionals involved in the project. When everyone comes to the table with reasonable expectations, there are fewer surprises to upset the flow and raise the stress level of the project. This is the best environment to work in, but we find a much more hostile one currently in its place. One that was wrought from a handful of contributors.

Oops, Our Bad!

First off, we should admit up front, that a portion of this blame could (and probably should) fall on our shoulders. So before we go pointing any fingers elsewhere, we should point the first one at ourselves. For years, many business professionals have been flocking to the Web and writing about the lengthy, dedicated schedules that we tend to keep, and how many long hours are involved in our choices of profession. Especially if our work centers around the Web. Perhaps this information has been completely misconstrued and misinterpreted into an endless accessibility.

Add the fact that many of us professionals get to work from home to that, and people surmise that means we are never far from our base of operations. This further leads down the road to people expecting us to always be checking in. After all, we are never going to be far from home, right? At least, not for any significant length of time.

The Mobile Web!

Another factor that helped bring about this landscape is the mobile Web and the near unlimited connectivity it offers. Given that a number of us have our businesses online, we are all expected to carry the Web with us any and everywhere we go. Thus eliminating any excuse for us to ever be out of reach. So many mobile devices bringing the Web into a more portable hand-held format was a game changer for many reasons, but this one was perhaps unforeseen by many in the online community.

Suddenly this Web trend exploded and connectivity not only became more accessible and common. It became an expectation. Especially for those working in the digital online realms, as we are seen to always be sort of ahead of the game when it comes to the digital media that shapes the Internet.

Rodney Dangerfield Syndrome

Sometimes, however, these unrealistic expectations stem from a fundamental lack of respect for the work that we do, particularly for those working from home or in any sort of creative field. Plain and simple, just like Dangerfield repeatedly lamented, we get no respect! There are always going to be people outside our field who cannot understand how much focus and finesse goes into our work, and as a result they undervalue our contributions.

Not only that, but there are those who underestimate the length of time it takes for the creative process to run its course. They think that we can just easily crank out the design, the code, the article, whatever the work is, with little to no effort. Therefore they tend to rush the project by setting unreasonable deadlines, essentially undercutting the effectiveness of the project.

The Weakened Economy

Another factor that could possibly offer insight into these expectations coming in way above reason is the decline in the global economy. Overall, the standard value of money worldwide has seen better days, and this has left many people needing to make their money stretch. This has seemed to leave them expecting more for their money. This could also put them in a less than trusting mood when they begin dealing with a faceless online professional who is virtually anonymous to them. They see little recourse should something go wrong, given that there is no physical source to travel to and personally take on. So they get a little nervous which can cause them to be excessively hands on. Unfortunately, their nerves do not get any better if they find that they cannot reach us when they need to.

Customer Privilege

The last road that led to this place we are going to look at here is one created by the corporate shot-callers of the past, and exacerbated by an entitled nature that many have adopted. Customer privilege. Or rather, the customer is always right, gone horribly, horribly wrong! Businesses around the globe sold consumers everywhere this bill of goods, and they ran with it. Believing that — no matter the context or situation — they are always right, and always deserving of our fullest attention whenever they feel they require it. The idea of other clients or projects requiring time does not work for them, because it is not their concern. They are priority number one in their eyes, and they do not understand that we do not share this outlook, because once upon a time, businesses everywhere, told them they were.

You don’t have to work every single day. It’s important to have side projects that are not directly related to work. This free time will help you broaden your horizon and bundle your energy for upcoming projects. Image credit: See-ming Lee

How Do We Proceed?

Now that we have got here, what can we do to alter this course? The road is already paved and everyone has been steered to this place, so what can we do now to reset this bar? Well, hopefully we can find some common ground of understanding and right this course as a team of professionals and clients. Going forward with a full comprehension of how we got to this place and why it is a bad place to be, we can start repairing these breaches that for too long have been a damaging bump in the business road.

The Under is Over

For starters, we have to agree to stop underestimating one another. This happens on both sides of the fence, so we as the professionals have some work to do in this area as well. We often underestimate our clients and their ability to fully grasp our concepts and ideas, so we try to work around them rather than work with them. So from both ends of the business relationship the underestimation has to end in order for some of these breaches to be corrected and the disrespect to stop. We both need to realize that it certainly takes two to tango in this case. Without the company, the client would be lost holding on to a concept that they cannot implement. And without the client, the business would have no work to finance their operation. It is a symbiotic relationship indeed.

Play it Passive

There are times when we have to realize that things will not change unless we force them to from our end. And this does not have to be handled in any abrupt manner that could potentially strain the relationship, in fact it can be handled quite passively. Just by simply ignoring these messages until we are back in the office (even if we never truly left it). Essentially, we can just set a schedule that allows us to take time off from urgent client calls — and also stick to it. Don’t allow the client or their concerns to encroach on our time ‘off’. The time we need to reset and unwind so that our creative outputs remain fresh and freely flowing.

This is not to say that we do not work on certain days, just that we put off getting back to people during those times. For instance, by simply explaining to your clients that you are willing to dedicate your weekend to your family and your personal life, they will respect you even more for your firm decisions.

Offer Other Outlets

Another thing that can be done to help alleviate some of these unreasonable access expectations is to let the clients know up front that through your standard contact information you have a 24 to 48 hour rate of return. This way if they tend to be the nervous type of client they expect to wait, and do not go forward with the idea that we are somehow always waiting at the other end of the proverbial line. This way they will not immediately assume the worst when they find themselves agitatedly lingering in antici…pation. Then you can offer them other channels to reach you in the case of emergencies. This can not only give them an added layer of peace of mind, but it can further let you know if what they need is truly urgent and needs to be addressed as soon as possible. If the contact comes through the emergency channels then you know not to put it off.

Take the opportunity to put your feet up during the weekend and enjoy a cup of coffee or tea with an old friend. Image and design credit: Julia May

Virtue Takes the Cake

Patience, what seems to be a long forgotten virtue, needs to be revived in a big way. Losing our cool, especially in a professional environment is not the way to successfully achieve our ends. Generally, this actually actively works against you, essentially getting in your way. Patience is the way to understanding, and as we said before, understanding is important for bringing about this change. So we need to be more patient with one another and not allow everything in our lives to be chaotically run by this oft-times unnecessary sense of urgency. This applies not just to clients, but to all of us — colleagues, partners, and maybe even friends.

Learn to shut off work, learn to switch off your cell phone and learn not to check e-mails on Sundays. Also, learn to communicate your working routine to your co-workers, partners and clients. Feel free to get creative and explore your imagination on your own during weekends, but don’t let the work become an urgent tyranny that determines the way you live. We have to remember that there are times when we need to think about important things which are not related to work at all. Be it education, self-organization, personal interests, attending conferences, visiting exhibitions, recreation or time with your family. Planting the patient seed with each of our interactions will slowly help us achieve this goal.

Contractual Clauses

One thing that a number of professionals insist on using is a contract to guard against any unrealistic expectations or diversions from being introduced at any stage in the project, but especially in the latter stages where most alterations being asked for are usually game changers that will additionally add undue stress and extra hours of work. Therefore you can use this tool to your advantage to guard against such things. By including a section that guarantees any and all changes made will be allowed at least 5 to 7 hours (during workdays) to fully process and digest before any implementation will begin, can help to ensure that the client is fully thinking things through before turning anything over to you. They will know that no matter what they need done, time will have to be allotted and allowed before it can be enacted, so they may consider all of their changes more carefully.

Forget the Chest, Put Your Cards on the Table

The last thing that we can do on our ends to try and help keep the expectations in a more reasonable place, is to no longer play our cards close to the chest where no one knows what we are going for. Instead, we need to lay our cards out on the table so that there is little to no guesswork left up. If we are open and up front from the start as to our routines and expectations, then that can set a precedent for clients, colleagues and friends to follow in suit. Open dialog is going to be one of our greatest weapons as we try to change this direction and fix this course we are on.

In Conclusion

We are living in the age of instant gratification and unparalleled connectivity, and that has effected our expectations with regards to communication and business. And we are all going to have to adjust and work together in order to prevent the impacts of this age from straining our professional relationships. Hopefully we can work together to get to a place where the expectation levels are set at a much more reasonable height.

Consider Some of Our Previous Articles

• How to Explain to Clients That They Are Wrong is a post that will help with client relationships, as it tells you how to tactfully approach various situations.
• Is John the Client Dense, or Are You Just Failing Him? is another recent Smashing addition that can help us learn more about client relationships.

(ik) (vf)

© Robert Bowen for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: expectations, weekend