Fluid Studios and its Responsiveness…

[Johnny Taylor]

What a trip!  

Since the first few days of January I've been working on making Fluid Studios WordPress theme Responsive -- so the site "fits-in" the browser window no matter its size. Long story short, I'm nearing completion. There are still a few minor issues outstanding, certain elements display inconsistently under the uio colour themes, but they're relatively minor tweaks I'll get to in the next few days. I thought I'd write my experiences down before I either get distracted or forget.

First thing I had rather significant issues with was my original approach. I labelled it "Mobile first with a twist" <http://abledaccess.com/blog/mobile-first-with-a-twist/> (which I still need to amend). Turns out I was over thinking it (surprize!). And a forced break from the internet, via a burned out router, made me see the error in my ways. In an effort to avoid issues in IE8 and below, and specifically the fact IE8 and below doesn't support media queries, I was creating other needless issues for myself. I went making  things difficult for myself again and didn't have to. 

For the record the Mobile First approach really has a ton of merit. Working from smallest to biggest really makes a ton of sense. But it was the "with a twist" bit that drove me up a wall. I, hopefully, circumvented the media query issues in IE7 & 8 by including respond.js in a custom build of Modernizr. Testing pending, of course. I also avoided using overtly fancy CSS to, again hopefully, allow for it to play nice in IE. I truly have no idea how it looks in IE though, fingers crossed.

Another issue I had was with button placement. I'll try to avoid overtly rehashing the reasons for my query, but as you can see in Joanna's mock-up's <http://wiki.fluidproject.org/display/fluid/Studios+Designs> there are two different spots where a user can activate the uiOptions panel depending on the size of the browser window. And with both Colin's and Justin's help I was able to set a second "dummy," or "proxy," button that activates the panel when the viewport size is narrow enough to constitute it appearing below the Studios logo. That simplified everything. Thank you again Colin and Justin for the much needed help. It functions much more fluidly, but consistently, in terms of predictability at least.

The new Responsive Fluid Studios WordPress Theme is nearly ready. A long, long time in coming.

 https://github.com/abledaccess/studios.fluidproject.org/tree/STUDIO-45/wp-content/themes/fluid-studios

Next on the list is tackling uiOptions fat panel to make it responsive, too...

Johnny
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20120221/321c1a0d/attachment.html>