Archive for the 'Css' Category

Css reset with Eric Meyer

One of the more annoying things when doing web designs is the fact not every browser seems to have the same default values for all the html elements. This can potentially wreck your design in some browsers and trying to fix a design for one browser were is looks bad, can probably lead to a screw up in another browser.

Therefore you should reset all the browsers default style values and Eric Meyer has made a nice little set of styles that you can copy/paste and use in your own web-design.

Attribute selectors in CSS

This is probably one of the most under-used features in CSS, which is strange since it is pretty cool. I have added a link in the bottom, where you can see it action.

CSS2 Selectors

1
a[class]

Match when the element sets the “class” attribute, whatever the value of the attribute.

1
a[class="popup"]

Match when the element’s “class” attribute value is exactly “popup“.

1
a[class~="popup2"]

Match when the element’s “class” attribute value is a space-separated list of words, one of which is exactly “popup2“.

1
a[hreflang|="dk"]

Match when the element’s “hreflang” attribute value is a hyphen-separated list of words, beginning with “dk“. The match always starts at the beginning of the attribute value.

CSS3 Selectors

1
a[href^='mailto:']

Match when the element`s “href” begins with the value “mailto:

1
a[href$='.bmp']

Match when the element`s “href” ends with the value “.bmp

1
a[href*='help']

Match when the element`s “href” contains the value “help“. Eg. (/pdf/help/index.html)

Example

Information design is the new black

A good friend present me with a link concerning on how to design information and I must say that is rather interesting.

Everyday the Internet grows larger with more information and millions of users are surfing the Internet for it. So if you are a company, blogger or someone else that is putting information onto the Internet, then you should be concerned with how you present it to the users. And that is where information designing comes into the picture. We all know how to put text online, but a lot of people don`t know how to properly present it. Many just goes with what they think looks pretty and that it not really the way to go. When you want to present some sort of information, then you have to think about readability and that is not as easy as it may sound.

How to do it

Good information is more then just a well written text; because even a great piece of information can be presented in a very bad way that make the user move onto a new website. So how can you archive this? If you are truly dedicated to become better at designing information, then I will strongly advices you to read webtypography.net, even though it is a work in progress, there are a lot of good advices about how to design information.

The most important part

Ok, so now we know a bit more about how to format any text so it will enhance the readability, but we can`t really use these newly learned powers for anything if we don`t understand that a letter is not just a letter. Different languages consist of different letters and what might looks fine for you might not look fine for someone in Russian, so it is time so understand the value of Unicode. Lets turn to Joel Spolsky, he has written a pretty good article about what every developer should know about Unicode and Character sets.

Now you are ready to do information design. Good luck.

« Previous PageNext Page »