Working on new site...advice?

[cwright]

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

I edited my PSD file to merge as many layers as possible, turned most buttons into HTML text rather than images, and then compressed my content images with JPEG-Medium instead of PNG-24. The resulting html folder was significantly smaller (1.7mb v. 4.5mb). I don't like the text buttons showing up as different fonts in different browsers but it's worth the annoyance for it to load faster. The problem now is that on the drop-down menu on the left side, the buttons rollover states don't match up exactly with the normal state. I'm not sure what caused this, but I'll keep messing with it.

Here's the new site (no design changes yet, just working on optimizing it first).

The old site is still online here

Does the new one load faster for everyone?

 

[cperkins]

For the menu that comes up when you rollover events, you are using a layerset menu with hybrid buttons.

Why not just use a single text layer in Photoshop for that menu? Make a text paragraph and enter each menu item on its own line. Put hte -menu hint on the text layer. You'll set the rollover state in the "Text Buttons" UI pane (instead of having -rollover layers). You can set your white background color on the menu in the Text Buttons pane. That'll give you the simplest thing for that menu.

Chris
http://www.medialab.com/sitegrinder

 

[ChrisA]

One thing that annoys me with these kinds of sites, all done with graphic is the text, when yo change the font size only the "real text" changes size and of course it never fits in the space the web designer intended for it to fit.

While viewing the page try a few option "+" and option "-". Notice that the site ony "works" for one font size. Also, the site does not react to resizing the window. This is all vary esy to get right it you'd simple use "plain old HTML" becasue the user's browser will figure it out.

 

[angelwatt]

Does the new one load faster for everyone?

Yup, the new design seems to load about 60-70% faster than the older for myself. Glad you finding help from the SiteGrinder fellow. One note, on the left navigation for Events on the sub-menu, when you mouse over the sub-menu the text seems to change to black text with a white shadow, or something, which is very hard to read. Just wanted to make sure you realized this.

As for font showing up differently in different browsers/operating systems. If you do a search for common web fonts you can try to make sure all browsers will show them the same, or t least close to the same, if that is important to you.

To help make the logo feel "more at home" you might want to find a way to incorporate its purple into the rest of the design in some way.

 

[cwright]

SITE UPDATE (old URLs are still working for comparison)

Changes:
– merged the categories menu on the left side into a single drop-down menu at the top, and used text menus instead of images.
– added a purple gradient behind main navigation to correspond with the logo, and changed rollover states
– expanded text boxes on portfolio tagline and project info window so text will flow when font size is increased (info text becomes a scroll window)
– changed font to verdana, which should be installed on all mac/pc computers

For the menu that comes up when you rollover events, you are using a layerset menu with hybrid buttons.

Why not just use a single text layer in Photoshop for that menu? Make a text paragraph and enter each menu item on its own line. Put hte -menu hint on the text layer. You'll set the rollover state in the "Text Buttons" UI pane (instead of having -rollover layers). You can set your white background color on the menu in the Text Buttons pane. That'll give you the simplest thing for that menu.

Chris
http://www.medialab.com/sitegrinder

Thanks, I didn't think about that before. I reworked the menu and it works much better. Saved alot of disk space too on the HTML build.

I have another question for you, if you don't mind...

Under the DVD artwork, I have a menu with popups that show the disc art and dvd menu. I added a third button to link to a video clip. I'd like to have the clip show up and play on rollover just like the other buttons. But the video will disappear if the user moves their cursor.

Before, I solved this by making the video clip button link to another page with the clip on it, and then added a "back" button on that page. While that worked, it caused two problems: I had to differentiate the video button to make it clear that you had to click it, rather than roll over, and it forced me to have two separate pages for a single project, which I'd like to avoid.

Hopefully I explained that clearly. Do you know any way to make this work?

For everyone else... How's the site doing now on load times/usability/design? Any comments on the changes made would be appreciated!

 

[angelwatt]

Definitely loading quicker. Some comments

• The "select a project" at the top doesn't look like it would be interactable, it looks like plain text.
• It is not apparent what the "web" and "video" links under the navigation are for.
• Not sure how it would look, but you may want to try adding a footer section, even if it doesn't have anything in it. Feels like to bottom is just hanging there, but again I'm not sure how it would look with a footer.
• Another idea, just to throw it out there, is to change the background color of the DVD cover and info area to something light, maybe light purple, or possibly change the page's background color and leave the DVD cover area with the white background.

Those last two items are just ideas to think about.

 

[ChicoWeb]

SITE UPDATE (old URLs are still working for comparison)

....

That loads a ton faster! Thanks cperkins for chiming in! Seems like a great WYSIWYG editor for CSS and valid XHTML.

 

[cwright]

yet another UPDATE

Changes:
– made 'select a project' look more like a button
– integrated sub-menu for WORK into the main navigation (eventually, the SERVICES page will have a similar sub-menu)
– added all preview popup images under the 'select a project' menu
– added video clip button that links to another page and back for the quicktime video (couldn't figure out how to do this as a popup)

(error–on the video page, the 'back' button also triggers a popup for one of the DVD cover previews thats supposed to be in the 'select a project' menu. I'll get this fixed.)

Questions:
– after adding all the preview popups in the 'select a project' menu, is that causing the site to load slower?
– what do you think about having a separate page for the video clip? I like that because it lets me put the clip within the same design, but having to click for the video and then click 'back' to have the menu reappear could be confusing to the user (I had to remove the 'select a project' menu on the video clip page because it would not open on top of the video clip). The only other option I can think of is to have the video button open the clip in a new window, and I'd like to avoid that if I can.
– any last comments on the overall design/navigation?

I think I've almost got this page ready to go, but I need to make sure everything works well before I add all the other pages. Once I'm sure it's done I'll go away for a while and add the rest of the content


edit – 500th post!

 

[angelwatt]

Good progress. It is loading a little slower again now, but not horribly bad. Slowness is probably partly from the submenu previews. I think it is better having the clip on a separate page too. For your issue of having the movie appear on top of the select a project menu (on the clip page), if you can modify the CSS for the submenu you can try adding z-index:2; for the menu. Though not certain it will work.

Changes are looking good. One change I noticed though, in the select a project menu it use to change the color/background color of the items as you passed over them, but no longer. I think the old way worked better.

Another thing, with the previews that pop-up in that select a project menu they blend in with the DVD dover image sometimes. If you gave the pop-up preview a thicker border or something that would help it stand out. Alternatively you could do like you did on the clip page and have the faded DVD dover image, but that may be a hassle to implement. Another alternative is to place the previews at a different spot on the page, maybe to the left of the DVD cover.

 

[cwright]

Good progress. It is loading a little slower again now, but not horribly bad. Slowness is probably partly from the submenu previews. I think it is better having the clip on a separate page too. For your issue of having the movie appear on top of the select a project menu (on the clip page), if you can modify the CSS for the submenu you can try adding z-index:2; for the menu. Though not certain it will work.

Interesting. I can open the pages in Dreamweaver to edit the code, so I might be able to mess with that sometime. As for it loading more slowly... I'm sure it has to do with the thumbnail images of each DVD cover in the drop-down menu. They're already compressed at JPEG-Medium (and I think JPEG-LOW looks pretty crappy), but maybe I'll try to make the dimensions a bit smaller to save space.

Changes are looking good. One change I noticed though, in the select a project menu it use to change the color/background color of the items as you passed over them, but no longer. I think the old way worked better.

This was just a mistake. For some reason SiteGrinder forgot my default settings for the text menus and didn't output the rollover states in that build. I've got it fixed now.

Another thing, with the previews that pop-up in that select a project menu they blend in with the DVD dover image sometimes. If you gave the pop-up preview a thicker border or something that would help it stand out. Alternatively you could do like you did on the clip page and have the faded DVD dover image, but that may be a hassle to implement. Another alternative is to place the previews at a different spot on the page, maybe to the left of the DVD cover.

I've considered trying to add the semitransparent white background to the thumbnail images too, but I always figured it would be pretty complicated and make the images take up just that much more space. I might try it anyway though. It would be best if I could make the white part appear just as an HTML element filled with color, rather than a graphic... but I don't think that's possible while still retaining transparency.

Thanks for all the help! I'll try to fix up some of these last issues and post another update, and hopefully see if its loading faster then.

 

[cwright]

Ok, I built 3 different versions of the site–encoding the popups at JPEG-MED and JPEG-LOW, and then one without the popups altogether–to see how much the popup images are affecting the load times.

JPEG-MED
HTML folder size: 1.8mb

JPEG-LOW
HTML folder size: 1.6mb

No Popups
HTML folder size: 1,008kb

So the popup images are certainly the cause of the slowdown. However there wasn't as much of a difference in file size between JPEG-MED and JPEG-LOW as I expected, and when testing the sites myself, they both seemed to load at about the same speed.

One thing I did notice is that SiteGrinder is making multiple copies of the popup images, and not re-using them on every page. In my HTML folder I have 4 image folders (so far):
1) sg_piratesofpenzance_media
2) sg_piratesofpenzanceqt_media
3) sg_services_media
4) sg_work_media

Folders 1 and 3 both have copies of every single popup image (even though that popup menu doesn't appear on the Services page!). I'm a little worried now that when I add 30+ more pages for each portfolio entry that I will have lots more unnecessary copies of those images, causing a very significant slowdown.

Not sure what to do about that... But let me know if you notice any speed difference between those 3 links.

Thanks!

 

[angelwatt]

JPEG-MED
HTML folder size: 1.8mb

JPEG-LOW
HTML folder size: 1.6mb

No Popups
HTML folder size: 1,008kb

My load times are approximately 12, 10, and 6 seconds respectively. Pretty much the same ratio as you see the file sizes. Not having used SiteGrinder I'm not sure what else can be done about duplicate files. I suggest going through its preferences and help files to see if you can find ways to resolve that and squeeze out some more speed.

 

[cwright]

I hate to revive this thread after so long, but I thought I might be able to get someone to test the site for me again.

I'm now hosting with Dreamhost, which is significantly faster than .Mac was (especially when streaming videos). All events and weddings pages are finished and online, and all of the videos for those pages are up as well.

events pages and weddings pages

Since they're hosted in two different directories, the links between the two sets of pages aren't active yet, but those will be added when all the pages are done.

Again, I'm mainly interested in how fast it's loading for everyone (if anyone has a 56k connection I'd be curious to know how it loads there, too). Also are the videos streaming properly and loading fast enough to play without skipping?

Thanks!

 

[cperkins]

One thing I did notice is that SiteGrinder is making multiple copies of the popup images, and not re-using them on every page.

If an image repeats across the site, SiteGrinder will make every reference on all the pages use just that one image. SiteGrinder is an aggressive optimizer.

But, the caveat is that the image must be unique. If your image is using semi-transparency, like drop-shadows, anti-aliasing, feathering etc. then it will be pre-composited to the background behind it. Thus, you may have one popup layer appear on two different pages, a green page and a red page, let's say. You'll need two different graphics for this: popup composited on red. popup composited on blue.

And, this is doubly true for JPEGs. GIF doesn't support semi-transparency, but it does have a difference for opaque for transparent. JPEGs must be composited across the full rect.

So, for your popup layers, if you want to use JPEG and don't want them to be repeated you should make sure the popup is perfectly square and that there is no anti-aliasing, feathering, shadows, etc. Be careful of Photoshops rectangular shape tool - it is usually anti-aliased. If you use GIF, you can just make sure your shape has no AA or feather or other semi-transparent effects and you'll be ok - even if the shape isn't rectangular.

Also, JPEG is a good compression for photos. But GIF is generally much better for all the other sorts of graphics.


Hope this helps,

Chris Perkins
http://www.medialab.com/sitegrinder

 

[tsd]

How cool is this?
It's like Steve Jobs or Wozniak chiming in on a Mac support forum! SiteGrinder has jumped up a few notches in my opinion!

 

[Zac.ice9]

Try Flash

This is probably outside of your expertise....

But, if I were you, I would just export the thing into Flash CS3, and have at it from there. Granted, I dont know your level of expertise in Flash... but the new CS3 suite from Adobe is really nice.

Your loading time would be exponentially faster... most def.


As for the design. I like the way it looks... but you def. need to speed it up. I cant even image what dial-up, or mobile web peeps would do with your site.


I deigned my latest site in Photoshop as well... then exported it to Flash.
You can see it here:
http://www.henrypenix.com/

And before I get shunned for an all flash site.... it has a script to auto-redirect non-flash useres to our blog, found here:
http://www.henrypenix.com/blog