24ways

2008 Dec 15
Comments 10
Published In Design, Press, Site, Web
« Prev
Next »

Making Modular Layout Systems screenshot

I’m pleased to be asked back to contribute to 24ways, the advent calendar for web geeks. A couple of years ago I wrote Cheating Color, a way to alter your color values to deal with perceived color shifts, and this year I wrote about Making Modular Layout Systems. This year’s article delves into one of the pieces behind making my site possible. By using a modular approach to handling images, I’ve setup a system that allows for quick and diverse layouts. This gives me the options I need to lay out articles in a way that’s appropriate to the content.

24ways also sports a slick new website this year, and the writing has been top notch as usual. Some favorites of mine so far are Richard Rutter’s Easier Page States for Wireframes, Jeremy Keith’s The IE6 Equation, and Mark Boulton’s Art Directing With Looking Room. Thanks and congrats to the 24ways team that made it all possible, Drew McLellan, Brian Suda, and Tim Van Damme.

10 Comments

Permalink for this comment Andi Farr says: December 15, 2008

Although I commented on your 24ways article (in reply to another comment), I forgot to say thanks for another helpful piece of writing. I’ve been really enjoying 24ways this year, and I’m glad you decided to give a small insight into part of what you’ve been doing on this site over the last year. Much appreciated!
Permalink for this comment Chris Meeks says: December 15, 2008

Thanks for the article. I’ve had trouble wrapping my mind around the technical aspect of this for a while now, though the creative aspect (and value!) is obvious.

Working in what often seems like a “do what is easiest” environment, sometimes I get concerned that web professionals are satisfied with the status quo. I hope proactive designers and developers are able to run with this forward-thinking and implement it on ALL kinds of sites, not just the more obvious article-driven blogs and periodicals.

Cheers!
Permalink for this comment Morning Toast says: December 15, 2008

Thanks for sharing your brain. I’ll be studying, deconstructing, tweaking, and picking things apart in efforts to achieve something similar for my own projects. The way you present your site is just awesome, truly awesome…and is (and should be) inspiring to everyone; designers, bloggers, and those in between.
Permalink for this comment John Faulds says: December 15, 2008

I asked a question in the comments at 24Ways but it seems to have been overlooked, regarding the usage of this system on editorial sites (presumably with at least some non-technical editors):

How do people creating the content on these sort of sites apply the different classes? Do they use WYSIWYG editors (e.g. TinyMCE) or some other method? If they’re using WYSIWYG editors, how do they attach multiple classes without editing the HTML directly?
Permalink for this comment Jason Santa Maria says: December 15, 2008

@ John Faulds :

How do people creating the content on these sort of sites apply the different classes? Do they use WYSIWYG editors (e.g. TinyMCE) or some other method? If they’re using WYSIWYG editors, how do they attach multiple classes without editing the HTML directly?

That’s going to vary from site to site and CMS to CMS. But I think the best method is to abstract it as much as possible for non-technical people. It’s easy for them to understand (assuming they have followed some basic image size guidelines) that they could specify how large an image is and where it should go on the page. Many WYSIWYG editors offer options like this in the form of formatting buttons, and I think this could be achieved in a similar fashion.

Though, in order to do this in any CMS right now, I imagine you’d have to do some custom work to make it simple enough for everyone.
Permalink for this comment Eric says: December 15, 2008

Great article. As usual. I really like their site design too.
Permalink for this comment Les Reynolds says: December 16, 2008

A CMS that uses Textile (i.e. Textpattern ) will let you assign classes within the editor. This would require some training to make sure that the users would know to upload their images in the proper sizes, then assign the correct classes, but the functionality is there.
Permalink for this comment Jason Santa Maria says: December 16, 2008

@ Les Reynolds : Yup, and the same for ExpressionEngine, you could get the functionality together without too much trouble, but you would definitely need to do some quick training.
Permalink for this comment Nat says: December 16, 2008

Great article. I’ve used similar setups on a few sites recently.

I’m curious about your ExpressionEngine setup; are you adding the classes and whatnot by hand, or are you using EE custom fields?

I’ve done it both ways, and I’m not sure which I prefer. Doing it manually is simpler if I’m the one who is going to be updating the site, but requires quite a bit of training for others. On the other hand, when I’ve done it using dropdowns and checkboxes and multiple custom fields in EE, I end up with a mess of an entry form, and some crazy conditionals in the templates. I’m always interested in how others approach this sort of thing.
Permalink for this comment Jason Santa Maria says: December 17, 2008

@ Nat :

I’m curious about your ExpressionEngine setup; are you adding the classes and whatnot by hand, or are you using EE custom fields?

I just markup my posts by hand. The code is very minimal, and I like doing it, so I never looked into a more automated way.