Phase 1: Sketching out the gist of it

How this website looked in its initial sketched-out form.

A few hours or days into thinking critically about design, both online and off, that I enjoy, I usually get an idea that carries the right balance of elements ripped off from others and unique concepts that match what I want to do. I try to sketch a quick, simple version of a this idea once I have it. Many times, I’ve tried to jump right into coding, only to realize that my layout wasn’t going to work, or that, through a dearth of planning, I’d written myself into a corner that would make the rest of the page more difficult. But with a sketch, I can see immediately if the design is going to be a disaster, and having a rough idea of the layout from the start helps me to figure out how the page is going to be structured in the end. And when I say a “rough idea,” I mean it. Usually the first sketch is just lines separating the main areas of the page, with maybe a box with a stick figure inside to represent a photo.

With a satisfactory idea sketched out, it’s time to move on to phase 2.

Phase 2: laying out a mockup

Sketch in hand, I turn to a desktop publishing program to create a mockup of the design and to get a feel for how it will work on a computer screen. Starting with a screen-shaped canvas, I’ll lay out the main areas of the page, assign background colors and define text areas, creating an abstraction not unlike the sketch itself. Then I’ll gradually add the features that make it look more like a real website: an image here, some Lorem Ipsum there. The freedom to rearrange the layout in just a few clicks is crucial to getting the proportions of and relationships between elements of the page right, so this is the stage where I try to nail those down. And I can radically change the design without losing my work just by copying everything to a new page in my document before I start hacking it apart.

Each of these pages is another iteration of this website's mockup.

This is also a great time to ask for feedback about your tender young design. Personally, I have no idea what the hell I’m doing, so I frequently export my work to PDF and show it to my most tasteful friends. Then I can quickly try out their suggestions, incorporate changes I like, and spit out another mockup for more abuse.

I like to use Adobe InDesign for this step because I have experience with it from my days working with my college newspaper’s Production department, but there’s really no reason to drop the fat stacks Adobe charges for Creative Suite. Between you and me, if I’m working on a netbook or away from my CS5 computer, I use PowerPoint. I haven’t tried it, but you could probably even use Google Docs Presentations or Drawings if you were committed to going the free route. It doesn’t matter what you use as long as you can give a website-y look to your sketch, think about it and make changes easily.

How website-y? I don’t worry too much about designing logos or textured backgrounds in this step – basically, anything I’d have to use Photoshop for. Typically the only images I include are photos that I know I want to incorporate into the design, like thumbnails for featured posts. I do try to nail down typography here, though, and will pick out two or three fonts I like and try to limit the design to those.

Enough talk! Here’s what the mockup of this website looked like by the time I was happy with it (click to enlarge):

Pretty close to the real thing! Unfortunately, it may make for a good-looking picture, but the real work doesn’t start until…

Phase 3: Coding a static mockup

This is where the rubber meets the road: turning my pretty PDF mockups into an actual HTML file. I start by carving as much as I can get away with out of old websites I’ve worked on, but that’s usually limited to a few basic CSS rules. Before long I’m forging ahead on my own.

Usually it helps me to make another sketch here, this time informed by the mockup. Now, instead of focusing on how the design elements look, I limit my drawing to simple rectangles. Then, working from the page margins inward, I start to figure out the size in pixels of each element, including its borders, margins and padding. I figure out sizes and create images in this step mostly because InDesign sizes documents in mysterious and arcane bizarro-increments like pica or, worse, decimal inches. I could set it up to work in pixels, but I haven’t bothered to figure out how yet. I’ll keep this new sketch handy as I work so that I don’t accidentally have <div>s crowding each other out. And I start coding the same way, adding empty block-level elements one or two at a time until the major sections of the page are present and fit together nicely.

I’ve read that you should create your stylesheet before touching your markup, but I don’t have the vision to accurately imagine what the styles I’m describing will look like. Instead, I’ll switch off, creating a style, then immediately trying it out and revising it. Gradually, the “markup mockup” comes to be near-identical to the InDesign file.

Next I’ll throw as much formatting as I can think of into the lorem ipsum – links, block quotes, bullets, &c. – to make sure they play nice with the layout. Then, finally, I’ll hammer out final versions of the logos, textures, and other images I need. One useful byproduct of waiting so late to knock this out is that it enforces minimalism; by this point, I’ve usually found another method to obtain the effect I desired or reconsidered its necessity.

By the time this mockup is done, it should look almost, if not completely, identical to the imagined finished product. The static mockup for this WordPress theme looked like this (click through to the actual HTML file):

I typically use Notepad++ to write my code; I’ve played around with and been impressed by Handcraft, but at present I don’t do enough design work to justify buying a plan. As I work I refer frequently to W3Schools resources on HTML and CSS.

If I’m building a static website (like, my useless sister site Hunter.Tamma.ro), I stop here. But most sites today are dynamic, so I usually move on to…

Phase 4: Make a WordPress theme

Even when I’ve had to make general-purpose databases for dynamic websites, I usually fall back on a WordPress implementation. I know WP, and it’s robust enough that with a few plugins and liberal use of custom fields, it’s practically an all-purpose CMS.

The first step is always figuring out how to carve the single HTML file into header, footer, sidebar and body, then wrapping the post’s HTML in The Loop and adding all the usual WP functions. I’ll refer to the WordPress Codex when I inevitably forget how to use them. And I’ll sneak a peek back at themes I’ve worked on before to see if I’ve forgotten any entirely. (Spoiler: I always have.)

And that’s getting into the long tail of WordPress development: slogging through all the other features you can add to a website. As I code, I realize I can’t just make an index page – I need single posts, categories and more. In fact, I’m still in the thick of this phase. The website looks good and works well now, but I maintain a list of additions yet to come: comment forms, post formats and HTML5 support, to name a few. In fact, none of the themes I’ve created for this website have ever been in a state I’d call “finished.”

But I use them anyway! Waiting to perfect a design is what kept me from writing at all for two years. At some point you have to pull the trigger – and if a nitwit like me can, you can too.

Oh, and the movie was okay too. I wrote a review of the movie for EarnThis, a pop culture blog run by a good friend of mine. Go take a look!

Tron: Legacy (2010): The Game Has Changed, Like, A Lot

This website is the result of about a week and a half’s worth of serious effort (seriously – I actually marked development time on my calendar to stop myself from just playing Batman: Arkham Asylum after work every day). The knowledge to actually finish it comes largely from working on The Cavalier Daily Online Edition, which itself has been made much better by a hard-working online editor.

So anyway here’s what still has to be done.

• Display last Twitter link on “Howdy” page.
• Add “Blog.” under logo on, uh, blog pages.
• “Older posts” and “Newer posts” links on main/category/tag pages.
• Check page titles. They look decent by default I guess
• Fix the images that mysteriously disappeared from older posts. this better not happen again >:[
• Add content to the About page.
• Add content to the Online page.
• Add headers to the tag and category pages.
• Add RSS etc. links to the footer. Actually, make the footer worthwhile at all.
• Get comments working on single pages.
• Add Tumblr-style formats for shorter “quote” posts, photos/galleries, that sort of stuff.
• Make a mobile-compatible version so I can show it off to people on the go.

I’m looking forward to it!

And here’s proof.

But there was one problem. Philly Tacos (obviously) live in Philadelphia. I do not.

Back in high school, we used to do something called the Philly Challenge – skip school, race up to Philadelphia for cheesesteaks and make it back just before the end of the school day – but I’m just far enough away from my ancestral home that a day trip to Philly would be all but impossible. Besides, this brief writeup on the dish explains the necessity of first drinking lots of beer, and I wasn’t willing to risk driving under the influence of both mind-altering substances and alcohol (Ha! See what I did there?).

Fortunately, I love cooking food almost as much as I do eating it. Once this recipe taught me that I could skip the time-consuming steak-slicing process by using deli-sliced roast beef instead, I was determined to have it.

Sauteeing the peppers and onions.

I didn’t have a giant griddle like they use on South Street, so I had to improvise. I set an old cookie sheet on top of our stove across two burners, one set to medium-high and the other to low, to simulate a griddle with hot and cool areas. It was a workable solution, sort of, although I had to hold onto it with an oven mitt when mixing things up, and the old pan (we literally found it in the house when we moved in) warping from the heat occasionally splashed some hot oil around. Then I set to work, sauteeing onions, peppers and mushrooms (you gotta have mushrooms) in a little olive oil. Once they were good and caramelized, I shook on a fair amount of salt, pepper and minced garlic and mixed the whole hot mess up again. As the fillings simmered and flavors mixed, I mentally prepared myself with some Newcastle Brown Ale.

Cooking the sandwich filling.

Once everything was deliciously mixed together, the onion-pepper-mushroom mix was moved to the cooler side of the “griddle” and the meat was added. Because I had to use one hand to hold onto the pan, I couldn’t chop the meat with two spatulas as is traditional, so I just shredded it with my hands a bit as I put it on the pan and hoped for the best. I quickly realized that I would be running out of space on this cooking sheet fast, and had to move some of the peppers and meat to a skillet on another burner. As the meat cooked, one of the gang went out for pizza – it can’t all be DIY, and besides, Christian’s Pizza is just a couple blocks away and can make a pizza way better than I ever could.

Taco filling is ready!

After everything was nice and toasty warm, assembling the sandwiches was simple. I organized the filling into roughly hoagie-sized piles and topped them with slices of provolone. While the cheese melted, I scooped out some of the inside of the hoagie rolls to make room for their voluminous contents and dropped them on top of the piles to toast as we awaited the arrival of our pizza.

Then, the moment came. The pizza arrived, a slice was put on each plate, and an extra-wide spatula was used to flip a sandwich onto each slice.

Gazing upon this sandwich is like – actually, let’s not ruin this with words. Just look at this. A good, long gaze. I’ll wait.

A fully assembled Philly Taco.

If thinking about that sandwich made you hungry, I’ll bet you feel full already, just looking at that. It’s a monster. It doesn’t belong in this world. But I’m glad it does.

Laughing in the face of our own mortality.

It’s greasy and cheesy and oozing meat juices. You don’t even know how to start eating one, or even if you should. Looking at this thing, sitting on your plate in front of you, with beer coursing through your veins, is like staring death in the face. Eating one is like giving death a high-five. It’s BASE jumping in food form.

I ate two.

I’m not even sure how it happened. The first one was done, and I knew I should have felt full to bursting. But all I felt was satisfaction, and I wanted to chase that feeling, so I adopted another partygoer’s unwanted, unfinished portion. Maybe it was my maternal instincts kicking in for my new food baby.

What does it taste like? Well, you already know what a cheesesteak is like (and if you don’t I don’t want anything to do with you), and you know what pizza is like, so the Philly Taco shouldn’t be hard to imagine. It’s good. Real good. And it makes a great drunk food: so full of flavor that even your deadened taste buds will appreciate it, and you won’t care that it’s dripping greasy mushrooms all over your best club-going attire. Impress that woman you’re with by finishing the whole thing and she’ll fly into your arms. Or stumble there, depending on how drunk you both are.

Ideas for future research: well, I’m not really sure I need to do any after this. It feels like I’ve reached the inevitable end of the sandwich experience, like I’ve found Sandwich Omega, the last sandwich that will ever be. But you never know: a hundred years ago, we thought we had done all the science that was possible, and here we are with even weirder stuff. The first thing that comes to mind would be using a pizza with more specialty toppings than plain cheese. It might be pushing the envelope, but come on, you’re already putting a whole sandwich on the slice. At this point, you’re so far beyond any standard of decency, you might as well go all out.

Once again, my good friend Connie took these pictures. Thanks!

The same crew was eager to repeat last week’s success, but I wasn’t willing to let the whims of a grocery store manager dictate our sandwich experience this time. I wanted something from the major leagues of American sandwich artistry. And when I’m looking for such a high-caliber meal, I turn to the great documentary “Sandwiches That You Will Like.”

Last night, I settled on the St. Paul, an egg foo young patty on white bread. It’s a sandwich shrouded in mystery: it comes from St. Louis, a ten-hour drive north of the city that is its namesake, and the identity of its inventor is matter of myth and (boring) legend. Undeterred, I printed out this recipe for an idea of the ingredients and made a run on the local grocery.

Mixing up the egg mixture for the St. Paul.

You can play this by the book if you really want, but essentially you’re making an omelet and putting it on bread. Both of these are pretty personal experiences, so you can more or less ignore the instructions in the recipe. First, we chopped up the onions and celery, then tossed them and the bean sprouts into some hot oil to cook. Meanwhile, we were cracking eggs into a bowl and whisking them up. After they’d sizzled for a while, we strained the oil from the veggies as best we could and set them out. The recipe I linked to says to let them cool for a few minutes, but who cares how hot your veggies are when they go into the eggs? We only waited long enough to be fairly certain they wouldn’t cook the egg on their own. Then we dumped in the soy sauce-corn starch mixture, sesame oil, and two pouches of diced ham.

Cooking the patties and enjoying a refreshing beverage.

Then it was time to ladle the soupy mixture into the pan of hot oil. I used a lot of oil to try to get a deep-fried feel out of the patties. My compatriots were skeptical of the idea, which I literally could not comprehend, but this choice is up to you – the recipe says to use “a small amount.” I let it cook a while, then half-flipped the patty to seal the fillings inside. After flipping it a few more times to get an even browning around the outside, I’d move it onto a plate and drop in the next glob of liquid egg foo young.

The completed St. Paul.

Once the patties were all cooked, assembling it was fairly simple. Spread some mayo generously on white bread (one partygoer had never tasted mayonnaise!) and slap on a piece of lettuce, some fresh tomato slices and some pickles (the more, the merrier). And enjoy. Yes, enjoy like crazy, because this sandwich is a tour-de-force. The exterior is basic – I can’t remember the last time I used white bread, but I was probably ten years old and feeding ducks with it – but it’s a simple, nostalgic contrast to the hustle-bustle going on in that patty.

Some serious eats!

Speaking of nostalgia, eating it took me back to the days when even a PB&J would leave your hands covered in sticky juices. Even a modest patty makes for a monster of a sandwich. The mayo does a decent job keeping the bread from getting soggy, but you’ll still have eggy tomato juice on your arms afterward – keep some heavy-duty paper towels handy. Just look at the concentration on these partygoers’ faces and you’ll realize that for a brief, shining moment, eating a St. Paul is your full-time job.

HOLY HELL! INGREDIENTS!

The sandwiching fun didn’t end there. A friend of mine had dug up a recipe for one of the more amazing ideas I’ve ever seen – “King’s Hawaiian S’mores.” These are the s’mores you loved from childhood campouts, but with the brilliant substitution of King’s Hawaiian sweet rolls for the tired old graham cracker. Purists may scoff, but they’re probably the same people that think Goldeneye 64 was a great game. Goldeneye 64 was not a great game. It was an impossible mess that you look back on fondly because you didn’t know better. And like Goldeneye 64, graham cracker s’mores fall apart at the first bite, getting impossible-to-clean-off, chocolatey marshmallow goo all over your face and hands. The sweet rolls, in contrast, keep the gooey innards warm and away from your skin. The English language needs a new word to describe how simultaneously clever and tasty these were – cleasty?

Overall, last night’s spread was crazy delicious – we’re talking on the level of Mr. Pibb + Red Vines. Not too difficult to throw together, either, and it left us with a Tupperware container’s worth of leftover St. Paul mix. With the bulk of the work already done, it makes for a killer breakfast sandwich you can make in a flash the next morning. Definitely a recipe worth making again and again. Not to mention the wealth of ingredients that pair well with eggs, making it ripe for spin-off sandwiches. I’m looking forward to replacing the ham with bacon, sprinkling the mix with shredded cheese or putting one of these patties on top of a hamburger.

Wait – I think my imagination had a heart attack.

Many of these photos were taken by my good friend Connie. Way to go!

First – and this may seem obvious – the breakfast sandwich must be a sandwich. But I don’t just mean “toppings on bread” – I’m talking about the metaphysical essence of sandwich artistry. You could talk about that all day, but in brief it boils down to improvisation. Like a sonnet or haiku, the sandwich is a meal framework with a fairly established set of ground rules, but what makes it beautiful is how you adapt it to fit your style. The element of personalization is at the center of every sandwich, but it’s even more essential to the breakfast variety. When you wake up, roll out of bed and want something to eat that won’t require you to put on pants, you’re certainly not going to drive to the grocery and pick up ingredients. You’re going to improvise.

Next, the breakfast sandwich must be breakfast. Again, that sounds obvious, but it’s often overlooked. If you eat a meatball sub or a Reuben, you’re going to be feeling off for the rest of the day – I know I would. While the ideal breakfast sandwich is built from the ground up for that purpose, sometimes it’s not possible – or just more economical to start from leftovers. Fortunately, it doesn’t take much to turn a regular sandwich into something worth starting the day with. Maybe toast the bread you make your PB&J on, or throw a fried egg onto that burger.

Another oft-overlooked aspect of the breakfast sandwich is that it absolutely must be easy to make. Elegance lies in simplicity, especially before you’ve had your coffee. You don’t have time to make a masterpiece when you have to be at the office in half an hour, and can’t concentrate on keeping that Béchamel sauce from curdling if you’re reeling from a hangover – let alone still drunk. So keep it simple! Two or three ingredients on an English muffin is plenty.

Moving on, your sandwich must be hearty. When you get up each day, you probably haven’t eaten in at least twelve hours. It’s probably another four or more hours before your lunch break rolls around, and now that you’re out of bed your metabolism is in high gear. You need something that can get you through the rest of your morning routine. Think protein and carbs – eggs, meat, peanut butter, good bread. Around 11, you’ll be glad you did.

Finally, your breakfast sandwich should ideally be fun. It’s hard enough for me to convince myself to get out of bed, and if all I have to look forward to is putting on a tie and wincing through some boring-ass toast I’m likely to go back to sleep and hold out until lunch. There are plenty of ways to put the zap on a breakfast without overcomplicating it. Tabasco sauce is great at this, but if you have some leftover cilantro sitting around it’ll get the job done too. Keep your eyes open for zesty flavors in small packages.

So when I’m staggering blearily into the kitchen at 7 a.m., what do I emerge with? Feast your eyes on my Perfect Breakfast Sandwich. I take a single egg and drop it into an oiled skillet on medium heat. When the white is just barely firm enough, I flip the egg and add a slice of ham or salami and cheese. If I’ve got one handy, a tomato slice goes on as well. Then I turn off the heat and cover the skillet, leaving it on the warm burner while I toast the bread. If it’s done right, your first bite will release a dribble of warm yolk on your plate that you can dip the bread into as you eat. The thought of one of these sandwiches is enough to rouse me from even the deepest slumbers. Make a waterproof version and you could probably wake Cthulhu.

Of course, this version isn’t for everyone all the time. When I can, I mix things up, using bacon or mushrooms instead of the salami. If I’m going to be driving anyway, sometimes I splurge and grab a McGriddles from the nearest McDonald’s drive-thru. But it’s a powerful combo, and a morning sandwich that’s served me well for years.

Like I said, improvise! Sandwiches have limitless potential. What recipe do you use to uncork a morning?