Just an amazing space that uses the outdoor to extend the indoor space. As the designers put it in the HGTV show, what’s nice about California is that the outdoor square footage count just as much as the indoor square footage. So a 1500 square foot house can be extended to a 15,000 square foot mansion, simply by using the outdoor space well. This house is definitively a great example of how to do this well.

Here are a couple more photos I managed to find around on the web. I wish we could use the outdoor spaces like that in Canada, but with 6 months of winter a year, we would need to rethink the design a little bit. It’s still do-able though.

I came across this amazing house while browsing my 2008 Autumn issue of International Architecture and Design. This house was designed by Toronto architect Ian McDonald in 2002 and was awarded the 2008 Governor General’s Medals in Architecture. Simply stunning!

Comment from the Jury

This house gives the split-level bungalow type a whole new meaning. The strategy seems to erode and intertwine the domestic structure of street frontage, back yard and neighbouring setbacks within the modest volume of a vintage bungalow, where spaces are brilliantly mined from the site rather than added to the structure. The result is a sequence of compact indoor and outdoor “rooms” that unexpectedly unravel into exquisite grand moments of expansion.

Using the famous divide-and-conquer problem solving method (ha ha!), I started to remove some text to find out the culprit paragraph, and realized that the problem was only present when I had a lot of content on the page. After a few google searches, I found a thread on sitepoint’s site that explains exactly my problem (titled: Web Page Wiggle Issue and Margin Auto Wiggles & The Vertical Scrollbar). The problem lies in the use of “auto” for centering pages, much like in the very popular “body {margin: 0 auto; width: 960px;}”. This causes the page to wiggle (move to the left) between pages where the vertical scrollbar is needed (longer content) and where it doesn’t appear (firefox adds the scrollbar as needed, whereas IE always keeps it!). From the website, I found two fixes for the problem:

You can easily fix this, using CSS, by adding this one line in your stylesheet:

html {overflow-y: scroll;}

Another fix, if you are using JQuery, is the following:

$(function(){
    $('<div/>').css({
        position: 'absolute',
        top: 0,
        width: '1px',
        height: ($(window).height() + 1).toString() + 'px'
    }).appendTo('body');
});

In fact, I was completely paralyzed and ended up leaving without buying any pen.

It’s not the first time I am faced with this sort of situation (happened a while back with paper…), but a week or two ago, I watched the following talk, embedded from www.ted.com, which made me realized exactly what I was feeling. I was confronted with what Barry Schwartz called “the paradox of choice”.

According to psychologist Barry Schwartz, this paralysis is a consequence of too much choice, which he discusses thoroughly in his book Why more is Less. In this talk, Schwartz goes on to explain other problems caused by the wealth of choice in our western society, namely, anticipated regret, opportunity cost, escalation of expectations, and self blame.

In just about 20 minutes, Barry Schwartz goes from explaining what some think is the biggest culprit (I do) for the rising depression and suicide rates in our society to giving away the secret to living a happy life. Well worth the 20:22 minutes! I hope you enjoy it as much as I did:

And in case you care to see the whole Kettle, here it is!

In all seriousness though. I am glad to see that there are some people running IE7 already out there. I mean, I know the RC has been out for a while, it’s been out since August 24 2006, but this means we should be getting feedback from the users very soon. I’m excited to know how much ground they have covered with this release. The sure have been working real hard on their CSS support, the CSS 2.1 specs that is.

There is a bit of a story behind this wallpaper. I found it through a post by Veerle entitled Design is Just Owning a Clip Art Gallery. I found it funny and saw that it was inspired by HicksDesign’s brilliant wallpaper shown above. Please, visit his website to download the proper wallpaper as I have resized it here to look better on the website. Enjoy!

I recently bought Designing with Web Standards by Jeffrey Zeldman, which I mentioned in an earlier post, and do not stop learning. It is one of the best purchases I have made in a long time. Whenever I take the time to sit down and read a chapter (or two for that matter), I just can’t stop. So, I recently decided to subscribe to the RSS feed of A List Apart to get my fix of web standard compliant advices and tricks to add to my webpage. Last week, I was delighted to find a post on how to create a wrap around text effect, like the one in this post, which I had previously observed in action on Mike Davidson’s site.

I presume that Mike [Davidson] had computed the “sandbags” by hand, which would be fine, I guess, if you only have to do it once or twice a month, but could end up being a very long process. However, the article in question: “Sliced and Diced Sandbags”, promised to automate the process using a little php script, written by the author himself, Rob Swan. Automate the process it did. And very well I might add. It is based on the transparency values stored in png files, but let’s not get into the details. Explaining the nuts and bolts of his script is not the point to my story today.

Installing the Script

So I sat down and read the whole tutorial, in the hope of being able to use the newly acquired knowledge on my webpage. The first step was to copy and paste the script “as is” and to try it on my machine first. Perfect! It worked perfectly. I have to admit that the whole background-image idea in each ‘div’ made it look a little too ugly for me, and reminded me of how Mike [Davidson] did it in his original post.

The New Script

So I decided to update the script to fit this “new” idea from Mike. It turns out it produces much simpler division blocks (divs) and is quite a bit smaller in size. Here is a snippet of the things I have changed from the original script (I obviously had to make it fit the box here and so it looks funny):

echo '<div style="position: absolute;
  background-image: url(' . $imageName . ');
  background-position: -30px -60px;top: 10px;
  right: -60px; no-repeat; width:' . $width .'px;
  height:' . $height . 'px;"><span>
  </span></div>';

echo '<div style="z-index: 10; padding-top: 0px;">';

foreach ($sandbag as $position => $blankPixels) {

  $sandbagWidth = $width-$blankPixels;
  $yPos = $position*$sandbagHeight;

  echo '<div style="relative; padding: 0px;
    margin: 0px; width: ' . $sandbagWidth . 'px;
    height:' . $sandbagHeight . 'px; float:' . $align
    . '; clear:' . $align . ';"><span></span></div>';

}

echo '</div>';

Conclusion

My two main problems with the script at the moment is that I can not find a way to include both inline css style and external css style, and the choice of putting the background image at -30px and -60px is completely ad hoc (and style dependent!). For the first problem, it seems like the browser totally disregards what is in the external css file when there is an inline style specified. I know that the inline style should have precedence on the external style, but does it take over completely ? Isn’t there a way around this ? As for the second problem, I do not expect a way around this, and plus, what’s a little ad hoc work when you have the sandbags automatically created for you ?

References

• A List Apart’s article by Rob Swan: Sliced and Diced Sandbags
• Mike Davidson’s original post: Newsvine: Next Steps.
• Great little tutorial: Creating a PNG file using Photoshop

Get the complete script here. And please, make sure you also give credit to Rob Swan hard work for creating the original version of the script.

I have to give props to Heather for noticing the error on the non-transparent image for Internet Explorer and the non-wrapping wrapping text for IE. It is now fixed and should not be a problem anymore. Please, let me know if you see anything else.