Hank 22 Mar 06

@Ryan, I’m crazy impressed by how fast you did that in Photoshop. You must be a photoshop short-key wizard!

Greg 22 Mar 06

Why did you spend all the time on making the background transparent? It seems to me that this video could have been only half as long if this step wasn’t done.

Was is just to save from having the little bit of light-blue gradient from showing up behind the 37signals logo?

Tom 22 Mar 06

@Ryan, this post is a prefect time for me to ask you a question so that I can resolve a dispute I’m having with a co-worker.

What comes first, creating the HTML or creating the CSS?

Thanks in advance.

Frank 22 Mar 06

[Ryan] I am also very impressed with your photoshop skills. Question: So what do you use to prototype web site designs if you don’t use photoshop?

Thanks for the video, screencasts are always fun to watch.

pwb 22 Mar 06

This reinforces to me that it’s wise to keep page layouts and especially the CSS very *simple*.

Don Wilson 22 Mar 06

“But too much markup without styles isn�t Real.”

What the hell does that mean?

Rick C. 22 Mar 06

I am also curious to know software what people use to create design ideas for a web site, other than photoshop.

Or, is photoshop the standard practice for people to create web site mockups?

Jon Gales 22 Mar 06

In the future it would be nice if you make links to media include the full URL. I read SvN in Bloglines (I know I am not alone!) and the link to your screenshot and screencast both 404d because they linked relative—so they tried to load from the Bloglines domain.

Jake 22 Mar 06

I sort of hope this shows the people who were complaining about the Campfire coupon thread. It’s not like they just wanted to get people to upgrade: they fully intended to make coupons a permanent incentivization scheme, so testing really was important.

I also like how it’s sort of a treat for us SvN readers. Whee!

J 23 Mar 06

Captain Obvious to the rescue!

Carlos 23 Mar 06

Step back a minute. All he’s trying to do is visualize “what if” something looked a little different.

Even if he had the cleanest HTML and CSS code, he’d still have to dig in to a development environment and make the appropriate measurements and changes. (CSS Zen Garden does prove a point, but the counterargument is the CSS behind those designs is quite sophisticated). Even better would be perhaps “saving as” a static local copy of the page and CSS and attempting to tweak it there.

But pretend there was no gradient to accommodate. If you wanted to visualize a small change, you would totally take a screen capture and just flipflop the elements in an image editor. It’s literally the path of least resistance. Just imagine if you were in a meeting and your screen was on a projector, and someone said “what if the box was above”. My first instinct is to take a picture of it, not dig into code.

Chris Abad 23 Mar 06

Good ideas. I learned a similar trick recently. I have a plugin for Safari that will export the page to a PDF (like printing to a PDF w/o the page breaks). Here’s the kicker… if you pull that PDF into Illustrator, all the elements are completely editable either as text, an image, or a vector graphic.

This makes it incredibly easy to take any screen and quickly rearrange the items to see what it will look like. I’ve also found it a quick and easy way to grab elements (like form elements) off page and re-use them in other mocks I might be doing.

RS 23 Mar 06

Chris: What’s the PDF plugin you mentioned? That sounds like a really cool trick.

dalton 23 Mar 06

Chris: and that plugin is….. ?

Hunox 23 Mar 06

How much time did you waste recording the screencast though? :)

Dan Boland 23 Mar 06

Completely changing a layout without touching the markup is demo material and not a real world situation.

Sure, not touching the markup at all during a revamp is pretty unlikely. But I think we can both agree that perhaps the best feature of CSS is design flexibility.

CSS Zen Garden does prove a point, but the counterargument is the CSS behind those designs is quite sophisticated.

The CSS is as sophisticated as the author wants it to be. That leads right back to my point of flexibility — CSS Zen Garden shows not only the flexibilty of CSS, but the virtues of solid markup.

Ryan 23 Mar 06

In general I don�t believe in mocking up screens with Photoshop. Your HTML/CSS screens will never look quite the same as the initial mock, so it�s easy to waste time pushing pixels that won�t even exist later.

That’s a big misconception and a result of designers not thinking about what is possible when they’re creating comps in Photoshop. A responsible web designer wouldn’t comp anything that s/he doesn’t know could be done in real code.

Additionally, a studious coder can implement a challenging design in XHTML/CSS with almost no trade-offs.

Matt Haughey 23 Mar 06

Any mirrors? Or alternatively, upload to youtube or google video? In the last half hour I’ve only gotten 5Mb of it.

Andrew 23 Mar 06

Photoshop does wonders for quick mock ups. In initial design I tend to let loose on Photoshop, not thinking at all about html or css. When I am happy with the design I then figure out how to do it in css. You some times run into small problems but you can usually work them out and your design isn’t sacrificed for ease of coding.

btw quick tip - When you were duplicating and dragging the background selection, you could have transformed (command/ctrl + T) and pulled the right selector across the page.

Josh 23 Mar 06

Ryan, what did you use to record your screencast?

Jesper 23 Mar 06

The post makes a good point - know when to do napkin sketches, quick Photoshop jobs and real markup shuffling and you’ll be much more productive.

However, I’m still appalled at the continued used of ‘screencast’. What’s wrong with ‘video’? It’s shorter and more people get it.

Andy 23 Mar 06

I use Visio (nooo not Microsoft!) for page comps and wireframes. It is the best program out there for doing stuff like that quickly and easily.

Matt Dempsey 23 Mar 06

Can we get a mirror or something? This is working at 2kb/sec at most :(, with an estiemated 4:17 hours remaing. Please!

Gary King 23 Mar 06

Whoever already has a copy of the video can put up a torrent. RS, don’t you have the video? If you’re on OS X, just open up Tomato Torrent and create a new torrent with it. On Windows, use �Torrent for it.

Josh 23 Mar 06

Thanks Jesper, I’ll check it out.

RS 23 Mar 06

Gary: There’s still the matter of a Tracker. I don’t have a URL for one of those. Guess I’m not torrent-savvy. Thus my request :)

Tony 23 Mar 06

You could still upload it to ourmedia.org or YouTube or something. Then I could watch it at work, where I’m stuck on a PC and not able to install QuickTime. ;)

Gary King 23 Mar 06

Ryan: Can I upload the video to YouTube so people can watch it there? I think that’s better than a torrent, and much more convenient for everyone. I’m asking for your permission before I do so.

Gary King 23 Mar 06

It’s not that bad. Better than using up your bandwidth. Also, the only way I managed to get the video was to bypass nyud and get it directly from 37signals.com

Steve 23 Mar 06

Rick C: I am also curious to know software what people use to create design ideas for a web site, other than photoshop

I prefer to use Fireworks - it works for me. Quick, easy, simple to use. I have never really found the need to use Photoshop. I sometimes use Inkscape under Linux, but found it lacking in some areas. My first choice is Fireworks.

I actually like to spend longer on the mock up. My design skills are solid, but not superb. I find taking that little bit longer on my designs gives them that something extra. I like to have almost all of the basic visual styling done before I even start to code. Once coding begins, I revise both the mock up and the physical HTML version.

This may seem like a waste of time to most, but in my case, it is super productive and gets the job done. I make changes to the HTML and see how it looks. If I don�t like more then a couple of things, I return to the mock up and work on that until I am happy with the current state of things.

I then code it and decide if it works with the interface and basic user interaction. If yes, it stays. I repeat this until things look, feel and operate the way the user wants them to.

I spend small blocks of time on the mock up and fit it around the coding. It works very well for me, but this may not fit everyone.

Caleb Buxton 23 Mar 06

I prefer Illustrator — but I guess it comes down to what you know best…

In my mind its simpler to deal with vectors — swapping out colours in gradients (we’re in web 2.0 now right) is easier in illustrator — for me at least (for example).

Dan 23 Mar 06

I like this approach, but I probably would have used the firefox web developer extension to edit the CSS and reposition the element (if possible using CSS only).

If that didn’t work, I would have just saved the complete webpage (images, css and all) locally, and edited it there.

c 24 Mar 06

I believe the PDF plugin being referred to above is a reference to a subset of the functionality Saft.

svinto 24 Mar 06

Tip: When you was making the gradient cover what you had removed previously, I found it quicker to use transform (Win: Ctrl + T / Mac: Command + T) instead of alt-dragging the selection.

Another Mark 24 Mar 06

Dan is on the right track… The Web Developer toolbar is the way to go.

You can edit the mark-up or the CSS in the page and see the changes on the fly, no need to save off any files.

Simple.

Chris Abad 24 Mar 06

Sorry guys, I had to do some digging. I _think_ that plugin I use is Saft. In other words, I know I use Saft, and I’m mostly sure that’s where I got the PDF export from.

Douglas 04 Apr 06

Quick tip: about two thirds of the way through the cast, you duplicate part of the gradient, and then ciopy it across the whole width of the page. A faster way, after making the initial selection, is to turn on “Show bounding box”, then simply resize the selection to make it as big as you want.

Douglas

Duncan 08 May 06

Is this screencast available for download anywhere? Would be very intersted to see it…