{"id":13514,"date":"2011-08-10T20:25:13","date_gmt":"2011-08-11T03:25:13","guid":{"rendered":"http:\/\/css-tricks.com\/?p=13514"},"modified":"2012-01-04T20:46:04","modified_gmt":"2012-01-05T03:46:04","slug":"design-v9","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/design-v9\/","title":{"rendered":"Design v9"},"content":{"rendered":"

Rolled out a new design folks! A lot of folks were surprised it happened so soon after the last one, but actually it’s been about 8 months<\/a>, which is pretty average for this site, if a little slow. I’ve updated the design history<\/a> page just for longevity.<\/p>\n

New (v9)<\/h3>\n

\"\"<\/p>\n

Old (v8)<\/h3>\n

\"\"<\/p>\n

Some notes<\/h3>\n

Just for fun<\/h4>\n

There is no huge agenda behind the design. Mostly I just thought it would be fun. It’s kinda what I do. Although… there are some new areas of the site coming up that this will help motivate.<\/p>\n

Fonts<\/h4>\n

I stuck with Myriad<\/a> (I quite like as body copy) and Kulturista<\/a> both via Typekit<\/a>. Although I’m hoping to replace with Whitney<\/a> and Vitesse<\/a> as soon as the HF&J<\/a> web font service rolls around.<\/p>\n

Responsive<\/h4>\n

The old design used media queries, but this one is closer to “responsive” because it’s also fluid, which means it’s probably going to do OK on lots of devices I didn’t even plan for. For example, I didn’t even test it on the iPad but I hear it’s alright. I also chucked some transitions on a few elements so when the media queries hit and change those values they animate to their new position\/size. I used three weird-ish breakpoints. Default is for browsers above 1200px (most of my traffic), first break point is that. Then breaks again at 1024px and then at 860px (which is basically the mobile version). <\/p>\n

IE support<\/h4>\n

Design is passable in IE 8+. It’s a wreck at this moment in IE 6 & 7. I plan to fix up IE 7 when I get a minute and serve the universal IE 6 stylesheet<\/a> for IE 6.<\/p>\n

Thingies used<\/h4>\n