Finally after a very long wait we are seeing web designers take the leap from supporting 600px width designs, to a much improved width of as much as 900px. This transition has been a long time comming, however finally we find ourselves in a new age of design enlightenment, and its about time too! To celebrate this, I have put together some great examples of websites which are leading the design revolution.

svenigson

svenigson

kompakt

kompakt

websiteburo

websiteburo

tnvacation

tnvacation

And that concludes just a small proportion of the many websites followiing this brave new trend

This is an Idea that I have heard bouncing around the web for a while now. I read a very insightful article on hacification which strengthened the argument considerably.

Good Reasoning

One of the best reasons for charging extra is to enable the client to recognize the time and effort that goes into fully browser complaint websites, it takes blood sweat and tears go get compatibility just right. So charging for this as an extra service is not entirely unreasonable, after all this comes separate to the time spent designing and developing a websites look and functionality.

The truth is there has never been a de jure standard for browsing the web, which in my own opinion is one the webs greatest downfalls. Instead there is too much choice on how to navigate your way through. This has lead to a grey area when talking about web design. The assumption that a website should be viewable through any means is a fallacy, but no one has ever acknowledged this properly. The W3C have introduced standards and done a lot of very good work, but it means nothing when designers are still expected to cater for decrepit platforms such as IE6 & 7, after all lets face it Microsoft just don’t get web, They should stick to what they know, which is desktop applications. By its very means Windows messenger, and Windows Hotmail, is a complete cop out, when Im looking at my emails on my OSX im not opening my messages with a different operating system, but anyway that’s besides the point.

Problems with the Plan

As with any great suggestion there are flaws. The main concern I have is how well the argument stands up in the real world. Consider that you were sold a car, but told you could only drive it on motorways, as the wheels may fall off if you drove it on any other roads. You wouldnt stand for it, so is it acceptable in web? This is something I have thought about an awful lot, but something Im still not sure I could actually do. Perhaps it depends on the client and their requirements, the scale of the project also make a great impact. I would be interested to know what others thoughts are on this topic!?

CSS Hacks have become something of an expectation in web design, with the mutitude of browsers your audience may choose to view your site through its important that your website looks its best whatever the platform. The statistics for browser usage portray 72% of the market is taken by ever faithful Internet Explorer users, followed by Firefox with 19% and Safari in 3rd place with 6%

Within these browsers you then need to contend with version control, in which you may see one version behave wildly different to its predicessor, no where is this more apprent than in IE6 – IE7. With all these considerations in mind, why not make life a little easier for yourself and try using the following CSS at the top of your stylesheet.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}

:focus {
outline: 0;
}

ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

What we are doing here is declaring some master styles which will overwitre any browser specific ones, take for example IE’s broken box model, this no longer becomes an issue meaning that you save yourself a lot of time, writting exemptions on id’s and classes. which means you can spend longer thinking abut how to make the site look great, and less time on how it will format in other browsers. Its as simple as that!

Working collaboratively on the web can be a real dilemma for some, However there are some very powerful tools available on the web, which project management and communication much much easier.

BaseCamp

One of the most popular options out there is a service offered by Basecamp. This project management tool makes keeping schedules and time lines much easier, as well as offering methods to break down project focus into smaller tasks.

The Pros

• Allows multiple user accounts with varying access rights,
• Allows you to set milestones and meetings
• You can tick off individual tasks as then are completed

The Cons

• Its not free
• It can be difficult to get used to the tools
• does not support add-ons

Collabtive

This not so well known option is the definite alternative to Basecamp. Collabtive is a free open source solution to managing your projects, which you can download and run on your own sever, with a whole raft of controls available to you.

The Pros

• Its Free
• You have full access to the source code if you want to adapt it
• built in messaging system to be used similar to a chat client

The Cons

• It can take a while to get used to
• Can be a bit simplistic in its features

PB Wiki

For those of you, who like me find project management style tools not so great for collaborative work, defiantly try out PB Wiki, a powerful wikipedia tool which enables users to post anything from diagrams to scraps of ideas and then gives a powerful search mechanism to find anything you need.

The Pros

• Its Free
• Gives you the freedom to layout the information in any way you see fit
• full administration features, as well as displaying a full and detailed change log

The Cons

• Not as many on the project management features
• Could do with a more features

There are many more tools availaible aside from the ones I have mentioned. but these offer a way to instigate collaboration and to make working together easy and fun.

I wrote a blog back in April 08 about 99 Designs, At the time the website had only just established itself and was creating some animosity amongst designers. My view back then was that 99Designs was a strong website with a lot of potential to do good for designers and Clients alike. 6 months Later Ive decided to revisit this topic and see how things are progressing on both sides of the fence.

The first thing that really shocked me was that the rules have changed. Previously when a contest was held a winner had to be picked from the designs put forward, I mean after all this is the entire premise of a contest, and just to clarify;

“A contest, is an event in which two or more individuals or teams engage in competition against each other, often for a prize or similar incentive.”

But this is no longer the case, upon a contest closing the contest holder is now able to either pick a winner, or just create yet another contest for the same prize money. This completely defies the entire point of creating a contest scenario. I am not the only one who feels this is an injustice, graphicpush wrote a very compelling argument against the premise describing it (quite rightly) as sweatshop labour where designers work for nothing. positive space blog also made a similar point along with xemion and an armful of others who had string arguments against the site. Is it really right for designers to be pitted against each other, designing for clients who may never even pay them for their work.

I think the greatest problem I have with the site is its disrespect for designers. The very idea of a website which portrays design as a pot luck situation, where someone might stumble upon a good design is a complete joke. It makes the entire profession seem like a gimmick, but more than this it is yet another damaging blow to the craft. Web and graphic designers alike have always been at the bottom the food chain in terms of salary, but not charging them anything for their efforts is one step too far in my opinion.

I wanted this to be a level argument, so lets look at it from the other end of the spectrum, If you are a client looking for a design lets say a logo, 99designs would seem like the perfect solution, very cheap prices, a rate, which you can set yourself, a raft of willing designers, the chance to describe exactly what you want and all of this for the a nominal fee. Sounds reasonable. But the truth is the only people making any real money out of this situation are the creators of 99designs themselves. Taking the money from the contest holders. and pouring it all back into sitepoint no doubt.

I started this blog with a view to being fair and level, but the more I have reseached, the more I have realised there is no fairness to be had, just exploitation of a craft which takes many years harness and perfect. My original argument was that If a designer was good enough he should win through the fairness of the contest, but when the contest holders move the goal posts as it were, they make the very idea of fairness an impossibility, and I dont know how that makes you feel but its certainly not something I want any part of.

This tutorial will show you how to create a randomized banner image for your website using just 1 line of php. This is exactly the same as the technique as I am using on this site. To see it in action simply refresh the page a few times

Your Images

To start things off create a new folder called banners, inside of this you want to put your banner images all should be the same size, for example 700px x 100px. Name the banners 1.jpg, 2jpg, 3.jpg etc for however many you want.

The Code

this will only work on a .php page, so make sure that whatever page you apply this to you use the correct extension.

<img src="images/banners/<?php echo(rand(1,3)); ?>.jpg" alt="a banner" />

The code itself is pretty straight forward, all we are doing is creating the pathway to the banners in a standard <img src> tag.

Then when we get to the banner name we use PHP’s rand() function to randomise the image. This is why we have names our images 1, 2, 3.

As you can see the first argument passed in is the 1 number for the rand function to start on. The argument is the maximum number the function should randomize between. In this case 3, but you can make this whatever you like.

<?php

echo( rand( 1, 3 ) );

?>

And Your Done

That’s all you should need, now if you save your file and upload it, you will see a random image display. To see what is being rendered simply view the source of the image link and you will see a static link with a hard coded image, which will change when you refresh the page.

This technique can be applied to more than just banners, you can use it on virtually anything. happy coding