All Posts in Love Has No Logic

June 27, 2013 - No Comments!

Selling in a Responsive Design

If there's one thing that's sure to drive you batty in a responsive layout it's working with third party ad services. Not everyone can afford their own ad sales team or has the resources to support their own ad network, and because of this, they turn to services such as Google DFP. Those services are easy to implement and enable an instant revenue stream. They also don't work well in fluid width layouts.

We ran into this wall the weekend before the launch of the new Roger Ebert website. We were implementing a new ad network that did not play nicely with our fluid width columns. Not having the time to fully implement and test an entire new layout for the site, we had to think quickly. Here's what we did...

The HTML

Our ads were all 300 pixels wide and existed in the same column. This column was one of two columns in its parent container. On the parent container, we put a class of fixed-rail. Inside the container we added a class of pad to our main content and place to our ad rail. The HTML looked like this...

<section class="fixed-rail">
    <section class="main pad">
        ... Insert main content here ...
    </section>
    <aside class="place">
        ... Insert ad rail content here ...
    </aside>    
</section>

The CSS

Easy enough, right? The magic is the CSS. We're already using border-box box-sizing, so we set our pad column to width: 100%;. We then give it right padding of 330px (300 pixels for our ad-rail and 30px as the universal gutter width setting in our SASS files). We then position the placecolumn absolutely to the upper right corner. Instant fixed width right rail and fluid width content column.

$gutter-width: 30px;

.fixed-rail {
    position: relative;
}

.pad {
    width: 100%;
    padding: 300px + $gutter-width;
}

.place {
    width: 300px;
    position: absolute;
    top: 0;
    right: 0;
}

We Got This...

Looks great, right? One problem. There were some cases where the ad rail was taller than the content column. Since it was positioned absolutely, the layout would collapse. Uh-oh. The solution? We inserted a quick bit of JS to calculate the height of the place column and added that as a minimum height on its sibling pad column.

$('.place').each(function(){
    var forceHeight = $(this).height() + 'px';
    var sibling = $(this).siblings('.pad');
    $(sibling).css({'min-height': forceHeight});
});

Honestly, I don't know how this solution will hold up over time, but it seems to have been doing just fine in practice so far. If you've got some thoughts on this, let's chat.

June 3, 2013 - 1 comment.

We’re Growing! Table XI Has Acquired Design Firm Love Has No Logic

lhnl-txi-banner-cropped

I’m very excited to announce that we have joined forces with our friends over at Love Has No Logic (LHNL), the boutique front-end design firm that we partnered with on the new RogerEbert.com. This marks the dawn of the next era of Table XI and our commitment to the highest quality design—founder Mike Gibson and the rest of the LHNL team are experts in branding, UX, and responsive design, skills that complement our own service offerings.

Today design and development go hand in hand, and this acquisition only increases the value we can provide our clients. It’s no longer good enough for a developer to build a site and have a designer slap a pretty face on it, or for a designer to turn over a finished Photoshop file to a developer to execute. From planning out how front-end visuals will work with backend systems, to creating websites with responsive design, the best work comes from the collaboration between developers and designers at the earliest stages of a project through its final launch.

We’ve thrived with LHNL on these kinds of collaborations. Like us, LHNL uses an iterative process and enjoys a history of long relationships with their customers, and together we have a proven track record of success. We first worked together on the fan engagement startup Pegmo in 2010, which we sold to a large marketing agency in 2012. For RogerEbert.com, Table XI drove the product strategy, project management, and software development, while LHNL created the visual design and implemented it on a cutting edge responsive framework, ensuring that the site displays seamlessly across all devices, from smartphones to tablets. We’ve gotten overwhelmingly positive praise at the result, and Mike’s design received accolades from the responsive design community.

The merger will take effect immediately, and our combined team will work out of our West Loop loft. In addition to Mike, I'd like to welcome Annie Swank and Shawn Campbell to our office—our summer is already slated with a slew of exciting new projects, including website redesigns for Northwestern’s Medill School of Journalism and Chicago Ideas Week (more on those soon). There’s no doubt that together, Table XI and Love Has No Logic are a stronger team, and we can’t wait to get started.

You can learn more about Love Has No Logic and their approach to front-end development at their website. And I encourage you to check out Mike’s blog for his own thoughts on joining up with Table XI.