my CSS practices

How do you work when you are writing your CSS?

I guess I am not the only one that have been starting on a clean and nice CSS, and ended up with a mess because I didn’t have time to clean it in the end.
Many developers have very strict rules for their code, but do the web designers have strict rules for their CSS, and do they follow their rules?
It’s very easy just to code CSS without thinking of structure.

After working with some heavy stylesheets, I had to make some rules for my own CSS and I have got some practices that I want to share with you.

1. Organizing

For your own sake and people who may will be working with your code after you, you should organize your CSS. I use to organize the whole document in categories with headers like this:

*——-Contents——–*
*——-Headings——–*
*——-Links————*
*——-Navigation——*
*——-Page 1———–*
*——-Page 2———–*

I use to start with the main contents that keep it all together…
I also organize the properties in categories like this:

.header
{
 margin: 5px;
 padding: 10px;

color: gray;
background-color: white;
}

By organizing your CSS like this it will be easy to what you are looking for, where in the document the class is, and where in the class the value is.

2. Use Object Oriented CSS (OOCSS)

Often we are duplicating a lot of code! We write classes that use a lot of the same properties with the same values.
Instead of doing that we can write OOCSS that let us write common properties in an own class.
This is my classes in my CSS file before I use OOCSS.

.header
{
 
margin:0;
padding: 10px;
color: #003366; 
border: 1px solid black;

position: absolute;
background-image: url(background.png);
background-repeat: no-repeat;
}

.content 
{
margin:0;
padding: 10px;
color: #003366;
border: 1px solid black;

background-color: #99ccff;
}

.footer 
{

margin:0;
padding: 10px;
color: #003366;
 border: 1px solid black;
background-color: #ccccff;
}

This is my classes in my CSS file after I use OOCSS.

.header
{
 
position: absolute;
background-image: url(background.png);
background-repeat: no-repeat;

}

.content
{
 background-color: #99ccff;
}

.footer
{

background-color: #ccccff;
}

.common
{
margin:0;
padding: 10px;
color: #003366;
border: 1px solid black;
}

When I am writing like this I don’t repeat the CSS and reduce the filesize. I also have more structure and organized code.
When I use the classes I do like this:

<div class="header common">
</div>

<div class="content common">
</div>

<div class="footer common">
</div>

3. Shorthand

When you work with CSS for a big site, the CSS can be heavy.
This will affect the loading time in the browser. To do something about that you can use shorthand CSS like this:

Before…

.header
{
 margin-top: 5px;
 margin-bottom: 1px;
 margin-left: 5px;
 margin-right: 5px;
 padding-top: 10px;
 padding-bttom: 10px;
 padding-left: 15px;
 padding-right: 15px;

color: gray;
 background-image: url(background.png);
background-repeat: no-repeat;
}

…after

.header
{
 margin: 5px 5px 1px 5px;
 padding: 10px 15px 10px 15px;

color: gray;
 background: url(background.png) no-repeat;
}

4. Reduce loading time

In addition to writing shorthand CSS there is a lot of ways to reduce the loading time and the filesize.
As I wrote, I like to organize the CSS, but… by removing unnecessary whitespaces and comments you will reduce your filesize and loading time a lot!
Like this:

.header{ margin:5px 5px 1px 5px; padding:10px 15px 5px 15px; color:gray; background:url(background.png)  no-repeat}

Reduce even more
If you have a property that’s uses the same values you can do like this:

margin: 5px 5px 1px;

This means that the margin is:
margin-top: 5px; margin-right and margin-left: 5px; margin-bottom: 1px;

Another example:
margin: 5px 1px; = margin-top and margin-bottom: 5px; margin-right and margin-left: 1px;

So from this..:
.header
{
 margin-top: 5px;
 margin-bottom: 1px;
 margin-left: 5px;
 margin-right: 5px;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 15px;
 padding-right: 15px;

color: gray;
 background-image: url(background.png);
background-repeat: no-repeat;
}

…….to this:
.header{margin:5px 5px 1px;padding:10px 15px;color:gray;background:url(background.png)no-repeat}

I have reduced the filesize with 179 bytes!!!

If your values are just 0px; 0em or whatever, you can just write 0; and you will save some extra bytes.

from…
 margin: 0px;
 padding: 0em;
…to
margin: 0;
padding: 0;

To compress your CSS automatic you can use this brilliant tool:
http://www.cssdrive.com/index.php/main/csscompressor/

5. Use one “working” stylesheet and one “server” stylesheet

I don’t like to work on the compressed stylesheet. I like to work on an organized and structured stylesheet with comments and spaces.
So… that’s why I use one version for developing and one for the public.
Then I work on my own stylesheet and update the server stylesheet with a compressed version of it.
If you update it in prod very often it can be a lot of work and a little bit too much. In that case you can wait for the final version of the solution before you compress it.
I guess you will find your own and best way of doing this. 🙂

To work with colors

For many years now we have seen that a developing team dont have any designer. One reason can be because the team dont think they need it, another one can be because the customer dont think they need it or wont pay for it.
Today mostly of our customers know that they need good design and also wants professional desginers. BUT…. what do we do when the team doesnt have one? When you as a programmer are going to do design too.. Well… you design it yourself! You are trying to make it look good… does it?

The thing develpoers are doing when they are designing something quick they just put som colors on it, and done! The design is done… maybe it is… theres is no one that wants to pay for good design so the colors is all they get. And  my plan is not to blame someone for this right now, but to look at what we can do in situations like this. How can we make it look better?
So lets talk about colors and contrasts. What colors to pick and how to use them wisely.

As a user experience geek I know that I have to keep this simple, so I will TRY to do that. This will be a quick little guide to help you developers on the way to make something good looking in an easy way.

Where to start?
The first thing to do is to see if the company you are developing for have a profile manuel. This manual will contains logo, fonts, colors and so on. If they have this manual you are lucky and you can use this. But remeber to look in the manual for that part that tells you how all this is suppose to be used together.

If they dont have a profile manual you are screwed!:P Then you have to be creative and figure this out yourself. The first thing to check for is colors in theyr logo or profile. If this is uasable you use it, if not start from scratch. Maybe it is difficult to know if it is usable or not. But here is a guide for you.

What colors to choose?
To pick som colors you can use a lot of websites where people have written all different codes for different colors and you can just pick what you want.

Here are some good colorcharts:
http://immigration-usa.com/html_colors.html
http://www.somacon.com/p142.php

On this page you can also click on “shade” on the color you pick to see the hex for different tones of the color, and you can click “Mix” to see how it will match with other colors.
http://www.w3schools.com/html/html_colorvalues.asp

But this colors have to match! There are also a lot of resources for you out there where you can see if the colors go together or not. Use it!

This is a good page for colormatching:
http://www.colorsontheweb.com/colorwizard.asp

Contrasts and tones
Try to pick three or four main colors, and think about where to use them. Now you should also think of the contrast of the colors.

We have a color wheel that can help you to pick colors. In this wheel you will see that colors that are adjacent or harmonizing to eachother appear next to eachother on the wheel. These colors often works well together, but if the color is too close in value the colors can be washed out, so be careful.

The colors that are contrasting er more separated from eachother and the firther apart they are the more contrast they have. Contrasting colors are directly opposite of each other on the color wheel and we call them complementary colors. for example is blue complemantary to yellow.

Try to find one main color, one color for text and one for details.
The main color will be the color that will be seen… the main color is used a lot on the page. The detail color is also important, and can make your site very usable without any UX person but yourself.:) This detail color will of course be used on details. It can be on links, or borders or on stuff that is important or a little bit different. This color will then make a nice design AND tell the user that the information here is something different. The detail color can be a nice color that is easy to see.

When you have chosen your colors it can also be nice to use different percents of the colors. This for making it look light and with softer contrasts.

And… Remember that the colors have to say something about the company. Different colors have different meanings(http://www.digitalskratch.com/color-psychology.php).
Dont make a lawyer firm pink or a kinder garden black!

Good luck!!!

User Experience, Usability, web-designers…. What is it, why do we need it???

When we are developing web-sites and web-applications… Why do we waste our time and money on what the web-designers are saying? They have so many opinions and what they are saying sounds like a lot of work and a lot of crap. And why and when did they split into all this different parts and words like web-designer, interaction-designer, graphic-designer, usability, user-experience and bla-bla-bla-bla.. They wasn’t there before, and we never needed them before. Life was so much easier then, so why are they here now?

Well, life changes… so do we, and so do our business. Earlier the web was only a one-way static information medium. Mostly of the webpages was only text and pictures. After a while they also got terrible colorful backgrounds and blinking titles and icons. They used sound, music and flash that never stopped.(It hurts just to think about it!:P)

Today the web is a totally different medium and we use it in so many different ways for so many different reasons. So the websites today is such a complex and advanced medium and it is not only a one-way communication anymore.

We still use the web as a big informative medium. Today you actually have a problem if you don’t have a computer and internet. All the information you could ever need is there, so if you don’t have internet then maybe you don’t find what you are looking for, or it will take you more time to get it. All the public information that you need is also on the web.

There are no limits on what you can do on the web. You can pay your bills and control your accounts, you can buy ticket for travelling, you can buy clothes and food. You can fill in forms, find jobs, keep contact with people all over the world and…. There are no limits anymore.

The processes for things you have to do have become so much easier to do on the web. For example forms you have to fill in and send away, bills you have to pay and so on.

But why is this simple to do on the web? It could be a nightmare… This is where all the fancy designer-titles are so important, and this is what the interaction-designer do.

Everyone should have the same rights to get the same information, also on the internet. In Norway there is a law saying that every website that is a part of the government have to be accessible for everyone. This means that also people that are blind or visually impaired also have the rights to get all the information on the web, so we have to develop and design it in a way that also they can get the information. So the web-sites today have to be both usable and accessible.

Earlier it was easy to impress the user. The only thing they expected was the information and maybe some pictures. If the user didn’t found what he was looking for it was the user that was the problem and not the client or the developer. The websites was created by what information the client wanted, what the client wanted to see, and by what we thought was awesome(like the terrible blinking and spinning icons). Today we have critical and experienced users who expect a lot.

Today we have a lot of websites for everything so your website will rarely be the only one offering the same. So if the user don’t find what they are looking for or don’t like you website they will leave it and try someone else.

Today we have to develop the web-site with the customer in the center. It is all about making the user happy and comfortable. So it is not only to give the user the information they need, we also have to think about how we present the information and how we make them feel.

Today we help the client from the start and try to figure out what they really want and how we can do it together. What do the client really want? Why do they want this? What is the goal by making this? What will the user get out of this? We need to interact with the client to understand why, what and how we can reach out to the user focusing on the right things. And then we have to do some testing to see if the user actually get what the client want them to, how they get it, and how fast they get it. We have to design every part of the web-site on a way that make it easier for the user to get what they are looking for, to understand the web-site and so they don’t need to click around to find what they are looking for. The design should tell the user at once, and they should get what they expect.
And of course it should look nice too.

 So… why do we need all these designers? Why have they been splitted up with different titles and why do we use money on this?
As you see our business and the web have changed. The web isn’t a static medium anymore, it is a big interactive medium for communication. You use it for almost everything. You pay your bills, you buy clothes, food and whatever, you can find new friends, girlfriend, you can chat with people all over the world and share all your stuff. You can read the paper and comment everything you read. You can easily share all your life blogging, you can look at TV-shows and videos, and you can play games. You can find jobs, you can search for loans, you can fill out all forms for the government and as I said earlier, there are no limits.

 All this shows that we have to make the web-sites usable and accessible for the users. All the different designers actually do all this work and make all this processes easy for the users. These tasks are so important in a web project, and focusing on this I so worth it! Do you dare, and can you afford to NOT care about the user experience?

Introduction to HTML5 canvas

The HTML5 canvas is a rectangular area where you can use several methods for drawing paths, circles, boxes, characters and adding images.
It is a area where you actually control every pixel of it, and its using JavaScript to draw anything you want. There is almost no limit for what you can draw in or use a HTML5 canvas.

HTML5 defines the canvas element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”

Before you start on this you have to think of the browsers, once again… The canvas works fine in the latest versions of Firefox, Safari, Chrome and Opera, but of course IE is acting different. But thanks to ExplorerCanvas project it is possible to give it some compability if you include an extra JavaScript file before your canvas code on you page. With the use of conditional comments you can hide it from the other browsers.

The latest versions of Firefox, Safari, Chrome and Opera all enjoy reasonable to good support for Canvas.

What about Internet Explorer?

IE does not support canvas natively (as of IE8), however it has been given some compatibility thanks to the ExplorerCanvas project and is simply a matter of including an extra JavaScript file before any canvas code in your page. You can hide it from other browsers in the standard way, using conditional comments.

<!--[if IE]><script src="excanvas.js"></script><![endif]-->

ExplorerCanvas even extends canvas support to IE6, although it’s not perfect so don’t expect it to render as well as modern browsers that support canvas natively.

So…. lets start!

The markup looks like this:
<canvas width="300" height="225"></canvas>

In the start the canvas is actually nothing. It doesnt show anything, no content and no border. The canvas element has no drawing abilities of its own.
All drawing must be done inside a JavaScript.

We have different types of drawing in canvas. When I started this I wanted to draw in an area using the mouse as a pencil. I figured out that this was maybe level 10. So before we do that we should see the more simple ways of doing this.

We can use the same method to draw a box, circle or a picture in the JavaScript.

So we start with drawing a box in the canvas:

<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#6633ff”;
cxt.fillRect(0,0,150,75);
</script>

1. JavaScript uses the id of the canvas tag to find the canvas element:
var c=document.getElementById(“myCanvas”);

2. Then we create the context of the element:
var cxt=c.getContext(“2d”);

The getContext(“2d”) object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more.

3.  These lines draws the rectangle
cxt.fillStyle=”#6633ff”;
cxt.fillRect(0,0,150,75);

The fillStyle method makes it purple, and the fillRect method specifies the shape, position, and size.

The fillRect method above had the parameters (0,0,150,75).
This means: Draw a 150×75 rectangle on the canvas, starting at the top left corner (0,0).
The canvas’ X and Y coordinates are used to position drawings on the canvas.

Lets try to do this the same way but with different input.

Circel
var c=document.getElementById(“canvasCircle”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#6633ff”;
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

Canvas Circle

Line
var c=document.getElementById(“canvasLine”);
var cxt=c.getContext(“2d”);
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

Canvas Line

Gradient
var c=document.getElementById(“canvasGradient”);
var cxt=c.getContext(“2d”);
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,”#6633ff”);
grd.addColorStop(1,”#ff66cc”);
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

Picture
var c=document.getElementById(“canvasImage”);
var cxt=c.getContext(“2d”);
var img=new Image();
img.src=”milo.png”;
cxt.drawImage(img,0,0);

So.. this was an introduction to the canvas and a simple way to use it. In my next post about the canvas I will show you how to use the mouse to draw in the canvas like a pencil.:) As you see, you can use the canvas in so manye different ways.

Change class on active menuitem

Often when designing websites we want to change the selected menuitem in the menu. Many try to use the a:active to do this because we think this is when the page is active. But actually it is when the link is active. And the link is only active the moment we click it, so when the page have loaded the click is no longer active.

I have tried to do this in the CSS a lot of time, but I often use JavaScript instead. So if you can use JavaScript this is a good one for managing the style on the menuitem when the PAGE is active.
With this JavaScript you just switch between two classes, the normal class and the active class. 

In this example my CSS style for the normal menu is “menulist” and the style for the active menuitem is “active_menuitem”.

<script type=”text/javascript”>    
         $(function setActive() {
         aObj = document.getElementById(‘menulist’).getElementsByTagName(‘a’);
         for (i = 0; i < aObj.length; i++)
        {
            if (document.location.href.indexOf(aObj[i].href) >= 0) {
            aObj[i].className = ‘active_menuitem’;
            }
       }
       });
</script>

Simple editable text in new browsers!

The new browsers has an attribute that makes you apply “contenteditable” to different elements to make it editable for the users.

There is maybe not that often you use it, but it can be used as for example a “To do list” or maybe you could make an app and use it as a mobile shoppinglist!

I like everyhing that is fun, cool and easy so here you go!

<h2> My Shoppinglist</h2> 
     <ul> 
        <li> Bread </li> 
        <li> Milk </li> 
        <li> Eggs </li> 
     </ul>

Video with HTML5

When I was starting develop an HTML5 page that was using the video tag I thought that was “piece of cake”. Everything looks so much easier on Google and when people have their presentations.

There is some things to think about when we are doing this. We have to remember that we need different video files for different browsers.
I will now list all the things that we have to do and to think about. I will start with the HTML5.

Remember to have a page that supports HTML5. This is a very short and easy markup for HTML5:

<!DOCTYPEhtml>
<htmllang =”en”>
<head>
<metacharset =”utf-8″>
<title></title>
</head>
<body>

</body>
</html>

We will use the videotag like this:
<video>
</video>

 And then we put the videosource inside of this tag. And here is the real job. This is because we need different files for different browser like this:

We need a .ogg videofile for:
– Firefox 3.5
– Chrome 3.0
– Opera 10.50

We need a VP8(WEBM) videofile for:
– Firefox 4.0
– Chrome 6.0
– Opera 10.60

We need a mp4. videofile codecsed as H.264 for:
– Internet Explorer 9.0
– Safari 3.1

So if you have a videofile .wmv you have to convert it to all three of this files and put it like this:
<video>
     <source src=”videos/video1.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
     <source src=”videos/video2.ogv” type=’video/ogg; codecs=”theora, vorbis”‘ />
     <source src=”videos/video3.webm” type=’video/webm; codecs=”vp8, vorbis”‘ />

     Videotag not supported!

</video>

In this case every browser who can read the HTML5 tag will read whats inside, if the browser doesn’t support HTML5 you will only be able to see the text.
If you use a browser with a version better then Firefox 3.5, Chrome 3.0 or Opera 10.50 you will see the first video. If you use a browser with a version better then Firefox 4.0, Chrome 6.0 or Opera 10.60 you will see the second video.  If you use a browser with a version better then IE 9.0 or Safari 3.1 you will see the third video.

You must ensure that your web server supports the video format that you use. If your videos plays as it is supposed to on your local computer, but doesnt play live on your webserver it is probably because the webserver isnt configured right for your video formats.  So you need to ensure that your web server supports the MIME type of your video.

This can be tricky to figure out right because there are different types of servers and ways to do it.

1. Go to IIS manager -> MIME types and “add” MIME types.

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

or

..put the mimetypes in the webconfig like this:
<system.webServer>

<staticContent>

<mimeMap fileExtension=”.mp4″ mimeType=”video/mp4″ />

<mimeMap fileExtension=”.m4v” mimeType=”video/m4v” />

<mimeMap fileExtension=”.ogg” mimeType=”video/ogg” />

<mimeMap fileExtension=”.ogv” mimeType=”video/ogg” />

<mimeMap fileExtension=”.webm” mimeType=”video/webm” />

</staticContent>

</system.webServer>

2. If you’re using an Apache web server, you can add the following code to your httpd.conf file or to an .htaccess file in the directory where your video file is:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

And at last… if you still not make the videos play live you should check if the videofiles actually are converted right. There are different converters to use and not everyone of them do this correct.