Need some advice about creating clickable rollover graphics

Beyond Photoshop...

[abrodski]

Hello everyone!

Finally, I finished studying Photoshop CS4 Standard basics. Thanks God.
I'm a webmaster and web developer using CMS (therefore I don't need Adobe Dreamweaver).
I want to work as a freelancer web developer/designer to create sites for small companies etc. So my goal is that and NOT to be specifically a designer.
I want to keep it simple and to know an easy and painless way to create a CLICKABLE rollover graphics (JS based)for the web (buttons etc). I'm talking about graphics in headers, articles and banners.
I already know how to create rollovers with JS and it works fine on my web site (with A.Jolie picture).
But to make it manually is somewhat inconvinient and time consuming.
So I want to find a better and quicker way.
I do have also Fireworks CS5.
I know how to create layer comps in PS and I know slicing.
I also use a script to export small graphic files out of a composition
in which I have 2 types of buttons that I created with Styles palette and placed on 2 different states in layer comps window.
I also know how to make URLs with slice options...
The only thing I know about Fireworks is how to create a clickable hotspot in Image Map (without rollovers). Then I save it as .html file, open it in notepad and copy-paste a relevant part of HTML code into my CMS. And without rollovers it actually works on my live site.
But here I have an issue...In order to insert a graphics in site's header (say, if I use Artisteer) I need to choose a GRAPHIC file, and NOT .html file or a code. It might be a silly question, but without HTML code attached, just a plain regular graphic file , could it be clickable at all?
So I can seriosly learn Fireworks now. But I don't know if its worth it if my only goal is what I described above.
Could you tell me how it should be done in Fireworks if its simple enough to grasp. If not...what should I do now?

Thanks in advance!

[rocknbil]

I already know how to create rollovers with JS and it works fine on my web site

You're making it far more difficult than it has to be. Second, if JS is disabled, your rollovers won't work. There is a much easier way. See response in this thread [webmasterworld.com] Use CSS for your rollovers, Javascript not required.

[abrodski]

That code means nothing to me. I don't have an idea what to do with it, where to place, etc. Seems that learning FW would be easier, 'cos I have a feeling that its not gonna be too easy anyway.
Why FW and JS aren't good?

[Demaestro]

abro,

The problem you face is that you need to learn some basic CSS, Javascript and HTML before you use tools that allow you to create sites that use these things.

Fireworks is great, but it's HTML, CSS and other rendered code is bloated, not SEO'ible, and sites that they create are hard to have to look good across many different browsers.

What happens when FW or DW automated code won't do what you want? Trust me it happens a lot with those tools because they can only do a "best guess" they can't produce good code without you going into the back-end and tweaking it.

If you have no knowledge of HTML, CSS, and JS then you will be pulling your hair out trying to get FW to do what you want.

It uses image slices for crying out loud. I know that may not mean anything to you but it is ugly personified.

If you are serious about creating, updating, and maintaining websites then you have to have at least a basic understanding of these things.

[rocknbil]

I don't have an idea what to do with it, where to place, etc. Seems that learning FW would be easier, 'cos I have a feeling that its not gonna be too easy anyway.

Trust me, it's **way** easier. Every time you create a Javascript mouseover, you have to add images to your JS arrays, or bloat up your code with inline javascript which makes it harder to maintain. Using the example of the structure of the image in that other thread, it has another advantage. Both your mouse on/mouse off states have to load two images instead of one.

And it all falls down if Javascript is not available. Your documents will be more semantically corect, easier to maintain, and easier to expand. Combining the ideas in that other thread, you have something like this.

<doctype [use whatever doctype you like]>
<html>
<head>
<style type="text/css">
/* Your CSS styles go here */
</style>
</head>
<body>
<ul id="navigation">
<li><a id="home" href="/">Home</a></li>
<li><a id="about" href="/about.html">About us</a></li>
<li><a id="contact" href="/contact.html">Contact</a></li>
</ul>

<h1> Page head</h1>
<p>Page content</p>
</body>
</html>

Compare that with the junk FW or DW spits out . . . you can't deny the clarity of the difference. :-)

[abrodski]

I don't plan to be a coder and frankly I just want to know enough about CSS and HTML to make some minor adjustments here and there.
So let me ask you this. What's the difference for me as a business person and for my client who has no clue about anything related to web development whether the code is clean or not so clean? If it works-it works, if it doesn't-it doesn't. Well, in latter case, I doubt that FW and DW would've been so popular. So it DOES work! And if it does...
Nowadays Internet is fast and PCs are powerful, so I don't see a problem here. I'm not here after perfection, but after sites that work and clients that pay.

[buckworks]

sites that work and clients that pay

Please tell us your criteria for deciding whether a site "works".

[abrodski]

Go to my site, forum or gallery and show me a SINGLE thing that doesn't work.
Criteria is very simple one...If you don't get 404's or some weird error messages and everything works as planned.

[buckworks]

don't get 404's or some weird error messages

That's a start. Where all do you check for error messages?

Everything works as planned

- On which browsers?
- At which screen sizes?
- At which connection speeds?
- For disabled users?
- For search engines?

- What about ongoing site maintenance, especially if someone besides yourself needs to tweak something?

[buckworks]

BTW, we don't do site reviews here, but I viewed the site in your profile, and counted nine broken graphics symbols near the bottom of the home page.

[rocknbil]

What's the difference for me as a business person and for my client who has no clue about anything related to web development whether the code is clean or not so clean?

Well, being defensive when there are those trying to help you is not going to help you do this:

I want to work as a freelancer web developer/designer to create sites for small companies etc.

The freelancers competing against you will be more than happy to point out the hows and why's of why they can improve on what you've done. As for your clients not having a clue, of course they don't - but these same competitors will use what they don't know against you to steal your clients. You will need to have a correct answer - not a justification - for everything that is asked of you.

It's not about "clean code." It's about building it the most efficient way, fastest loading, cross browser compatible, and leaving as few "Achilles heels" in your designs for competitors to use against you. It's about making the content accessibile to all, which relates to your original question.

I'm not here after perfection, but after sites that work and clients that pay.

I've been in this industry for over 17 years, and 100% freelancing for 8. There are millions of competitors out there who will do this work for a song and a dance, and just as many clients willing to exploit them. So how do you stand out amongst the ocean of people competing against you? You add value to your work by doing it right, taking the pains to learn why one thing is superior over another, by accepting new ideas and seeing their value.

You asked for advice on doing rollovers, I really don't know how else to answer, rollovers with automated code and Javascript is really the hard and inefficient way to do it, there really is no other correct answer.

Do not take this as a judgment on your site (I haven't even looked,) but once you get over the initial shock, spend some time looking around on this site. Read the lists, read the reasoning. You will learn more about what you need to know here, and on WebmasterWorld, than any other web resources.

WPTS [webpagesthatsuck.com]

[edited by: rocknbil at 4:52 pm (utc) on Sep 12, 2010]

[caribguy]

Tunnel vision always surprises me. A bunch of senior members chime in here to give intelligent comments and a solution to a very novice question. And their answer is met with arrogance and contempt.

I did not make it past the header image that obscures part of your menu and content text.

What's the difference for me as a business person and for my client who has no clue about anything related to web development whether the code is clean or not so clean?

Logic fallacy. It's the difference between an amateur hack and a professional. Don't underestimate your (potential) clients - they may have friends, colleagues, etc who immediately see that difference and will tell them about it. What will you do when a client turns around and demands that you fix the problem?

[abrodski]

As I wrote in my private message, those broken graphics were there only because I didn't see them in Mozilla FF for some strange reason, and in IE8 they do show. But they were there only because I use my live site as a testing ground for my graphic studies of PS and FW. Already removed those...So its not a site's bug...But I'm glad people noticed that!
I use Woopra as a paid customer and I know exactly who is my site's visitors. Their IPs, screen resolutions, OS's, browsers etc.
And I don't have bots (except for Googlebot) because Woopra is smart to know who is who. So I had about 150 people from all over the world visited my site in last couple of months and pretty much noone complained about anything.
Also you forget the MOST important thing here...is the UNIQUENESS and VALUE of the information that site brings to its visitors. After all, THAT'S the reason why people go online. Not to look at nice graphics and to make sure the code is clean. Show me ONE more site similar to mine. WHERE you can find THAT sort of info?
I don't care about disabled users...I'm not a God. I can't make them healthier. If someone is not healthy enough to visit my site, then they shouldn't. There're millions of others.
Every day I get organic Google visitors...And I don't do ANYTHING now to promote the site, SEO or Adwords and such....
I myself has a pretty low connection speed because I live in the middle of nowhere in Sweden, and here I use mobile broadband to connect. So I'm lucky if I get 40 KB per sec speed. And the site loads fine. Well, considering is that my host is pretty much the world's best one (US based)...and I pay good money for hosting.
I optimized my site for resolutions of 1024 and higher...I don't care about 800 or 640....We're not in the 90's...
I was talking about a HORIZONTAL size, of course...
Noone tweaks anything at my site. I do updates when I have time...
Also I do backups from time to time...
I don't know why some people tell me my Flash obscures something...
I use Mozilla FF 3.6.9 and IE8 and everything works great (I tried it both on 1280 and 1024 horizontal resolutions and on both 1024 and 800 as vertical. ie 1280x1024 and on 1280x800.
How would I competor stand out...Say here in Sweden and in Copenhagen they charge like up to 80$ an hour and I can charge 2-3 times less and still make a good living.
There's a difference to pay 1000$ or 2,500$ for the pretty much the same thing. Of course, if a client wants to find a better professional and pay MUCH more...that's his choice...I will have to work within my own niche, that's all.
Last, but not least...I came here for an advice and you won't get me into the pointless discussion about nothing.

[buckworks]

You've been getting advice from seasoned professionals and brushing it off because it's not what you want to hear.

So I had about 150 people from all over the world visited my site in last couple of months

That's a start, but wouldn't your site be a lot more use to the world if it had that many visitors every day? Or even every hour?

I don't care about disabled users...I'm not a God. I can't make them healthier. If someone is not healthy enough to visit my site, then they shouldn't.

Deciding to ignore accessibility issues is a major business decision with bad effects that can range from lost traffic to legal hazards. If you're not willing to learn what it takes to ensure accessibility then make sure paying clients know that. Also make sure you're prepared to handle a lawsuit if you get sued because of your omissions. (I am not making this up.)

Did you know that if you throw accessibility out the window you're also throwing out one of the most powerful ways to improve your site's SEO?

for the pretty much the same thing

Don't be too quick to assume it's the same thing.

[abrodski]

And if there REALLY would be an issue I wouldn't be able to resolve and the client would insist on solving it, I will simply outsource it to some coder or programmer in Ukraine (I speak Russian myself) and I will resolve an issue with a minimum of expense.
Don't take me here for a complete idiot, please!
I got my first certificate in PCs in 1990.
Also remember that my site is a political-business project, not just a portfolio site.
Use Google Translate and see my potential competitors hourly rates in Danish Kronor (DKK) in Copenhagen. 5 DKK is about 1 US$. Well, I will still have to resolve a language issue, but that's a different story.
At least, pretty much everyone here speaks English.
What I was thinking though...maybe I shouldn't use Flash at all if it shows badly in some cases...I noticed that lots of sites nowadays, even the major ones in Baltic countries (won't name them because you use animated GIFs instead of Flash in headers, banners and such...And suprisingly, it doesn't look too bad!

[abrodski]

too bad you don't have here an edit button...I was writing that I won't name them because of your policy here... NOT related to the rest of the sentence about animated GIFs. Sorry.

[abrodski]

I only get that much visitors because I do NOTHING to promote my site.
I simply don't have the time for this, because I study and do some other things. Promotion is a keyword here in my opinion (plus unique and useful content).
Laws vary from country to country...Don't assume that people everywhere is so obsessed about this whole disability issue like in the US.
Say, here in Sweden the laws are pretty liberal. And in places like Eastern Bloc and such, people don't even know about it. And I won't target US/Canadian market anyway. Plus, how someone in the US can sue me if I live across the ocean because my site is not to his liking?
Also I myself wear glasses and I don't a good vision, but my site is fine for me.
And I don't understand the connection between SEO and accessability.

[buckworks]

like in the US

I'm not from the US.

Accessibility is a growing concern in many countries, and even if you think it doesn't affect you today, you'd be smart to prepare for when it does.

the connection between SEO and accessability

Search engine spiders could be thought of as the world's largest blind users.

If you design your site so it would make good sense and come across well to someone accessing it with an audible browser reader, that will almost automatically help the search engine spiders make better sense of it too.

The old hands around here will advise that it's wise to avoid being too dependent on free search engine traffic, but even so we'll gladly take it when we can get it. Taking care with accessibility is definitely Something That Helps.

[abrodski]

I know you're not from the US, you're from MB...I used to live for a few months in Winnipeg-Winterpeg. You use Safari on Mac...Interesting coincidence, your IP starts with Winnipeg's tel. code...
I'll try Safari 5 on my W7...To see how my site would look...
I know in Canada all this accessability issues are important...Stupid Multi-Kulti and some other stuff, I didn't really like.
Let's just say, I enjoyed more being in the US while living illegally, than in Canada living legally. And that alone should tell enough :-)

[abrodski]

Safari 5 is pretty fast-faster than even FF. But my site looks FINE in it! Everything works like a swiss clock, even without any manual coding.

[rocknbil]

I just had a look. Don't you see the irony in these statements,

.is the UNIQUENESS and VALUE of the information that site brings to its visitors.
.
.
I don't care about disabled users

and the content of your site? They are the ones who would benefit from this content most.

You'll come around, best of luck.

[phranque]

I optimized my site for resolutions of 1024 and higher...I don't care about 800 or 640....We're not in the 90's...

let's talk about recent technology for a minute.

almost any netbook with a less than 9" screen will have a horizontal resolution of 800 or less.
most of these are barely old enough to get dusty yet.
my droid wasn't even available this time last year.
that's 480x854.
on some days i hit more sites with that than my laptop.
3 months ago, the best iphone available had a 480x320 resolution.
as was mentioned previously, there are many who love their 1600 horizontal resolution monitor - so they can display two windows side-by side.
that would be 800 pixels each.

if you want to talk about the 90's, first time i looked at a web site it was probably on a 19" ibm CRT.
it was at least 1280x1024 but weighed over 50 lbs.

[abrodski]

I was talking about an AVERAGE user...0,5% of the population won't make a noticable difference. Also it depends on what's your TARGET audience.
Tecno forum-its one thing, but asylum-seekers' community and resource-is a totally different story.
Speaking of CRT's...I really preffer them. Too bad that they kinda disappeared.
Generally speaking, I don't think you can make any web site optimized for just everyone. You'd have to find some compromise. Those people who preffer to use smaller devices should be aware of what they have to lose. Also, frankly, I don't understand WHY to use a smaller screen devices if you can use a regular ones?

[Demaestro]

I don't think you can make any web site optimized for just everyone.

Challenge accepted!

I take pride in the fact that I can and do make my sites optimized for everyone.

You'd have to find some compromise.

Well maybe you would but that is the difference between a professional and a hobbyist.

I don't understand WHY to use a smaller screen devices if you can use a regular ones

They are called iPhones, Blackberries, and so on. Do you really believe that someone in a mall or in their car is using their laptop when they have a smart phone at their finger tips?

You may not understand why, but the fact is TONS of people use their smart phones to look at websites. I will even use my phone instead of my laptop in my kitchen to look up a recipe.

I don't understand why people eat McDonalds but they do. I would never tell someone not to build a McDonalds for the reason that I don't understand why people would buy it.

Accept the fact that you don't understand (your words) and move on rather than saying you don't understand then arguing with the people who do.

[caribguy]

Spot on. The biggest mistake I've ever made as a webmaster was building a site the way I would like it to work.

A smart web developer knows not to assume anything about how (or even why) visitors will use their site. If you build a widely accessible site, you create something that is beneficial to the widest possible audience, and in the end most beneficial to you or your client.

@abrodsky: just imagine that the person who gives out IT related refugee grants at the UN decides to visit your site one day on his 320x480 device. Whoops, once in a lifetime opportunity missed...

[phranque]

oh!
your site is for refugees?
would a refugee be more likely to be sitting at a desk in front of a high resolution monitor?
or using a mobile device?
mobility for refugees - probably not a consideration, am i right?
=8)

[abrodski]

A friendly home for those just getting started. Have you noticed that?

Well maybe you would but that is the difference between a professional and a hobbyist.
When people ask for my advice in refugee matters, I simply...help.
I don't tell anybody how smart and professional I am and how amateurish is the person who's asking his questions.

Out of respect to this forum I'm not gonna tell here what I want to...Some people here are PROFESSIONAL a$...les, that's for sure.
The idea of this forum is to HELP, and not humiliate. And that's WAY more important than anything, as far as I'm concerned. Where are the moderators, I wonder? On MY forum, noone would be disrespectful. And I have a moral and legal right to do my designs as I please.
If someone wants to help me-fine, if not...
As per UNHCR missed project...I'll take my chances.
And as per mobile devices...I don't understand the fuss here. My site works on mobile devices same as other sites. I don't have a WAP version of my site, but most sites don't too...
And like I said before, I have Woopra and I know exactly your resolutions. And NOONE in last few days visited my site by using mobile devices. And in general, almost noone goes to my site with resolution smaller than 1024x768.
And if for a client that 0,5% of his online business worth paying twice as much for creating his web site, then he's more than welcome NOT to be my customer. Right now I only get about 250 bucks PER MONTH from the Crown here, so pretty much ANYTHING would be a lot of money for me :-) If I stay in the area, like I said, if the language won't be a problem, then I'm not too worried, considering that in Copenhagen they charge 55-80$ as an hourly rate.
But let me ask you, the original question was clickable roll overs...
How its connected to screen resolutions and my prefessionalism and a career?

[Demaestro]

A friendly home for those just getting started. Have you noticed that?

I have and it is.

When people ask for my advice in refugee matters, I simply...help.

I don't tell anybody how smart and professional I am and how amateurish is the person who's asking his questions.

And people here were quick to help you, if you look at the start of the thread you have experts in their field taking time to help you with your problem and you threw it in their face.

So yes thee tone here has changed but it isn't because this is an unfriendly place, it is because you asked for help then questioned the merits of the help offered.

If you take the time you will see your question was answered but I didn't see a thank-you.

[abrodski]

When I ask for help, that does NOT automatically put me in a position of a beggar or someone inferior. Also I don't have an obligation to automatically follow advices that I was given. Moreover, I asked about one thing and got replies that were in my opinion irrelevant. If you want to buy Volvo and a salesperson tries to convince you that Ford is fine, how would you feel?
I want to use graphical applications because I'm not into handcoding everything from scratch.
And you probably should see an eye doctor because you really have a problem seeing clear things. Just re-read the last sentence of my 1st post here and the last sentence of your last post here and compare them.