How can I make this web site better?

[wazza6]

Hey , I made a website for one of my friends and I would like to know what you guys think about it ... I think the bottom bar is kinda ... too simple maybe? I just can't find what's wrong. What do you recommend? 50 credits to the first *useful* post. Things like change the background color aren't useful but still appreciated.

Thanks

My site : http://www.minibuscaribebleu.co.cc or http://www.caribebleu.co.cc

Also does anyone have problems loading it with www. but it works fine without?

 

[Awesomexr]

The logo and the background don't really go well together, the navigation is pretty okay though.

 

[farscapeone]

The best advice I can give you is to try to find a nice free template.

Nothing personal

 

[playminigames]

i like how it is simple, but the content seems like it is just floating. The navigation is quite good. But the graphics you did yourself are really pixelated, try working at a bigger size then sizing it down, or just try a better photo editor like paint.net. Hope this helped!

 

[wazza6]

i like how it is simple, but the content seems like it is just floating. The navigation is quite good. But the graphics you did yourself are really pixelated, try working at a bigger size then sizing it down, or just try a better photo editor like paint.net. Hope this helped!

"but the content seems like it is just floating." What do you mean? Yes it is made with divisions that are "floating" (used a program I made in C++ to get the position (X,Y) on the browser )I guess that was the point of it. EDIT: Uh... I think I got what you mean ... I'll try to make it in a "box"

And I know the logo doesn't fit with the background color .. at first it was orange and it was really cool , but he wanted it red and the background exactly this blue ... I'll try to make the edges transparent or something to make it nicer.

" just try a better photo editor like paint.net." I'm using Photoshop CS4

 

[miguelkp]

"but the content seems like it is just floating." What do you mean? Yes it is made with divisions that are "floating" (used a program I made in C++ to get the position (X,Y) on the browser )I guess that was the point of it. EDIT: Uh... I think I got what you mean ... I'll try to make it in a "box"

And I know the logo doesn't fit with the background color .. at first it was orange and it was really cool , but he wanted it red and the background exactly this blue ... I'll try to make the edges transparent or something to make it nicer.

" just try a better photo editor like paint.net." I'm using Photoshop CS4

Step by step.

1.- I'm also sure that if you put the text into boxes it will look far better.
2.- Another thing I would change is the font. Handscript fonts are quite pretty... but for logos and so. For long paragraphs I find better simple Serif or Sans fonts. You can read this fonts easier than the handscript ones.
3.- The pixelated logo has a simple answer: it's a GIF, so you lost alpha transparency info. You probably used GIF because its smaller size compared to other formats, isn't it?
Well, a trick is don't use a transparent image background. Use your site background color (Hex #00c6ff, if I'm not wrong) as the image background and you can save it in GIF without pixelating logo font borders. Another option is use PNG format keeping transparency so if you change your site background color, the logo will fit anyway.

If this is all Greek to you, feel free to ask and I/we will can help you

 

[wazza6]

1. Good Idea
2. He asked me for handscript , i'll try to negociate it
3. I didn't know PNG had transparency ... thanks

 

[miguelkp]

1. Good Idea
2. He asked me for handscript , i'll try to negociate it
3. I didn't know PNG had transparency ... thanks

Actually, GIF also supports transparency. However, GIF only recognizes 'transparent' and 'no-transparent'. PNG recognizes partial transparencies, so borders will degradate correctly with the background and will not be pixelated

About the handscript fonts, if it was an explicit asking, then don't worry about it but, as you said, try to negociate. Believe me when I say that for large paragraphs, the simple the better.

About the boxes, I recommend you use as background color the same as in the "Copyright © Minibus Caribe Bleu enr. Touts droits réservés" div on foot (Hex #bfdbff, isn't it?)

Another thing I forgot. What about putting a simple 1px solid border on the navigation menu? I think it will be look better.

 

[wazza6]

"Another thing I forgot. What about putting a simple 1px solid border on the navigation menu? I think it will be look better." It looked really ugly
"About the boxes, I recommend you use as background color the same as in the "Copyright © Minibus Caribe Bleu enr. Touts droits réservés" div on foot (Hex #bfdbff, isn't it?)" I was thinking about white boxes with an inner shadow , I think if I put them #bfdbff , it will be too much blue , also it's easyer to read black on white , i'll try both . Thanks a lot you all helped me

 

[miguelkp]

It's always a pleasure help others

It's true. Probably it will look better with white boxes. I'm also very very very agree with that 'black-on-white-for-reading-rule' XD I always try to convince others that dark themes with white on black paragraphs are not only 'very cool and so' but little terrorist attacks against our poor eyes too :biggrin:

If you make this way, I noticed that it will fit better with navigation menu And here came another idea:

When you hover the navigation menu options, a graphic appears, a glassy box. What if you use a similar graphic to highlight titles on different sections? I mean, 'Description:', 'Transport privé', 'Private transportation', 'Réservations:', 'Commentaires? Questions?' and 'Comments? Questions?'. Do you realise what I mean?

 

[playminigames]

"
" just try a better photo editor like paint.net." I'm using Photoshop CS4

hey sorry about that, i just figured by how the logo was so pixelated you were using some program like Microsoft paint, lol sorry about that!

 

[wazza6]

It's always a pleasure help others

It's true. Probably it will look better with white boxes. I'm also very very very agree with that 'black-on-white-for-reading-rule' XD I always try to convince others that dark themes with white on black paragraphs are not only 'very cool and so' but little terrorist attacks against our poor eyes too :biggrin:

If you make this way, I noticed that it will fit better with navigation menu And here came another idea:

When you hover the navigation menu options, a graphic appears, a glassy box. What if you use a similar graphic to highlight titles on different sections? I mean, 'Description:', 'Transport privé', 'Private transportation', 'Réservations:', 'Commentaires? Questions?' and 'Comments? Questions?'. Do you realise what I mean?

Do you mean having the glossy box as a background for the titles? I really don't think it is a good idea , plus i would need to make the title a table cell or another division itself , and that wouldn't look very good...
"but little terrorist attacks against our poor eyes too :biggrin:" :nuts::wtf: You know you could make great video games with these ideas ? Any idea how I could make the boxes? I made a full image as a background but the text isn't centered in the box , do you think having the image scaled up a little and in a division under the text's <div> is a good idea?

 

[miguelkp]

Ok. It was only an idea.

About boxes: what do you mean exactly with 'isn't centered'? Can you put a screenshot?
If the background is one and only one image, I supose you can make a div class in your CSS file (or using the style property of the div tag) and try different settings: margin, padding and so. I think you should have no problems doing it this way.

 

[wazza6]

I can't put a screenshot , what I meant was that the text started on the border of the box and ended on the borders because these borders are in the image , I can't put a <br /> each ( i don't know , let's say 70 characters) and spaces before each line to be sure it is in the white part of the image. Now it looks OK i just need to make it a little softer , changed my mind about the shadow ... just visit http://caribebleu.co.cc/index_test.php if you want to see it. Working on it after i'm gonna see what a can do for the logo...

 

[miguelkp]

That is what you need: padding.

Use the padding property in the div this way:

<div style="padding:20px;">

Or via external CSS file (if you have one).

 

[wazza6]

too late but thanks anyway ... I didn't remember we could do that

Edit : I finally got something OK with word :roflwtf: (how could word possibly be useful??) anyway it looks kinda better , I had no idea how to make shadows in photoshop...

 

[Gouri]

Search in google you will find numerous examples to add shadow.

Check about reflection too

 

[miguelkp]

too late but thanks anyway ... I didn't remember we could do that

Edit : I finally got something OK with word :roflwtf: (how could word possibly be useful??) anyway it looks kinda better , I had no idea how to make shadows in photoshop...

You can choose between inner shadow or inner glow. With inner glow, make sure that you change not only the color of the glow to black, but the blend type too. Multiply is a good blend type so you can get what you want (I think XD).
Inner shadow will only add shadow in a determined angle. This can be changed but is a little tricky and it will be far better using inner glow.

 

[wazza6]

I *tried* to make a template on photoshop : http://www.minibuscaribebleu.co.cc/TeSt_09 any comments?