We can agree to disagree on some points (-;
Pure CSS/html will always be initially faster than any html&images on initial page load
- I agree and demonstrate that in my samples
I think you'll find a fairer comparison at the revised
http://sbrenjoy.bizland.com/sample/
(done from your
http://www.fpplus.com/order/Product/CssMenu/Compareboth.htm)
Of course the initial load time is longer for the ~ 45B html/image navigation vs. the ~ 15 KB of just css/html in the main page, and
you can see the delay in initial page load of the images.
But after that precache, on broadband, I see no difference in page load speed for either version menu system on the subsequent pages
of just menus
To me, user performance, cross browser and platform, is the primary guide
(the new version CSS links do work in NN4.79, but the appearance changes significantly)
- my time is the secondary consideration, if the client wants a universal approach or richer appearance, and the ability to maintain
the site in FP
I don't agree about the total time to create or edit your CSS menus from scratch, vs. interactive buttons menus from scratch
- the custom ones I created to match your css look was just 2 plain solid color 150x17 gifs (2 states, not 3 states) in less than a
minute total (.pngs are only required if you want to generate .jpgs), and another minute to edit the XML (if I has chosen an
existing interactive button, 0 time required)
- and I suspect I have to click and type the same entries for your CSS menu maker vs. FP interactive buttons to initially generate
the menu
- once you create the first interactive button on a page (say <1 minute), the others are just copy/paste and then double click each
to change button text and hyperlink for each different one, and save the page
- for editing, double click an interactive button, select a new image from the std ones and click Ok, gives me a new button image
and look (yes, I have to do it lets say 30 times, but what does that take, maybe 2 minutes total)
The first time a user generates an Interactive button (or creates a custom button) there is a learning curve (as w/ any feature),
but there after that you can pop them out pretty fast (especially if you already have an array of "free" button images, or use plain
solid color blocks (as in your css). Plus you can create much richer buttons than you can w/ CSS cell background color, and the
entire area is a hyperlink - not just the text (which w/ an image can also be any font - not just a web safe font), plus FP
generates the alt text and final images for ADA compliance
You'll find all the std interactive buttons in .gif format are much <1KB, and even the larger more elaborate .pngs end up being
saved as decent sized .jpgs (compared to the much larger images traditionally used in themes)
Your CSS menu maker is a valid approach for many users or situations, and my original and continued goal in this thread has been to
provide the users a quantitative comparison measure (so they can compare an select) which approach to use.
As you can tell, I did not use link bars and themes because that introduces much larger variables in the comparison (and I feel the
Interactive buttons have added a new dimension to FP2003)
PS
Thanks for the nice comment on my KB article
| The bottom line is that CSS based menus are faster and it is easier to
| change the attributes of the menu, eg, background color, etc. CLBMM was born
| out of necessity on our own web site, as our FP Custom Link Bars grew larger
| the page display time also grew substanually thus we developed CLBMM. The
| page that you copied was not created by CLBMM as stated above our web site
| needed something different so we manually created some CSS based link menus
| but soon decided that we needed a tool to convert our FP Custom Link Bars to
| CSS base menus and CLBMM was born.
|
| As for the refresh, a refresh does not re-download the image if it is
| present in the cache. It will send a request to see if there is a newer
| image, provided your using IE's default setting. I believe the same is true
| of NS 6 and greater.
|
| To your points:
|
| 1. Sure if the image is optimized then the download will be smaller, but it
| still does not remove the need to open the file, render the image on the
| page, and close the file. Also, is your point here to say that Interactive
| Buttons are optimized versus Theme buttons? I don't believe they are. BTW,
| if you want a custom Interactive Button like that used in a theme then
| you'll need to create the button images (6 images) and support files, e.g.
|
http://support.microsoft.com/default.aspx?scid=kb;en-us;555010 I just
| noticed that you're the author of this article, very nicely done. But you
| still have a bit of work ahead of you that is not required by CSS based
| buttons / menus that are produced by CLBMM.
|
| 2. But that is on a single button by button case,e.g. , if you wish to
| change the font for all the buttons in an IB navigation system you must
| modify each button individually, your page would require 30 such
| interactions. In the case of the menu you produced,
|
http://sbrenjoy.bizland.com/sample/Include_Images.htm , to change the
| background color of the buttons one would have to create the base images (6
| images), copy and modify the ibutton.xml file to reference the new buttons
| and their attributes, then replace all 30 Interactive Buttons.
|
| 3. I don't have an example but I'll see if I can create one and post it.
|
| 4. Okay but the effects are the same.
|
| 5. Possible. As stated above not all menus on our site were accomplished
| with CLBMM I know that page was not as it was one of the first pages
| converted to CSS menus.
|
| I only have one thing else to say "What's your time worth?"
|
| --
| Mike -- FrontPage MVP '97-'02
|
http://www.websunlimited.com
| FrontPage Add-ins Since '97 2003 / 2002 / 2000 Compatible
| ----------------------------------------------------------------------------
| --------------------
| If you think I'm doing a good job, let MS know at (e-mail address removed)
|
| | > Good points, but IMHO it's still a general Web Design issue the web
| developer needs to make trade offs on (just like users need to
| > be aware of the pitfalls of using JAVA Hoovers)
| > And yes often the "generic" stuff FP uses from themes can be unwieldy,
| > - that's why I chose the New FP2003 Interactive Buttons as a comparison
| basis so users could have some quantitative information upon
| > which to make their choice
| >
| > And w/ all the bandwidth multiple channel feed issues of the internet, for
| a page that small it's almost impossible to compare
| > subsequent load times
| > As for using a Refresh, that negates the benefits of image caching, so of
| course there will be a 3x factor (same times as initial
| > load)
| >
| > To your points
| >
| > 1) All depends on the source of the button images
| > - most theme buttons are not optimized at all and are very large
| > But even the "ugly' buttons from a theme in your demo page at
|
http://www.fpplus.com/order/Product/CssMenu/Compareboth.htm only adds
| > ~ 15 kb of images to the page (if I get a chance I will convert it to
| Interactive Buttons to look exactly like your CSS ones)
| > 2) Interactive button changes are just several clicks to change
| > - if there is an existing button to select it's 1 double click and select
| a new image 9for each) the save the page (much longer if
| > you have to create your own custom buttons)
| > 3) Don't necessarily agree
| > - if you create custom IB you can create exactly the effect you have
| (offset text), plus a 3rd state
| > 4) Did that () just to keep the links consistent
| > 5) I just saved
http://www.websunlimited.com/order/Include_roducts.htm in
| FP (which probably added the <tbody> tags
| >
| > I just opened
http://www.websunlimited.com/order/Include_Products.htm in
| NN4.79 and got no links
| > Whereas in
|
http://www.websunlimited.com/order/Product/CssMenu/ProductCSSMenu.htm
| > the links do work but selecting 1st one takes me to
|
http://www.websunlimited.com/order/features_and_benefits.htm (which does not
| > work)
| > - so my comments on NN compatibility is solely based on your main site
| page
| >
| > I agree that stopping support for older browsers is way past due
| > (now if we could just get all the clowns insisting on open source in govt
| agencies to upgrade to at least NN6)
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| >
http://www.net-sites.com/sitebuilder/newsgroups.asp
| > _____________________________________________
| >
| >
| | > | Hi Stefan,
| > |
| > | First I agree with your analysis based upon download volume but I have
| an
| > | exception in that it is missing a vital piece of information, the
| rendering
| > | of the graphic images that make up the link bar. Even if the image
| files
| > | are preloaded, they must be rendered on the screen which is a time
| consuming
| > | process. Also, it does not take into account that the image files must
| be
| > | opened and closed from the disk media. Even with my high speed video
| card
| > | with 256 mb there is a very noticeable difference in the rendering of
| the
| > | two menus. View them both then do a refresh the CSS menu are at least
| three
| > | times faster.
| > |
| > | Second, CSS menu links are downward compatible with NS 4.x. The page in
| your
| > | example has another problem that is not related to our product (see
| notes).
| > | If you view the page at
| > |
http://www.websunlimited.com/order/Product/CssMenu/ProductCSSMenu.htm in
| NS
| > | 4.x you'll see that the links are fully functional even though the menu
| does
| > | display a little differently in NS 4.x.
| > |
| > | While on the subject of NS 4.x it is my view that web designers should
| > | follow the lead of the major web sites, e.g.,
http://www.espn.com, and
| stop
| > | designing for NS 4.x compatibility. The percentage of visitors that
| utilize
| > | NS 4.x is so small that it does not justify the effort required to
| support
| > | it. Instead direct and help those visitors that continue to utilize it.
| The
| > | next versions (2) are "FREE" and will run on older systems, so what is
| the
| > | problem? Answer, web designers. ;>)
| > |
| > | Notes:
| > | 1. One of the major purposes of CSS Link Bar Menu Maker (CLBMM) is
| replace
| > | Custom Link Bars that use images. The image files are normally much
| larger
| > | that those created with Interactive Buttons.
| > |
| > | 2. Interactive buttons have to be created one at a time. If you need to
| > | change the background color of the button then you'll have to reproduce
| the
| > | entire set of buttons again.
| > |
| > | 3. There are affects that you can achieve with CSS Link Bar menus that
| you
| > | can not with FP Interactive buttons.
| > |
| > | 4. The use of a <base target="_blank" > can affect NS 4.7 as shown in
| your
| > | example.
| > |
| > | 5. The CSS table that you sourced was not authored by CLBMM. We have
| never
| > | utilized the <tbody> tag that is included in your example.
| > |
| > |
| > | An aside, I've created the page
| > |
http://www.fpplus.com/order/Product/CssMenu/Compareboth.htm so that you
| can
| > | see the two menus side by side. This is not an exercise in making the
| menus
| > | look the same, which is very easy to do, but to show that there is a
| speed
| > | difference using CSS over the FP Custom Link Bar produced with images.
| Also,
| > | it must be noted that the FP Custom Link Bar has the advantage on the
| page
| > | as it is first in the top to bottom stream of HTML.
| > |
| > | --
| > | Mike -- FrontPage MVP '97-'02
| > |
http://www.websunlimited.com
| > | FrontPage Add-ins Since '97 2003 / 2002 / 2000 Compatible
| >
| | --------------------------------------------------------------------------
| --
| > | --------------------
| > | If you think I'm doing a good job, let MS know at (e-mail address removed)
| > |
| > |
| > |
| > |
| > |
| > |
| > | | > | > Mike
| > | >
| > | > What you say about using pure Html/CSS vs. Html/Images (w/ image
| preloads)
| > | for any navigation is Fair and true,
| > | > But it is a problem and trade off in all HTML web design, not just FP
| > | > (since adding multiple images for different states will be always
| generate
| > | larger downloads)
| > | >
| > | > For your sample page (main page plus 29 links),
| > | > - if you replace your sample nav bar (on the left) w/ 2 state images
| using
| > | FP2003 Interactive Buttons
| > | >
| > | > The initial page to preload all the images will be an ~320% total
| larger
| > | download (15KB vs. 50KB),
| > | > But the penalty is only about 21% (or 3KB) for all remaining pages,
| since
| > | the preloaded images are cached and not reloaded again
| > | > - so the "net" penalty of using 2 state Images vs. CSS is only about
| 30%
| > | (~4KB) for all 30 pages
| > | > For a comparison see
http://sbrenjoy.bizland.com/sample/ and the 2
| linked
| > | pages
| > | >
| > | > The up side is the Images & Hyperlinks will work in all browsers
| > | > (w/ only the rollover effects lost in NN4.7x),
| > | > But w/ CSS (using the styles in your template) in NN4.7x you not only
| lose
| > | the rollovers,
| > | > but All Hyperlinks are lost (and it definitely causes NN4.7x some
| "pain"
| > | in loading the page)
| > | > (I also suspect that may be the case in MAC browsers)
| > | >
| > | > CSS is a valid approach as an alternative to Images for navigation,
| but
| > | users should also be aware of the relative size comparisons
| > | > and potential consequences (like loss of navigation in some browsers
| due
| > | to lack or CSS support)
| > | >
| > | > --
| > | >
| > | > _____________________________________________
| > | > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > | > "Warning - Using the F1 Key will not break anything!" (-;
| > | > To find the best Newsgroup for FrontPage support see:
| > | >
http://www.net-sites.com/sitebuilder/newsgroups.asp
| > | > _____________________________________________
| > | >
| > | >
| > | | > | > | Hi Joe Cool,
| > | > |
| > | > | FP link bars using images are extremely slow. You may wish to take a
| > | look at
| > | > | J-Bots CSS Link Bar Maker
| > | > |
http://www.websunlimited.com/order/Product/CssMenu/css_menu.htm
| > | > | --
| > | > | Mike -- FrontPage MVP '97-'02
| > | > |
http://www.websunlimited.com
| > | > | FrontPage Add-ins Since '97 2003 / 2002 / 2000 Compatible
| > | >
| > |
| | --------------------------------------------------------------------------
| > | --
| > | > | --------------------
| > | > | If you think I'm doing a good job, let MS know at
| (e-mail address removed)
| > | > |
| > | > |
| > | > | | > | > | > I've created a new linkbar in a shared border.
| > | > | > I've "added links" by browsing for the htm files.
| > | > | > The buttons are titled with the file names (service_new.htm)
| rather
| > | than
| > | > | the
| > | > | > cosmetic Page Propery Name (Services). When using a default
| linkbar
| > | the
| > | > | > buttons show the Page Property name of the file.
| > | > | > Any thoughts on how to get these custom links to display the
| cosmetic
| > | file
| > | > | > name.
| > | > | >
| > | > | > MB
| > | > | >
| > | > | >
| > | > |
| > | > |
| > | >
| > | >
| > |
| > |
| >
| >
|
|
