I Am Making Progress

documenting a new internet venture from day one

JQuery Masonry, Pinterest, Minimum Viable Product (MVP)

| 2 Comments

I’m still cruising along attempting to launch Feistie next week. Along the way I somehow managed a pretty major redesign of the site. One my think, “don’t make any major changes NOW??”  Well, that person might be right. This change actually has simplified things to a large degree and made the site a little more cohesive. I initially had a homepage with a bunch of tabbed sections and some “featured” slider section at the top. Then I was going to have separate Artist, Event and Venue pages where I honestly hadn’t even decided on a layout. I read an article the other day about how Pinterest uses a plugin called JQuery Masonry. I was interested because I had considered this type of layout before but thought the technical details to not be worth the trouble at that time. Finding out that it can be accomplished so easily with a single plugin has changed my tune.

JQuery Masonry (like almost everything else JQuery) is easy to use and really powerful. It works like this:

first the HTML

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

You have to add a little CSS

.item {
  width: 220px;
  margin: 10px;
  float: left;
}

and then the Javascript

$(function(){
     $('#container').masonry({
          // options
	  itemSelector : '.item',
	  columnWidth : 240
     });
});

And the results will look a little like this

Pretty sweet huh? JQuery Masonry also supports the infinite scroll plugin though I haven’t gotten that working yet. I probably will just use pagination in the alpha version of Feistie. So, what’s the big deal Pat?? Why the change? I started to say it earlier, but I really hadn’t developed a full “vision” of the flow of my site. It also felt very static, old and boring. JQuery Masonry has added a freshness which I believe will appeal to both my users and investors. My navigation bar at the top will now essentially be a bunch of filters to display content. For example, you can view events by whether they are happening today, upcoming, or the past, by popularity or you can see events recently added. The same idea holds for Artists and Venues. You access all these options via dropdowns from the main nav bar. I also found an easy way to make a sort of “News Feed” which will be the main homepage. It is called “The Latest” and it will be a Pinterest style display of all the latest additions to Feistie (events, artists, venues, pictures, videos). I’m really excited about “The Latest” because it will be a constantly changing page AND it will be populated by new artists, images and videos nationally, so Feisite will seem “alive” even if there aren’t a ton of new people in your area. Only the events and venues will be filtered by region. This might really get me past the “chicken or egg” problem trying to get users to write reviews. Feistie will be intriguing even without the reviews at first.

I’m now defining my minimum viable product. I’ve “kind of” done this before but it’s always been a changing entity. Here is what it is now.

MVP_datastructure = [Users (can follow other users, can add events, artists, venues, images, videos, reviews, can have associated: images), Artists (can have associated: images, videos, reviews, can be associated with: events), Venues (can have associated: images, can be associated with: events), Events (can have associated: artists, a venue and reviews), Reviews (associated with: user, artist and event)].

MVP_UX = JQuery Masonry layout filtered by dropdown menus on the main navbar. Individual pages for users, events, artists and venues.

MVP_gamification = users build reputation by adding content. reputation is bolstered by content that receives responses (particularly positive) from other users.

That’s the latest from me. Using the JQuery Masonry has really simplified the design of the site and hopefully will allow me to actually meet my self-imposed deadline of launching next week.

Til next time,

-pat

Share and Enjoy

  • Facebook
  • Twitter
  • Digg
  • StumbleUpon
  • RSS
  • Dev

    Hi … used the masonry and infinite scroll on my new website. The infinite scroll was tricky, but got it finally sorted … http://www.myclassicsworld.com

    • Hi Dev, cool! I also had trouble getting the infinite scroll working with JQuery-masonry. The problem for me was using the imagesLoaded() function properly. It is confusing, when first initiate the jquery masonry, you use it on the $container variable but inside the infinite scroll callback you use it on $newElems.

      So I guess $newElems is really the entire … for the next page being loaded. They should rename $newElems to $newPageContainer or something in the example to make it more clear. :) Anyway, good luck!