Working on new site...advice?

[cwright]

My first attempt at a website done "right". The last one was a horrible mess of sliced images and hotspots...

LINK

That takes you directly to the portfolio page, and yes it's far from finished. I'm just looking for advice on the overall design (navigation, usability).

I have the main navigation on the right side, and sub navigation in lower case below it. I also have more menu options on the left (this will only be used on the WORK pages) to better organize the content I want to show.

I also have buttons below each DVD cover that roll over to show the disc art and dvd menu, and then a link to a video clip.

My big question is: Is it too busy having buttons on all 3 sides of the image? Will it confuse the end user?

Any other input would be greatly appreciated too.

Thanks!

 

[angelwatt]

div much? Good golly. It took like 20 seconds just to load. That code has frightened me too much to comment at this moment. It's not necessarily bad, I'll just to take another look later.

 

[cwright]

well I actually don't know the code at all... I took the easy way out and am using Photoshop plugin called SiteGrinder which programs it all for me. From what I've read, it writes pretty good code, but I really have no idea what that means.

Which means I also have no idea what "div" means...

Also–it really takes 20 seconds? It takes about 4-5 tops for me (loading from the .Mac server, not my hard drive).

So how would I go about updating the code? Or re-working the site to make it load faster?

 

[Sdashiki]

No, the code is not good. Have you looked at it?

You have 50+ divs in there! And its basically still a "horrible mess of sliced images and hotspots..."

 

[PROJECT359]

well I actually don't know the code at all... I took the easy way out and am using Photoshop plugin called SiteGrinder[/URL

Argh!! WYSIWYG poisoning

Seriously though, you need to get away from applications that build sites for you or at least learn XHTML so that you can clean it up once the app has pumped it out.

Learning to code sites by hand will help keep things clean and tidy for quick loading sites. Apps like this create lots of redundant code that causes slow loading times.

For a quick start, go to [URL="http://w3schools.com"]w3schools then get some books on web page coding to help you learn.

 

[cwright]

I guess I just don't understand why WYSIWYG designing for the web is such a bad thing... to me it seems like having to mess with all that code (which is a foreign language to me) is just overcomplicating everything?

I'm assuming that a "div" tag is just an image slice, but how exactly are images arranged on a page without them? I thought the whole idea was just to use CSS to arrange them properly.

oh well... I guess I'm just not cut out for web design

 

[cwright]

For a quick start, go to w3schools then get some books on web page coding to help you learn.

thanks for the link. I'll check it out, but I know I can't wrap my head around this stuff... I'm a visual person and code just makes no sense to me.

 

[Cabbit]

thanks for the link. I'll check it out, but I know I can't wrap my head around this stuff... I'm a visual person and code just makes no sense to me.

out source the codeing to someone else.

 

[ChicoWeb]

Yah, your site does load slow, seems like .mac isn't the fastest at serving though.

There is nothing wrong with using a WYSIWG editor, I use DW but mostly write xhtml and css by hand with it, but PS on the other hand, who knows To explain it to someone new to web site design, is it's putting a lot of extra unneeded crap in your code, which isn't to SEO friendly or coder 1337. How many people will look at your code? Good question, no one has ever told me they refuse to do business with me because of looking at my code. I keep it clean for my own use and for future use, it's easier to find and make changes.

If you were designing website for a living, I'd say you may want to re-think your approach, but you aren't, it works for a photographer.

With that said, it's pretty bad redundant code, that would load faster if it wasn't so div intense, or if you had a faster server

 

[PROJECT359]

How many people will look at your code?

Other Web designers and potential employers

 

[CanadaRAM]

Chico - I actually did have one person refuse to buy RAM from me because they felt my website code was too 'klunky'. Go figure.

Cwright: I don't like the change in the right hand menu from top level nav (uppercase) to --- ummm, something else and I don't know why it is lower case. It looks like an error at first glance, and there is no visual logic as to why one set is different from the other. There looks like there is a stuck > by Work, unless that is your indicator that this is the page we're on.

The fuse logo should link somewhere
rule: If it looks like a button, it should act like a button.

8 seconds on Firefox Win here, high speed broadband.

 

[ChicoWeb]

Chico - I actually did have one person refuse to buy RAM from me because they felt my website code was too 'klunky'. Go figure.

Cwright: I don't like the change in the right hand menu from top level nav (uppercase) to --- ummm, something else and I don't know why it is lower case. It looks like an error at first glance, and there is no visual logic as to why one set is different from the other. There looks like there is a stuck > by Work, unless that is your indicator that this is the page we're on.

The fuse logo should link somewhere
rule: If it looks like a button, it should act like a button.

8 seconds on Firefox Win here, high speed broadband.

Thats insane. Probably better that way. They would probably have continually complained

Other Web designers and potential employers

Back to 1337n355. But seriously my last website design was with tables (since I started in 02) and I got more calls and inquires with it. I'm really thinking about going back to my old design, though without the tables. Not sure why going to a better, modern, design has caused me to get less inquiries. I know nothing to do w/ topic, but no one cared about my code is my point.

Business is business.

 

[Stampyhead]

Back to 1337n355. But seriously my last website design was with tables (since I started in 02) and I got more calls and inquires with it. I'm really thinking about going back to my old design, though without the tables. Not sure why going to a better, modern, design has caused me to get less inquiries. I know nothing to do w/ topic, but no one cared about my code is my point.

I actually liked your old design just a bit better too. Sorry... Not sure why, though. The new one is good too.

...I'm a visual person and code just makes no sense to me.

I used to be the same way, but I just kept telling myself that if other people could learn it I could too. Now I work as a web developer. It's just like learning a new language. It all looks like Chinese at first, but over time with a lot of work it starts to make more sense.

 

[cwright]

Yah, your site does load slow, seems like .mac isn't the fastest at serving though.

There is nothing wrong with using a WYSIWG editor, I use DW but mostly write xhtml and css by hand with it, but PS on the other hand, who knows To explain it to someone new to web site design, is it's putting a lot of extra unneeded crap in your code, which isn't to SEO friendly or coder 1337. How many people will look at your code? Good question, no one has ever told me they refuse to do business with me because of looking at my code. I keep it clean for my own use and for future use, it's easier to find and make changes.

If you were designing website for a living, I'd say you may want to re-think your approach, but you aren't, it works for a photographer.

With that said, it's pretty bad redundant code, that would load faster if it wasn't so div intense, or if you had a faster server

Thanks for the response. I've looked at your current site before and I really like it. I don't plan on doing lots of web work, although I wouldn't mind doing some small sites on the side (but from the responses I've received so far, that's probably not a good idea). It's good to know that not everyone is going to be overly concerned with the code behind the site, but at the same time I'd like it to be standards-compliant and load quickly. It's also frustrating that the Photoshop plugin doesn't exactly live up to my expectations (as far as the code goes... the design process is very easy with it).

I don't like the change in the right hand menu from top level nav (uppercase) to --- ummm, something else and I don't know why it is lower case. It looks like an error at first glance, and there is no visual logic as to why one set is different from the other. There looks like there is a stuck > by Work, unless that is your indicator that this is the page we're on.

The fuse logo should link somewhere
rule: If it looks like a button, it should act like a button.

The change to lowercase on the right hand menu was meant to indicate that it is a submenu (that only appears once you've clicked on WORK). Maybe I can ditch the lower case idea and come up with something else to differentiate it.

The arrow by WORK is supposed to indicate that its the page you're on. Good to know that's not as clear as I thought it was though. Should I try something else?

And eventually the logo will link back to the main page (probably the ABOUT page).


Well now I don't know what to do. Should I continue working with this site, let SiteGrinder build it, and then try to learn how to clean up the resulting code in Dreamweaver?

Or... Should I start over and try to do something else entirely? Someone mentioned that I outsource the code, but that's just not possible right now as I really don't have a budget for this.

 

[cwright]

I used to be the same way, but I just kept telling myself that if other people could learn it I could too. Now I work as a web developer. It's just like learning a new language. It all looks like Chinese at first, but over time with a lot of work it starts to make more sense.

Haha, somehow I got through school without ever needing to take a foreign language. Pretty sure I'd be awful at that too

But it's good to know that it can be done. Maybe I'll get there someday.

Olathe, KS? I'm in Springfield now for school, but I'm from Lee's Summit, MO. Not far at all...small world.

 

[angelwatt]

well I actually don't know the code at all... I took the easy way out and am using Photoshop plugin called SiteGrinder which programs it all for me. From what I've read, it writes pretty good code, but I really have no idea what that means.

Which means I also have no idea what "div" means...

Also–it really takes 20 seconds? It takes about 4-5 tops for me (loading from the .Mac server, not my hard drive).

So how would I go about updating the code? Or re-working the site to make it load faster?

Well I just timed the load and took 12 seconds, so I exaggerated a little I guess. I went to that SiteGrinder site (which is built with SiteGrinder) and it loaded quickly-like, so your slow load time may be more related to your .Mac server.

Usability: If you view the site with CSS disabled virtually everything disappears including navigation. This is a very serious usability problem. The way SiteGrinder creates it, leaves out semantic tagging (no header tags, etc.). SiteGrinder does not create code with usability in mind as any web designer could tell you after looking at their code. So if usability is important, find a different WYSIWYG. Maybe try Nvu, it does OK. I'm sure others could make suggestions.

Design: I would do more with the styling of the navigation links that make them look more "inviting" as though they are to be clicked. Overall, design looks nice.

I understand you don't want to mess with code, so honestly I'd suggest using a pre-made site template that is setup for what you need. They're out there though don't have any links on me. Some templates may let you add some of your creativity.

 

[cperkins]

Well now I don't know what to do. Should I continue working with this site, let SiteGrinder build it, and then try to learn how to clean up the resulting code in Dreamweaver?

I'm the author of SiteGrinder, so obviously my opinion on this matter may not be objective.

I'd say continue with SiteGrinder. The SiteGrinder output is all valid XHTML 1.1 (you can check it), and it is very tight. SiteGrinder re-uses CSS and graphics across pages automatically, organizes the CSS into shared and individual files, and merges graphics for you when appropriate. It is a viciously good optimizer in that way.

By and large, despite any naysaying that was posted here, the SiteGrinder code is very good. You have a very graphical site with lots of images and you have graphics that appear and disappear on the page as button elements are rolled over. For a page with that specification, the code you are getting from SiteGrinder is pretty much right on the mark.

Certainly, SiteGrinder doesn't support Header tags, and those are desirable, but they are also fairly easy to add downstream.

For usability, more "real" text would be nice. That's a general guide for any page using any tool. SiteGrinder can output any Photoshop text layer as either HTML text or a graphic. As a user, you control that with layer hinting or the anti-alias setting on the text.

If you use a text layer -menu, instead of graphic buttons, SiteGrinder will output the more traditional <ul><li> menu construct for you.

Also, SiteGrinder presumes by default that any images are "design" elements and should not be shown to screen readers, etc. If you have a true content element, put the -img hint on it in SiteGrinder.

If you view the site with CSS disabled virtually everything disappears including navigation.

As just mentioned, SiteGrinder presumes by default that graphic elements are design, not content. As the user he can change that. And SiteGrinder supports the creation of buttons that use both HTML text and graphics, which is also nice in these situations. By default it outputs all the elements in y-x order (top to bottom, left to right), which is usually the correct assumption for the order that things should be appear once the layout is removed. If he really wants to control the order things appear in the HTML, SiteGrinder affords him that as well, though very few users ever delve into it.



I, myself, am a big believer in web standard compliant sites that try to be accessible, usable and flexible. I've worked very hard on SiteGrinder to make it support these issues as much as I can. SiteGrinder 2 has made many improvements on its output over SiteGrinder 1, and SiteGrinder 3 will someday make even more.

Thanks,

Chris Perkins
SiteGrinder Programmer
Media Lab, inc.

 

[angelwatt]

I'm the author of SiteGrinder, so obviously my opinion on this matter may not be objective.

I'd say continue with SiteGrinder. The SiteGrinder output is all valid XHTML 1.1 (you can check it), and it is very tight. ...

By and large, despite any naysaying that was posted here, the SiteGrinder code is very good. ...

Certainly, SiteGrinder doesn't support Header tags, and those are desirable, but they are also fairly easy to add downstream.
...

... SiteGrinder 2 has made many improvements on its output over SiteGrinder 1, and SiteGrinder 3 will someday make even more.
...

Thanks for creating an account here to chime in. I did notice that the code appeared valid (I didn't run a validator, but just looking at the code it seem good there). Though, it's a bit subjective whether the code is "good". Depends on your view. I'm on the semantic web bandwagon, and in that respect the code is far from good. It is nice to hear that the user has some more control than what it appeared though as you explain.

I hope SiteGrinder does continue to improve, and thanks again for taking the time to educate us a little bit about the program. Though a little suspicious that you just happened by this forum topic....

 

[Stampyhead]

Olathe, KS? I'm in Springfield now for school, but I'm from Lee's Summit, MO. Not far at all...small world.

Hey, cool. Lee's Summit is a nice town, I've driven through there a few times on my way to Blue Springs (I have a few clients out there).

 

[wheezy]

I like the look

I like the design, it's simple and clean. The nav is kinda funny though, so I'd rework that so it's either all on the left, or right, or even in the top.

As for SiteGrinder... yeah, pretty darn div happy but hey, if it works, and your site looks the same across browsers, then terrific! I don't think it matters too much how the code looks unless you're a website coder yourself, and

 

[Aranince]

I guess I just don't understand why WYSIWYG designing for the web is such a bad thing... to me it seems like having to mess with all that code (which is a foreign language to me) is just overcomplicating everything?

One would code instead of using WYSIWYG editor because you get prime control over the code so you can follow the web standards and structure your site correctly so it can be viewed in multiple browsers. But WYSIWIG editors are getting better at following the standards.

 

[CoreWeb]

Back to 1337n355. But seriously my last website design was with tables (since I started in 02) and I got more calls and inquires with it. I'm really thinking about going back to my old design, though without the tables. Not sure why going to a better, modern, design has caused me to get less inquiries. I know nothing to do w/ topic, but no one cared about my code is my point.

Business is business.

I actually think tables can be okay - not for everything, but for a few specific things. I'm going to be starting the HTML coding of a website soon, and I'll need to vertically center an image and some text with each other. I've had trouble in the past doing it with CSS, but with tables, I'd just use valign. I'm not sure if I'm going to use tables for these, but I might. I'll see what other ways there are to accomplish this.

As for the design posted, though slow to load, I find it mostly okay. I mostly have a problem with the icon at the upper-left. It doesn't look like it belongs.

 

[cwright]

As for the design posted, though slow to load, I find it mostly okay. I mostly have a problem with the icon at the upper-left. It doesn't look like it belongs.

It was difficult coming up with a good logo placement since it's a circle design, but I thought it looked ok where its at. Why do you think it looks awkward?

Most of the other comments have been about the navigation. I'll see if I can come up with something different/better, but if anyone has any specific ideas I'd love to hear it

No design update yet, but for now the site is at a new URL

I'm the author of SiteGrinder, so obviously my opinion on this matter may not be objective.

I'd say continue with SiteGrinder. The SiteGrinder output is all valid XHTML 1.1 (you can check it), and it is very tight. SiteGrinder re-uses CSS and graphics across pages automatically, organizes the CSS into shared and individual files, and merges graphics for you when appropriate. It is a viciously good optimizer in that way.

Thanks for the reply. It is a little frustrating that I purchased SiteGrinder under the impression that it would produce "good" code, only to find here that most web developers have a different definition of "good".

But I think I'll keep building it with SiteGrinder for now and see if I can't clean it up later in Dreamweaver (probably much later...)

For the time being, is there anything that can be done in SiteGrinder with my current design to reduce the number of div tags and make it load faster?

Yah, your site does load slow, seems like .mac isn't the fastest at serving though.

My .Mac service needs to be renewed in 30 days or so... and I've been wondering if I should drop it and find a faster hosting solution? Do you have any good suggestions there that are in the same price range as .Mac?

It would be a pain having to lose my @mac.com e-mail address though... I hate how they try to lock you into the service like that

 

[ChicoWeb]

My .Mac service needs to be renewed in 30 days or so... and I've been wondering if I should drop it and find a faster hosting solution? Do you have any good suggestions there that are in the same price range as .Mac?

It would be a pain having to lose my @mac.com e-mail address though... I hate how they try to lock you into the service like that

There are a ton of shared hosting providers. I hear dreamhost and media temple a lot. I don't know anymore because we have our own servers

 

[cperkins]

For the time being, is there anything that can be done in SiteGrinder with my current design to reduce the number of div tags and make it load faster?

You get a <div> tag for each graphic element on the page, more or less. That's not quite true because SiteGrinder will automatically merge overlapping non-interactive graphic elements that are common on multiple pages for you and so you'll get just one <div> for all those items. Believe it or not, SiteGrinder is a _very_ good optimizer, it automatically merges and re-uses graphics and CSS for you. Computers are great at these sorts of calculations.

So the question of "reducing divs" is the same as "reducing graphics", much as it would be with any tool, not just SiteGrinder.

As I mentioned before, if you have text layers in Photoshop they can be output by SiteGrinder as either "real" HTML text or a graphic. Right now your site is opting for graphic output. Real HTML text is generally preferable for semantic, SEO, and bandwidth reasons. If you want a Photoshop text layer to be output as HTML text, set its anti-alias to None. That tells SiteGrinder to output is as HTML. Alternately, put the -text hint on that layer.

Also, instead of graphic buttons like you have now, you can make text buttons (just turn off the AA), or just use one multi-lined text layer and put the -menu hint on it. Then SiteGrinder will output a <ul><li> menu construct.

Also, crank down your compression options in the Compression pane. For the default, go with one of the Dithered GIF options. Use JPEG for photos.

In the SiteGrinder Report after it builds it'll tell you how much of the media is shared between pages, what the initial download cost is, what the average page thereafter cost is, etc.

Hope this helps,

Chris