All Posts in Design

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 17, 2013 - No Comments!

Data Visualization in Excel: A Table Talk

Turning data into something that people can understand, appreciate, and act on is a critical skill, but it's a challenging one for many who don't consider themselves traditional designers. When it comes to data visualization, it's common practice to use the tools we already have at hand (and are relatively familiar with) to get the job done—hence the ubiquitous use of Microsoft Excel in this area.

Unfortunately, Excel is far from the best or easiest data visualization tool out there, but people's comfort level with it—and its acceptance as industry standard—keeps it chugging along. Last month, for our Table Talks series Data by Design, Excel Whisperer Mark Rickmeier gave his tips for making the most out of Excel's data features.

Take note—Mark doesn't necessarily recommend Excel for data visualization, but if you're going to use it, he says, follow these rules.

"Make it so," says Picard.

To view other PechaKucha presentations from our Table Talks series, visit the Table XI PechaKucha channel. If you’re interested in attending a future Table Talks, request an invite through our website. You can also follow along at #tabletalks.

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.

May 16, 2013 - No Comments!

Data by Design: May Table Talks

For years the term "Big Data" has buzzed on the lips of CEOs and executives and bounced off board room walls. Companies understand the opportunity their data represents to customize products and services to their customers, streamline operational efficiency, and unearth market insights that provide a competitive advantage. But knowing how best to apply data is one thing—telling a story through data in a way that illuminates is an art unto itself.

CNN Money recently published an insightful piece on this subject. Author Olof Schybergson says, "It's about turning information into meaningful insights people can use, giving data a human shape and a connection with the messy real world that we live in... Designers have it ingrained to focus on simplicity and bring a singular focus to delighting the end user—regardless of whether they are a business user or consumer. Designers know how to take complex or disparate information and make it tangible, understandable, and importantly, more human."

We'll be tackling this with the experts for our May Table Talks: Data by Design. Joining us for lunch on Thursday, May 23 will be Datascope Analytics partner Aaron Wolf, designer Sharlene King, DataMade founder Derek Eder, Chicago Data Visualization Meetup organizer Josh Doyle, and Table XI COO Mark Rickmeier, each of whom will treat us to a PechaKucha-style presentation on the topic.

Follow along at #tabletalks, and make sure to check out past Table Talks at Table XI's PechaKucha channel.

If you're interested in joining Table Talks as a guest just request an invitation through our website here.

May Table Talks: Data by Design

May 8, 2013 - 2 comments

Adobe Killing Creative Suite: Better or Bogus?

It's official: Adobe is migrating everybody to their Creative Cloud (along with a monthly subscription) and won't be releasing a Creative Suite 7. Heidi Voltmer, Adobe's director of product marketing, gave Co.DESIGN the "5 Reasons We Killed the Creative Suite." I can't say I fully believe them.

I think the subscription model is just the direction software is headed, but many of the arguments Adobe makes seem a bit suspect. Overall, I imagine this is more of a way to generate revenue from their customers, rather than increase value for them. I hope I'm proven wrong, but there's nothing in Adobe's recent track record that compels me to feel otherwise. To wit:

  • I've never used an Adobe AIR app where I enjoyed the experience. Moving something like Photoshop over to a cloud experience sounds even scarier in terms of using it.
  • Many updates with Creative Suite were geared more toward bug fixes than feature updates. Maybe a more timely update cycle will help alleviate this, but I question why I even bother updating Flash on my machine.
  • Ever since Flash began losing its dominance, it feels like Adobe has been doing a "throw everything at the wall and see what sticks" approach. I can't even follow the products they offer, let alone why I should use them—witness: Adobe Flex, Air, Muse, Flash Builder, Flash Catalyst, Edge...
  • I don't think it's a good idea to potentially lock designers/devs into a proprietary system that spits out suspect code; you're better off learning it yourself.
  •  You're still installing and using the products offline and checking in every so often—with the added "benefit" of updates (piracy prevention)—so it isn't clear to me how the cloud will be better.
  • If there were a way I could abandon some Adobe products then I would (Photoshop, Illustrator, InDesign), but there aren't many viable alternatives.
  • OMG Adobe still makes Director!

What do you think about Adobe's new direction and their rationale behind it? Buy it? Don't buy it? I'd love to hear your take in the comments.

July 23, 2012 - No Comments!

Better, Stronger, Faster: The New TableXI.com

It’s here! We’ve unveiled our new website, and the result is a friendlier, prettier face for Table XI (that also stays true to our nerd roots).

One of the things we’re most excited about is our new Testimonials page, which features videos from some of our clients. We know that we’d be nothing without our clients, and we’re thrilled that so many of them were ready to talk about their TXI experiences on film. Additionally, since we’re problem solvers at heart with a mission to use technology to make people’s lives easier, we introduced a Problems We Solve section. This page outlines some common issues our clients have faced and links to case studies that illustrate how we dealt with them.

A brand new Who We Are section shows off our talented crew, photo galleries of our amazing retreats, lunches, and toys, and important company facts like our standing count of office helicopters. We also revamped our newsletter to be more integrated with our blog, which got quite the facelift itself. Now readers can skim through article previews and easily access the content that interests them most. (If you’re not getting our newsletters yet, be sure to sign up!)

Special thanks to senior designer Daniel Strabley and everyone else who spent long hours bringing this together. We’re always looking for feedback or new testimonials, so leave a comment and let us know what you think!

February 6, 2012 - No Comments!

Foxycart Checks Out

Sometimes when a client comes to us with a new project or problem, we have to build software from scratch, but other times there’s a ready-made solution already in the marketplace. Part of our job is figuring out when to build and when to buy: Developing software to support a third party application to fit a client’s needs can save a heap of time and money.

For our recent renovations of Old Town Oil’s and Strange Cargo’s online stores, we found an innovative platform in Foxycart, a hosted shopping cart application. The headaches of many e-commerce solutions include storing and processing all the shopping cart data, like sensitive order, password, and credit card information, as well as staying current with regulated compliance processes. Foxycart handles all of this backend work, but is still compatible with highly customized user interfaces on the front end, like Old Town Oil's oil and vinegar pages, which contain detailed tasting notes and suggested pairings.

For services that Foxycart does not provide, such as certain order fulfillment processes like creating shipping labels and emailing customers about shipments, we developed our own software called Foxcage to work in conjunction with Foxycart. This combined solution of using both third party and custom developed software gives our clients exactly what they need.

Want to talk more about your e-commerce site? Drop us a line.

July 6, 2009 - 7 comments

reCaptcha reTheme – UPDATED

Jan, 25th 2013 Update: Thanks for everyone who enjoyed this post - please take note that the zip file is back online - also please take note that this post was written 4 years ago and may not reflect the current state of reCaptcha.

UPDATE - Hi Everybody, thanks for the great feedback on this post. It seems that the supplied CSS was lacking support to force the display of your newly created icons, this should now be fixed and is available for download.

Please feel free to post any comments and question you may have.

ORIGINAL POST

recaptch1

If you need highly effictive spam protection and want to help digitze old books and manuscripts, reCaptcha is great, there is no better choice. If you are looking for a tool that allows you to configure it to match your website... thats a different story. Currently reCaptcha only offers 4 themes (red, blackglass, clean and white) which is better than nothing but can be an eyesore if none of these themes fits your site.  So to counteract this limitation we have compiled all the resources you need to create a custom reCaptcha for your website.

Read more

March 3, 2009 - No Comments!

Another Addition to Our Team

Daniel Strabley: our newest hire

Every day we seem to read about some big company slashing jobs by the thousands.  For many, times are extraordinarily tough, but at Table XI, things seem to be holding steady.  We believe the future is bright — especially for small business — and have continued to invest and grow.

To that end, we’ve actually added another capable staffer to our team since our last communique. We are excited to announce the addition of Daniel Strabley to our team of 12.  While it’s only been a few months, it’s hard to remember what life was like before he joined us!

Daniel comes to us from closerlook, a design studio focused on the pharmaceutical industry, and represents the first full-time graphics designer that Table XI has ever employed.  For the first 6+ years of our existence, we worked closely with a number of freelancers, but never felt we had sufficient work to warrant a full-time designer.  Boy were we wrong…

Since mid-November, Daniel has dramatically improved the way we work by improving our design process, and by bringing his sizable HTML implementation skills to our clients’ projects.  His presence means our engineers can spend their time focused on functionality without having to sweat the vagaries of the dreaded Internet Explorer 6 bugs (Microsoft browsers are notoriously non-compliant with Internet standards.  For more info, check out this post from a previous newsletter).

Daniel has also been hugely helpful to our sales and marketing efforts.  He has helped us augment our materials with pictures that replace a thousand words, created proposal and presentation templates, and begun the process of organizing all of the graphic material we use.  Best yet, we’re quite sure we’ll find even more uses for his numerous talents as we further understand his capabilities.