Is the UX acceptable? Any critique would help!

Please take a look at http://beta.koopkarre.co.za and feel free to comment on any of the styling and user experiences. This site needs to work for a market of people that must be considered as technically inefficient :)

I like the unpretentious look of the page, and as a Dutchman am also totally charmed by die vriendelike taal. The white text on darker backgound could be better though, and there is some faux bolding going on as well. With light text on dark background, more often than not, you want the letters to be a bit further apart (like so in CSS : p { letter-spacing: 1px ) because the light letters appear to be bigger for the eye, and the negative spaces in between the letters appear to be smaller. A bit of text-shadow can help as well to make it stand out a bit more. When I type in the search-box, there is nothing to be seen, because the text-color is white on white background. To fix the “faux bolding”, you will have to include also the bold weights in the link-stylesheet-definition in the header from google-webfonts. I parked a demo-page here with some changes, for comparison.
Also the clickable area in the top menu is rather small, and there is no visual feedback on hover. When you would remove the padding on the list-items, and instead set padding on the nav-links, give it a hover-state with a brighter background-color, then this menu becomes user-friendlier as well

@afrikazaber Since this is the web you can view source and see my changes in the top of the CSS -file here And why not make friends with some local web-designer, ( give reduction on the next car in return :)

@chrisburton I take it that you are a man of principles. Why not reading a bit closer and see this in context? The context of this question is about the user interface. I would never put a lot of text, say body text, in white on dark background anyway. But for ui-elements, sure. Since the kerning of most fonts is based on dark on white text, then why not use some letter-spacing on ui-elements, for reasons I explained? And yes text-shadow as well, and no, to be clear: I would not recommend large sections of body text set in white on dark background with letter-spacing and text-shadow.

Since the kerning of most fonts is based on dark on white text, then why not use some letter-spacing on ui-elements, for reasons I explained?

You’re not talking about kerning but rather tracking on body text. Roboto itself is not a great UI typeface in general and using your methods (letter-spacing, word-spacing, shadow) proves that. It is essentially trying to cover up a problem rather than finding an adequate solution.

@chrisburton this is a more constructive contribution, but see, I didn’t write about body text, don’t you see? And if tracking is the correct term for what I mean, then: the tracking of most fonts is based on dark on white text: still the same point.

Roboto was this four headed frankenstein font and although it is getting better, I am not going to defend it, … it has to do with the need of Google to have there own ui-font (for Android no?). . In my example I used the condensed version for headings which is already a bit better.

Roboto itself is not a great UI typeface in general and using your methods (letter-spacing, word-spacing, shadow) proves that.

The only thing it proves in my test-page is that it does look better there, like with this font and, please try it out, most of the other free fonts out there.

@chrisburton Now you want me to elaborate …, well it has to do with backlighting, (like in a computer-screen, reason why your eyes get tired after a day behind the screen). But don’t take my word for it, FF-Info(-Display) for example was designed to tackle this issue.

Signs are usually read in motion, and often from strange angles. Under such circumstances, letter forms can become blurred and indistinct. Back-lighting signs has the effect of rounding otherwise sharp corners, further complicating the process of recognizing individual letters. FF Info Display was designed with such circumstances in mind: the rounded ends of the letters are less prone to distortion and the letters remain true to form. White type on a dark background appears heavier than dark type on a light background. This effect is exaggerated if the light type is back-lit. In FF Info Display, the difference between the various weights has been designed to compensate for this effect.

Now when you read back what you just wrote, can you find any arguments in there? Any reason why you should never use letter-spacing to try to improve readability of type ( text in ui-elements or headers like light text on dark background ) on the web? Don’t know if you are insincere or being sarcastic, or what, but for me to enjoy a conversation like this, I would like to hear arguments. You come in with an attitude by giving this sloppy and snarky remark, and go out with an attitude by being, in my mind, quite arrogant, and I can’t say I enjoyed it.

Any reason why you should never use letter-spacing to try to improve readability of type

No. But you’re trying to back up what you consider improvements and or a solution with how FF Info (Display) was designed for signs. Display and text type are completely different (especially on the web). My point in my last comment was based on this.

You come in with an attitude by giving this sloppy and snarky remark, and go out with an attitude by being, in my mind, quite arrogant, and I can’t say I enjoyed it.

Quite the opposite. I think I was a bit shocked as to your recommendation to the OP regarding methods to try to improve the readability of text type with an already poor UI typeface. Trying to cover up the issue is not an adequate solution, in my opinion. That is all. Now, if you applied this to a display face or headline, I think we could agree with each other. It’s easy to misinterpret a mood or feeling when you can’t hear the person.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.