New blog theme was launched tonight!
The theme name is Brunelleschi, by Kit MacAllister. He’s also from Portland.
Here’s what I love about the theme – it uses Responsive Design.
For a demonstration of what Responsive Design is, try re-sizing this browser window, or loading it with your phone or tablet. Notice how the site manages to compensate for whatever width it is being rendered at. This is completely CSS driven, using the new HTML5 CSS3 standard called media queries. These allow the CSS to understand the current page width and apply styles accordingly. From a programming perspective, it is like having an {if/then} statement right there in the CSS. I have to say, I’m hooked on this technology! The media query standard took a lot of foresight from its creators and solves a difficult problem quite elegantly.
From an application architecture standpoint costs go down and productivity goes up. A web application can use one set of markup and work on just about any modern web enabled device (phones, tablets, and desktops). Note I said modern device. IE6 is out, but its market share is dwindling which means it is getting harder to make the old tired argument – “but we need to support IE6…”. In quick testing it seems to work okay with IE7 and IE8 (simulated through IE9).
Some examples of Responsive CSS code that help make this possible:
/* Set it up so images do not over flow their container */
img {
max-width: 100%;
height: auto;
}
/* When the width is below 767, adjust the right hand bar to
* drop below, instead of float right. */
@media handheld, only screen and (max-width: 767px) {
.widget-area {
width: auto;
float: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
}
}
Links on Responsive Design:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries (good introduction to the technology)
http://css-tricks.com/responsive-data-tables/ (for handling <table> rendering on phone size screens)
http://getskeleton.com/ (framework)
http://lessframework.com/ (framework)
Personally I would play with the CSS first before delving into a framework. Media queries are super simple to work with and don’t require much to get going. Introducing them into an existing site is another story…