Clean Progressive Enhancement

Question

I am using progressive enhancement to build a website. This includes menu, slideshow, etc. The items are included in the page as unordered lists, then JavaScript applies the formatting.

My concern: how can I avoid the flash of unformatted content, where the unordered lists are visible before the formatting is applied? Are there best practices for this?

Important: the site must remain SEO friendly and accessible (this is why I am using progressive enhancement in the first place). So for example it is out of question to set the initial style of the unordered lists to display:none.

Are you actually seeing a flash of unstyled content or are you just assuming you are going to see one? — Matijs, Jun 11 '11 at 09:29
Completely missed the bit about JavaScript applying the formatting… don't do that, that's not progressive enhancement. Use CSS for styling, then add JavaScript for behavior. — Matijs, Jun 11 '11 at 09:32
Well...both. I actually see it in some cases, depending on the browser (e.g. Firefox), the content (e.g. images), or when the formatting is applied (e.g. document.ready). — Christophe, Jun 11 '11 at 09:33
z-index might be your friend. Give the unstyled content z-index:0;. Give the page normal background z-index:1;. Then, with JavaScript, give the now-styled content z-index:2;. This has worked for me and and I don't notice any change in rank. — Pete Wilson, Jun 11 '11 at 10:14

score 2 · Answer 1 · answered Jun 11 '11 at 09:27

2

Use CSS for formatting instead of JavaScript.

answered Jun 11 '11 at 09:27

Oswald

31,254
3
43
68

But how would you do that, for a slideshow or content slider for example? As I said in my question, "display:none" doesn't fit the bill. – Christophe Jun 11 '11 at 09:45
Transfer only one image with the original response. Provide links to the next and the previous slide. Use JavaScript to replace the links with XmlHttpRequest calls. – Oswald Jun 11 '11 at 14:44
Well, that's actually what I try to avoid (cf. my point about SEO and accessibility). – Christophe Jun 11 '11 at 15:53
1

Especially SEO and accessibility benefit from the approach I described: the site can be used without CSS and JavaScript. Clients that understand CSS get a better looking version. Clients that understand JavaScript get more interactivity. That's what Progressive Enhancement is all about. You can replace the prev- and next-links with any fancy navigation you desire. – Oswald Jun 11 '11 at 18:12
My understanding is that search engines will only see the first image (or first html content) of the slideshow/slider. They are not going to see the other slides because those will be loaded later via AJAX. Best case, they'll find the previous and next slides behind the navigation. – Christophe Jun 12 '11 at 04:16
Such a bad signal-to-noise ratio answer. At least provide some context-specific insight instead of shooting generic truths from the hip. The scenario described in the OP clearly states a need where formatting is behaviour-dependent so Javascript plays a significant role in influencing what formatting gets applied. The poster also clearly expressed that he had already understood fundaments like this, so there's no need for platitudes. – Tommi Forsström May 07 '13 at 21:33

score 1 · Accepted Answer · answered Jun 11 '11 at 10:47

1

So for example it is out of question to set the initial style of the unordered lists to display:none.

You can indirectly cause the style to get set to display: none when you detect JavaScript is available by using CSS and some script run before any of the content is included:

<head>
    <style type="text/css">
        body.withjs #menu { display: none; }
    </style>
</head>
<body>
    <script type="text/javascript">
        document.body.className= 'withjs';
        window.onload= function() {
            ...do stuff with menu...
            document.getElementById('menu').style.display= 'block';
        };
    </script>
    ...
    <ul id="menu">
        ...
    </ul>
</body>

answered Jun 11 '11 at 10:47

bobince

528,062
107
651
834

I like that! Side question: what do you think of other hiding techniques, like visibility hidden or left -9999px, rather than display none? Or using z-index, as suggested by Pete Wilson? – Christophe Jun 12 '11 at 04:25
It doesn't make any difference in terms of accessibility or SEO. Using positioning or z-index is typically done to work around other problems with display or visibility, in particular when the content contains plugins which interact badly with hiding. – bobince Jun 12 '11 at 10:03
1

@Christophe, @bobince I think there is a difference in the hiding methods, but it depends who or what you are optimising for. I'm really not sure it would affect SEO too much but it really depends on what the SE's build into their algo, however it is known that `display:none` & `visibility hidden` may not be the best method for accessibility for Assisted Technology users: for that I'd prefer the `text-indent` method or `clip`.. [further reading with more links](http://www.webmasterworld.com/accessibility_usability/4234495.htm) – clairesuzy Jun 13 '11 at 18:08
@clairesuzy Thanks for the comment! I found additional information on the clipping method, it's still not that simple: http://yaccessibilityblog.com/library/css-clip-hidden-content.html – Christophe Jun 14 '11 at 03:27

Clean Progressive Enhancement

2 Answers2