User:Vector Potential/Wikipedia:Reference desk/style change

From Wikipedia, the free encyclopedia

[edit] Reference Desk Style Change

[edit] Summary (completed)

• I'm asking for comments on a new RD header that I hope to implement.
• The header will replace the How to ask and answer header and the RD header template.

Note: This change has already been implemented so a lot of the text below may be outdated. The pages in my userspace that are linked here are already significantly outdated (well, corrupted would be a better word) so don't use them.

I've been working all day on a new template for the reference desk. I must credit fresh for his attempted change a couple of months ago as it inspired this version's layout, although I rewrote virtually all of the layout code behind it. You can check out my version at
User:Froth/notes/Wikipedia:Reference desk

All of the desks have sample content on them so you can see what they would look like. I encourage you to click through several desks and the main RD page to get a feel for the navigation.

This what I see wrong with the current reference desk style, in order of decreasing importance to me:

1. An inconsistent navigation. Users are greeted at WP:RD with one page, but once they click on a reference desk, the layout completely changes. To visit a different desk they may press Back on their browser to reach the familiar WP:RD page, which means that the links across the top of Wikipedia:Reference_desk/How_to_ask_and_answer are wasted space for some users.
2. Aestheic appeal. While the WP:RD page looks fairly good (albiet somewhat inconsistent with other pages on wikipedia), the Wikipedia:Reference_desk/How_to_ask_and_answer page has grown unwieldly. It's a large field of almost solid text with virtually no first-glance formatting to help users become comfortable with the navigation and content.
3. Wasted space. A lot of (non-controversial) guidelines like "Do not double post," "you may copy your question from the Archives into a new section," and "be patient" aren't important enough to be placed in such valuable space. I consider them instruction creep. Also the search box is unnecessary since there's already one prominently placed off to the left in the wikipedia navigation bar.
4. The wiki code of Wikipedia:Reference_desk/How_to_ask_and_answer is an absolute mess. It's full of unnecessary and conflicting code, and it's difficult to maintain. This is an inevitable side-effect of it evolving through the work of multiple people; it's impossible to have that many non-professionals work in such a forgiving language without any structure without ending up with sloppy markup.

Here's a couple of features of the new layout:

1. Intuitivity of navigation. The same header is used on the main greet page as on the reference desks. Once you choose a reference desk there's no need to ever go back to the greet page since the same content is everywhere. On the main greet page a "see also" box appears with links to other help projects such as the Help Desk and the wikipedia help pages. Also the "you may ask a question by clicking here" link becomes "To ask a question, choose a reference desk from the navigation box." This allows the header for the main page to be consistent with the header on the desks. When transcluded onto the desks, the "see also" box is automatically replaced with the table of contents for that desk. This allows some of the table of contents to share space with the header, instead of being entirely below it. And on low-traffic desks, several days of questions' ToC can be contained entirely within the header block, as demonstrated by the sample desks in my userspace. (This last sentence is no longer entirely accurate, see update below)
2. Cleanness of design. The reference desk links no longer have lengthy, unnecessary explanations, and I removed the superfluous instructions under How to ask a question.
   

   

   Someone working through all of this text.
3. Interoperability with existing systems. The entire tree is transcluded into a single header page that can replace the existing RD header transclusion with just two edits: a redirect from Wikipedia:Reference desk/How to ask and answer to Wikipedia:Reference desk/header and a redirect from Wikipedia:Reference_desk/RD_header to Wikipedia:Reference desk/header. This allows the RD bot (if it ever returns!) to do its work without even knowing the difference. The tree of pages can all be easily copied to the WP namespace (all names are in place, just use User:Froth/notes as the root and preserve subpage structure) before making any public changes to the reference desk- this assures a seamless transition. (Note: I just uncovered a couple of pages that still used an older naming scheme, so this point wasn't technically true until a few minutes ago --froth^T 08:02, 19 February 2007 (UTC))
4. Safety of logic. The logic that dynamically displays the current desk name and that detects whether the header is being transcluded by the main RD greet page will still work if the header is being transcluded by a redirect page. Since all page names are drop-in compatible, this means that the WP:RD, WP:RD/C, WP:RD/M shortcuts will still work with no modification.
5. Safety of code. No deprecated tags were used AFAIK, it's all supported CSS2. Also the major layouts are done with very clean divs rather than messy tables.
6. Intuitive maintainability of code. My header is composed of about 10 component pages that are transcluded into a tree. This keeps the usually-cryptic code simple and self explanatory.

• User:Froth/notes/Wikipedia:Reference_desk/header
  • User:Froth/notes/Wikipedia:Reference desk/header/leftside
    • User:Froth/notes/Wikipedia:Reference desk/header/howtoask
    • User:Froth/notes/Wikipedia:Reference desk/header/addnew / User:Froth/notes/rdlayout/header/addnewalt (logic)
    • User:Froth/notes/Wikipedia:Reference desk/header/howtoanswer
  • User:Froth/notes/Wikipedia:Reference desk/header/nav
  • User:Froth/notes/Wikipedia:Reference desk/header/toc
    • User:Froth/notes/Wikipedia:Reference desk/header/otherrd / Table of contents (logic)

(Each desk and the RD greet page would transclude the grandparent User:Froth/notes/Wikipedia:Reference_desk/header)

All of these changes can be implemented by a lot of intuitive moves and one edit. Also an admin needs to replace Wikipedia:Reference desk's

{{Wikipedia:Reference desk/RD header}}

with

{{Wikipedia:Reference desk/header}}

because the page is fully protected.

I have to be honest, I'd rather have just copied everything into the Wikipedia namespace and done the header redirect myself, and hoped nobody noticed, but I wouldn't have been able to change Wikipedia:Reference desk :)

Leave comments and outflowings of praise here!

Regards. --froth^T 05:18, 19 February 2007 (UTC)

[edit] Section summary (completed)

• If you want the text to share horizontal space with the table of contents, the order of the columns of content has to be reversed.
• This is probably worse than before as to the intuitivity of the page but I think it's worth it because my web-designer sensibilities scream at float:right.

Through enough tinkering to give a man of ordinary consititution post-traumatic stress disorder, I've figured out how to get the table of contents to float to the left of the questions. Looks and functions much better this way.

The way I finally got it to work involved relating everything in the page to the right side of the screen, instead of the standard left. Unfortunately this isn't a very clean solution and as the window gets bigger, the left side of the instructions box would inch to the right a few pixels. Not a very elegant solution. Then I realized that by simply reversing the horizontal order of the columns I could do the exact same thing but with positions related to the left side of the screen. I did leave the old layout code in the main header page (but commented out - it's only 5 lines or so because everything's so abstracted) in case anyone has a problem with the navigation being on the left.. personally I feel that it's a bit more confusing with the instructions on the right but the technical benefits outweigh it for me. The problem is that the links in the navigation are left-aligned, leaving unsightly space between the right side of the links and the left side of the How to ask section, especially at higher resolutions. Unfortunately I don't see any way of resolving it.. the only options are right-aligning the text (yet worse) and putting the nav box back on the right of the instructions. It sure would be convenient if everyone hated the idea of a floated table of contents! That would solve it.

I also restructured the way the gaps are placed between areas of the page. By using a few margin parameters I was able to preserve the exact same spacing but give a little bit of room between the table of contents and the text around it. This isn't as clean, but it's the only way of doing it.

So yeah, now the next floats around the table of contents instead of wasting all of that space for just the ToC.

You can see an example of a page with a lot of sections (a long ToC) at User:Froth/notes/Wikipedia:Reference desk/Miscellaneous.

I'm currently working on getting the left column to size absolutely instead of scale with the browser window. If anyone knows how to do this, post at this forum post or leave a message here --froth^T 18:42, 19 February 2007 (UTC)

--froth^T 07:28, 19 February 2007 (UTC)

---

---

i noticed that when navigating to different desks from the sub pages (such as science ref desk to miscellaneous) I would get directed into edit mode rather seeing the next desk. Not sure why that happened but it seems to be a consistent bug. Any chance of having the current desk a different colour as well as being bold? If not easy don't bother since the bold looks pretty good too. i like the simplicity. David D. (Talk) 05:36, 19 February 2007 (UTC)

I just fixed it, as you were typing probably. I had to purge the squid cache on the servers because I had moved some pages. All works now --froth^T 05:41, 19 February 2007 (UTC)

As for the different color, personally I think the bold is plenty distinctive. What other color did you have in mind? It's definately possible. --froth^T 06:05, 19 February 2007 (UTC)

• Bold, I like the fresh and simple, almost nostalgic look. I like anything that trims the size without making it less navigable. Still, I'd like to look and think about it a bit longer. ---Sluzzelin 19:14, 19 February 2007 (UTC)

Yeah, I did try to keep it as simple as possible. My main selling point though I think is the saved vertical space by having the text wrap around the table of contents.. which hope to perfect sometime today by making the left column an absolute size so that people with higher resolutions don't waste space when it's scaled.. have to figure that out though, it's going to be tricky --froth^T 19:56, 19 February 2007 (UTC)

• If it aint Broken, Don't fix it. --Parker007 02:29, 22 February 2007 (UTC)
  • It is broken --froth^T 04:50, 22 February 2007 (UTC)

At User:Froth/notes/Wikipedia:Reference desk/header/nav why is the list of reference desks verticle? Can't it be horizontal like right now? Just wondering? --Parker007 13:56, 22 February 2007 (UTC)

At User:Froth/notes/Wikipedia:Reference desk/header/addnew could you change it to "If you have no problem following these guidelines, you can go ahead and" instead of Click here to ask a new question would better; Because most people that ask questions don't sign which I find the most annoying violation of all the guidlines. My 2 cents. --Parker007 14:06, 22 February 2007 (UTC)

And do you think it is absolutly necessary to include How to Awnser a question. Only "regulars" answer most of the questions. --Parker007 14:29, 22 February 2007 (UTC)

The list of desks is vertical because that's part of the style change. The current addnew link is After reading the above, you may ask a new question by clicking here which is pretty much what you want. Also, yeah I do think it's important to have a few basic "How to answer" guidelines since we do get a lot of traffic and many passers-by like to contribute to answers. By the way, it looks like someone changed the layout about 3 days ago (and I didn't even notice!) so it looked pretty bad on firefox, but it's fixed now. --froth^T 19:42, 22 February 2007 (UTC)

[edit] Table of contents (completed)

Do we really have to have the contents list alongside the questions and answers in the fashion now imposed? It looks both cramped and confusing. Clio the Muse 02:33, 23 February 2007 (UTC)

I agree with Clio. It looks like we're trying to save space or something. --The Dark Side 02:58, 23 February 2007 (UTC)

Would you seriously rather scroll down 3 to 4 entire browser-heights just to get to the questions? I made the left column narrower to make it seem less cramped --froth^T 08:02, 23 February 2007 (UTC)

If you guys really want, I can make the table of contents have vertical space to itself like it was before. Should I do this? --froth^T 08:04, 23 February 2007 (UTC)

OK done, how's it now? --froth^T 08:09, 23 February 2007 (UTC)

Much better-thanks. Clio the Muse 08:51, 23 February 2007 (UTC)

[edit] Errors and content questions (completed)

The new header contains a couple of spelling errors:

• voluneers > volunteers
• concice > concise ( this seems to have been corrected now)

And 2 queries about: "Questions are normally answered on the same page that they are asked".

• (a) Why "normally"? Are they ever answered anywhere else?
• (b) "on the same page that they are asked" is a touch ungrammatical. I’d prefer to say "on the same page on which they were asked". JackofOz 02:36, 23 February 2007 (UTC)

(a) Sometimes the questions are moved to a more relevant desk. --The Dark Side 02:46, 23 February 2007 (UTC)

OK I think I fixed everything. These rules haven't even been looked at for years; check out this diff from just last month! --froth^T 07:59, 23 February 2007 (UTC)

[edit] Technical problems

Gadzooks, this thing is a layout disaster on my screen! How is it supposed to look? For me (firefox-1.5.0.9 x11 on OS X 10.3), top-left begins with links to desks, followed by the TOC, followed by the welcome, each below the next. Seems weird to have TOC in the middle like that. But worse is the Q/A body text itself. It begins at the top immediately adjacent to the links, then continues overlapping the TOC (since the TOC is wider than the linkbox and the text lines up with the linkbox), then the text shifts over to be adjacent to the welcome box in a narrow column (because the welcome box is wide). But if a question has a long line, it jumps (whitespace break) to after the welcome box. I've reported the text-overlap-with-wide-TOC layout problem, but never seen it so dramatically before, or with such a mess propagated to the rest of the display. Is my screen too narrow? It's not that narrow! I have a sideways-scroll, but everything else wraps to fit, and if I scroll there's only blank space off the edge. DMacks 05:58, 23 February 2007 (UTC)

Hm.. well I tested it on IE7 for Vista and firefox 2.0.0.1 and it looks fine, and scales perfectly down to about 450 pixels of screen width before it starts getting weird. Screenshots? --froth^T 07:55, 23 February 2007 (UTC)

Well per suggestions above, I cleared the table of contents so text doesn't flow around it anymore, and also made the "see also" box persistent. Did that help the problem? --froth^T 08:11, 23 February 2007 (UTC)

I seem to get different layouts on different reference desks (?), some of which are downright nauseous. - using latest Firefox.213.48.15.234 12:46, 23 February 2007 (UTC)

Well the code for each desk is exactly the same --froth^T 17:21, 23 February 2007 (UTC)

I'll align with tables instead of floated divs and see how that looks --froth^T 13:50, 23 February 2007 (UTC)

My web designer senses are screaming at me but I redid the layout page with tables instead of floating divs. Looks exactly the same in firefox 2 (which is what I was going for) but there's an extra pixel between the columns in IE7. Does it work on your mac firefox now? --froth^T 17:35, 23 February 2007 (UTC)

[edit] Links to desks

Personally I think the top of the page is not quite right. The 'choose a reference desk' and 'see also' boxes look too big, and the font size of the rules box too small. I think the 'choose a ref desk' bit should stretch across the whole width of the screen, with the 'welcome' box similarly across the whole screen below it. As for the 'see also' box, I think the links need to be explained a bit more. A first-time visitor wouldn't understand what 'village pump' means, for example. Just my 2p. --Richardrj ^{talk email} 09:01, 23 February 2007 (UTC)

Well it looks like the template's not going to replace WP:RD so the description is still there on that page. The links in the header are just additional --froth^T 13:51, 23 February 2007 (UTC)

[edit] Search option

I tried to add a search option but I'm not sure which parameters need to be changed to make it fit into the box. i think this will be a useful reminder to those asking questions that could easilty be answered by reading the appropriate article in wikipedia itself. David D. (Talk) 11:26, 23 February 2007 (UTC)

What about the search option to the left of the page? The "search first" line is pretty clear. That in-page search box messes everything up for me --froth^T 13:48, 23 February 2007 (UTC)

[edit] Desks list

I made the desks list draw in a grey box behind the desk that you're on. Looks very good IMO but it uses some funky negative margins to fit so snug in the nav box. Can someone who was having problems with the earlier layout tell me if this works for them or not? --froth^T 01:14, 24 February 2007 (UTC)

I really don't like that the links from each reference desk to the others now extends so far down the right side of the page. I found it much more convenient to switch from one desk to another when there was a compact two-line menu at the top of the page. Moreover, switching this back would significantly shorten the "footprint" of "How to ask...," which would be quite an improvement. Wareh 21:40, 24 February 2007 (UTC)

Personally I find it easier to find the desk link that I want when they're in a vertical list. You only look at a few letters of a word to determine if it's the one you want, and it's far less eye movement to scan straight down and see "Mathe", "Com", "Lang", "Hum", "Sci" than to scan across and read "Mathematics", "Computing", "Language", "Humanities", "Sci" --froth^T 22:00, 24 February 2007 (UTC)

Well, if it's to stay vertical (which I wish it wouldn't—precisely what is easier for you is more difficult for me, because I have to scroll down now), I'd say, reduce the font size and reduce the spacing; it's an awful lot of additional screen real estate, which does have the effect of increasing the number of inches you have to scroll down to get past the preliminaries. Wareh 01:57, 25 February 2007 (UTC)

Even at 1024x768 with the bookmarks toolbar turned on in firefox, the entire nav pane is visible including the See also section. I'd suggest changing to a higher resolution; you're going to have problems with almost every website if you don't --froth^T 08:03, 25 February 2007 (UTC)

Ok, actually, you're right, I don't have to scroll down to get to another desk. (The "See also" choices, however, are all "below the fold.") Still, the large font and large amount of whitespace make the total vertical length of the "How to ask..." and "After you read..." sections a lot greater than is necessary for any functional end. I'm not going to change it back based on my preferences, but I'd be kind of surprised if a simple A-or-B poll of regular users would support this change. (I'm a regular user who virtually never visits this talk page but was moved to do so by the inconvenient alterations.) Wareh 18:11, 25 February 2007 (UTC)

Hm, can you link to a screenshot of what the RD look like at your resolution? (here's one at mine) The main problem that I see with horizontally-oriented links is extensibility.. the RD is constantly expanding and unless we replace the Archives link there's no more room for another desk in the nav as it stands at Wikipedia:Reference desk/How to ask and answer. The horizontal layout is actually worse for people at lower resolution- it either scrunches the links together, possibly over each other, as horizontal space becomes sparse, or it goes off the right side of the screen. We've had problems before with people with unusually low resolutions or with a sidebar open in their browser being unable to use the horizontal navigation. But it's easy to just scroll past a vertical list regardless of resolution. That being said, there's still a great deal of configurability within the vertical layout. Would you prefer something tighter, like this? I'll warn you though, for the 2 seconds that diff was live the header looked pretty bad, even discounting the fact that the background highlight code hadn't been updated for the new size. Try moving stuff around with MS Paint on a screenshot of the page (maybe use a screenshot of that diff I linked to and superimpose that over the existing nav box) and see if you can make it look good. --froth^T 19:04, 25 February 2007 (UTC)

My screen is pretty close to yours, with respect to the navigation panel—I believe it's probably just a matter of preference (or a dislike of change on my part?), and while I wanted to chime in with my preference, I don't want my sole voice to drive things. I couldn't really appreciate the difference with the "like this" alternative, since that's the navigation out of context. I had been fixating on the vertical height, but now I see (what should have been obvious), that reducing whitespace between the lines won't change the height of the main ("how to ask") column. So, on a practical note, maybe my most pertinent suggestion is this: couldn't the right (navigation) column be narrowed by 30%, even keeping the current font size, etc.? "Choose a reference desk" would have to be rephrased to something shorter like "Choose a subject" (which I think would be fine, since each item below is clearly a "desk"), but otherwise I don't see why not. One more point. My monobook.css has different font settings, with the result that (on a screen of the same size), every instruction (e.g. "Be specific") that takes two lines on your screen takes three lines on mine (and "Sign your question" takes two). This is, in my case, certainly adding to the bloat. But that's mainly an issue of (1) the amount of "nannying" others have decided posters need; and (2) my font settings, which look good in articles, & so will be staying the same. Wareh 00:44, 26 February 2007 (UTC)

Thanks for your valuable suggestions! First, nice catch with "sign your question"- I can't believe I didn't see that it wasn't <small>'d. Your suggestion for a narrower nav column is a good one. Originally the table of contents was part of that column (it jutted out of the bottom of the header and the text flowed around it) so the nav column needed to be pretty wide to make the table of contents readable, but of course that's no longer necessary. So I implemented your suggestions. I made the nav column of fixed width (another thing that was impossible to accomplish with the inline table of contents for technical reasons) in ems so unusal font sizes are accomodated. "Choose a reference desk" actually did barely fit but I changed it anyway. So how's this? --froth^T 05:59, 26 February 2007 (UTC)

Thanks for your work on this. I'd say the nav column can be narrowed further: why should the text of "How to ask..." run within 5mm of the edge, while there is still so much white space at the right edge of the nav column, where it is not needed and forces the main column to grow longer. Wareh 14:32, 26 February 2007 (UTC)

Well basically because the browser can control the How to ask... text and wrap it as needed, but the nav box text definately shouldn't wrap. However, we should be able to get pretty close to not wrapping by making use of em. How's it look now? --froth^T 18:04, 26 February 2007 (UTC)

I'm not appreciating the difference (all the more so since I don't visit the Entertainment Desk), but I understand you're up against a limit. Thanks again for your efforts. Wareh 19:16, 1 March 2007 (UTC)

By the way, this is the absolute smallest the column can get without forcing formatting changes on the text. When a page wikilinks to itself, mediawiki makes that wikilink bold, which increases the font size. On the entertainment and misc desks, the bold link is quite wide. With the current width, a bold Entertainment barely fits --froth^T 18:16, 26 February 2007 (UTC)

[edit] Whiplash

I'm starting to get whiplash from trying to keep up with all of the formatting changes in the RD pages. Corvus cornix 02:01, 25 February 2007 (UTC)

Sorry! Things are getting settled now; likely the only change now would be a collaborative change of the nav box with User:Wareh (see above) --froth^T 20:06, 25 February 2007 (UTC)

[edit] Color?

I like it and there's nothing particularly wrong with it. It puts a lot of info in as little space as possible. But the new layout lacks color in my opinion. Does anyone agree that at least the title bars in the header should have some color? - Mgm|^(talk) 22:24, 25 February 2007 (UTC)

Hah, look up- nobody else needs to agree with you. As long as nobody opposes I'll work with you to try to get my new style to fit everyones' tastes while the style is still transitional and flexible. Do you have a particular color in mind? I played around a lot with this sort of color scheme but nothing really seemed to look good. Specific hexes or RGBs would be most useful --froth^T 06:19, 26 February 2007 (UTC)

• I like "#f2f2ff". What color is used on the background on the main WP:RD? Something slightly more blue than this grey color is what I was looking for. - Mgm|^(talk) 08:24, 27 February 2007 (UTC)

Here are the colors used on WP:RD and some hand-adjusted bluer versions.

	Your suggestion	WP:RD background 1	WP:RD background 2
Originals	#F2F2FF	#EEEEEE	#F4F4F5
Slightly bluer	#EEEEFF	#EAEAF4	#F2F2F9
More bluer	#ECECFF	#E6E6F6	#F0F0FD

Looks like someone's going wild with changing all of the colors in the header right now. Brb, revert spree --froth^T 22:55, 27 February 2007 (UTC)

Sorry about that, but I've never needed permission before, If we're voting, I cast mine for Slightly bluer--VectorPotential^Talk 23:36, 27 February 2007 (UTC)

For which, "Your suggestion", "RD background 1", or "RD Background 2"? --froth^T 00:23, 28 February 2007 (UTC)

I'm going to go with "RD background 1" --VectorPotential^Talk 00:24, 28 February 2007 (UTC)

I need more information than that! See the new section below which I'll be creating shortly --froth^T 00:55, 28 February 2007 (UTC)

I take it you mean Wikipedia talk:Reference desk/colors--VectorPotential^Talk 00:57, 28 February 2007 (UTC)

Yep. Just a few more minutes --froth^T 01:08, 28 February 2007 (UTC)

Done --froth^T 01:28, 28 February 2007 (UTC)

[edit] Signing and patience

Seems to me the advice to sign with 4 tildes should come after the other instructions, being the last thing a poster would normally do. Then, the warning to be patient should come last of all, since it's now about what happens after the question has been posted and we're all scrabbling around inside our minds to come up with an answer. JackofOz 03:08, 27 February 2007 (UTC)

Done. They're now in a more logical order. I moved Do your own homework up (but not to the top since search "first" should be "first"). I also moved Be patient down (but not all the way down since the formatting of the medical advice disclaimer makes it look better at the bottom). Sign your question was also moved per your suggestion. For the future, here's the How to ask... content page --froth^T 03:28, 27 February 2007 (UTC)

Thanks muchly. Froth. Since you've drawn my attention to it, I'm not sure I agree that the medical/legal bit is a disclaimer at all. It simply says don't ask such questions. It doesn't disclaim any responsibility in the event that such a question is answered and the questioner later comes to grief. I think it would be better with the other do's and dont's, but I won't make a federal case out of it. Cheers. JackofOz 04:07, 27 February 2007 (UTC)

[edit] Boxing..?

Is there a reason that this entire section is enclosed inside a blue box? (: --VectorPotential^Talk 23:29, 27 February 2007 (UTC)

Because the <h2> subheadings aren't distinguishable enough from the main headings. It's to make it clear that all of these little sections are actually under the main section. --froth^T 00:53, 28 February 2007 (UTC)

[edit] Color Collaboration

[edit] Shortcuts

Hi, what happened to all the shortcut links? WP:RD/L and WP:RD/M, for example. --Kjoonlee 01:13, 1 March 2007 (UTC)

List of all shortcut links to WP:RD pages. We don't need to mention all the dupes, though. --Kjoonlee 01:20, 1 March 2007 (UTC)