When 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.
In usability we trust
UX and all things web
Tag: CSS
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?
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!
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?
Dan 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.
After writing my first article on the subject, Ultimate Site Logo, I’ve come up with two significant enhancements.. With the original solution, there were two major flaws. The first one was a semantic one and the other one a more obvious and technical one.
This time around I think I’ve got all the details right. Well, if that’s not Kaizen, what is?
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.
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!
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!
© 2022 In usability we trust
Theme by Anders Noren — Up ↑