0

I had the special problem, that in a "desktop-first" responsive webdesign project (I know, bad idea.. ), there was a shopping cart-like element in a very narrow column (4 columns in a 12 column total grid). It was titled "Your Shoppingcart" and the customer really liked the pronoun. But in tablet view the two words would break into two lines, which we'd try to avoid.

So I came up with two possible solutions:

a) Truncate the personal pronoun in tablet view. like in my example: http://voodoocode.de/rwdtest/index.html

b) Use a smaller font size for the shopping carts headline. example http://voodoocode.de/rwdtest/index2.html

Which approach do you guys think is the better one? Is the personal address to the user an important thing? Or is best possible readability more important?

3
  • I like to use a narrower font for headlines. Oswald is one of my favorites for this, narrow, but still looks like a headline. google.com/fonts/specimen/Oswald
    – obelia
    Apr 14, 2014 at 1:05
  • I'd argue that if nitpicking is getting down to word wrapping, the focus may be lost on overall usability and an overly constrictive idea of aesthetic is now trumping.
    – DA01
    Apr 14, 2014 at 3:33
  • Also, one reason to go responsive is to use a different column layout on mobile.
    – DA01
    Apr 14, 2014 at 3:33

3 Answers 3

0

Quick note, 'Shopping Cart' it typically two words. So you actually are dealing with 3 words.

I think you reducing the size is fine, but...

...keep in mind that word wrapping is not something that should be a focus. The web is flexible. That's one of the great things about it. And part of that flexibility is not having 100% control over typography. Allowing for word wrap should be part of the layout from the get-go whenever possible. You can't control things like:

  • user CSS
  • fonts that may or may not be installed on a device
  • web fonts that may or may not have fully supported metrics in a particular browser
  • future internationalization of the site causing much longer/shorter phrasing
  • future content changes that will create longer/shorter phrasing

Having to adjust CSS for all the above is, of course, somewhat futile so it's best to just allow for word wrapping from the beginning and design for it if you can.

1
  • 1
    "keep in mind that word wrapping is not something that should be a focus. The web is flexible." I totally agree with that. Sad thing is, that the client, who we are building the site for, doesn't think like that, like always. My boss refuses to discuss such things with them. And yes, it is indeed a german page, where often the phrases are kinda long.
    – Sascha
    Apr 15, 2014 at 8:08
0

I believe shopping cart is 2 words... which probably doesn't help your spacing issue.

The smaller font on the mobile breakpoint seems to work just fine. I don't see any UX issues with dropping the pronoun as I don't think users will wonder whos cart it is.

0

You could simply replace the word with the shopping icon. It simply becomes a symbol for the words you want in that space and is more of a universal graphic to convey the same information. On smaller screens your options are either making your text smaller (which can hamper legibility depending on the font especially) versus the layout you want.

1
  • Not the worst idea, generally. But I wrote shopping cart more as an example. In reality the site will sell travels and it isn't actually a shopping cart, but an overview of the chosen flights and hotel. We didn't come up with a clever icon for that yet.
    – Sascha
    Apr 15, 2014 at 8:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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