In usability we trust

UX and all things web

Tag: CSS

The Power of Combinators

cssWhen working with CSS it’s easy to get stuck with just the basic selectors. Yes, you can get by using only those but you will write better and more efficient code if you know some of the more advanced ones. In this article I will show you the power of CSS Combinators – A toolkit that lets you combine the basic selectors to create more powerful CSS selectors.

Continue reading

Click Areas for a Brave New Multi-Device World

Have you ever been browsing a web site on your smart phone or tablet and found that on some sites, the links are so tiny and so tightly packed, that it’s near impossible to click the right one?

Continue reading

CSS in the Head

When optimizing a page you’re obviously thinking about where to add different assets on it. Stuff that is needed up front is placed at the top and stuff that is needed later can be placed further down. After all, we want the page to show something as fast as possible!

Continue reading

Separation of Concerns

Have you ever found yourself in a situation where you have a site where the HTML, the CSS and the JavaScript are all tangled together and it becomes a nightmare to make even the tiniest site-wide change?

Continue reading

Handcrafted CSS

Handcrafted CSSDan Cederholms latest book Handcrafted CSS with the subtitle: More Bulletproof Web Design, is an enjoyable read and delivers some interesting advice on how to leverage your designs with the power of CSS3.

Continue reading

Imagemap rollover

Imagemaps was very popular in the early days of webdesign but seem to have fallen out of grace. Probably due to accessibility problems and the rise of CSS based designs. I think that it still has it’s place when used properly and one being aware of it’s potential accessibility problems.

In a recent project I was building a map where different regions of a map would highlight when you hover with the mouse over it. Using an imagemap in combination with CSS and JavaScript seemed like the natural way to do it.

I thought that to actually code this solution would be pretty straightforward, but soon discovered some peculiar quirks. I also couldn’t find any information about this, so I thought that I’d share my experiences with you.

Continue reading

Ultimate site logo

To have a good site logo is important. It’s one of the things that distinguish your web site from everybody else’s. It’s also a design element that exists on all pages within your site. Naturally you want it to be good looking, but at the same time it needs to be accessible and also search engine friendly. To do this properly there are some techniques worth knowing. In this article I will show you the approach I’ve taken on my own blog.

In my opinion a good site logo have these characteristics:

  • It’s search engine optimized
    Score high on Google
  • It’s clickable
    Support the strong convention that a click on the site logo takes you to the homepage
  • It’s accessible
    Enable those with screenreaders or images turned off to read the “logo”
  • It looks good
    A good looking logo is important to build your brand.

If you’re the impatient kind you can watch the example page right away. For an explanation of how it’s done, read on!

Continue reading

Marking up contact information with microformats

If you’re building web sites you probably mark up contact information every now and then. Why not do it in a standardized ways so that you are able to quickly mark it up, style it and enhance it with microformats at the same time? The way to do this is by using hCard, a microformat for marking up contact information.

This article will not only show you why you should do this, but also exactly how!

Continue reading