Ok I’m a programmer and graphical design is just not my thing. But that doesn’t mean my applications don’t need an appealing frontend.

So let’s see what I do to present my applications without shame. Any comments are more then welcome I’m here to log my solutions and to learn from people reading them.

I’m going to explain my methods for graphical design of web applications. Mostly HTML, CSS and a bit of javascripting. Swing is been to long to log any information on that.

technical

It’s important to seperate your view (fronted) from the logic and backend. The same way you should seperate your styling from the presentation. Meaning you’ll be writing plain HTML and add a reference to your external css file. This way you can simply change the look’n feel, make several themes, …

usability

Don’t forget about usability, make your applicatons available to everyone. Meaning you’ll have to provide the alt attribute for your img tag, title for a tags, …

More in general it’s always good to know where you are so make a crumbtrail on your page. This is easily automated by letting a tokenizer play with your request url.

Read more about usability, I’m no expert.

html/css

div vs table

You’ll need a gross layout first. Sketch some sections like header, menu, content, footer, crumbtrail, … on your page and translate these to HTML using div elements with an id. Don’t use tables for this. Tables are ment for listing data in… tables indeed. Not for positioning.

A simple position is the header on top, a menu on the left (and another on the right?), your content in the middle and a footer to end your page with.

By putting al these elements in a container div you can set a width for your website or some other general stuff (no need to change body for that).

Insert title here



    
header

    
leftmenu

    
rightmenu

    
contentv/div>
    
footer

Referring to the div elements is done with the id css selector shown below. I’ll only give you some positioning css and borders so you can see you don’t need any tables. Colors and an actual design is up to you. You might want some inspiration.

All I do is giving the leftmenu a width and float it to the left. Same for the right menu, only float to the right this time :-). Don’t forget the clear property on your footer! This will make your footer appear at the bottom of these two vertical bars. Now the content div is still in the way of your menus. Give this one a left and right margin equal to the sizes of these menus to fix that (I actually added some more for some spacing).

#header{
    height:80px;
    border:solid 1px blue;
}
#leftmenu {
    width:200px;
    float:left;
    border:solid 1px red;
}
#rightmenu {
    width:200px;
    float:right;
    border:solid 1px green;
}
#content{
    margin:0px 210px 0px 210px;
}
#footer{
    clear:both;
    height:20px;
}

Read some css and maybe html tutorials when you don’t understand this code.

sliding doors

Google on the sliding doors effect. It’s way more advanced than this but I wanted to mention it anyway.

javascripting

Javascripting became very popular together with the rich web clients. Currently Java is even looking to include a javascript compiler with their jre.

nifty corners

When only using css and html you get a very rectangle design. You can always add background images and play with it using css, but that’s not the simple way I’m looking for. It’s easier to round some corners by using the nifty corners library.

Nifty("div#box","big");

prototype

Some common functions to ease javascripting can be found in the prototype library. More information here. Don’t confuse this with the prototype object.

scriptaculuous

Scriptaculuous (note the uber url) takes prototype to the next level. You can add many dynamic effects to your website this way.

ajax

Google is all over it, check gmail, calendar and many more. For websites you always perform a get of your page, maybe a post of your form input and then again a get. Several requests are needed. And a request means a refresh of your page content. AJAX hides these requests for the user by posting data and updating the page with the requested content using javascripting on the background. While loading the data very typical ajax please wait images are shown.

The prototype has some very easy functions to perform these ajax submits. Read all about it here.

graphics

I use graphics for icons mostly.

JPG vs GIF

GIF images have an indexed, fixed number of colors. 16, 32, 64… maybe 256 colors but that’s it. GIF images are used for small icons, backgrounds with little detail, … Don’t use a GIF for your self portrait. Pictures need a lot more colors so you’ll need to make JPG pictures of it. For online take a good compression rate of about 65%. For archiving on your local computer (I don’t recommend JPG but if you have to) take a higher rate like 85% (good balance). Make sure you leave a copy of the original picture. Anytime you save your JPG you will loose data, even when you save it with the same compression (or even higher) rate.

paint.net

Don’t compare Paint.net with the cripple paint you get with windows. First of all Paint.net is free :-). It can work with layers, has gradient, …