PDA

View Full Version : Please review: www.betobetuk.com


acseven
05-24-2005, 05:07 PM
Hi,

This is my first attempt of messing around with CSS extensively (maybe too much) and [ALOT] flash. It is for a portuguese musician:

www.betobetuk.com (http://www.betobetuk.com)


I would be very thankful if you could review this website, mainly because it had to be put online and it's not 100% ready (well.. not even 70%... ). The site is in portuguese, but the contents is not important for this matter.

Please report your browser and if your browsing experience is ok or not.

STATUS/KNOWN ISSUES (but please confirm them anyway):
- Mozilla Firefox: it's running as it should.
- IE 6.0/pc: edit: this has been somewhat corrected, thanks SirNapalm ;) now looks cool in IE
- Opera 8.0: horizontal translation (it's always there, can you tell me why?), some browsing issues
- IE/safari MAC: fixed.

Thanks very much

SirNapalm
05-31-2005, 04:33 PM
hi,

Nice use of images and I love the little peeps at the top :D !

But I don't understand why you didn't go entirely in flash, deriving from the page source all is flash except the nav! Why mess around with CSS when you mainly use flash anyway?

I have been developing CSS for some time and it is hardly posible to get it cross platform and browser compatible without using heaps and heaps of hacks.

And why did you use a png for that bg graphic? just use a .gif and IE will display it too.

Cheers,

acseven
05-31-2005, 05:51 PM
Hi, thanks for the reply.

I wanted to use CSS for 2 reasons, first because I wanted to learn how to use it, and second because it is a lot easier to create a new page with a css layout. I don't want to mess around with my flash files a lot. I made them all dynamic enough so that I wouldn't have to change them every time the content changed.

As for the png, the png files have alpha transparency (not color indexed thansparency), you don't have that in gif files. There is no way you would create the transparencies I have on the page using gif files...

cheers!

SirNapalm
06-01-2005, 07:29 AM
OK!

CSS is always a nice and handy thing to know.

I know gif can't have alpha transparency. But seeing though IE doesn't support png it is in my opinion not a good idea to use it. You can make any image have alpha transparency using CSS though. Of course only the entire image the same transparency level (I doubt this is what you need).

Using a gif I was mainly speaking of the middle bg image. It is (if I am right) four pixels. Two dark ones on opposite corners and then to alpha transparent ones in the other corners. What if that was a gif two with one color and the other two color transparent? The eye 'designs' as well and you can create the illusion of alpha transparency picking the right colors. This would make it look tons better in IE.

Just a thought - could be wrong :D

Cheers,

acseven
06-01-2005, 10:48 AM
Hi again,

In IE I am using a 1x1 sized pic because if I used the 2x2 png the flash movies here only 'clickable' from half to bottom (wierd, but true).

But I will change to a gif with full transparency, you're right, it will look better... At least more similar to what happens in Firefox! I didn't think of that!

thanks!

SirNapalm
06-01-2005, 04:11 PM
hi,

That is weird indeed! Using color transparency gif in IE will look a lot more like what it does in Firefox - so this will be a nice change.

Glad to help!

Cheers,

cxn926
06-01-2005, 04:12 PM
cool site. keep up the good work.

acseven
06-01-2005, 08:04 PM
Thank you all for your fine comments ;)

I have changed the background image to a gif, it looks a lot better in IE now! Thanks! I first tried using a 2x2 gif, but that would make IE slow as snails... I created a 100x100 gif for the background pattern, and it now should hang on just fine.

Thanks SirNapalm for the tip!

edit: the site will have some music clips from the album soon, that is the main thing that is lacking right now ...

Thorrific
06-01-2005, 10:55 PM
Nice site, I would like to hear your music!

acseven
06-01-2005, 11:08 PM
hi!

thank you for your comment, but the music is not mine! :P I only made the site for this musician. The music is good, though!

SirNapalm
06-02-2005, 08:08 AM
Hi again!

Glad to hear that the gif was a solution. I put your site next to each other (IE/Firefox) and the difference is really hardly noticable and definitely better than the one color. IE seems to have problems with tiling tiny background images of 4 px so it is a good solution to use 100 x 100 instead. The image file will be larger but in the end it still runs better. Great work man! :D

Now I don't know if I should also tell you that but while we're at it :D

It would be nice to get rid of the scroll bar in IE - if you don't need it of course.

But again - Great Work Man!

Cheers,

acseven
06-02-2005, 11:05 AM
The 100x100 is ~1kb in size so it's not much of a difference. That is, by the way, the only big problem with png files, they are just too big to use. If you notice, the various sections backgrounds are in flash format, and I did this because I could put a png transparent picture with alpha transparency in flash and export it in swf, that way it would get a lot smaller than the original png.
There should be a better format for the web other than png. :S

I took out the vertical scroll in IE, thanks for the tip ;)

cheers

SirNapalm
06-02-2005, 02:46 PM
hi,

1KB is acceptable :D :D

That is a good idea to 'compress' png's using Flash. Never though of that :cool: ! Thanks for the tip.

Glad the scrollbar in IE is gone.

Great stuff man.

Cheers,

acseven
06-08-2005, 05:38 PM
Hi,

I made one or two updates on the site:
- contacts are now in CSS (mozilla flash has a bug with text inputs with embedded fonts);
- the album section now has audio features... that gave me some cold sweats doing the damn things... You can now hear some clips from the album, if you want (~1mb each, streamed or downloaded ... The client made/wanted them that size).

I think that's about it!

cheers

cghughes
06-08-2005, 06:20 PM
I figured since everyone else is giving you advice on functionality, I'd give you some advice on design, since that's my job.

I liked the pre-page. It has a nice layout to it. The color usage is good, since you don't want to create a color scheme with more than 4 or 5 colors. I'd be careful with your usage of "creative" fonts, as sometimes it is very easy to go overboard with them. Using one typeface for his first name and another for his last name is generally a no-no in the design world. Changing typefaces signals a change in content. So the initial subconcious response is one that separates "beto" from "betuk". But since they go together, you don't want that. Just a thought. The warmth of this page is very nice alltogether though.

Then comes the main page. I was left wondering why there was no more black, as that was a huge filler of the previous page. However, the color scheme was fairly consistent, mostly warm colors. Not exactly the same colors, which some designers would shake their heads at, but I'll ignore that for now.

When the page fully loaded, however, all color schemes were shot out of a cannon when I saw those photoshopped stamps of beto betuk. It really reminded me of all the colors on the CandyLand game board! Don't take this personally man, but those colors were total overkill. Think of some other way to make your site vibrant other than having to blow up your color scheme with a stick of dynamite. The overall feel of the site was warm, so throwing in those other colors completely destroyed some of that feel. It seemed like these pictures served no actual purpose other than the fact that the left side of your page was half empty. Never change your design scheme just to fill up some content on your page. Creatively do something else.

And now I just realized that there is more to your site than I knew. I'm on a G5 PowerMac using Safari as a web-browser, and none of the links on the nav bar work. They work in Firefox, so I had to switch browsers. If I was casually surfing, and not doing a site review, I simply would have thought that the site was still under construction. I would have navigated away and probably never remembered to come back.

That said, the rest of the pages share that same warmth that most people associate in their heads with south america, mexico, or spain. Good choice of overall mood.

Alrighty, nice site man. Please don't take any of this personally. It's all intended to be constructive criticism so that your completed site is much better for it's release. Work on the Safari issue and those CandyLand colors, and you should be good to go!

acseven
06-08-2005, 06:40 PM
Hi!

Well, two things! One, finally someone to help me out with the safari thing (I hope ...), and two, I am aware of mostly everything you criticise, though I am no designer/webdesigner...

Safari issues: from what I was told, in a safari browser the layout was all messed up, but at least it's just some functionality... I don't know why it doesn't work on a mac (either IE or safari), and I can't test it to make it work! If you could check the page code and point something out, I'll be thankful!

Design issues... 1st, I didn't have a lot of time to complete what I wanted to do... Most of my time was spent on flash coding (man, actionscripting can be very though)! Well, future enhancements will replace some of the design...

Ok, The 'wahrolian' influence! Well, the page had basically to be put online, and because of label issues, the site would need to have a strong punch of color... So that's what I came up with, and the client liked it (can't argue with the client :P). But I know that this has to be replaced. The all main page would have to have more functionality, which will have as time will go by.

The black to browns/white clash: the index page was made black and the rest white because I wanted to give it very hard effect when entering the site. Just to get people to pay more attention to everything on the page; I think I was successful, though it could break some designer rules or smtg...

Thank you very much for your comments!
cheers!

cghughes
06-08-2005, 07:35 PM
Good, I'm glad you know why you made those decisions. Some people make mistakes like that unintentionally and don't know any better. But I'm glad you realized and planned those issues before I pointed them out. As long as you did everything with a specific purpose in mind, and if it completes that purpose, then I'm not one to complain :-)

As far as the Safari code...i'm no Safari guru. I just use it to surf because it's faster than others. Judging by the looks of it, are the nav bar and the content in the middle two separate flash movies? If so, there could be a problem with the css of the nav-bar, because the flash buttons in the content movie work fine. Just a guess. How difficult would it be to make the content and nav-bar into one flash movie just for testing purposes? I'd be happy to test it on a mac if you would like to go that route. That is, if nobody else knows what's wrong.

oh, and just to let you know, the b and o of the pre-page have different interior colors than the background. Not a huge deal. Don't know if that was planned or not. Just thought I'd bring it to your attention in case that wasn't your intention.

acseven
06-08-2005, 08:12 PM
Didn't notice the 'b' and 'o' background difference... These laptop screens... It seems almost black here! Thanks, I'll check that out (not right now, I have a lot of work in my hands :S).

The wierd thing about the nav-bar is that they're only <a> links, not flash (css is nice!)... Simple html links... I don't know, maybe someone else comes up with a suggestion.

Thanks again for your time reviewing this site!

cheers

cghughes
06-08-2005, 09:32 PM
That'll do it. So many browsers are so picky about the format of their code. When I wanted to have a nonresizable window with flash centered in the middle, I had to repeat the same thing, except in different manners, for different browsers. There ended up being an individual line of code for each format for each web-browser. So the code was about 3-4 times as long as the standard html generated by flash when you publish.

Now like I said, I'm not a safari guru, so I don't know what changes you will need to make in the css. If nobody else knows, you could always make the nav bar flash. It would be quick and easy, and it would ensure browser compatibility.

acseven
06-08-2005, 09:40 PM
I managed to get this page relatively cross-browser, but not without some glitches... that ie/mac & safari glitch is the worst one I guess...

I'll see what I can do! ;)

cxn926
06-09-2005, 01:27 PM
it looks better now. yay.
trace("Happy");