Site Design...

[nimble-quick]

Hello... I am a graphic designer. All print up until this point. Adapt, or be eaten alive. Anyhow I took on a clients re-design of a web-brochure... I am looking for some feedback... I learned some html... (enough to be dangerous) and with the help of dreamweaver ( i know it is probably frowned down upon in the hardcore world of programming) I designed a site. Oh yeah and a little flash intro, which I thought was pointless, but they wanted.

Any feedback on design, programming, etc. appreciated. Somethings are not working properly and I haven't figured out why YET! and it loads slow and weird. But please take a look if you have a minute and help a designer out!


www.feastivitiescatering.com/Newsite/index.htm

Thanks,

Chad

[DaveSW]

Have I missed the point here? all I see is a neat little graphic saying thanks for visiting...

[nimble-quick]

The site is supposed to open in a pop-up window. It seems to work on the machines I have here. Maybe a popup window is not the best choice. You may have missed the point. I am looking for people to make consructive comments about the site. I don't claim to be an expert at this at all. In fact I know virtually nothing. Thanks for looking though

maybe you have a pop-window blocker on or something.

if so here is the site without it popping.

www.kurlgirl.com/feastivities/intro.htm

[DaveSW]

ahem. Sorry, I get a page not found error on that second link... Maybe I should just go back to bed or something.

If the link works for you I'll ask pyro or someone else to test it. My firewall can sometimes be over protective lol!

[nimble-quick]

I typed the link in wrong!!!! sorry it is one of those days!

http://www.kurlygirl.com/feastivities/intro.htm

It should work now.

Thanks

[DaveSW]

Yes it works now! Perhaps I won't go back to bed after all!

The slow loading bit: I think it must be your server. Who are you hosting with? I suspect server because your first gif was only 4.5kb and that took ages to load... The flash movies been loading for about 4 minutes... On broadband. What's the file size for it?

PS I think I'll have to give in and click skip intro.

[nimble-quick]

the intro is 120K... we have been getting slow load times also... it used to load quick even on dial-up! I can't figure out what happened. It is hosted through hostway.com

...

[DaveSW]

well. Your graphics are a lot better than mine. I admit that's not saying much, but they are probably the best graphics I've seen for months.

:D

So anytime you feel like teaching me how to do better graphics... LOL

Your html is pretty good too. Much better than your average 'new person to html'. Only thing I would say is this. You've used css for your layout. An excellent idea, can't fault it. I'm impressed. However, you would be well advised to get rid of the tables completely, since most of your layout seems to be positioned using divs. Also you can put the positioning into your external style sheet, which I can tell you more about if you like. This saves you downloading the same positioning too many times.

congrats

Dave

[nimble-quick]

Hey... thanks for the input! I am always willing to critique design, whether it is print, web, whatever... so feel free. I will get rid of the tables. I would totally be interested in putting the positioning into the external style sheet. That would be awesome! How was the load time for of the photos? some say lonnnnnnnnnng. But I am not sure what to do about this. making them smaller file size results in poor quality.

Thanks,

Chad

[DaveSW]

I didn't have any trouble with the images once I was in. Broadband. Pretty much instantaneous.

<link href="feast.css" rel="stylesheet" type="text/css">

This is a reference to an external stylesheet.

What we normally do (for old browsers like Netsacpe Navigator 4.7) is use at the top of your external style sheet:

@import url(real.css);


Then we make a new file called real.css, in which we use classes and IDs to identify the divs. Here's a page of a tutorial I'm writing (still under construction which is why the main menu isn't there) on classes

Gotta go for tea (back later)

[nimble-quick]

The navigation is placed in a table, each button is in its own cell (obviously)... to make this not in a table I would put every button in it's own layer? Is that a solution? would it be a better solution to do that?

Thanks for your help. really! I have been racking my brain trying to figure out who to ask these types of questions to.

-chad

[DaveSW]

hmm

would have helped if I'd pasted that link...

http://www.webdevfaqs.com/css/classid.htm


LOL

Anyway, emm, let me examine how you've made that menu and I'll get back to you. In the meantime you might like to look at this page: http://www.webdevfaqs.com/css.php#menu

There's some neat tricks for menu css at the bottom. (if you want to help out and redesign the graphics for them ... LOL Just Kidding!)

I'll get back to you in a sec

[DaveSW]

Right I've examined how you've actually made those things:

where you have text links that just change color, you can use css. This reduces download time cos it's not an image.

a:link {
color: #009900;
}
a:visited {
color: #009900;
}
a:hover {
color: #009900;
}
a:active {
color: #006600;
}

Note that you can use nigh on any css property you like here - see the www.webdevfaqs.com/css.php#menu page, the links at the bottom.
But to return to your main question, give me 5 minutes to upload one of my current projects and I'll send you the link.

[DaveSW]

Here's a page of one of my current projects. http://www.emdevelopments.co.uk/PPC/ppcconcept/index.htm If you look closely you can see that the side links are text, not images, and use css rollovers. If you follow the stylesheet link at the top, you should find the real stylesheet under the @import rule on that page. (note none of the links work.)

You could use something similar - just make a background image, and use text links. They're better in the long run in case someone with a text browser or some disability runs across your site.

And yes, I know the graphics can't compare with yours :D


EDIT: OK I've got three posts in a row here without one from you. I'll stop now and let you catch up... If you like, you could leave the menu in a table while you learn more about css, and just provide an alternate menu in the red bar at the bottom of the page?

EDIT2: I must be going crazy. That's the second time I've said 'here's a link' and not posted it. LOL

[nimble-quick]

Yes.. I am catching up, while trying to do a few other things also! Thanks... very informative, and believe it or not I do somewhat understand. You instruct well over a forum! thanks.

[DaveSW]

Originally posted by nimble-quick
You instruct well over a forum!
thanks :D

I expected you to pick it up quickly when I saw how well you've picked up html!

Let me know what your other problems are when you're ready. Are you experiencing any trouble with your contact page for instance?

[nimble-quick]

I don't think so... It is a php. file. A friend set that up for me. Is this not a good way to go about it? I like the look... the layout is a bit weird, but that is mainly due to space restrictions, type size and text field area size. I like how it generates the persons name after they submit the info. If there is a less complicated way to do this, or better I am down!

Thanks

[DaveSW]

LOL. I misread the page source actually - couldn't find the form tags. LOL. But yes, PHP is the best way to do it. THE way in fact LOL.

[zaefod]

I noticed in the catering page there is a sort of frame with a scroll bar. The scroll bar is graphical and has been stylized. Was that done with html. I thought you were subject to the default windows scroll bars unless it was flash?? and no I haven't bothered to look at the code yet.

[nimble-quick]

It is a dhtml scroller... I did not ride the code for that. I did not source it. But I think it was on www.dmxzone.com. I made the scroller graphics and then attached the code to it. Do you like the site? any comments on the intro, main site, functionality, load tiimes, look, photos, sucks, cool, butt ugly?

Thanks

[dean_dsgnr]

Nimble,

I like your layout and your ability to pull different technology together to get the results you are looking for. Since you are asking, I have included a few notes for you and hope they are helpful (and maybe I will learn a thing or two in the meantime):

- A marked improvement to the original layout.

- The layout is very Flash-like. And you used Flash for the intro - so I am wondering why you didn't do the entire site in Flash? Not that it does not work as-is.

-The intro is a bit fast-paced (I know the intro is something your client requested).

- The look and feel may be a bit too "techy" for the subject matter - keep the client's clients in mind and what they will be looking for when they come to the site. The photos show a very high-end and elegant product (the catering) and though I think you nailed the high-end, I think the look and feel is more technical/corporate than elegant. This may be just a metter of changing the color scheme and font choice... I don't think you have to change the structure you have built.

- Under "Venues" it would be great if one could see a photo of the venue in question, or link to it. It's a bit static.

- I would center the layout in the browser, and experiment with a background color, or even a subtle background image to add some visual interest to the white area.

- One more thing would be to make both the photo and corresponding recipe "rotate" - that is, everytime you refresh (or visit again) there is a random photo/recipe selected and displayed. You could even have a link to go to a page with all the recipies.

Really great stuff already, though. A good makeover - you should be proud.

Cheers,

Dean

[nimble-quick]

Excellent input and critique! Thanks. The intro is a bit fast paced... I may address this if the client persists. This is one of the deals... no money want the world. So i am not sure If I will slow it down. By just slowing it down will make it longer? I am also extremely new to flash and motion. (a few experiements back in school with film)... I have thought about designing the whole site in flash... but I am not sure how difficult or long it would take. Then the issue of flash and compatibilty and load times etc. Although it takes quite a bit to load as is!

How do you get a site that is all layers centered? and to center in browser windows? can't /couldn't figure that out.

The idea was to let the site let the photography speak and the rest to just subtly support it.

I agree the colors are weird... RED is there company color and they also liked it grey. They wanted a modern, Clean, semi-sterile feel. The only problem is there logo is not that way, in fact I think it needs help to.

The venue question has come up... that is a lot of cordinating on the clients behalf to get photos and then it will be a lot of extra load time...but it would be a nice addition and make it more thourough.

The idea of doing it in flash is tempting... the project was supposed to be done in july, but the clients vacations kept getting in the way! now it is my problem. Drop everything and jump... same old story.

I also had a rotating image on the main page, and venue page but the client did not like it. i may add it anyhow I like it.... is there anyway to get it to work in both IE and NS I could only get it work in IE with layers and in NS it did not work with the layers?

Thanks for the input... totally kicks butt.

Cheers

[DaveSW]

I like the intro fast paced.

Anyway: Centered page:

http://www.infinitypages.com/research/verticalcentereddiv.htm

(example by Pyro, one of the other moderators.)

[DaveSW]

also, if you have your site entirely in Flash you lose a lot of the accessibility you have gained by using css. And your file sizes would be huge. Basically, Flash doesn't like photos. Using photos bumps up the file size a lot. I personally like drawing stuff in flash. Cartoon style images don't use so much memory:

http://www.emdevelopments.co.uk/fly/

(very basic because I did it ages ago LOL)

[dean_dsgnr]

Good points - fast vs. slow - mostly subjective decision, except it gets at my point about the audience and the client.

One of your roles as a designer (the expert to the client) is to make reasoned suggestions to those sorts of decisions based on many factors that you gather when you first interview the client and learn about the goal of the project.

I also agree with the CSS/accessability issues. However, Flash can be made to handle many of those issues as well (font family, font size and color schemes can be dynamically changed by the user if so desired, for example).

Your concerns about browser compatibility when using Flash for the site is a non-issue as you use it already for your intro. The fact is, it is widely used, has great dynamic ability, and there is a place to use it in certain circumstances.

There are ways to manage file size and optimization of both the photos and the .swf, but that is another discussion.

I usually do any drawing or layout in a more robust illustration package like CorelDraw, Illustrator or Freehand and then export to Flash and assemble there. The reason the drawing-type of image works so well in Flash is that they are vector based rather than pixel based. The more pixels the higher the file size. Vector imagery (including text) is pure math to the computer, so it is resolution independant and hence not tied to a file size:scale ratio.

Please note, I just said that it looked like a Flash site, not that you SHOULD use Flash.

There is more, but I must run.

Dean

[nimble-quick]

Dean,

I know you said it looks like a flash site... that was the intent. The idea was to capture the look and feel of how a flash site. It would make sense to have created it in flash but honestly I was very scared to go there, as I know very little and know/knew a little more about html or at least felt more confident that I would be able to find out easier and then implement it.

I did read about flash and server side invludes? Being able to change/update/ these areas. I had acually tossed around the idea of using a flash text scroll area.

How could you optimize photos for flash? I use primarily illustrator to draw with (just though I would add that.

Here is more of my/our work. it is a incomplete website as it sits now but you can see some brand/print work there.

The only section that has anything is the samples section.
This site will be done in flash... I t will be the crash course of flash site development for me.

http://www.nimble-quick.com/html/nimblequick.html

[dean_dsgnr]

I took a peek at your site and those samples are very nice. Lots of good brand work there.

BTW, I am a CorelDraw user since version 3 (on 11 now) primarily for illo/layout tool. I actually do all my web layout in it, then export as a .psd to Photoshop. I drag guides over the image and then "jump" to Image Ready to cut it up. Then I work in Dreamweaver for HTML/CF stuff (the developer I work with actually works for Macromedia, though I myself do not have any stock holdings with them). If I am doing a Flash site, I export as a .swf from Corel and assemble in Flash.

Most of the sites I do are hybrid technology, much like yours, FYI.

Optimization - I primarily use the save for web feature in Photoshop for optimization. The trick is to experiment with the settings, I use the "2-up" mode so I can see the changes in real time. The other thing you can do is tell the Flash file when to load the images for upcoming scenes using action script, or do a preloader (you have seen these I'm sure) which are not too annoying.

You can take a look at some of our work at http://www.webdevign.com but I'll also throw in the caveat that the site is in a bit of a development phase.

By the way, on the pacing of the intro, I wonder if you slow it down a bit AND cut some of the scenes down a bit, if that would make an improvement. Then again, your deadline...

You might try a plain old JavaScript for the rotating image rather than the DHTML layers route (this does pose browser issues). One way around it is to make a statement about browser compatibility to users ("this site requires 6+ browsers and the Flash 6 plugin") but you are then ignoring DaveSW's very good point's about backwards comp./accessibility issues.

And one more thing, the photos do speak for themselves - they are superb. Who took them?

Dean