How bad is Flat Design?

Yet another horrible design trend from Microsoft

Flat design has been around for a few years now, and still maintains a strong presence in the work of some designers, but it is fundamentally flawed in several key ways. At it’s worst it provides no visual cues as to what the functionality is supposed to be or do. The argument by some designers is that the user should share the same mental memes as the user and just know how the buttons and icons work….and to a limited degree that works….a sandwich indicates a closed menu, X’s are close buttons, etc, but you just won’t know for sure how much coverage you have unless you test the product against the typical user, or even better, a broad spectrum of users. Our mantra here is that the User should never have to guess at how something works…if it’s not intuitive you are doing something wrong. This article gives some good information on the subject The gist of it is that people create mental models of the applications they interact with…mental models that are equivalent to physical models, so a button should look like a button if you want people to equate it to a physical button and press it. Microsoft has a slightly different philosophy where, using market share they bully you into learning their proprietary ways so that now you are vested in their software and way of doing things, and it’s something you can put on your resume because you’ve banged your head against he wall enough times using their software that you can at least appear to know what you are doing….even sell yourself as an “expert”, but for us that has always been the wrong approach….User first, User last, and User always…. A great book on the subject we’ve worn to pieces here at Webmaster Ninjas is Gui Bloopers where they point out a lot of mistakes in GUI design and websites. The book is getting a little long in the tooth, but the basic principles of psychology and human computer interaction are still the same because our brains are basically the same. So take a look at your abandonment rates…look at your goal funnel and see if you can optimize some of those steps and visual cues to make it easier to accomplish what they are trying to accomplish, especially on the mobile version of your application where it’s easy for the user to get frustrated. As the article mentioned points out… Flat Design 2.0 is a decent compromise…visual indicators, still looks clean, and if you are going to go in that direction that would be our recommendation.

Using Foundation 5 SCSS Tutorial

Use with Adobe Photoshop and analyze your website PSD to determine how many rows you need, as well as how many columns, the column widths, and the gutter widths.

You are not just building one site, but 3 different sites.  A desktop site, a pad version, and a mobile version.

Every website needs navigation.  Foundation really pushes you towards a dynamic top nav, so make sure you are including the topbar js application (foundation.topbar.js, and make sure top-bar.scss is being compile into your foundation.css file), or the new side-nav(side-nav.scss) or sub-nav(sub-nav.scss)

Using Foundation 5 SCSS Without Git, NodeJS, or Ruby on Windows

When it comes down to it, Foundation is, at it’s essence just a set of scss files that get compiled to css files, and two javascript files….foundation.js and modernizr.js,  that you can include in your website.  If you want to use any of the javascript components (and you should), then there are some additional javascript files you should include, as well as some particular version of jquery.

Really, all you need to get started with Foundation scss is a program to compile the scss files.  Ideally your IDE would do this, but most IDE’s don’t have that capability just yet, so you will need to download a separate app for it.  I recommend Scout , because you can specify an output directory and it doesn’t hog the CPU, but I also like Koala….Koala is dead simple and made especially for designers, but it compiles the scss in the same directory, which I don’t like, because after all…who wants their scss and css files living in the same directory.  I used to like Prepros, but it’s gotten CPU intensive, and all the cool features are “paid” features now.  All three have additional features in that they will also process and minify your js and css…and Prepros even goes so far as to offer stitching, which is a really nice feature where it automatically stitches together your css and js files into a single file…something very handy for optimizing your website in production.  This can get you in trouble in js since there are usually some dependencies and not everyone has mastered closures, modules and lazy loading and often, the load order matters, but definitely give it a shot and then check to make sure everything still works.

Download Foundation

There’s a composer file for keeping track of dependencies, but for the most part you don’t really need it..if you are doing everything command line, and used to using composer, then feel free to use it to download any dependencies, and if you are feeling bold, run update to get the latest versions of the dependencies and see if everything still works.  Otherwise, unzip the files, and you can just copy the /scss and /js directories from the unzipped zip file.  Feel free to delete any js application files that you aren’t going to use (and their corresponding scss files…also edit the /scss/foundation.scss file to remove references to those files), and in fact I highly encourage this to keep your website optimized for speed.  The only files you absolutely need are the /scss/foundation.scss, /scss/_settings.scss, foundation.js and the modernizr.js files.  The js files should go wherever you normally put your js files, but the scss directory can go just about anywhere.  Ideally put them in your IDE’s project directory, but not in the deployment directory.  They can be deployed, but they won’t be used because these are the files that get compiled into the css.  So you’ve moved your scss files to some particular directory, and copied the js files that you want to your js directory.  Now when you fire up your SCSS (SASS) compiler and “Add New Project” and specify your project directory.   A warning if you are using PrePros….it can be VERY slow when it initially scans your project before it’s ready to go.

Now make sure you are including the normalize.css, and foundation.css files that get compiled, and some version of jquery along with the foundation.js file.  I’ve used jquery 1.10.2, but if you are going to use the javascript apps, you’ll probably want to use the latest jquery.  These are the official listed dependencies for Foundation 5.3.3… “jquery”: “>= 2.1.0″,”modernizr”: “>= 2.7.2”,…..the rest are listed as dependencies, but I don’t believe they are absolutely required.  Fastclick is used to make mobile clicks faster…jquery cookie is used by Joyride js plugin….and jquery placeholder is used for IE9 polyfills:  “fastclick”: “>=0.6.11″,”jquery.cookie”: “~1.4.0″,”jquery-placeholder”: “~2.0.7”.  If you run composer, it should grab these files for you (if you have composer installed just open up a command prompt, navigate to the foundation home directory you unzipped and run “composer install”), otherwise just download the “full” version of foundation and copy those particular js files that you want over to your js directory and link them.

For the most part these directions should work for Mac or Linux as long as you find a SASS compiler for your OS.

And there you have it, a barebones Foundation scss deployment with all the magic and wonder that SASS brings to Zurb’s Foundation, without the fluff.  My next article will be on using the Foundation _settings.scss file and customizing your SASS to accommodate your website’s particular dimensions.




Design and CSS….secret techniques of the CSS Masters

So I learned 2 things tonight…there’s an awesome tool to help evaluate your css and get you on the right track for when you create new css selectors, and that tool is CSS Lint and can be found at and is pretty cool….something else I learned is that although I’ve always thought id’s in selector’s made for faster css….I was wrong. The article that changed my thinking can be found at and is genius. Well thought out, and backed up by numbers.  He used this online app for analyzing the css and creating test cases.  Something I didn’t know, was that css selectors are evaulated right to left….definitely something to think about.  And finally….I found an interesting article on web fonts and making sure they display properly without the faux bold or italics. It comes down to adding additional references to the font-face……a possible solution if your designer is looking on his Mac and it doesn’t match what shows up on your PC…I know how picky designers can be.  Article can be found here:

What’s new in Design

So I’m mostly been on the other side in the web development process.  Getting PSD’s from   designers and converting them into a website.  So the latest thing I’ve been exploring is called flexible design, also called fluid design, or even responsive design and by the very technicaly term progressive linearization.  Now as far as i can tell it all revolves around tags like

@media only screen and (max-width : 360px) and (orientation : portrait)

These let the designer specify certain css tags based on a particular screen width, so you can use the same front end code base to create multiple views for devices with different screen sizes.  I love the idea…it’s way better then having to create a separate mobile website and is way more reusable.  It seems like most of them are using %’s and em’s as well for variable size text and buttons, but I’m still getting a handle on that aspect.  There are also a new css  meta language called SASS that is getting very popular and a bunch of new css frameworks that support these flexible designs, like YAML.  My next new project is converting my affiliate website to YAML because most of the traffic there is coming from mobile phones, and the current layout is horrid for a phone sized screen.   Let me know your thoughts and experience on the subject.