From Design to Deployment
Jon begins by apologising if what he is about to say is old hat to everyone. No, Jon, never apologise!
He moves on to a much better subject: cheese. He loves cheese (no! really?) but there are no good cheese sites out there on the Web. Jon has bought the domain Cheesophile.com — what a friend we have in cheeses!
He makes an excellent dig at the crappy Silverlight demo: there is no giant interactive cheese for you to spin around. That gets a round of applause.
Jon bears his file system to us and shows how he sets up his folder. Then he sets up a local server on Apache using MAMP or Headdress.
Jon takes the design and the content and in Fireworks he overlays what elements are the best semantic fit. Which pieces of content are headers? What should be in a list? Now he begins to create the markup but he begins without structural divs: just paragraphs, list items, headings and meaty elements.
Starting at the top of the document, choose a DOCTYPE—whatever floats your boat. Then think about the content of your TITLE element. For navigation, do you need a “skip navigation” link?
Now let’s look at that document with the default browser styles.
Uh-oh. Here comes a flame war: fluid vs. fixed, ems vs. picels, HTML vs. Flash. It all depends on the content.
Now what browsers will you support? What would Yahoo do? Graded Browser Support FTW! But for a personal site like the Rissington Podcast, Jon didn’t think it was worth bending over for IE6.
For CSS, Jon begins with a basic file that tidies up fonts and spacing but doesn’t do any layout. Now he @imports a reset stylesheet and a typography stylesheet and a layout stylesheet. Using conditional comments, an IE-only stylesheet is called in for everyone’s favourite browser.
For the reset stylesheet, use what Eric has done.
For the typography stylesheet, stop and think about the typeface choice. Jon thinks we should scrap the idea of web-safe fonts in the same way we scrapped web-safe colours. It’s like specifying “Roquefort, Stilton, Cheddar, any generic cheese.” Instead we should specify “A very specific Roquefort, any Roquefort, Stilton, any blue cheese.” So substitute specific fonts but not generic fonts. Use the metadata in your font management software to figure out the right order. Jon recommends stealing sheep by using negative letter-spacing on headers.
On to backgrounds. Wooden backgrounds are passé. Cheese backgrounds are the next big thing. For a large background image, you can afford to bring down the quality. Fireworks kicks Photoshop’s ass when it comes to small file sizes when saving images.
Hide your skip navigation
link but make it visible on :focus.
Have a cup of tea.
Time to figure out your grid (Jon is taking the easy way out and using a fixed width layout—he is forgiven because of the lovely liquidy goodness he has given us in the past). A JavaScript bookmarklet helps toggle a grid overlay on and off.
Frameworks. Do what you want but Jon prefers to use his own framework: tried and tested bits of CSS.
Once the grid sizes are set, you can start resizing images. Play around with sharpening in Photoshop after resizing.
Now the site is looking good. It’s bughunting time! Firebug is your friend. Then comes the horrible moment when we look at the site in IE6. It’s probably the fault of hasLayout. Father Ted explains it best. Sister Asumpta is the div. Father Dougal is IE6. How do we get Dougal to recognise Sister Asumpta? We use the “blue jumper” of hasLayout which can be zoom: 1. You might be tempted to apply this with the universal selector but it’s better to understand the problem and then fix it.
Finally, around midnight, the site gets deployed. Bravo! hicksdesign.co.uk/journal/design-to-deployment