Design in Norway

A couple of weeks ago I had the pleasure of attending ndcoslo in Oslo Norway and was pleased to see how deeply the Norwegians think and care about design.

Take this hotel room key for instance. No need to insert your key into any slot (or use a key). Just hold it near your door and your in. Very nice.

Inside if you need the lights on, simply insert your card into the key holder and the lights come on (they do this in Japan too).

What? It’s dark and you can’t see where to insert your key? No problem. We will light it up with an orange light so you can see in the dark.

Here is the soap dispenser in the bathroom. One big simple push and you’ve got soap.

Here’s the heated towel rack.

Here’s the dead simple shower controls.

Configured to an optimal heat setting (38C). Nice.

With one simple soap dispenser (All Over Shampoo).

Here is what you will see on a bus when your stop is coming up.

And they’ve got beautiful churches like these built centuries ago

And their own opera house to boot!

Of course not everything is perfect (I am not a fan of these milk dispensers).

But I like the affordances and thoughts to give to people (of every culture).

Over all I have to say I was very impressed with Norway.

It reminded me a lot of Japan.
Beautiful design.
Generous people.

And you can just tell over there they still give a darn about how things work.

Advertisement

How to create background color gradient using adobe illustrator

To create a repeating background for your website using a gradient affect that looks something like this:

do the following.

Adobe illustrator CS5

Draw a square.

Open the gradient window (Window -> Gradient)

Click the gradient box (will apply black to white gradient).

Open the color pallette (Window -> Color) and get both the color and gradient window on screen at the same time (tricky because Adobe UI is terrible).

Once you’ve got them both up, click and drag the colors you want for your gradient from the color palette down to the ends of the gradient.

Transform and slim the gradient until your happy. Save this image somewhere you can access from your website. Remember to reduce the size of your canvas (Shift -O) to make sure your image is slim when you export it.

CSS

Now apply the following CSS to the body of your website:

body {
		background-image: url('../images/bg_body.png');
		background-repeat: repeat-x;
		background-color: #c9efed;
		height: 100%;
}

This takes the gradient we just created, and repeats it across the screen and applies a default color to anything below your gradient image where is runs out.

Voila! That’s it. You’ve now got a nice background to build off of.

Refactoring css

css is one of those things I am desperately trying to get good at, and a big part of that is knowing how to structure and refactor your css files.

Here’s a good example of some ugly css from Christian Heilman’s design chapter in Smashing Book#2.

#pagetitle {
  color: black;
  text-align: left;
  border-top-width: 2px;
  border-top-color: black;
  border-top-style: solid;
  border-width-bottom: 2px;
  ...
}

The first thing you can do to clean this up is logically order elements and use the shortcut notation.

#pagetitle {
  color: black;
  text-align: left;
  line-height: 1.3em;
  border: 2px solid white;
  border-color: black white white black;
  padding: 1em 2em;
  ...
}

The next thing you can do is move common denominators out of their specific selectors and collate them. For example you could refactor this:

h1  {
  font-family: helvetica, arial, sans-serif;
  color: #000;
  margin: 0.5em;
  padding: 1em;
  font-size: 150%;
  background: #ccc;
}

h1  {
  font-family: helvetica, arial, sans-serif;
  color: #000;
  margin: 0.5em 0;
  padding: 1em;
  font-size: 120%;
  background: #999;
}

Into this:

h1, h2, h3, h4 {
  font-family: helvetica, arial, sans-serif;
  color: #000;
  margin: 0.5em 0;
  padding: 1em;
}

h1 {
  font-size: 150%;
  background: #ccc;
}

h2 {
  font-size: 120%;
  background: #999;
}

See the difference? All the common stuff is up top, and only the difference are showing below. Way better.

How not to name your css classes and id’s

Continuing on with Christian Heilmann’s excellent chapter ‘Red flags in web design’ I loved this section about how not to name your css class and ids.

Here are some examples of really bad class and id names:

greenMessage
largeBoxRight
redIntroText

Basically anything that describes what the element looks like, and not what is it doing.

Here would be some better names:

greenMessage -> confirmation
largeBoxRight -> leanSideBar
redIntroText -> warning

See the difference? Applying this simple check will make your code a lot more readable and easier to maintain and understand. Thx Chris!

For more good tips on design and development checkout Smashing Book#2.

How and when to use a css class

The Smashing Book #2 has a great section by Christian Heilmann on how and when to use css classes.

“Classitis” as Christian calls it is when classes are used everywhere. Instead of just using classes selectively to make certain elements standout, people add classes to everything and then let jQuery do it’s magic.

This can quickly turn into a maintenance nightmare because as soon as a class name changes, you’ll have to search your entire code base for all changes.

Here’s an example Christian gives on how NOT to use css classes:

<ul class="shopping-list first">
  <li class="list-item">Cucumber</li>
  <li class="list-item important">Apple</li>
  <li class="list-item">Orange</li>
</ul>

Christian’s main rule for applying css classes is:

add a class to mark the odd one out and to group elements not already grouped.

Here is how to do it right:

<ul class="shopping-list first">
  <li>Cucumber</li>
  <li class="important">Apple</li>
  <li>Orange</li>
</ul>

Instead of using .shopping-list .list-item to style, all you need is .shopping-list li.

You modify the important one with .shopping-list li.important, and then you don’t have to worry about the class specificity of .important versus list-item.

For more good examples of does and don’t about web and design, be sure to check out the excellent Smashing #1 and #2 books.

How to nice corporate background webpage

Ever wonder how some websites get that nice, subtle background going? I did. Turns out it’s really easy.

Just make an image (say 4 pixels high with a single dark pixel at top and three light ones below)

And repeat it as a background image over your page.

css

body {
    background-image: url(../images/background.gif);
}

html

<html>
<head>
    <title>Repeated background</title>
    <link href="css/repeatedBackground.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

And voila.

It’s subtle, but nice for corporate style look and feel work or in any enterprise as a background to a table or TPS report.

Another approach is to apply the same idea with a gradient. Take a longer gradient image (say 1×500 pixels) and repeat it along the x-axis with a darker background color for where the gradient runs out :

css

body {
    background-color: #091A3A;
    background-image: url("../images/background-darkblue-1x500.gif");
    background-repeat: repeat-x;
}

and you get something like this:

Cool eh? These are just a web design tips I am picking up no my current project. Thanks to Jonas Claesson for point these out.

CSS Hack for making your own drop shadows

Jonas Claesson showed me this cool hack for simulating a drop shadow effect on a document in css.

Basically it takes drop shadow images, and repeats them around the border of your display image by placing in in north, south, east, west corners of your image.
You then plop them in using css ids and background images.

The result looks something like this:

And the code looks something like this:

html

<!DOCTYPE html> 
<html> 
<head> 
  <title>dropShadowViaClassBackgroundImage</title>
  <link href="css/classBackgroundImg.css" media="screen" rel="stylesheet" type="text/css" />
</head> 

The following is an example of how you can use classes to place background images.

<table cellspacing="0" cellpadding="0" id="previewTable">
<tr>
    <td id="nw"></td>
    <td id="n"></td>
    <td id="ne"></td>
</tr>
<tr>
    <td id="w"></td>
    <td id="previewContent">

    <div id="previewForm">

        <table style="margin-top:15px">
            <tr >
                <td><span class="headerBold">Summary:</span></td>
                <td><div  class="header">Do your stuff here</div></td>
            </tr>
        </table>

    </div>

    <td id="e"></td>
</tr>
<tr>
    <td id="sw"></td>
    <td id="s"></td>
    <td id="se"></td>
</tr>

</table>
</html>

css

#previewTable
{
    margin: 20px auto;
    width: 900px
}

#previewForm *
{
    font-family: verdana, serif
}

/* This is for the drop-shadow effect around the document*/
#nw, #ne, #sw, #se
{
    height: 15px;
    width: 15px;
}

#nw {background-image: url('../images/nw.png');}

#n {background-image: url('../images/n.png');}

#ne {background-image: url('../images/ne.png');}

#w {background-image: url('../images/left.png');}

#e {background-image: url('../images/right.png');}

#sw {background: url('../images/sw.png') repeat-x;}

#s {background: url('../images/s.png') repeat-x;}

#se {background: url('../images/se.png') repeat-x;}

You can download the code and check it out here:

git@github.com:rasmus4200/webtips.git