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.
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, …
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, …
Read more about usability, I’m no expert.
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
For the css try the editCSS firefox plugin so you can give this website a rocking layout. Also read my blog about colors to get a cool colorscheme.
You can get some dummy text for visualising your pages at http://www.lipsum.com/.
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).
border:solid 1px blue;
border:solid 1px red;
border:solid 1px green;
margin:0px 210px 0px 210px;
Read some css and maybe html tutorials when you don’t understand this code.
Google on the sliding doors effect. It’s way more advanced than this but I wanted to mention it anyway.
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.
Scriptaculuous (note the uber url) takes prototype to the next level. You can add many dynamic effects to your website this way.
The prototype has some very easy functions to perform these ajax submits. Read all about it here.
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.
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, …