2

We are currently developing a Wordpress site that has a Shortcode button feature that allows the client to alter the text, URL link and colour of a button, also to add new buttons.

The client is however less than impressed about how the buttons look when there appear on more than one line. They say the buttons "don't line up" and look uneven.

I'm aware this is at least partly a content issue but I've been tasked with coming up with an alternative solution ... and I can't think of one. The difficulty is that if the text size changes, then it needs to be done in the Shortcode (something they are already struggling to use), same if the button widths are manipulated when text is longer.

I'm quite sure the client doesn't understand the first thing about web design & development, otherwise they wouldn't be asking this question. But if you can think up a good solution, I'd be grateful.

Buttons - large view, six buttons

Buttons - small view, six buttons

  • This is not exactly an answer, (hence writing as a comment) but I don't think you've left anywhere near enough vertical space there for people with fat fingers on their tablets. – JonW Mar 3 '15 at 11:23
2

This is a common pattern (problem) in responsive layouts.

I try to avoid variable-width buttons, because:

  • They give disproportionate visual mass to long captions (e.g. "Finance and Procurement" vs "PMO") when buttons are supposed to be equal peers.
  • They break grid layouts.

Another issue is your light/dark color palette. This makes the buttons look confusing when they wrap (you either get banded columns, or a "chessboard" pattern).

One way to normalize the buttons is to increase the height and allow long text to wrap. This allows the buttons to retain equal visual presence to each other, and preserves a clean grid layout. It also has the benefit of being friendlier to fat-finger interfaces:

rb1

I'll add a comment below on implementation (since it's beyond the normal scope of UX StackExchange).

Here are some variants using the same principle. One uses metro/flat style colors which helps reduce grid illusion effects and removes the double boundaries between buttons to ease scanning. The other uses portrait photos to anthropomorphize the job roles because using faces can be very effective on sites.

rb2

Larger image here.

  • Implementation note: Once button widths are equal, wrapping becomes easier. I would left-align the buttons to avoid weird staggering effects with odd-numbered buttons and center-alignment. You may also want to avoid button "orphans" (e.g. 4 across with 1 dangling button wrapped). You can do this by using inline-blocks with a non-breaking space for the last block, or via media-queries to set container width breakpoints that avoid orphaning. – tohster Mar 3 '15 at 18:36
0

It's relatively easy with something like flexbox to create layouts that flow to differing viewports.

Start with a mobile-first stack and enhance up to some full-width grids of 2,3 and maybe 4 buttons wide. Let flexbox space-between the items and you will be happy fast.

Make sure to check browser support. A nice flexbox editor/playground is here: http://the-echoplex.net/flexyboxes

  • Thanks Brian — that's a good solution, although I must admit I've been scared off Flexbox a bit by Safari: codepen.io/endymion1818/pen/xbPRWd – endymion1818 Mar 3 '15 at 16:46
  • Hope this works out for you. tohster's answer is very similar to this advice, trust in some inline-block/flexbox layouts :) – Brian Muenzenmeyer Mar 3 '15 at 18:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.