12/01 2011

Modular layouts and content

What a difference CSS makes

Left outset image. See right set image for explanation.

Firstly, your eyes aren't decieving you. For my latest post I've decided to show you the power of 'Modularisation', a technique which attempts to simplify layout, mainly for the client. I was inspired after reading articles from people like Elliot Jay Stocks and Ethan Marcotte, who are in the priviliged postition of being able to do a lot of research into flexible layout techniques in CSS and who's musings I find extremely inspirational. I've done this by making a few changes to my css and targeted this single post with it. Amazing really isn't it. I've made things a little smaller to allow the layout to fit in this area and not lose proportion. If you want to view it at a larger size simply hit the (newly designed) expand button attached to the title of this post. In my experience it is a common request from clients to have more control over their content. They see professionally built sites more and more and are wise to what is possible. It is great that clients appreciate the fact that good design will have an impact on their site but they want to be able to do this themselves rather than pay for a new template to be built.

If I'm honest, there is no such thing as 'content' from a Front End Developers perspective. Any Web page is made up of elements which are part of the interface

Images go in a div with the classes “pic size direction”. “size” can be one, two, three, four, five, six, or seven , direction can be right or left. Captions go in a p .

The method I use here sets things up so that paragraphs and images intertwine to produce a layout which can be adapted fairly easily. It is well known among Front End Developers that the main layout elements of Web pages can have multiple things called classes added to them. Using this method and good communication between Front End and Back End Developers, it should be possible to integrate this kind of thing into any CMS system. This method is great because it involves building the classes on an element to allow more control over the layout. This is as opposed to adding styles directly to an element (called 'inline' styles), which gives a Front End Developer no control at all. I can be sure I am not altering anything else on the site because of the way I have written the CSS, more on that later.

Dude, where's my layout?

By breaking out of the Modular layout (by closing the <div class="modular-layout"> wrapped around the modularised content), the original css for the page comes back into play. This is not using anything that most Front End Developers don't already know. It is a way of doing things that allows you to create powerful layouts and styling by building classes into your elements.

If built into a CMS or other system, these classes could be added in a controlled manner, to elements through the back end to give fine control over layout for clients in a way that the Front End Developer can handle. This is much more attractive than being at the mercy of whatever content editor comes with a particular CMS. Most I have had to deal with use outdated methods to update content which leaves the edited page in a mess and riddled with accessibility and/or validation issues. As with the many cross browser issues we Front End Designers face on a daily basis, working with the elements on a page, rather than against them just makes sense - for everyone.

Some things never change

For inset images, add the class inset to the pic div.

As a Front End Designer, you can do whatever you are capable of using this method. There will probably still be limitations, just like building any other page. You might notice that as well as classes .left & .inset, I've also added .leftinset. This is to keep IE6 happy. I had to include margins for the right of the image and add a display:inline; to keep the layout in tact.

For images without captions, or captions set apart, add solo to the pic div, and move the caption p directly outside it using similar styles (e.g., “caption two left”).

Once this kind of system is put into motion, the limitations are few. Think of HTML elements as children that need to be controlled! If you let them have too much freedom, they'll create merry hell. You obviously want them to enjoy themselves and be creative but you need to be the one in control because you have more experience and know all the pitfalls. If you keep them controlled, calm and know exactly where they are all the time, everyone is happy. Thats the kind of philosophy Modularization works on.

I'm not by any means suggesting that this method be used on each and every site but as you can see, it does create quite an impact. It complements the elements within the HTML and all kinds of different layouts and look and feels can be achieved, building a library of visual enhancements to give 'content' a unique look.

Leave a Reply

Your email address will not be published. Required fields are marked *

This article is in the html and css category. Here are some other related articles also in this category.