Yes, it takes some time and discussions between the disciplines but you can win so much time in the future if done right. Doing stuff right depends on some crucial things:

• Work interdisciplinary and as (almost) equals. It’s easy to say what you think out the whole plan yourself, but if you do that, others are not inclined to think with you. Each new idea becomes just another bump in the project instead of a good contribution to a discussion to get a better understanding of a problem. By putting your problem on the table and make team members real team members, you get a real discussion. And a better product in the end
• Make your work public. You also get a whole other situation if you know that other people (clients or the community) are keeping an eye on you. In the positive sense of the word, that is. You have to think (just like Twitter) what is really useful outside your little bubble. And you might get good feedback to make your code even better/stable/useful.
  By thinking hard how to make stuff usable for the outside world, you’re instantly making a very usable and learnable tool for anyone who’s going to work at your firm.
  Making open source software could also motivate people. They’re not just working hard for the company anymore, they’re also working on something that can also be useful outside of the company and the greater good. That can be the motivation to work a more on it outside work time.
• Results before deadlines or budget. Ok, projects with limitless budgets aren’t realistic. But making reusable code or applications without keeping an eye on its usability or not even testing isn’t realistic either. To get quality reusable code you do not only need to write it, you have to think it out, write it and rewrite it and rewrite it. If you’re not prepared to do that, just save yourself the trouble.
• Continuous testing. Don’t wait until the very end of the project to measure its quality. You cannot remove the concrete slabs below an ill-constructed house either. Everybody has to at least check the end result of the finished component before moving on to the next target.
• Reusability is epic. Don’t kid yourself: Most of the stuff you do now has been done in the past as well. Talk with designers, programmers and developers to aim for reusability while preventing that all websites start to look the same. Getting some framework that works for everybody is everybody’s priority.
• Keep it simple. Some projects need solid plans. Others don’t. Some stuff does not have to be written out in threefold as long as the basics are known and the outer borders have been drawn. Be wary if the 5th version of the plan is mailed in PDF form to all team members, project time already gets out of hand and no real work is done yet.

No related posts.

For example: progressive enhancement in practice means that if you want to implement rounded corners, you’d use the border-radius style instead of a stack of images of rounded corners. But what if rounded corners are one of the corner stones of the corporate design of the client? Loads of users on IE7 and IE8 would miss that recognizable feature of that corporate design.

The design choice of rounded corners are sometimes a matter of taste, but most clients care for their corporate identity. So if you are ready to slaughter someones design in IE7/IE8 with progressive enhancement as your alibi, make sure that the features that will be missed in those browsers are not an important part of their corporate identity.

Related posts:

1. Do you create your design in Photoshop or Notepad?

Download Estate Developer Tools

Features

• Compare page with original design fast: You can compare the current page with an image of the original design within the browser.
• CSS reload: Reload the stylesheets without reloading the page. Extremely useful when designing websites with many Ajax calls.
• Console.log fallback: If you use clog(), debug messages will be routed to console.log() if available. If not (eg. you’re developing in IE), the message will be printed in a log box in the web page itself.
• Autofill and test forms: Auto fill forms with text that might cause errors like non-western characters, malformed HTML, JS injection and SQL injection. Autofill also works with the new HTML5 form fields.
• Timer: Do performance test by checking how long some operation takes.
• Works in: IE6+ and all recent versions of Firefox, Chrome, Safari and Opera. I did not check all possible browser versions, but it should work. let me know if you have problems with older browsers. The developer tools do not work in IE’s Quirks mode, but that’s something you should avoid anyway.

Quick overview

Sorry for the bad sound quality.

Installation

Step one is to download the tool. If you unpack the zip, you’ll find example page in the (what else) “example” directory.

Open the file called “index.html”. The developer tools are loaded just before the closing body tag: <script type="text/javascript" src="devtools/javascript/estate-devtools.min.js"></script>.

If you want to change the library to your own needs, you can load the source code instead. It’s in 4 seperate files that are in the same directory: Estate.js, Estate.Develop.js, Estate.Develop.FormTester.js and Estate.Develop.DesignTester.js.

After the library has been loaded, you can add items to the top right menu like this:

	Estate.Events.AddEvent(window, Estate.Develop.ToggleVisibility.Init, "onload")
	Estate.Events.AddEvent(window, Estate.Develop.ReloadCSS.Init, "onload")
	Estate.Events.AddEvent(window, Estate.Develop.FormTester.Init, "onload")
	Estate.Events.AddEvent(
		window,
		function() {
			Estate.Develop.DesignTester.Init({
				designAnchor: document.getElementById('DesignTester'),
				xOffset: 10,
				yOffset: 5
			})
		},
		"onload"
	)

The example above will most likely be enough in most cases. The only thing you might have to configure is the Design Tester. That’s because the design image needs to be positioned relative to the main body of the page. Therefore you need to define an anchor by supplying a reference to an HTML element and define the optional offset.

You can also use jQuery to supply an HTML element like this: designAnchor: jQuery('#DesignTester')[0]. The Form Tester is also configurable. Please refer to the object reference for more information.

To install the Estate Developer Tools into your own website, you’ll have to copy the JavaScript code at the bottom of the page to your own and copy the devtools folder to the root of your own website.

After that you only need to create PNG files of the original design and save them in the folder/devtools/design-images/. If a page is loaded, the Design Tester looks for a PNG file which file name resembles the URL of the page. If that image cannot be found, the Design Tester will asks for that file either by printing a message in the console log or in its own fallback log box in the page. You just have to look up the right file and rename so that the Design Tester can pick it up.

Helper functions

Some functionality is not included in the menu

console.log fallback

After the library has been loaded, two global functions are available: clog() and dlog(). You use clog() to send a string to console.log() if available. If console.log is not available, the debug message will be printed in the log box in the website. If you can also choose to always use the log box of the Estate Developer Tools by calling dlog().

Timer

If you you want to optimize, you can use the timer to see how much time JavaScript needs to complete an operation. You just create a new instance of the timer object, set an ID so you can distinguish multiple alert from an another, start the timer, run some function or lines of code and the stop the timer. By stopping the timer, you’ll get a message how much milliseconds the operation costs. Here below is an example:

var oTimer = new Estate.Develop.Timer()
oTimer.SetID('Your time to response')
oTimer.Start()
alert('Press "ok" to see how much time it took to respond')
oTimer.End()

Reference

All public objects and methods have been documented with JsDoc Toolkit. Read the documentation.

Adding more tools

It’s possible to integrate your own developer tools in the menu of the Estate Developer Tool. This code will create an extra menu item and runs some code when a user clicks on it:

/**
 * @namespace Creates extra menu
 */
Estate.Develop.ExtraMenuItem = ( function() {
	var menuButton

	function doSomething() {
		dlog('Menu item pressed')
	}

	/* START PUBLIC */
	return {
		/**
		 * Initializes extra menu button
		 *
		 * @example
		 * Estate.Develop.ExtraMenuItem.Init()
		 */
		Init: function() {
			menuButton = Estate.Develop.Menu.AddMenuItem('Extra item')

			menuButton.onclick = function() {
				doSomething()
			}
		}
	}
	/* END PUBLIC */
})();

It’s also possible to attach a keypress event to it

/**
 * @namespace Creates extra menu
 */
Estate.Develop.ExtraMenuItem = ( function() {
	var menuButton

	function doSomething() {
		dlog('Menu item pressed')
	}

	function pageKeyPress(KeyID){
		dlog('KeyID: '+ KeyID)
	}

	/* START PUBLIC */
	return {
		/**
		 * Initializes extra menu button
		 *
		 * @example
		 * Estate.Develop.ExtraMenuItem.Init()
		 */
		Init: function() {
			menuButton = Estate.Develop.Menu.AddMenuItem('Extra item', 'Press any key')

			menuButton.onclick = function() {
				doSomething()
			}

			// Handle global key events
			Estate.Events.AddEvent (
				document,
				function(e) {
					var KeyID = (window.event) ? event.keyCode : e.which;
					pageKeyPress(KeyID)
				},
				"onkeypress"
			)
		}
	}
	/* END PUBLIC */
})();

No related posts.

• Behaviour of the fluid design
• Interaction like hovers
• How the website looks in different browsers

On top of it, she also mentions some disadvantages of using Photoshop:

• It crashes, leaving you with hours of work lost.
• Font rendering sucks

Photoshop is still king

Although creating a website directly in HTML has it advantages, I think designing in Photoshop is better in most cases.

Photoshop is faster

Yes, a simple design could well be created directly in HTML. But not all designs are simple. Changing a background color is easy in CSS, but dragging columns around, changing or altering visuals and all kind of other alterations are quicker in Photoshop. Designs can change dramatically before it is finally approved by the client. Those changes are quicker done in Photoshop.

Photoshop is static

Being static isn’t not just a disadvantage. A static design is in fact helpful because it helps you focus on how a website should look like and not be bogged down by browser incompatibilities. This too gives you extra speed in designing.

Photoshop is versatile

Just because CSS can do stuff like round corners and text shadows in some browsers, doesn’t mean it has become a designing tool. Photoshop can do more than just that. When designing in HTML I start to think too much in the constraints that both HTML and CSS have. In Photoshop I have much more design choices. Because of that I’m able to think more out of the box.

Crashes and font rendering

I was suprised that Photoshop crashes are mentioned as a major problem. I consider Photoshop as a very reliable product. The only problem is that saving can take a while, so not everyone saves regularly. If you don’t save regularly you’re asking for trouble. Even with stable products.

The issue with font rendering is indeed a problem, but that’s more an issue for designers. Clients don’t even know it’s an issue. They’ll only notice differences when they’re dramatic like with webfonts. Just compare this weblog between Apple Safari and IE on the PC: it’s hard not to see the difference.

My preference

Since I’m a web developer I ought to be tempted to skip Photoshop and start coding right away. But that’s not the case. I designed my blog twice last year. In both cases I chose to do the basic design in Photoshop. Only when I was happy with that basic design, I started developing and added extra elements on the fly. The current design of my blog could just as easy be built in HTML/CSS from the start, but I’m convinced it’s better to work in Photoshop first.

Related posts:

1. Differences between Photoshop web design and HTML. Part 1: line height
2. 3 Tips for making CSS sprites in Photoshop
3. The grey areas of progressive enhancement