isotope|eleven

Figured it was about time to talk about the most recent Isotope11 redesign. If you haven't noticed already, the site is full responsive and scalable regardless of media port size. It has definitely been a fun & consuming process (although we're still making portions of the site better everyday).

First things first. We've noticed a fairly significant increase in mobile traffic over the past year or so, and had also noticed what a terrible viewing experience we were giving potential clients. Our old site, although not awful, was definitely showing its age at this point. (The half-life of site designs is something I'll have to talk about in another post). The first decision we had to make (an easy one for us) but was whether we'd benefit more from a native app or a responsive site.

The fun (& challenging) thing about mobile first design is simplifying the experience and really getting down to the nuts & bolts of what is actually important for the viewers to see. Instead of starting with a big 'ol 960px wide .psd and feeling like we have to fill up all this space, you have ~320px and some serious decisions ahead of you. Simplify your message and scale it out. Who actually comes to your site? What sort of questions are they looking to answer? We focused on a few central questions to quickly answer. Who are we? What do we do? How do we do it? Within the first few scrolls, the answers should be pretty apparent.

Next, decide how viewers are going to navigate through the site. Just like with any site, you are presented with plenty of options. We decided to roll with the footer-only nav approach on mobile, and really focus on being content first for the meantime. We're still considering working in the select field navigation as the footer only nav asks a lot of viewers. As the site scales up, we reveal a partial nav bar with the next most important links, and then finally the full nav bar.

Design & implementation wise, it's refreshing to start with such a limited canvas. Elements and alignment that look good at mobile sizes will continue to look good at larger sizes. We started the building with 320 and up , it's a really nice little package and includes the HTML5 Boilerplate & Mobile Boilerplate components, imgsizer.js (which helps IE scale images), selectivizr.js (css3 selector support) and handles all of the media-queries. The Golden Grid System looks to be another good option as well. Plenty of good options to choose from out there now (Bootstrap 2 is responsive as well) so get out there and make some responsive sites.

http://lab.simurai.com/toy/monster/ Just a really really fun css3 animation.. and don't use cursor:none

Oh, and I posted this via email

In 1990, the resolution of 67% of monitors were 800x600 or below. That's really small. As of January 2011, it has been noted that 98.9% of monitors used have resolutions of 1024x768 (85% of them being higher than this!)

Now what is the point of me saying this? It's been said that all useful content needs to be in the top 600px or so of each site and that users just won't see anything below this. Again, what's the point? The concept of "above the fold" is derived from newspapers in the sense that the most interesting/eye-catching headlines would be on the top fold of the paper to encourage viewers to purchase and read the paper. Naturally as our preferred mediums of information sources have shifted, we've acquired some of the design concepts and ideas as well. Being above the fold in the print world makes perfect sense, but it just isn't as cut and dry on the web.

Is the overall idea of 'above the fold' wrong? I wouldn't go quite that far, but in this day and age we've learned to scroll. As the web still is a content driven medium, websites do need to retain easy usability and it's always a good idea to place important content where it's easily seen. For designs sake it's just not a good idea to pack the top 600px of sites with as much content as you can. Keep the design clean, let the content breathe a little bit and let your users scroll.

Don't get me wrong though, the fold is still an important concept, it's just not as important as it used to be. Don't stress out about trying to cram everything into 600px, but just be smart about it. Users should be able to tell what the site is about without having to scroll, but that's about it.

Ever since I started into web design I had always heard about grids and frameworks being used as bases. 960grid, Susy, Simpler grid.. the list goes on and I still don't understand the purpose. For template-like and basic sites they can make sense...I think, but I really don't think strict grids like that have a place in true custom designs and layouts.

I start with all that, but I've found that not all frameworks fall into that same category. Enter the YUI grid. Besides the sort of cumbersome (and ugly) tag structure it seems to be a great system. It's a grid that be as controlling or as minimal as you want it to be, and therein lies the great nature of it. It's extremely flexible and you can use just for the main wrapper or for every content area and container in the site.

It's really easy to implement, even just to try it out for a bit. Just paste this into the head and you're ready to roll:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" />

Here comes the part that I both really enjoy and dislike. The div class names are really ugly (someone should write a mixin to replace these!) but also do make a lot of sense. The sections are all split into units: sections divided down to 1/24 of the specified width of the containing element. I think that's what makes the grid work as well as it does. You still get to use specific widths, but also get to build out entire layouts without the use of floats and thus cut down on a lot of annoying cross-browser work.

Every class name starts with "yui3-u-" and the numbers or fractions that follow that are what actually specify the width.

Applying a yui3-u-1 class to a div will make the width 100% of the width of the element in which it's contained. a yui3-u-1-2 will make the div 50% of the width of the container. Looks a little ugly in the source but makes sense when you get into it. Also, yui3-u's can be nested as many levels deep as you would like.

<div class="yui3-u-1">
  <div class="yui3-u-1-2">
     <div class="yui3-g">
       <div class="yui3-u-1-3"></div>
       <div class="yui3-u-1-3"></div>
       <div class="yui3-u-1-3"></div>
    </div>
  </div>
</div>

That example would obviously make a container half the width of the main, but split into 3 equal portions on the interior. Pretty cool stuff.

Well that doesn't sound like it makes any sense, does it? Hear me out first before totally writing it off. As a designer, it's extremely easy to find yourself in a rut and cranking out slight variations of the same sites over and over again. Here are a few things that I like to try out to make the creative process more seamless.

You may not be able to try this one out on client type work, but wholeheartedly force yourself outside of your design comfort zone. Used to designing 'ominous and manly' dark sites with palettes dominated by shades of black and grey? Design an Art Nouveau wedding dress site for a non-existant client and get outside of your design norm. This can help you see an entire range of design possibilities instead of locking yourself within your own guidelines.

Try to expand your design prowess. This doesn't mean you should start giving clients random designs that don't fit the bill, but mix it up a little bit. It's really easy to get comfortable with a certain layouts and designs.

Try to keep a good natured outlook on your work and direction. This one also sounds a bit lame, but c'mon, you design for a living... it's not that bad. Take your mind off of your work from time to time... go for a quick walk, go workout on your lunch break. It doesn't take much to break out of the monotony and give yourself a fresh surrounding. Don't lose perspective.

Still uninspired? In your free time, try finding a local non-profit that you support and give them design love. It's easier to design for clients and projects that you feel strongly about. Plus, being for a non-profit, you're likely to find more design freedom than with a paying client.