2011 August | BlogmyQuery - BMQ

Archive for August, 2011

Aug/11

Live Together or Die Alone : Spec Work vs the Community

by Robert Bowen under Design, Feeds, Web Design

For years the web design and development communities have had an enemy amongst the ranks. A wolf in sheep’s clothing, parading through the communities as a friend of the game, when really it is more of a foe. Perhaps a well intentioned foe, as some might argue, but a foe nonetheless. That enemy goes by the name of Spec Work. We see posts popping up all over the web condemning this community damaging practice, yet still it persists. And what is worse, is that it there are still so many in the community buying into the lie this backward business model projects and perpetuates about it being good for the community.

A No!Spec poster from designer Jeff Andrews

After years of dedicated sites and services springing up around the web to facilitate this selling out of the community, it is easy to see why so many struggling designers and developers see these contests as opportunities, and not as what they truly are. Part of the reason they are struggling. So today we are going to take a hard look at the downsides and damaging impacts of Spec Work on the design and development community in hopes to open a few more eyes to how much partaking in these communal contests for work do more harm than they do good.

The Breakdown

If you are unfamiliar with how this beast operates, we will break it down for you briefly in this first section. The Spec work model is one that relies on the ‘spirit of competition’, where a prospective client comes to the community with an ‘opportunity’ to showcase their skills and potentially get paid for the work that they complete. On the surface it seems like a fairly simple, lighthearted and fun approach that works out well for all parties involved. When in reality, it doesn’t.

A No!Spec poster from designer Rob Gough

In this model we have professionals being asked to use their time, training, and developed skills for free. Time, training, and developed skills that they could be directing towards a more promising and prosperous job. And we hear examples all the time about how you wouldn’t ask this of any other business professional, but that is really not the point. Many of us know that several businesses and handfuls of those outside the field of design undervalue it. So it should come as no surprise that we would be asked to give so much of ourselves so freely. The surprise is that there are so many in the design and development community who are willing to participate.

A Labor of Love Alone

Most of us who chose design or development as a profession do so because we enjoy it. It truly is a labor of love. However, for some, this translates into the fact that the love of doing it is all we should need to work for them. And this Spec work model is simply an evolution of that mindset, as there are a number of these so-called contests that end unresolved because the person hosting found nothing that they liked ‘even after all of their encouraging notes prompting revision after revision spoke otherwise). But the dream is not to just do what we love, there is more to it than that. We seek to make a living doing what it is we love, and Spec work is making that more difficult than ever.

The Impact on the Community

If we want to see the negative impacts that this model is leaving in its wake we need only examine a few ways that it has effected the fields so far. After all, if this model is being represented as being beneficial for the design and development community, and it is through this misguided marketing that so many buy into it, then a look at the true impact could shed light on why there are so many who are avidly anti-spec work. So many that an entire movement has sprung up to rally the community against this model.

The Competitive Market

With so many qualified professionals having chosen to populate this field of business, the market is a fairly competitive one. Just like with nearly every field of business, you have each designer and developer vying for potential clients over the rest of the field. All looking for that proverbial edge that will get them favored over the others. But there is still an artistry behind it which elevates the industry and causes everyone to step up their game. Reflecting positively on the field as a whole. The Spec model amps up the competitive aspect of the market, so that it becomes overly so, without the rest of the benefits this competition usually yields rising in balance.

Lowers the Bar

Not only does this competitive imbalance tend to lead to less than perfect end products, but it also can cause the perception of the field to get driven down from those outside it. Given that these contests undercut the overall design process by hugely shortchanging the project brief and research aspects of it, the work that gets churned out for the contest holders does not measure up to our best work. And with the highly publicized nature of these competition sites and services there are many who see this as indicative of the entire field’s potential. They see these contests and set all of their expectations of the industry based on this model. And what exactly is this saying to them?

A No!Spec poster from designer Von Glitschka

Furthermore, these contests can also leave somewhat of an less than professional taste in the outsider’s mouths. Giving them the impression that the entire field as a whole is still in the the professional infancy stages, and not growing into a fully grown industry demanding to be taken seriously. If we allow our business to determined by these games, then what incentive do they have to treat us as professionals? It is hard enough to get those outside the field to take our profession seriously because our work is steeped in creativity. Creative’s contributions are often undervalued and underestimated as it is.

Reasonable Rates?

As those outside the field begin to let their perceptions of the industry slip, witnessing these contest results and in turn discounting our processes more so than before, the rates that the rest of the community try to charge for their time and work no longer seem reasonable to them. Suddenly it seems as though those charging what should be seen as reasonable rates are looked at as greedy overchargers. And the mindset gets pushed that if there are those willing to do the work that cheaply, then those trying to scale their prices above those more minimal contest rates are doing for no other reason than avarice. In their eyes, a large portion of the community is attempting to gouge them with the pricing model.

And if the rest of us try to explain the rates by breaking down what all goes into the processes and overall time and effort involved, then we are looked at as being dishonest. After all, they can watch the results of these contests come in and argue that our quoted lengthy and involved processes are unnecessarily so. They get to then point to these examples of Spec work as indicative of the industry and say, but it obviously does not take all of that work and planning to complete the task at hand. Because for those outside the industry, they do not see any difference between those contest entries and their potential end result.

Declining Demand

And where does that road lead us? To a bit of declining demand for those wishing to not partake in the Spec work system. Given that so many see this model as a viable solution to any design and development needs, when they find themselves with needs of their own, which direction are they likeliest to turn? They will opt to hold a contest and watch the slew of puppets dance for them with the pull of a single string. So how are the rest of us in the industry supposed to compete? As this leads to less actual paying work being available as more of the potential client base align themselves with this bastardization of the design and development system.

When Scales Tip Beyond Balance

Welcome to the design and development new world order. Look around today and you can see that the scales are already tipping out of balance. When the Spec model was introduced, it was seemingly done so as a cheap alternative for those small businesses and sole proprietors who did not have the financial prowess of their big business counterparts. And so it was initially looked upon as a path of accessibility to the industry, but that is no longer the case as the model reaches beyond these smaller businesses these days. Suddenly we have big companies and businesses who can afford to pay some of the best designers and firms out there, holding competitions to get their design work done rather than handling it the professional way.

Another No!Spec poster from designer Von Glitschka

Facebook recently ascribed to this Spec approach when they decided to host an architectural and urban development contest for their new corporate headquarters that they want to build in New York. So a company that is worth as much as Facebook sees no harm in asking hundreds of professionals to give of their time and expertise freely. And they can do so because of their status. People believe that just by being associated with Facebook in some fashion that they will be looked after and safeguarded against being taken advantage of. Or what is worse, they do not care that they are being taken advantage of because of who is doing the taking.

The Huffington Post also opted for this approach in a recent logo redesign competition. With businesses this large taking part in the devaluing of the industry, it just further demonstrates to others that this is how designers and developers work. It is a labor of love and we are expected to bite any bullet we are asked to simply because we enjoy our work. No other professionals are expected to work for free, competing for a chance to maybe get paid for their work, and we should not either.

Field of Nightmares

This makes the playing field less populated with opportunities and more populated with frustrated games of chance. We end up looking down at a field of nightmares upon which we are expected to slave away with the odds stacked against us, and the rules being written without any consultation or consideration for their impacts on us. They have built it, and we are supposed to come along and be thankful for this damaging construct that undermines the industry as a whole, and our chance to play within it. But we have the opportunity to correct this slight by simply refusing to play this game. Though for some it is not so simple.

Hunger Pains

One underlying and well known reason that Spec work has taken such a hold on the industry is not because of a streak of greed that runs through the members of the community, but because of the hunger pains that run through it. With such a large number of active players in the game, naturally the amount of work we can get for ourselves can be somewhat slim when it comes to pickings. So as we see less actual opportunities on the horizon, and more of these contests cropping up, then it is easy to understand how many of the designers and developers end up with their hats thrown into the Spec work ring.

A No!Spec poster from designer Matt Clarke

Which effectively makes the entire Spec work model that much worse when you consider that by and large it is taking advantage of those struggling to find their footing in this new field. And most of them are hungry. Considering that there is faction of these participants who are also fresh to the field, it is also easy to see how they could get caught up in this industry debacle. Especially if they are students. After all, students are conditioned through internships and work of that nature to understand that not all time and work is compensated. Forgetting that with most internships you are at least given room and board of some sort, so some of your needs are effectively being looked after. In the Spec work model, no one is meeting any of your needs or looking out for any of your interests.

In Conclusion

In the end, the sad truth is that there more than likely is a small niche that the Spec work model could effectively and beneficially serve in the design and development community. However, given the rampant greed and devaluing of the industry by the large corporate sector of the business world, reigning that model into that small a niche may never fully be possible. There will always be those who are willing to take advantage of others situations and circumstances to save themselves money. And unfortunately, there will more than likely always be those hungry enough to allow themselves to be taken advantage of for a shot at bettering their situation. No matter how long a shot it is. What are your thoughts on Spec work and its impacts on the design and development communities? Leave your thoughts in the comment section below.

Consider Some of Our Previous Posts As Well

Quality-Price-Ratio in Web Design (Pricing Design Work) is a post from the Smashing vaults that looks at the difficult question of whether good design always has to have a hefty price tag.
Why Wait For The Opportunity? Create Your Own! is a another previous post from here at Smashing that discusses taking charge of our own fates and not letting our design opportunities be controlled by others.

(rb)

Web Design Leave a Comment more...

Aug/11

The Semantic Grid System: Page Layout For Tomorrow

by Tyler Tate under Feeds, Web Design

in The Semantic Grid System: Page Layout For Tomorrow

CSS grid frameworks can make your life easier, but theyâ€™re not without their faults. Fortunately for us, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently affecting CSS grids.

Problems

Problem #1: Theyâ€™re Not Semantic

The biggest complaint Iâ€™ve heard from purists since I created The 1KB CSS Grid two years ago is that CSS grid systems donâ€™t allow for a proper separation of mark-up and presentation. Grid systems require that Web designers add .grid_x CSS classes to HTML elements, mixing presentational information with otherwise semantic mark-up.

Floated elements must also be cleared, often requiring unnecessary elements to be added to the page. This is illustrated by the â€œclearingâ€� div that ships with 960.gs:

<div class="grid_3">
	220
</div>
<div class="grid_9">
	700
</div>
<div class="clear"></div>

Problem #2: Theyâ€™re Not Fluid

While CSS grids work well for fixed-width layouts, dealing with fluid percentages is trickier. While most grid systems do provide a fluid option, they break down when nested columns are introduced. In the 1KB CSS Grid example below, .grid_6 would normally be set to a width of 50%, while .grid_3 would typically be set to 25%.

But when .grid_3 appears inside of a .grid_6 cell, the percentages must be recalculated. While a typical grid system needs just 12 CSS rules to specify the widths of all 12 columns, a fluid grid would need 144 rules to allow for just one level of nesting: possible, but not very convenient.

<div class="column grid_6">
	<div class="row">
		<div class="column grid_3"> </div>
		<div class="column grid_3"> </div>
	</div>
</div>

Problem #3: Theyâ€™re Not Responsive

Responsive Web design is the buzzword of the year. While new tools such as 1140 CSS Grid and Adapt.js are springing up that enable you to alter a pageâ€™s layout based on screen size or device type, an optimal solution has yet to arrive.

Blame It On The Tools

All three of these problems directly result from the limitations of our existing tools. CSS leaves us with the ultimatum of either compromising our principles by adding presentational classes to mark-up, or sticking to our guns and forgoing a grid system altogether. But, hey, we canâ€™t do anything about it, right?

Well, not so fast. While we wait for browsers to add native CSS support for this flawed grid layout module, a futuristic version of CSS is available today thatâ€™s already supported by every CSS-enabled browser:Â LESS CSS.

LESS brings powerful new features to CSS.

LESS What?

Youâ€™ve probably heard of LESS but perhaps have never given it a try. Unlike other tools such as SASS and CleverCSS, which try to reinvent the CSS syntax, LESS is a superset of CSS rather than a recreation of it. LESS adds to CSS by giving you the ability to use variables, perform operations and develop reusable mixins. Below are a few examples of what it can do.

Variables

Specify a value once, and then reuse it throughout the style sheet by defining variables.

// LESS
@color: #4D926F;

#header {
  color: @color;
}

The above example would compile as follows:

/* Compiled CSS */
#header {
  color: #4D926F;
}

Operations

Multiply, divide, add and subtract values and colors using operations.

// LESS
@border-width: 1px;

#header {
	border-left: @border-width * 3;
}

In this example, 1px is multiplied by 3 to yield the following:

/* Compiled CSS */
#header {
	border-left: 3px;
}

Mixins

Most powerful of all, mixins enable entire snippets of CSS to be reused. Simply include the class name of a mixin within another class. Whatâ€™s more, LESS allows parameters to be passed into the mixin.

// LESS
.rounded(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded(5px);
}

Verbose, browser-specific CSS3 properties demonstrate the benefit that mixins bring:

/* Compiled CSS */
#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Downsides to LESS

Having been skeptical of LESS at first, Iâ€™m now a strong advocate. LESS style sheets are concise and readable, and they encourage code to be reused. However, there are some potential downsides to be aware of:

It has to be compiled. This is one extra step that you donâ€™t have to worry about with vanilla CSS.
Depending on how LESS documents are structured, the compiled CSS file might be slightly larger than the equivalent hand-crafted CSS file.

A Note on Compiling LESS

There are three approaches to compiling LESS style sheets into CSS:

Let the browser do the compiling.
As its name suggests, LESS.js is written in JavaScript and can compile LESS into CSS directly in the userâ€™s browser. While this method is convenient for development, using one of the next two methods before going into production would be best (because compiling in the browser can take a few hundred milliseconds).
Use a server-side compiler.
LESS.js can also compile server-side with Node.js, and it has been ported to several other sever-side languages.
Use a desktop app.
LESS.app is a Mac app that compiles local files as theyâ€™re saved on your computer.

Introducing The Semantic Grid System

The innovations that LESS brings to CSS are the foundation for a powerful new approach to constructing page layouts. That approach is the The Semantic Grid System. This new breed of CSS grid shines where the others fall short:

Itâ€™s semantic;
It can be either fixed or fluid;
Itâ€™s responsive;
It allows the number of columns, column widths and gutter widths to be modified instantly, directly in the style sheet.

The Semantic Grid System uses LESS CSS to offer a new approach to page layout.

Configuring the Grid

Sounds too good to be true? Hereâ€™s how it works.

First, import the semantic grid into your working LESS style sheet.

@import 'grid.less';

Next, define variables for the number of columns, and set the desired widths for the column and gutter. The values entered here will result in a 960-pixel grid system.

@columns: 12;
@column-width: 60;
@gutter-width: 20;

The grid is now configured and ready to be used for page layout.

Using the Grid

Now that the grid has been configured, consider two elements on an HTML page that you would like to lay out side by side.

<body>
	<article>Main</article>
	<section>Sidebar</section>
</body>

The side-by-side layout can be achieved by passing the desired number of grid units to the .column() mixin (which is defined in the grid.less file).

// LESS
@import 'grid.less';

@columns: 12;
@column-width: 60;
@gutter-width: 20;

article {
	.column(9);
}
sidebar {
	.column(3);
}

The above LESS would be compiled to CSS as the following:

/* Compiled CSS */
article {
	display: inline;
	float: left;
	margin: 0px 10px;
	width: 700px;
}
sidebar {
	display: inline;
	float: left;
	margin: 0px 10px;
	width: 220px;
}

This page demonstrates the result. What makes this approach so different is that it does away with ugly .grid_x classes in the mark-up. Instead, column widths are set directly in the style sheet, enabling a clean separation between declarative mark-up and presentational style sheets. (Itâ€™s called the semantic grid for a reason, after all.)

So, Whatâ€™s Behind the Curtain?

For the curious among you, below are the mixins at the center of it all. Fortunately, these functions are hidden away in the grid.less file and need not ever be edited.

// Utility variable â€” you will never need to modify this
@_gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

// Set @total-width to 100% for a fluid layout
@total-width: @_gridsystem-width;

// The mixins
.row(@columns:@columns) {
   display: inline-block;
   overflow: hidden;
   width: @total-width*((@gutter-width + @_gridsystem-width)/@_gridsystem-width);
   margin: 0 @total-width*(((@gutter-width*.5)/@_gridsystem-width)*-1);
}
.column(@x,@columns:@columns) {
   display: inline;
   float: left;
   width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @_gridsystem-width);
   margin: 0 @total-width*((@gutter-width*.5)/@_gridsystem-width);
}

Fluid Layouts

The example above demonstrates a fixed pixel-based layout. But fluid percentage-based layouts are just as easy. To switch from pixels to percentages, simply add one variable:

// LESS
@total-width: 100%;

With no other changes, the compiled CSS then becomes this:

/* Compiled CSS */
article {
	display: inline;
	float: left;
	margin: 0px 1.04167%;
	width: 72.9167%;
}
sidebar {
	display: inline;
	float: left;
	margin: 0px 1.04167%;
	width: 22.9167%;
}

This example shows how the percentages are dynamically calculated using LESS operations, which also applies to nested columns.

Responsive Layouts

No modern grid system would be complete unless we had the ability to adapt the layout of the page to the size of the userâ€™s screen or device. With Semantic.gs, manipulating the grid using media queries couldnâ€™t be any easier:

article { .column(9); }
sidebar { .column(3); }

@media screen and (max-width: 720px) {
	article { .column(12); }
	sidebar { .column(12); }
}

Try It For Yourself

The Semantic Grid System delivers the best of both worlds: the power and convenience of a CSS grid and the ideal separation of mark-up and presentation. Download the grid for yourself, fork it on GitHub, and let us know what you think!

Download the grid from Semantic.gs.

100 Great CSS Menu Tutorials

by Kevin Muldoon under CSS, Feeds, Web Design

Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content.

CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Don’t be alarmed if your own CSS skills are fairly limited as there are a lot of great tutorials out there that walk you through how to add clean and professional looking CSS menus to your website. You can either copy and paste the code into your own design or modify the menu to suit your needs.

Today we would like to show you 100 of these tutorials; 75 horizontal CSS menu tutorials and 25 vertical CSS menu tutorials.

BlogmyQuery – BMQ