Journal tags: cheese

Jessica and I spent today in full-on tourist mode in Philadelphia, walking its streets and exploring its rich heritage.

Philadelphia, home to the Liberty Bell and the American constitution; the city where the founding fathers toiled at their work, forging a revolution and a country; home to the country’s first library and its first bank; in many ways, the birthplace of the modern world.

Yeah, yeah, yeah. Whatever. Here’s the important part: today I had my first ever Philly cheesesteak.

Every Philadelphian has a very strong opinion about where the best cheesesteak in the city is to be had, and we went with a highly-recommended, very popular spot: Jim’s. There was a line out the door. This is a daily occurrence.

When you eventually get to the point of ordering, you are strongly encouraged to quickly and clearly state your cheese choice and onion preference (a Boolean value). Then you pay. Then you find a seat, if you’re lucky. Then you eat.

On the recommendation of the internet, I went with the cheese wiz option. Technically, I’m not even sure if it’s actually a cheese. But boy, it sure works a treat in combination with the delicious beef and onions. The cheese wiz acted as a mayonnaise-like lubricant as well as a flavour ingredient. All in all, it was absolutely superb. If all cheesesteaks are this good, I can understand this city’s pride in—and obsession with—its contribution to the sandwich world.

After that we wandered around and took in the sights until it was time to meet up with Jenn and Sutter for a beer at sunset while watching an infinite supply of joggers run up the Rocky steps and raise their arms in the air at the summit.

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