Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
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 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 at 3:33
    
Also, one reason to go responsive is to use a different column layout on mobile. –  DA01 Apr 14 at 3:33

3 Answers 3

up vote 0 down vote accepted

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.

share|improve this answer
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. –  voodoocode Apr 15 at 8:08

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.

share|improve this answer

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.

share|improve this answer
    
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. –  voodoocode Apr 15 at 8:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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