The term Responsive Web Design has been around for some time now. Some say it revolutionizes the way we think, plan and execute websites from now on, others say it makes you re-focus on the essentials again. Reason enough for me to take a closer look in order to understand what this means for us web-developers and designers alike.

Continue reading →

Today, I just want to give you a quick rundown which CSS3 properties we designers & developers can already integrate in our everyday work. Sidenote: IE-Browsers up to version 9 don’t support any CSS3!

So why not take advantage of these newly supported CSS3 properties and provide a better experience to your visitors today ? I want to kick this series off with the new ways in which you can manipulate colors using CSS3.

RGBA

RGBA stands for Red, Green, Blue and Alpha (alpha-channel) which refers to the transparency of that color. Some might say: ‘But you can already use opacity to achieve a transparency effect!’ I say: ‘True, but the main advantage of using RGBA over opacity is that when using RGBA,the transparency isn’t applied to child elements and thus parents remain solid objects! Which also means that we don’t need to reproduce the transparency effect using semi-/transparent .png files anymore!’. Its much less of a hassle to use pure CSS-code instead of dealing with workarounds.

The syntax:

#element {
  background-color: rgb(255, 255, 255); //fallback
  background-color: rgba(255, 255, 255, 0.5);
}

The first declaration is the fallback for our beloved friend IE, the second declaration is for all the other browsers.

HSLA

HSLA stands for Hue, Saturation, Lightness and, you guessed right, the alpha-channel. Its a pretty cool, fast and a more intuitive way of changing colors! The first value (Hue) is for choosing the color done using degrees: 0º = Red, 60º = Yellow, 120º = Green, 180º = Cyan, 240º = Blue, 300º = Magenta (and but of course you will get all the colors in between two values).

The second value (Saturation) controls the amount of color we are using, 0% = greyscale and 100% = full color.

The third value (Lightness) tells us how bright the color is. 0% = Black and 100% = White.

The syntax:

#element{
  background: hsl(30, 50%, 80%); //fallback
  background: hsla(30, 50%, 80%, 0.5);
}

Go and have a play with Chris Coyier’s created nifty tool the HSLa Explorer

Conclusion:

Whatever your preferences is when it comes to manipulating colors, CSS3 got some hot stuff to offer and in my opinion, it is about time to start integrating these newly supported CSS3 properties in your projects today!

When it comes to web design, most people assume that this discipline is all about neat graphics and pixel-pushing, but they truly forget that more then 90% of the information on the web is written language and thus Typography. One problem we web designers faced for the last decade, is that we only can refer to a handful of web save fonts (fonts pre-installed on our OS) such as: Arial, Helvetica, Times New Roman, Times, Courier New and Courier – plus a few more options that work cross-platform. In short, we have been limited in our creative impulse to provide the end-user with nicer looking fonts for far too long.

Back in 1998, when The CSS2 specification was released, the CSS rule @font-face was introduced to make it easier for us to use none web save fonts. The browser would simply download the font from the server – if its not installed on the clients computer – and embed it on the website. This was removed in the CSS2.1 specification because it literally enabled illegal downloading of licensed fonts, which of course is not in the very best of interest of the font creators.

Microsoft started supporting font embedding through the proprietary Embedded OpenType (.eot) standard since version 4.0, as an attempt to protect licensed fonts from illegal downloading. However Internet Explorer only supports  .eot file format for embedding fonts which again gives us web designers more work to take care of. If you want your none web save font to be displayed on IE browsers, then you will need to convert it first to an .eot file format. *sigh

Generally speaking: Modern browsers support @font-face embedding and this is clearly on the rise! Tho I will mention shortly the methods we web designers still use as work-around until @font-face is widely implemented:

1. Font fallback – a common practice, simply choose a ‘look-a-like’ font
2. Image replacement – overlaying your text with an image containing the text content in the font of your choice.
3. sIFR (Scalable Inman Flash Replacement) – is a flash based alternative. tho its slow and you need to have flash and javascript enabled.
4. Cufon – uses vml for ie browser and html5 canvas for modern browsers. Tho it embeds the fonts, thus violates the copyrights.

These methods are all still in use and well know techniques and yet just alternatives! But lets move on, I want to show you how the CSS declaration of the @font-face looks like:

@font-face {
  font-family: "Your typefacename";
  src: url("type/filename.eot"); //IE
  src: local("☺"), //IE hack not to choke and die
  url("type/filename.woff") format("woff"),
  url("type/filename.otf") format("opentype"),
  url("type/filename.svg#filename") format("svg");
}

Maybe you are wondering why this code looks a little bulky, eh ? Well its because we want to cover all browsers to display our acquired font and to avoid gaps! And as you remember from above, IE for example only supports .eot (this will change with IE9). All other modern browsers support the use of .ttf (trueType font) and .oft(openType font) file format, as well the .svg (Scalable Vector Graphics) and .woff (Web Open Font Format).

Conclusion

I really think that the future belongs to @font-face, its plain, simple & pure CSS code, plus we are not dependent on javascript or flash, which keeps the implementation time in check and saves us from other headaches.