Prototyping tools need to be quicker than production tools so you can change things around, be flexible and experiment quickly and easily with ease.
The idea behind prototyping in the browser is so that you can do the mockup quickly, and as Meagan illustrated, make tweaks to that design on the fly. At this stage, it isn’t about making every browser look exactly the same. That’s where the real time sink is in the front end development process. Making it work in a standards compliant CSS3 capable browser doesn’t take long at all in the grand scheme of things.
We know that all the CSS3 bells and whistles available in modern browsers won’t be available to older ones. But, as Andy explained yesterday by Andy Clarke, not every browser will display it in the exact same manner, allowing the client to become accustomed to how it looks in their favorite browser whatever that may be. If they want to see all the bells and whistles, they either see it on your machine, or add a browser to their machine that allows the full design niceties to be displayed.
If the client and you are in a room together reviewing a design mocked up in the browser — let’s say Firefox — as they make their design tweak requests, you can often show them the transformation in a matter of moments using a tool like Firebug or Web Developer Toolbar to apply it instantly. Copying those changes into the permanent stylesheet is practically a no-brainer. Depending on the page design, it is even possible to show them entirely different layouts, or even apply different stylesheets for that “more than one version of a comp” happy client.
For the life of me, I cannot imagine why you would think that mocking up in the browser is more time consuming than mocking up in Photoshop. I’m not against using Photoshop. That’s not my point. I’m just trying to explain that the browser does not slow down the process in any real way.
If I really had to make 2 or 3 comps to show a client for a design in Photoshop, I could just as easily (if not more easily) do it in the browser. Do the markup once. Apply 2 or 3 different style sheets for different look and feel, as needed.
Bridget Stewart
The idea behind prototyping in the browser is so that you can do the mockup quickly, and as Meagan illustrated, make tweaks to that design on the fly. At this stage, it isn’t about making every browser look exactly the same. That’s where the real time sink is in the front end development process. Making it work in a standards compliant CSS3 capable browser doesn’t take long at all in the grand scheme of things.
We know that all the CSS3 bells and whistles available in modern browsers won’t be available to older ones. But, as Andy explained yesterday by Andy Clarke, not every browser will display it in the exact same manner, allowing the client to become accustomed to how it looks in their favorite browser whatever that may be. If they want to see all the bells and whistles, they either see it on your machine, or add a browser to their machine that allows the full design niceties to be displayed.
If the client and you are in a room together reviewing a design mocked up in the browser — let’s say Firefox — as they make their design tweak requests, you can often show them the transformation in a matter of moments using a tool like Firebug or Web Developer Toolbar to apply it instantly. Copying those changes into the permanent stylesheet is practically a no-brainer. Depending on the page design, it is even possible to show them entirely different layouts, or even apply different stylesheets for that “more than one version of a comp” happy client.
For the life of me, I cannot imagine why you would think that mocking up in the browser is more time consuming than mocking up in Photoshop. I’m not against using Photoshop. That’s not my point. I’m just trying to explain that the browser does not slow down the process in any real way.
If I really had to make 2 or 3 comps to show a client for a design in Photoshop, I could just as easily (if not more easily) do it in the browser. Do the markup once. Apply 2 or 3 different style sheets for different look and feel, as needed.