by ·Comments Off on Quick review of “Almost Flat UI”

I’ve been working on a theme for re-doing this site.  While digitalnature’s Mystique has served me well over the last couple of years, I’ve been feeling it’s time for a facelift.  Since I’ve been working with Zurb’s Foundation, I stumbled across Amit Gaur’s “Almost Flat UI“.  It’s inspired/drawn from Designmodo’s Flat-UI for the Bootstrap Framework, but adapted to be used with Foundation.  You might see it in action here in the next few weeks.

At first glance, it’s an impressive work.  He’s adding more “button styles” and other such tweaks to what already seems to be a pretty solid framework.  But I have to say that I’m a bit disappointed when I start digging into the code.

All of these “major” frameworks are written in SCSS or LESS or some other CSS pre-processor.  I haven’t gotten that far yet (in learning the methodology behind pre-processor styles), so I’m still using the basic CSS file.  The one site (Greensboro Pony Run) I’ve taken start to finish with Zurb uses v3 (which still supports IE8), but I’m using v4 for my re-design.  Quite frankly, on my own site, I don’t care if scare away IE8 folks.  I don’t think that I’ll ever have enough of a corporate following (the only ones still forced into older versions of IE either due to upgrade policies or OS support policies) to justify using v3 on this project.  But I digress….

The “stock” full version of Foundation stands at 116KB, 91KB minified.  The CSS file for Almost Flat UI is 341KB, 295KB minified.  That’s humongous!  Both files are 3x the “stock” versions!

While it’s true that more and more of the web these days connects via broadband, I’m still not sold on forcing end-users to download nearly half a Megabyte of data before you start accounting for images.  To be fair, I’m beginning to be of the opinion that 100KB of CSS is too much.  By the time WordPress plugins add in their own CSS and JS files, you’re asking a user to download 1 Megabyte.  On a standard cable connection, it’s not too bad, but when you’re building for mobile, connection speeds are spotty at best.

Near as I can tell from his CSS file, what he’s done is rather than just adjusting the original Foundation CSS for the Almost Flat design, he’s recreated the original with his own changes.  Sometimes repeating some sections at least once, sometimes twice.  It seems like a bit of overkill.  (I don’t want to call it laziness just yet, because I don’t think that I have the “community standing” to call it that when my own CSS files are sometimes un-ordered and messy).  To me, it would have made more sense if you’re repeating code to just strip out everything but the color, background-color, etc. so you could still leave the original CSS intact.

I bring this up because while I’m working on my re-design, I’ve been debating how I want to use everything in terms of a framework.  Overriding specific colors in the CSS seems to make a lot more sense than re-building the entire code base, although at this point, v4 is pretty mature.

Just food for thought.  I don’t want to take away from the strong work that Amit’s done already, but if anyone wants to use it in their own projects, just be prepared that it’s not quite ready for a development environment, I think.

by ·Comments Off on Responsive Design & Frameworks

I’m a creature of habit.  I’ll admit it.  And I’m willing to bet that anyone reading this is too.  It’s human nature to find comfort and solace in repeating patterns.  Which is why I can’t for the life of me figure out the appeal of the “Boostrap” framework from the folks at Twitter.

I’ve done a lot of reading lately on two major “trends” (if you will) in web design.  The first being a “flat ui” (which is another discussion entirely) and “responsive design”.  To boil down “responsive design” won’t really do it justice, but it basically entails creating a website that will maintain much of the same look/feel/design when viewed on a smartphone screen as well as a huge monitor.  A lot of this is created with some additional coding on the back-end, nothing too dramatic, but still somewhat complex in practice.

To ease the burden, there are several popular frameworks to get started.  The most popular right now is Bootstrap from Twitter.  Behind that is Foundation by Zurb.  I won’t bore you with the technical details of each one, but they’re both very similar.  How they accomplish the tasks is obviously unique, but I’ve found a preference for Foundation over Bootstrap.  The main reason being the “top bar” navigation.  Both frameworks feature this, but Zurb seems to be the only one that adds in the ability to actually move it so that it’s not the “top bar”.  Maybe it’s just that Bootstrap’s documentation is lacking to show me how to accomplish it.

Which gets back to my original point – I’m a creature of habit.  And I don’t feel right unless my design is structured header image, nav menu, content, etc.  Not nav menu, header image, content.

The “top bar” of these frameworks is designed to neatly collapse once the browser size falls below a pre-defined break-point.  I’ve spent more time with Foundation than Bootstrap, and I do know that there’s an alternate navigation menu with Foundation, but it doesn’t shrink gracefully – it basically turns into stacked boxes.  And I’m sure at this point that if Foundation has it, Bootstrap has something similar as well.

So that puts me in the process of creating yet another framework for WordPress.  There are a couple others out there already, but they use either the top bar at the top, or use the alternate nav.  I’m currently using the “starter theme” from the Themeshaper team available at underscores.me for that.  Hopefully, if everything goes well, I’ll eventually have a “first draft” done by the end of the weekend and make it available on GitHub.