From Design to Deployment / journal / hicksdesign

20/04/08

From Design to Deployment

Now that I’m back from Future of Web Design, I’ve got a chance to do more of a write-up.

The FOWD sessions were great, with sponsored Microsoft slot aside (“Please make the bad man stop…”). Andy Budd particularly engaged me with his presentation of the “User Experience Curve”, and Steve Pearce from Poke had the slides I wish I’d done. It was the first time I’d heard Paul Boag outside of the podcast, and I think he did a tremendous job of chairing the event.

My first duty of the day was the ‘live Photoshop Battle’ which I had a few misgivings about. The team weren’t keen on the ‘battle of the sexes’ idea, so we’d decided to collaborate in teasing Andy Clarke instead. It was a bit of an experiment, especially in the “people still wandering back in from lunch” slot, but afterwards I think all involved agreed that it didn’t really work. I saw one comment on Twitter that said it was “Cliquey in-jokes” which I think was fair-comment!

I had been asked by Paul to talk about the nitty gritty end of design – taking a design through to launch, which I was concerned would be teaching people to suck eggs. After all, this would be the bread and butter of everyones everyday work.

For those of you that weren’t there, I decided to do this via Cheesophile- a demo site to highlight a few of the choices we have make while creating a website. It was never intended to cover such things as dealing with Content Management Systems (where would you start?!), fluid vs fixed or ems vs pixels. In 50 minutes, you have to focus and I wanted to cover some topics like excluding certain browsers from seeing CSS, typography tips and image creation. Yes, it did turn into a bit of a Fireworks advert, just be glad I didn’t go on about how much I love Coda!

In the end, I realised that I had cut out about 15 minutes of the talk. Not intentionally, but once I got up there, I found I wasn’t looking at my notes and missed a few key points I wanted to make!

So, here are my slides in Deployment.pdf (21.9 MB PDF) for the talk. The demo page of Cheesophile is also live, with the accompanying files available to download (includes the layered Fireworks PNG files). Cheesophile is far from perfect – it’s not bulletproof and lacks some basic things (like a search field) that you would expect from a site, but it is what it is – a demo for the purpose of the talk.

URLs mentioned in the talk:

I missed out on the last 2 talks, and the post-party as I felt as rough as 2 badgers – but I was really sad to miss out on meeting people that evening. The following day was not only my son Daniel’s 5th birthday, but it was our 10th wedding anniversary, so it was definitely time for the family!

Many thanks for the kind comments about the talk. If you have any constructive feedback, positive or negative, please leave a comment. I feel that I am gaining my confidence as a speaker, and I’m genuinely interested to hear any suggestions on how to improve.

Finally, as the PDF doesn’t include the movie clip, here’s the scene from Father Ted that was used in the talk!

Technorati Tags Tags: fowd, presentations, slides

Comments | RSS

Comments are now closed, but you can still have a jolly time reading what others have left:

Alex Muller said 263 days ago:

A video of this would also be fantastic, if one exists…

Cheers

Mike Towber said 263 days ago:

Thanks, Jon! Your talk was very entertaining. I love the way you load a baseline CSS for ancient browsers, complete with friendly upgrade message.

Dan Griffey said 263 days ago:

Hi Jon,
Great talk, it was excellent to see. Would there be a video of the talk coming at all.
Dan

Rob Stokes said 263 days ago:

Yep, great talk Jon. Thanks for putting up the files!

Sam Clark said 263 days ago:

Fourthed, it was another excellent talk Jon, with some especially top tips on make IE6 understand hasLayout that I certainly wasn’t aware of before Thursday.

@Alex Muller : You can buy the whole conference on CD from http://www.futureofwebdesign.co.uk

Alex Buga said 263 days ago:

Thanks chap, I was looking forward to see this :D

Charlie said 263 days ago:

Great talk, one of the best of the day. Great to see fireworks getting some love to, I have been trying to get my team to use it and your talk has convinced them to dig in to it more. Thanks for making it such an entertaining talk!

Kean said 263 days ago:

Awesome presentation. If you ever get that chesse configurator done I would love to see it. I also loved the idea of using a basic css file for older browsers, I can’t say I’d ever considered it before, i’ll definately be looking into it now though.

Ryan said 263 days ago:

Awesome, thanks Jon!

#10

Graham said 263 days ago:

Thanks for the files, Jon. Really enjoyed your talk. Got some great tips from the way you work.

#11

Dan said 262 days ago:

Great talk Jon, I picked up some nice little tips and ideas. I was totally unaware of Fireworks’ superior ‘save for web’ feature.

#12

Anthony Baker said 262 days ago:

Brilliant, Jon. Thanks for putting this up. Also, love that you’re such an advocate for Fireworks. Can’t imagine doing any kind of web design without it, frankly. Do hope that Adobe continues to give it some love.

Question: Do you run a local server on your Mac when creating a CMS-based site? Looks like the example here was static more than anything, and just curious if you go through the overhead for something more complex than that.

I personally tend to never run a local server, preferring to just set up one at a host and transferring files along the way.

Just curious.

And how about Grapple with Firefox 3b5? Damned amazing how Safari-ish you can now make Firefox. Feel a bit sorry for Camino, frankly, given how well FF3 is running on the Mac. Was always an alternative when FF2 sucked arse, but wonder how it’ll fare now.

#13

Julian Gruber said 262 days ago:

Great work! I developed a similar way of designing using that simple grid framework, which is really useful and I’ll also give your way of designing for old browsers a try soon.
This presentation really can be taken as a reference for webdesign on the client-side and I’ll definitely use it for future projects and recommend it to friends. Thanks!

#14

kevadamson said 262 days ago:

Aw man! From the slides the talk looks brilliant – wish I had witnessed it live.

Some great tips in there – zoom:1; for example – I’d just been giving stuff widths which does work but not ideal. I may also start using Eric’s reset and splitting my CSS up more.

And it’s all thanks to cheese. Thanks cheese. Theese.

#15

david said 262 days ago:

An annotated version would be great – don’t really follow the haslayout + png IE fix stuff.

#16

Matt said 261 days ago:

Looks interesting haven’t read it yet, just by the by, it would be nice to know the filesize before I download it, Safari didn’t tell me how big it was until it was downloaded.

#17

Jon Hicks said 261 days ago:

Question: Do you run a local server on your Mac when creating a CMS-based site? Looks like the example here was static more than anything, and just curious if you go through the overhead for something more complex than that.

With CMS’s I tend to run remotely if it’s only me working on it, but locally first if working collaboratively

#18

Luke said 261 days ago:

Hi Jon, Your talk was one of the best of the day, and was the one that I felt I gained the most from.
Thanks for the files too.

#19

Jason Cale said 261 days ago:

Hi Jon,

Loved your talk, some great nuggets of advice in there.

Was nice to meet you on Wednesday, even if I was a little a bit of a blur.

Oh yeah – that fireworks file size thing blew my mind.

Cheers, Jason.

#20

Jack Keller said 261 days ago:

Great stuff Jon, I recently started using MAMP for my local development as well, planning to check out Headdress, at present my multiple sites in testing are all localhost/projectname so that may simplify things!

#21

Sergio MORA said 261 days ago:

Jon,

Thanks for this excellent information.

I have many questions, but the most important one is maybe : Why Fireworks over Photoshop? I just want to know your opinion.

Thanks a lot.

#22

Steve said 261 days ago:

Jon, really appreciated your session, some great advice : but I’m afraid I have to demur about Fireworks being the best tool for image optimisation. I have done some tests and they seem to show that (as I suspected) the same jpeg quality setting in Photoshop and Fireworks does indeed produce files of very different sizes (FW about half). But there is a distinct and visible softening and loss of detail (which of course you can’t rectify with USM because it’s too late).

If you make the files sizes the same, the FW setting is higher than the PS one, and the visual quality is not as good.

I have to confess to being a longtime PS lover : and wd concede that in the case of a knocked-back image such as you showed the quality is fine – but if sharpness of image detail is important, PS is still best!

Regards, Steve

#23

Phil Hawksworth said 260 days ago:

Marvelous!

Jon, I thought that your talk was one of the highlights of FOWD. Like you my other highlights were Andy Budd, Steve Pearce and Daniel Burka (shame you missed his session).

I can understand your concern about teaching people to suck eggs. As you said, you were talking about what many people in the audience were likely to be doing themselves most days. Speaking personally though, I found that your talk reassured me that some of my existing working habits were sensible and also introduced some really helpful little nuggets which I will eagerly adopt.

The way you gradually make progress through the various stages of CSS implementation was particularly enlightening.

I’ve also never seen such an entertaining and easy to understand summary of gotchas like hasLayout and FOUC (loving your pronunciation, by the way).

Keen to see you speaking more often at events like this.

A little disturbed though, that while I’m looking through your slides I’m developing an urge to go and buy cheese.

#24

Ben Johnson said 260 days ago:

Thank you for this.

#25

Chris said 260 days ago:

Thanks Jon. Found your talk to be the best of the entire event. Closely followed by Budd’s.
Will devour your files with interest.

#26

Shaun said 259 days ago:

Thanks Jon, easily the best talk of the day. Informative and entertaining is hard to pull off. I agree 100% about Fireworks, it rocks!

#27

Stephan said 259 days ago:

Gorgeous talk, John.
It was specially interesting for me, cause my organization keeps “Graphic-Design” and CSS Producing very well separated, but I believe much more in a workflow like you showed in your cheese story. So I feel reassured in my point of view. Also the whole story and the slides are so well done and entertaining, thanks for that.
Though, for me, the greatest single idea of the day was Steves Iceberg comparison and illustartions.

#28

Miles Dowsett said 257 days ago:

Hi Jon,

I was very fortunate to attend @Media last year and absolutely loved your piece about becoming a ‘Creative Sponge’; it was really really insightful. Last weeks didn’t dissapoint either and I think you’re becomming a great speaker Jon – you own that stage with a swager! :)

Look forward to catching you at @Media this year too!

#29

Elliot Jay Stocks said 256 days ago:

Bloody good stuff, sir. I thoroughly enjoyed it – your talk and the Photoshop Battle. And just in case you want to look over the fruits of our labour (you know, to show the grandkids and what not), here it is.