Why I think Jquery Masonry could be the next big thing in digital publishing
First let me start off by saying there are some fantastic product and open source frameworks for digital publishing. Frameworks like Treesaver js are great and I was absolutely blow away by what could be done. But as I played with various solutions there seemed to be too many draw backs or they were not as easy to learn as I would like. Now, I am not a developer. I am an instructional technologist in other words I do elearning stuff. So needed something I could pick up quick and would give me the fine control I needed. So when I first saw Jquery Masonry I instantly thought magazine layouts.
The ability to put in divs and then have them to animate their position when the window gets resized, was wonderful. It was like responsive web design on steroids. Ethan Marcotte work on responsive web design has sparked a revolution in web design for about 6 months it seemed like every other tweet or blog post was about it. Web designers were inspired. But what about print?
Again, with elearning older students often will print out all the materials and have it in hand when going through the course. And let’s be honest who wants to print out a bunch of PowerPoint slides and use them as reference during and after the course? So I turned to magazines. I often by Web Designer magazine or net Magazine and they are great. I get a disk with electronic references and a get a well laid out magazine for a hard copy, what could be better? So I laid out an instructional article in inDesign and started playing with Jquery Masonry.
Jquery Masonry’s concept is simple a bunch of columns of various size that fit together, like floats but with no gaps. Now usually when you see JM sites they background is a different color than the columns, but for a magazine I wanted the column background and the container background to match, easy enough. I also wanted the column repositioning to animate, little digging online easy enough.
<script type=”text/javascript”>
$(function(){
$(‘#container’).masonry({
itemSelector: ‘.box’,
columnWidth: 100,
isAnimated: true,
animate: true,
animationOptions: {
duration: 500,
easing: ‘linear’,
queue: false
}
});
});
</script>
Now here is where a little planning comes in handy. What is the maximum size you want and what to you want the layout to be in that size. Again, inDesign helps with this. Ok, next size down for me I needed an iPad in portrait mode, 770px wide. Remember you want the items to shift into position so you have the same about of columns maybe. For example:
|
800 and up |
800 to 600 |
600 down |
 800 and up |
 800 to 600 |
 600 and below |
Making these changes require a window size detection that will be dynamic if the user resizes the window.
<script type=”text/javascript”>
$(document).ready(function() {
function containerresize() {
var contentwidth = $(‘#container’).width();
if { code }
containerresize();
$(window).bind(“resize”, function(){
containerresize();
});
});
</script>
Now because I have three different sizes I need I three different if codes to write. Now I’m sure there is a better way to do this I just don’t know how, yet.
if ((contentwidth) > ’900′ ){
$(‘div .third’).removeClass(“col6″ , “col4″).addClass(“col3″);
$(‘div .forth’).removeClass(“col3″).addClass(“col5″);
$(‘div .first’,'div .second’).removeClass(“col6″ , “col4″).addClass(“col3″);
}
if ((contentwidth) < ’899′ ){
$(‘div .third’).removeClass(“col3″, “col4″).addClass(“col6″);
$(‘div .forth’).removeClass(“col5″).addClass(“col3″);
$(‘div .first’,'div .second’).removeClass(“col3″ , “col6″).addClass(“col4″);
}
if ((contentwidth) < ’600′ )
$(‘div .third’).removeClass(“col6″ , “col4″).addClass(“col3″);
$(‘div .first’,'div .second’).removeClass(“col6″ , “col4″).addClass(“col3″);
}
}
I obviously assigned each div of content a class one through four, that way I could Jquery specifically which div to give which newly assigned class. Again I’m sure there is a better way to do it. I’m pretty happy with the results the only thing I will look to improve on in the future is maybe a dynamic load of new pages for multi page articles. Check out the Inkling iPad if you haven’t already I would like to do something like there new section load technique.
link to working example: Responsive magazine design
