Pull up the source for their top navigation (<div id=“nav”>). It appears that there are normal <li> elements with <a>s and text in it, but when the page is rendered, the text clearly does not appear; the user only sees the nav image.
They can’t be doing a display: none, right? – otherwise, the <a> (and therefore, the menu) would never be clickable.
My question is: how is it possible to have a normal, unordered list with text in it, but only render the background image like on qn5.com?
Unfortunately, their CSS source is minified, which is almost impossible to read and comprehend.
They give text-indent:-9999px on the anchor (“#nav li a.root”) to move the text off the screen, that way it will work in different scenarios of CSS on/off and images on/off
Ahhh! That’s much easier than I thought it would be. Thank you!
Another question: I noticed that when qn5 is rendered, it displays (i.e. appears) in the web browser ALL at once. Other CSS layouts, on the other hand, sometimes load in “chunks.” Does this have anything to do with the way the CSS/HTML is ordered/written? Or is it simply because they have a fast server?
First I want to comment on the negative text indent: it’s popular but there’s one important thing to be careful with it: people who have CSS on but images off (esp blocking them for faster surfing) get a mystery space menu, which suck. This page is a nice rundown of different ways people have tried to tackle the problem (and my favourite to use is either just an image tag with alt text (except it’s harder to have :hover/:focus/:active versions) or Gilder-Levin near the bottom) and what the pros and cons are of each: http://www.mezzoblue.com/tests/revised-image-replacement/
Keyboarders/laptop users are definitely getting teh suck with that menu… you can’t tell where you are as you tab through the page. This is because someone removed the normally default “outline” that you see dotting focussed elements. When a negative text indent is used, you’ll see the outline… stretching to the right of the page (it tries to encompass the text that’s offscreen) and looks terrible, so people remove it. Always try to have :hover/:focus styles so everyone gets something good from it.
Re loading in chunks: it may well be server speed. If a page is built in delicate, multiple or nested tables then often you see stuff re-arrange itself as each table finishes loading (if you don’t have table-layout: fixed on your table then often the user agent waits til the whole table is loaded before trying to render it). Some pages have Apache set to manage load when there are lots of media like videos, and may try to have them load in a certain order and in Firefox you’ll see that images who aren’t loaded do not take up space… only after the image gets loaded does FF add the space in, so you may see parts of a page adjust position in FF as images and objects load. Also FF normally tries to load two files at a time (unless you turn off Keep-Alive), Opera is willing to call 8 at a time, and IE is always stuck at 2 no matter what. This might also affect page load of some types of pages cross-browser.
Okay half of that is coming out my butt and the other half is true but maybe not the reason you see pages loading a certain way as I can’t be sure what in particular you’re seeing. : )
We inherit some global CSS styles for the navigation, but the navigation-specific code might help you out.
As for the speed, I try to use “sprites” when possible (and when I have time to create them.) To continue with the navigation example, this is the image we use for all our navigation links: http://qn5.com/assets/images/nav_bg.png
So instead of making 25 http calls to the server for each link image and hover/selected states, we make 1 call and load up everything at once. Hope this points you in the right direction.
Thanks for visiting our site! If you have an account with us, post in our forum and say hi. And listen to our music when working. It’ll make your day go about 100x faster
Going a bit OT here but maybe you would like to check your XHTML and CSS: 105 Errors, 31 warning(s) for the xhtml and 71 errors and 307 warnings (the last ones are the typical color warnings so you can skip those lol)
Google.com and Facebook.com homepages have around 45 errors each — and display much less content. It doesn’t seem to stop people from using their sites
I know where you’re coming from (as I was once a validator snob), but I’d MUCH rather spend my time on the end goal: shipping sites that work. I haven’t run into much problems in that regard.
I’d be more likely to nag you about the keyboard-unfriendliness… the reset you mention is likely where the focus outline got removed, since most of the popular resets out there do that (with a snarky comment saying “don’t forget to put it back in” that everyone ignores).
As a laptop user I can’t tell where the heck I am with my cursor as I tab through the menu or the page… I have to rely on looking at the little bar at the bottom of my browser.
Oh and now I see that javascript is required to get the Artists to drop down. Way to slam the door in my face : (
Since you’re using sprites, it ought to be easy enough to add the :focus statement to every place you have :hover. Then outline can remain safely gone (well, except for IE but I expect IE users to be used to the inaccessibility of that browser).
Facebook is NOT a good example of code. They are built out of a steaming pile of script-ridden gar-bage. It even thinks one of my browsers is a mobile phone and sends me to some wap page. Facebook is popular not because it works for everyone or is well-written but because it works for many people and they like the idea of a site suggesting people as friends whom they haven’t seen since childhood and have no obvious connection to them which is downright creepy (but also strokes the ego as well).
Felgall stated that if a page or app doesn’t work for many people that the site will lose popularity as people tell their friends etc. Facebook is proof that this isn’t true. But, I do hope that Facebook tries to act more like Amazon, who DOES do usability studies and DOES make everything work like a website should (and yeah they also have spaghetti-ness in their code and validation errors… so I do agree it’s more awesome to have a site WORK than be 100% error-free).
No need to get antsy… i was just trying to give you a heads up. And i’m no snob, much less a validator snob. If standards isn’t your thing, that’s fine by me.
Didn’t mean to imply that you were being a snob. I was referring to my former self with the “validator snob” comment. I know you were just trying to give me a heads up and I appreciate it.
Anyway, I just came here to share our un-minified code since the OP was talking about our site.
Thank you!
I have to remind that one lol