Responsive Web Design by Ethan Marcotte

So I finally got my hands on the seminal work by Ethan Marcotte. I had to order it from the US but it was well worth the wait. If I didn’t have the responsive design bug before I certainly do now. This book is fun, easy to read and gives a solid foundation on responsive design principals. It is apparent to me that responsive design is nothing technically complicated, it just requires an open minded attitude towards a responsive ideology. You can pick up a copy here: A Book Apart – Responsive Web Design


Background Color Transparency with RGBa

Using RGBa to set your background colour of HTML elements is great as it allows you to use transparency.

It looks like this:

element {background-color: rgba(255,255,255,.15);}

Super neat for rollover effects where you can set the background colour to white on the rollover state with a low transparency, in this case 0.15. This has the effect of tinting the colour underneath, and makes it easy for colour scheme changes later on.

Transparent elements look cool but in the past you have either had to set the whole div to be transparent and also effecting any text inside it, or upload transparent background images.

NB Using rgba is CSS3 and works only in the latest browsers at the moment. That is IE9, Safari 3, Firefox 3 and any version of Google Chrome. Worth setting a few fallback states.


TIP – Position Nav Under Content

When viewing a webpage app or responsive design on our mobile device it is common to see full width navigation buttons placed under the content. This gives priority to the page content in the smaller screen. You can then easily scroll to the bottom to navigate further. This of course wouldn’t be practical for a very large scrolling page for many sites it is ideal.