Conditional multi-column sublists

Some designers are able to operate in that universe where anything goes, where the practicalities of implementation don’t exist. This can actually be a good thing at the beginning of the creative process; without this no-limit thinking, the design process might yield less creativity. Then again, many designers are fantastic at working within constraints.

At some point, though, either designers are confronted with constraints and must accommodate them, or this is implicitly tasked to developers. The latter is often the case, unfortunately. This almost always leads to a series of little development puzzles. “How might I implement this?”

We can do a lot with CSS, but sometimes we need a little help from JavaScript. I consider myself a designer who codes, which, to be clear, means “not a programmer”. Lucky for me, I have programmer friends, and I read a lot.

So while working on a recent project, I encountered a design comp that called for a few adjacent lists of “filters” (read: tags or categories). Each list had a heading above it.

(Note that the following examples are not indicative of the visual design. Note also that they no sense on narrow screens, where the lists could simply flow vertically.)


Being as creative as the designer in the sense that I didn’t burden myself with such practicalities as browser support (yet), I figured I could mock this up with Flexbox. Each section containing a header and a list becomes a flex item, and let’s let those wrap if they need to wrap. Easy enough.

Lists with Flexbox applied (CSS).

Lists with Flexbox applied (output).

In the design, some lists were longer than others. Lists with many items were to be split into multiple columns. Flexbox was taking care of the necessary flexibility of the main lists, but what to do about the sublists that are too long? And can we have any flexibility in determining what “too long” means?

A simple solution for splitting a list into multiple columns is CSS Multi-Column Layout. Implementations aren’t totally consistent, and I wrote some time ago about some of those inconsistencies, but the very basics are pretty usable right now as a progressive enhancement to normal content. Lack of multi-column simply yields a one-column list.

If one were to set a specific height to the containing element, multi-column would do it’s thing automatically. But I didn’t like the idea of setting a specific height on anything. A more content-centric approach would be to determine how many items a list may have before it was split into columns.

I’m fairly sure that determining the number of columns as a condition of the number of children is not currently possible with CSS. So in this case, it’s JavaScript to the rescue.

I needed a function that takes whatever element I’m using as a list, plus a maximum number of list items per column, as parameters. It should look at each list, count the number of items in it, and if the maximum number of list items is exceeded, it should add a class to that list. The class allows application of the correct number of columns via CSS.

Here’s the function, after too many iterations, a beer, and another pair of eyes:

Here is the function.

And here’s the result:

Here is the result.

This is not completely bulletproof, but it does allow for some flexibility (“let’s allow 10 items per column instead of five”).

This was a fairly simple problem to solve (though I won’t be competing in the Array.prototype Olympics anytime soon). But I’d like to say this: designers and developers should think about these types of implementation issues together, and that should happen during the design process. Not afterward, when stakeholders have fallen in love with the design comps. This would allow for consensus on the baseline experience (stakeholders tend to see design comps as the baseline). Quick mockups in browser-based tools such as JSBin (which I used for this example) or CodePen could help solidify these types of design decisions, and allow both designers and developers to experience these decisions on actual devices and to design for contingencies as well.

Special thanks to Jake and Heydon for being kind enough to review my example.

(Visual) design influences interaction

I’ve never hidden my opinion of those design workflows that involve interaction designers toiling over intricate, interactive wireframes as a primary deliverable and the inevitable hand-off to the “visual” designer who proceeds to “color by numbers” on the wireframe. To be clear, I find these workflows are ineffective.

I’m not implying that all interaction designers work this way, nor that all design firms work this way. But it is absolutely a common practice, especially in larger, waterfall-style organizations and teams.

The assembly line workflow is a death punch to effective interaction. The reason this is so: you simply can’t separate visual design from interaction design. The visual designer (boy, do I dislike that term) likely has a background in graphic design, a legitimate and non-trivial field of study. Graphic designers are trained to solve problems, and a primary goal of the designer is to communicate something. The goal of the interaction designer is to find the most effective ways that people can interact with the thing we’re designing. Interaction designers and visual designers should either have both of these roles combined, or they should work together. A lot.

Many visual designs are built upon the foundation of complex wireframes. Why not the other way around? Arguably, the interaction designer’s insight might be best utilized as part of the visual design process with the most valuable insights occurring on a completed visual design comp, based on real content and in a browser, when the actual thing can be interacted with, as opposed to a black-and-white, hopeful proxy.

The fact is that when an interaction designer creates a wireframe, they’re inevitably making visual design choices. When these wireframes are used as client deliverables, clients can’t “unsee” these decisions. Similarly, visual designers make decisions that can heavily influence interaction, no matter what the interaction designer theorized. So, we’ve got two disciplines, possibly trained differently, making decisions for one another instead of with one another.

The influence of the visual

I’d like to offer a simple illustration on how visual design can influence interaction. Seth Godin wrote a great little post entitled The First Rule of Web Design, which he says is “tell me where to click”. (Regardless of whether this is or should be the first rule of web design, I do take issue with the word “click”. Godin’s later clarification, “What do you want me to do now?” is much more effective.)

Seth illustrated his point with two images. Please go and read his post to understand the context. Both are examples of how visual design can heavily influence how the user interacts with the sites in question, and how either clarity or confusion is created by design choices.

A form with the least important actions styled as buttons, most important as a simple link.
This component is all about the refund, but the link to get it is visually one of the least important items on the page.

If you examine the first image, a screenshot of part of the process to get a refund, the conscious choice to present the most important thing relating to the purpose of this component as a simple link (text), which has to compete with huge (size) green and gray buttons (color). These buttons are placed where one would normally expect to act on the preceding text (placement/layout). These design choices make for stunted interaction. This is either inappropriate design, or someone did a nice job of making it slightly harder to get a refund.

Form with poorly placed next action button
The “Next” button is more important to this form than “Regenerate Token”.

The problem with the second example is not so much related to color as it is to the choices as to what should be a form element and what should not. The word “Next” offers an action to continue the current process, and should at the very least be structurally and visually closer to the input field. In my opinion, “Regenerate Token” could either be a link, or a less competing color and placed where the “Next” button is currently.

In both examples, wireframes could have, but would not have necessarily anticipated or solved the interaction problems created here. Wireframes or not: once we have these things in the browser, it’s time to go and revisit the interaction after visual design has either helped it or hurt it.

Some thoughts on “designing in the browser”

Ever since Andrew Clarke’s presentation The Walls Come Tumbling Down—which is the first time I heard of the term—the idea of “designing in the browser” has increasingly become a point of discussion and debate.

As one of those crazies who doesn’t use an image editor (like Photoshop) to create design comps, I’m often lumped into the design-in-the-browser category. So let’s clear things up a bit with my take on this approach.

You don’t actually design in the browser

Okay, you can design in the browser, meaning you open up a blank HTML file in both a text editor and a browser and have at it. But why would you? Some people really mean this when they speak of designing in the browser. But in my experience, that’s often not what we’re really talking about.

When I speak of designing in the browser, I mean creating browser-based design mockups/comps (I use the terms interchangeably), as opposed to static comps (like the PSDs we’re all used to). So it’s not the design. It’s the visualization of the design—the one you present to stakeholders. It’s not the only deliverable, but it’s the one that’s most important to show in the browser. Before that, I sketch. On paper. Other people I know who “design in the browser” actually use Photoshop. For sketching. But when we say “designing in the browser”, we mean the comp is in the browser.

We sure do like our comfort zones

Creating comps like this puts many designers out of their comfort zones. Many feel they have to learn to code, or “think in HTML and CSS”. Those who know that isn’t true can still feel awkward pairing up with a developer to visualize designs. That said, I think that learning CSS can be a useful addition to a designer’s toolbox. Note that in all my talks and in my book, I’ve only ever stated my opinion that browser-based comps are preferable to Photoshop-based comps. I have never stated that code should replace Photoshop.

That said, I’m increasingly frustrated by the articles, talks and discussions defending Photoshop comps, almost all of them citing Dan Mall’s idea of “deciding in the browser” rather than “designing in the browser”. I do agree with Dan; in fact, designers should already have been “deciding in the browser”, for years, especially when doing static image comps. If you design for the browser, you decide in the browser.

So much effort is being put into stating the case for static image comps, almost as if to justify the current (which is also the past) way of working. “Let me tell you why I want to stay in my comfort zone.” “Let me tell you what you other disciplines need to do for me so that I can continue to stay in my comfort zone and do things the way I’ve always done.”

It would all be fine, if it weren’t complete bullshit. And that is partly due to the flimsy premises of the arguments given.

Flimsy arguments

I don’t mean to pick on any specific article, but I’m compelled to provide an example and this particular article really got to me. Probably because I’m sure the author is skilled and talented, and thus many folks who read the article might swallow the premises whole. But looking at the points made, I’m inclined to disclose a couple of fallacies.

  1. The author states that the desire to increase the speed of design and development is the driving force behind designing in the browser. While speed may be a factor, it’s arguably not the main factor, and certainly not the only one. More important, for example, is bridging the traditional gap between what the client sees in a comp versus the end result.
  2. The implication of the sentence that follows is that web-based comps help speed but reduce the quality of the design work being produced. Tell that to The Guardian.
  3. The author then proceeds to make the case for Photoshop instead of code (albeit with an 80/20 split). Nothing wrong with that, but the author’s personal experience with code yielding “dull” designs does not mean that code yields dull designs. It most likely means that the author tried getting into code too soon, or skipped sketching altogether, or is simply not as comfortable in code. I would agree that might not work out well. But in that case it’s the design process at fault, not the fact that code is used at all.

Code can support the creative process

Fabulous, creative things are being done with code. Just because some of us are more comfortable with graphical tools doesn’t negate that fact. It simply means that we’re less comfortable with code because we don’t know it as well as the tools we’ve been using for years and years. Which is logical, if you haven’t learned to code yet use Photoshop daily. And if you’re in my age range, you’ll remember that we didn’t always use Photoshop to create design comps. We had to get out of our comfort zone and learn it. And learn it we did, eventually.

For every person who tries opening a text editor and typing code from scratch before claiming “FAIL”, there are scores of us who actually sketch before even touching code. And I know designers who don’t code, but team up with developers to create design comps in the browser.

If you prefer using graphical tools, that’s fine. Nothing wrong with it. No one’s attacking you. But don’t say web-based comps are about speed when they’re not, that the process is less creative when your own approach to it is the problem. Photoshop is neutral. Code is neutral. It’s what you choose do with them and how.

I think code is a valuable tool, and I think web-based comps offer a plethora of benefits to the design process, clients, and teams. But again, I said web-based comps offer benefits as compared to Photoshop comps. Not “code is better than Photoshop”. That’s a huge difference. Designers know Photoshop; not all of them know the benefits of code as a design tool. I feel it’s important to talk about that.

Nobody is going to take your copy of Photoshop away from you. So since no one’s attacking, perhaps there’s no real need to defend. With false statements at that. In fact, for every defensive article or talk or tweet against code, I think about how time could have been spent learning some.

Creativity is tool-independent.