Web design podcasts, coding with SASS, a mobile framework and the Boston Globe

Okay, so here’s a motley collection of useful links I’ve found lately.

Since I moved office to Donegal Town I’ve found myself with a 20 minute each way commute.  No big deal, but I had no desire to extend my working day to regain those 40 minutes – and my day is anyway constrained at one end by the school run and at the other end by my desire for some dinner – so I wanted to make sure I used those 40 minutes at least reasonably well.

So, I turned to look for some podcasts.  Outside of the excellent Boagworld, which I already knew all about, I found the superb Big Web Show curated by none other than Jeffrey Zeldman and kept on track (mostly) by Dan Benjamin.  It’s excellent – truly valuable insight into the workings of a design agency from one of the industries founding fathers, really.  They also have interviews etc. but the ones I like best are just Zeldman and Dan chatting away.

Then, in .net magazine just today – there’s a good list of web design podcasts which has a few I hadn’t heard of.  It’s nice to be able to use my time effectively.  (I also consider listening to the new Laura Marling album an excellent use of my time).

So, also with .net magazine – an interesting article on coding better CSS using SASS.  SASS builds on CSS frameworks but, importantly, takes a more programmatic approach to writing CSS – it allows for variables and mixins, giving much greater flexibility to your style sheets and – hopefully – speedier coding.

Sass is an evolution of the CSS syntax that has been enhanced to provide sophisticated tools for intermediate and advanced CSS developers. These tools make it easier to create and maintain style sheets over time by giving greater expressiveness to the style sheet itself.

What else, what else … oh yes, Mulberry – a mobile framework for app development.  I’ve not had a proper play with it – and I don’t know when I will, but it looks quite interesting.  When these things come along I always get slightly nervous about the learning curve but this seems to build on what I already know (HTML5, jQuery and CSS3) to streamline the process of mobile development … although I’m always wary of frameworks promising to ‘transform’ anything of mine into something else.  It’s a bit ‘oooh, the mystery!’.

Mulberry helps web developers rapidly create content-rich native mobile applications. Powered by HTML5, CSS3, and JavaScript and built on top of PhoneGap, Mulberry transforms your content and data into a responsive, native, cross-platform mobile experience

Check it out.

Finally, I’m the only web designer in the world who has an interest in responsive web design and hasn’t yet name checked the Boston Globe’s responsive re-design.  I am genuinely excited about this … it seems to be the first major, corporate sponsored, launch of a website using responsive techniques to serve content to all devices.  Nice stuff – and there’s a good write up of it in .net magazine (again!).

The screenshots below show 3 different sizes (although the images themselves have had to be resized – they roughly correspond to screens of 1024px wide, 700px, and 410px) – this is the same content just in differently sized browser windows.  There’s no server side trickery to achieve this – this is all done with CSS media queries.  Good stuff.

Full Screen:

Next size down:

And then for mobile / small screen devices:

Right, that’s quite enough from me …

The Semantic Grid System

Really, this should be filed under ‘probably too good to be true’ … but let’s hear it out.

So, here’s the problem: there are a ton of great grid based CSS frameworks for designers to work with – frameworks which provide a baseline for dividing up the page into a usable grid via a series of <div>’s with class names that, whilst not being very helpful, are at least descriptive.

For instance, if you used the popular 960.gs you’d have a ton of div’s that look like this:

<div class=”grid_3″>
<div class=”grid_6″> … and so on …

… the complaint here is you’re mixing presentational information with what would otherwise be semantic mark up.  Additionally, the frameworks are not fluid – they all appear to be fixed width, and they’re not responsive – they don’t adapt to small screen sizes (with the notable exception of Less Framework 4) or changes in device orientation

So … long story short … using LESS (confusingly, nothing to do with the Less Framework … grrr …), the dynamic stylesheet language – which enables you to use variables and mixins within your CSS – someone far smarter than me has built the Semantic Grid System.  From the website:

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.

All without any ugly .grid_x classes in your markup. Oh, and did we mention it’s responsive?

You can read about the whole thing on Smashing Magazine or cut out the middle man and go straight to the source.

Nice work.

Beautiful design systems

So, I was reading this article from Happy Cog and it struck a chord with me as regards systems for design.

Whenever I start a web design project, I’m looking for elements from previous projects that can be re-used in planning the new project.  I might lift an HTML code base from one, a set of responsive style sheets from another, or a collection of jquery plugins from a third.  The goal is consistency – I want my projects to be coded and developed using a consistent base of ingredients … this way, it makes it easier for me to re-use items in the future, it makes it quicker to develop future projects, and it makes it clearer for any developer I’m working with to interpret the code (and my intention) going forward.

Of course, the people at Happy Cog are able to express it better than me, plus, they get to use a Cupcake analogy, which further marks them out as a bit special!

A beautiful design system is about finding the same balance of consistency and variety. Too systematic and the design becomes predictable and repetitive. Too much variation and the system is confusing and overwhelming.

One of our design goals is to create work that is sustainable, and our design process always aims for the right amount of consistency without homogenization. We like to create design systems that are easy to build, evolve, and use.

Check out the full article: Sweet Systems