Hello again, I've had a few days to play around some options regarding the scroll speed of a website redesign I'm working on, and wanted to post some findings. The story so far: the site design has 4 main elements: a university toolbar, a navigation menu, the page contents, and a background image. 3 of the 4 elements were placed using "position: fixed;" with only the content scrolling. The contents and menu were 10% translucent, and elements overlapped on the screen for aesthetic effect. The problem: on older computers (i.e. my 5-year-old Toshiba Portege tablet), using browsers such as Netscape 8 or Opera 9, the site scrolls so slowly as to be unuable. So I'm looking for ways to have that not be the case. What I've done: This link shows the original condition (article picked because it's a long page with form elements, which seems to be a hard thing to scroll smoothly)
http://benedikt.knowlton.ohio-state.edu/default.asp?content=59 I created a series of pages that begin with only the content block, and slowly adds elements back into the mix to see when the slowdown starts happening. All tests were performed on the aforementioned Toshiba tablet PC, Windows XP Tablet PC Edition, connecting via Verizon's EVDO card, browsing in Opera 9.10. Minimal condition: Step 1 - http://benedikt.knowlton.ohio-state.edu/default-fast1.asp?content=59 This page deleted the background image <div> entirely, and emptied the university toolbar and navigation elements (but left the empty <div>'s in place). The content block is the only <div> remaining in its original condition, and it has been set to fully opaque. Not surprisingly, this page scrolls immediately. University toolbar: Step 2 - http://benedikt.knowlton.ohio-state.edu/default-fast2.asp?content=59 This page adds the university toolbar. The site slows down -slightly-, but is still acceptable IMO. Step 2a - http://benedikt.knowlton.ohio-state.edu/default-fast2a.asp?content=59 This page swaps the CSS styling on the toolbar to "position: absolute;" to allow the toolbar to scroll with the content. Scroll speed seems to improve to the same as from step 1. Design-wise, I'm happy losing the university toolbar if it means the site scrolls faster. Minor adjustment: Step 3a - http://benedikt.knowlton.ohio-state.edu/default-fast3a.asp?content=59 This page adds in some source code that shouldn't make it to the rendered page - essentially taking care of special content cases that exist elsewhere on the site. No change in scroll speed is noted. Menu div: Step 4a - http://benedikt.knowlton.ohio-state.edu/default-fast4a.asp?content=59 Here things get interesting. This page adds an h2 element to the menu <div>, but not the actual navigation menu itself. The h2 is styled via the "hideme" class to get the label off the screen, but still visible to screen readers like JAWS. With only this label in the menu div, the site does start scrolling more slowly. It's still acceptable, but ominous that just adding text to this div causes such a slowdown. Step 4b - http://benedikt.knowlton.ohio-state.edu/default-fast4b.asp?content=59 The first appearance of the menu items themselves, and things get really ugly. Scroll performance drops so much as to become (IMO) unusable. The menu in this page is an old-school images with JS rollovers affair - which may have something to do with the problem...I think. I did, however, bump the content to the right on this and subsequent pages so that the content doesn't slide over the menu, so there's no overlap. Step 4c - http://benedikt.knowlton.ohio-state.edu/default-fast4c.asp?content=59 This swaps to a more modern CSS-styled-text menu. While the CSS needs to be tweaked (the words in the menu seem to get cropped), I believe everything should pass the validators. Unfortunately, this doesn't result in any speed improvement - things on this page are as slow as they were in version 4b above. So, it doesn't appear that the -images- in the menu are the cause of the problem; which makes a certain sense given the degradation when I put just the <h2> element into this <div>. Step 4d - http://benedikt.knowlton.ohio-state.edu/default-fast4d.asp?content=59 This page is identical to version 4b above (old school image/rollover menu), but with the overlap between content and menu restored. There is still no translucency on the content. The scroll speed between versions 4b and 4d seems to be roughly the same - both unacceptable, but the overlap doesn't seem to slow things down much. Step 4e - http://benedikt.knowlton.ohio-state.edu/default-fast4e.asp?content=59 Working from version 4d above, this re-introduces the translucency from the original condition. Scroll speeds decrease yet again (I'd describe this speed as "glacial" personally). So the overlapping translucency is definitely a complicating factor. Step 4f - http://benedikt.knowlton.ohio-state.edu/default-fast4f.asp?content=59 Now we swap back to the text-based menu, thinking that with the overlapping and translucency in play there may be a benefit to scrolling over text rather than images. If there is a benefit, its minimal - scroll speeds are still far, far too slow. -=- So, this is where I'm at. Based on the above series of tests, it seems that the biggest problem occurs when there is -something- on the page that doesn't scroll. The content <div> itself is fine. Ask it to scroll over a fixed university toolbar, and things slow down a tad. Ask it to scroll "over" an offscreen <h2> element, and things slow down more. Put an actual menu on the screen (not overlapping, fully opaque), and scroll speed plummets. Overlapping the (opaque) content and menu doesn't seem to add to the problem. Throw translucency into the mix and you might as well wait for printed text to scroll. At this point I'm not sure what my compensation strategy should be - I haven't even begun to worry about the background images yet. My gut feeling is that the translucency is going to have to be ditched, the content can't overlap the menu, and the menu - while it may not be possible as text for branding reasons, could at least have the images as backgrounds in the CSS with text moved off-screen? As a comparison with other browsers on the same Toshiba, the "original condition" link above scrolls reasonably well in IE7. FF2 is very slow (but FF2 on that computer is strangely slow on much of the Internet, I'm not sure why). Running it through the checks above, it does seem to perform better with the text menus than the image menus, and over all pages is generally faster than Opera is. I'm going to conduct more testing, but I wanted to send these notes out as I'd heard from a few that they were interested in what I found. Comments and suggestions as welcome, as always. Many, many thanks to the people here who have helped with suggestions and other feedback. Matt [EMAIL PROTECTED] -- Matt Bernhardt, [EMAIL PROTECTED] Webmaster + Fab Lab Coordinator Knowlton School of Architecture The Ohio State University ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
