Josh Daugherty and I were recently featured on a recent EktronTV Office Hours discussing Responsive Web Design duiscussing our work on the new Hendrix Website.
Thanks to Bill Cava (Chief Evangelist at Ektron), James Stout (Technical Marketing Manager Ektron), Chris Osterhout (Director of Enterprise Solutions at WSOL), and Joe Mayberry (web developer at WSOL) for having us!
One of the least enjoyable aspects of current website design is the need to add and subtract padding (or is it margin and also the border) from the width of elements in CSS design layouts. This post from Paul Irish goes into the border-box model and it's support in browsers.
One of my least favorite parts about layout with CSS is the relationship of width and padding. You're busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And 'lo and behold, you now are subtracting pixels from your original width so the box doesn't expand.
Ugh. If I say the width is 200px, gosh darn it, it's gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model. Jeff Kaufman also dove into the history
Anyway, I have a recommendation for your CSS going forward:
*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise.
http://paulirish.com/2012/box-sizing-border-box-ftw/ (via David Hinson)
I ended up putting this site on my College provided web space since I have easier access to it if I do something wrong, but my first deployment was into the cloud! I found an article about hosting a BlogEngine.NET blog in the new Windows Azure Web Sites preview and it was remarkably easy and straight forward.
I've been convinced that a blog is better than twitter for posting (and most importantly finding later) bits and pieces of programming wisdom that I come across on the web. This is the result.
Thank you, Scott Hanselman.