With the up and coming use of mobile devices rising, it is good to start designing responsive websites or mobile versions of websites. I feel that 2013 is going to be a big year for responsive website builds. Continue reading
If you are viewing this post in an email, you will have to visit the post to see the images.
You can create a triangle using CSS border property. The trick is when you us different color borders they come together as a point. Below is an example of the four different color borders. As you can see it gives the point as the borders come together.
So the question I asked myself was, “How can I use this to my advantage?”. I found that I could create arrows without images. Below is example of what any arrow would look like with CSS.
Here is the code that creates this effect
border-color: transparent green transparent transparent;
Just remember when using four values in a single property, like in the border-color property, the first value is the bottom and then clock wise from that point.
I have tested the css property in all major browsers, and seems to work great!
Have you ever noticed fonts in FireFox are hard to read or blurry. The culprit to this issue is Helvetica Neue fonts. I keep this in mind when I’m designing for the web. Take care when you design for any thing that is using html for the web. Choose your fonts carefully. From my research I have found this to be FireFox running on a PC issue. I can not replicate the problem on an apple product running FireFox. This is example of what the fonts will look like.
Why I think this is the culprit?
I was able to correct the issue when I used firebug to remove the font-family Helvetica Neue. After removing the Helvetica Neue. This is the results I ended up with.
As you can see the difference in the fonts. I would never have believed this if i had not done the research to find this issue.
Here are a few usability rules that I read in smashing magazine and found interesting and helpful.
1. 7 links in your navigation – George A. Miller’s studies showed that the human brian short term memory can only retain 5 – 9 things at a time. In this case it is a good practice to only have the max of 7 links in your navigation. Pretty interesting! I did not realize that until I found this information.
2. 2 second rule – This is a rule that the user should not have to wait more then 2 seconds for something to happen. Say if they click a link and a new page loads or any kind of reaction from a user action. This has always been a struggle for me. I am always trying to optimize my web site so it will load faster and response better.
3. 3 Click-Rule – This rule suggest that if a user does not find what they are looking for in 3 seconds that they will leave the site.
So here are a couple of rules to follow when designing user interfaces. There are plenty more that you can find at smashing magazine.