Archive for 13th February 2012

Kitchen hack – homemade coffee ice cream

my grand mother's peppermint ice cream recipe

my grand mother’s peppermint ice cream recipe

 

I’ve discovered the ultimate kitchen hack for making ice cream – my grand mother’s peppermint stick ice cream recipe from 60 years ago! Yes, our grand parents were hackers but we won’t tell them.

The original recipe was simple enough. The base was:

  • 1 [small] can of sweetened condensed milk
  • 1 cup heavy cream
  • 1/2 cup cold water

My hacked update is:

  • 1 14oz can of sweetened condensed milk
  • 2 cups whole milk

That’s right, just two ingredients. I put all of this in a 1 quart mason jar along with 2 tablespoons of instant coffee. Shake and toss in the freezer to chillĀ (this may not be strictly necessary).

 

Update: a keen reader (aka my brother) pointed out the math didn’t work between my grandmother’s recipe and mine. After some digging I have the answer. It turns out a generation ago, sweetened condensed milk was available in a smaller can – hence “1 can = 3/4 cup”. The good news is that my hack uses the readily available 14oz can and used more liquid (milk) to end with approximately the same ratio of milk, fat, and sugar.

 

Pour the contents into an ice cream maker (the kind with the chilled cylinder work fine) and turn on the machine.

Now, if your kitchen happens to have xanthan gum handy – all good hacker kitchens should – slowly add *at most* 1/4 teaspoon while the mixer is running.

Depending on how cold the liquid is to start, you will have a smooth, decadent soft serve coffee ice cream in 15 to 30 minutes. Transfer to a plastic container and toss in the freezer to harden further.

This will go great with my cake-in-a-cup :-)

Web Layouts – fixed width vs. responsive design

responsive-web-rv1

Most web page layouts today are either fixed width or fluid width. And to be honest, most rich layouts are fixed width. The reason is that fluid widths are more difficult to create and less predictable when it comes to how text and graphics will flow. A good fluid design is not easy and almost always imperfect.

Responsive Web Design is more work but renders more predictably than fluid designs. The truth of the matter is that responsive web design is still a significant amount of work compared to the fixed width layouts.

I recently completed a website design for a not-for-profit. The design called for branding, sponsorship recognition, information updates, photos, and basic legal corporate content.

Here is a quick breakdown of work estimates:

  Fixed Width Layout Responsive Design
Logo and graphics work 12 hours 12 hours (and a few seconds)
Sponsors strip 2 hour 10 hours
multi-column layout 1 hour 4 hours
photos strip 30 minutes 5 hours
Conversion to CMS theme 2 hours 6 hours
  17.5 hours 36 hours

 

Nearly all of the extra time was dealing with spacing and layout within the CSS. Even thought I started with the Skeleton Boilerplate, and I used jQuery Cycle to rotate through the sponsors, there was a tremendous amount of work.

In nearly all of the cases, the work was getting all of the graphics to flow to the right places under all of the cases – large browser windows, tablets, and smartphones with rotation between landscape and portrait.

Lets look at the sponsorship strip as one example. There are currently 29 graphics (one is duplicated to make it 30). The graphics start out six across. If this were a fixed layout, we’d be done. However, to be responsive, the strip is broken into two halves that stack when the screen is narrow. The graphics further scale down on small screens. The graphics need to space themselves out dynamically. In the end, what might have been formatted with about 12 HTML statements and 4 CSS definitions turns into 30 HTML statements and 24 CSS definitions. Since there was no margins available in some of the responsive layouts, it also meant more testing and bug fixes. Thus, the task went from 2 hours – where most of that work was choosing and testing JavaScript slider options – to 10 hours with a lot of layout debugging.

The photo strip was just as bit an issue. The subtle different to the sponsors strip is the edge-to-edge display of the sponsors. The photo strip falls within the content area and requires the edge gutters.

A designer who has done fixed width layouts and has read about responsive design would think it possible to use any of the various Grid 960 layouts. The problem is many templates are coded to 16 columns (Skeleton included). Given the various layouts used for this project – 2 column, 3 column, 4 column, and 6 columns, a twelve column grid was better. The need to support gutters and no-gutters means most elements were duplicated with different values. Adding edge-to-edge support adds yet more wrinkles and thus more CSS.

The solution to this type of project is using LESS or one of the other CSS pre-processor languages that can be compiled.

Is Responsive Web Design worth it ? That depends. If you don’t have mobile users, then it may not be a worthwhile venture. Just don’t count on not having mobile users:

"access to the Web through mobile devices has nearly doubled every year since 2009" – Dan Graziano, BGR

- and –

"Mobile web browsing will become more popular than web browsing on desktops in 2014" – Mary Meeker, Morgan Stanley

The good news is that after your first Responsive Design, you have a pretty full tool box and experience.