29Mar 2011 by Ruben Canton No Comments

Selecting odd and even rows in a table using CSS3

Web design
Fast trick to style a table using CSS3 selectors to set the odd and even rows style: [sourcecode language="css" wraplines="false"] table > tr:nth-child(even) {background: #ccc;} table > tr:nth-child(odd) {background: #fff;} [/sourcecode] So instead of having this: text more and more texttext more and more textmore and more text more and more texttext more and more textmore and more text more and more texttext more and more textmore and more text more and more texttext more and more textmore and more text more and more texttext more and more textmore and more text more and more texttext more and more textmore and more text more and more texttext more and more textmore and more We will have this: text more and more texttext more and more textmore and more text more…
Read More
01Dec 2010 by Ruben Canton 1 Comment

CSS Selectors to have in mind

Web design, Web standards
Here there are a few CSS selectors to have in mind when styling as some of them can save you a lot of time. Have in mind that some of them do not have full compatibility with every existing browser though. X > Y [sourcecode language="css" wraplines="false"] div#container > ul { border: 1px solid black; } [/sourcecode] This type of selector may be really useful. It lets you establish the style of direct children of an element. Look at this code: [sourcecode language="html" wraplines="false"] <div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div> [/sourcecode] With the X > Y you can say you want an special style for lists in #container but not…
Read More
17Sep 2010 by Ruben Canton 1 Comment

Content relevance. Let’s use some colors

Web design, Web usability
This is a translation from my original post in spanish. I hope you like it! We are planning a new design for our website and doubt between using blue, red, pink, yellow, ... What would be better? What if I put bright pink edges? Surely no one would forget my web ... All the ones who have built a website once have gone through this process. What color to choose? Why can't I just put fluorescent orange background? Well, some things seem obvious, but others less so. I will try to order some ideas on this issue in this post. When designing a website, the first thing you have to think about is what is it's objective, from that point, try to steer the user towards this goal. For example,…
Read More
05Sep 2010 by Ruben Canton 1 Comment

Design consistency

Web design, Web usability
In general, design consistency its about avoiding the user having to think at all times how to do what he wants to, and for that purpose the best way its to make things appear always in the same way, so once learned how the site works, learned forever. Consistency with other websites This is one of usability foundations, if your niche websites place a triangle shaped button where it says "Go to checkout" and you decide that this button will be a square and say "Order", possibly the user will lose a couple of seconds looking for the triangle button he is accustomed to. If users have become accustomed to something through other websites of your niche, copy those "standards" and make life easier for the user. Example: The RSS…
Read More