User:CatherineMunro/Portal
Copied from http://meta.wikimedia.org/wiki/Talk:Www.wikipedia.org_portal/Catherine:
Hello Catherine, this new design looks really beautiful :-))) However, some suggestions:
- limit encyclopedias in the circle to 8 - I think this looks better and less cluttered.
- would be nice to see a version with the search box (code is in Www.wikipedia.org template)
- a big "Wikipedia" written somewhere (maybe above the logo) is a must
- for the bookshelves (great idea ;-) maybe a blue with less saturation, maybe try also with image versions with numbers written on the pictures.
greetings, --Elian 02:46, 22 Jan 2005 (UTC)
- I've made a few improvements to books and general layout -- couldn't get the search code to display properly though -- I'll leave that to someone else. I'll try a version with eight later, if others also think ten is too many. BTW, this is not intended for display with the usual left-hand sidebar, so there should not be redundant logos. Thanks for the feedback! Catherine 06:32, 22 Jan 2005 (UTC)
Heading as text instead of image
[edit]I'd prefer the word "WikipediA" at the top to appear as text rather than as an image. Does anybody know what font it is supposed to be in? Once we know the font, we can code something like <font style="font-size:xx-large; line-height:110%; font-weight:normal; font-family: 'Name of desired font', 'Alternative name', 'Another fallback', 'Times New Roman', 'Times new roman', Times, serif">W<font style="font-size:70%">IKIPEDI</font>A</font>
, which displays as WIKIPEDIA. Compare that with the image:
. Even if other people prefer to use an image, if I knew the proper font name then I could improve the way the alt text displays in browsers that have images disabled. —AlanBarrett 15:27, 22 Jan 2005 (UTC)
- Great improvements, Alan! I knew there had to be a way to arrange the "constellation" in CSS, thanks for showing me how simple it can be. I agree, the title might be better as text. According to the Logo page, the font is "Hoefler Text italic 13px" -- the italics probably just apply to the "free encyclopedia" subtitle, though, and the size to the standard size of upper-left-corner logos. It's not exactly clear from that page whether Hoefler Text is also used for "WikipediA", but it's a place to start experimenting. (You may also be able to contact User:Nohat who designed the original.) Catherine 16:35, 22 Jan 2005 (UTC)
- Nobody will have that font available to their browser, so we should keep the image. I've already converted it to have a transparent background. I'll fiddle with the font used for the alt text. —AlanBarrett 17:06, 22 Jan 2005 (UTC)
- Actually, it is Hoefler Text Bold small caps. And I think it looks terrible having been re-proportioned with expanded width. Jonathan Hoefler wold not be pleased I'm sure to have his carefully proportioned stems and serifs so vulgarly stretched and compressed like so much processed cheese. For the love of all that is holy, please ensure than any final version uses width=100%. Thanks Nohat 08:34, 14 Mar 2005 (UTC)
Changing title according to language setting
[edit]In thinking about it, would it make sense to consider changing the "Wikipedia" title according to language setting? I definitely don't think this is reliable enough to do with the whole page or even sections, but might make sense for just this one word, so that visitors are more likely to see that bold title in a language they understand ("Wikipedia", "Wikipedie", "Vikipedio", etc.). In a graphics-happy high-bandwidth world, I could see the title "Welcome to Wikipedia" dissolving into different languages in a cycle, but that doesn't seem appropriate here. Catherine 16:35, 22 Jan 2005 (UTC)
- Anything that depends on the browser's language setting will need development work, so we can probably ignore it for now. Putting a translation above each of the top 10 languages in the circle woild be easy. As long as the page works fine (and preferably also looks reasonable) when I have images disabled, or image animation turned off, then I suppose it's OK for you to put some kind of fancy animation on the page, but I won't like it. —AlanBarrett 17:06, 22 Jan 2005 (UTC)
- I happen to agree in this case -- just because something CAN be done doesn't mean it should be done. Just pondering using time rather than space to display multiple languages. But I think the disadvantages outweigh the benefits. Catherine 17:16, 22 Jan 2005 (UTC)
- There are arguments both ways, but I feel that wikipedia is the one word we don't really have to translate. After all, they just typed in www.wikipedia.org to reach this page, so it won't come as a total suprise. (The French wikipedia is at fr.wikipedia.org etc.) Even though there are "translations" available, wikipedia isn't really an English word. GeorgeStepanek 02:19, 23 Jan 2005 (UTC)
Layout
[edit]Looks great. CSS layout too! I would make everything a little smaller, though. If the wordmark and logo were half the size, then the search box and additional wikipedia listings would stand a better chance of appearing "above the fold" in average-sized monitors.
The bookshelf is a nice indicator of size, but it doesn't need to be a click target. So I would make them much smaller, or maybe make them a background behind the numbers 10,000+, etc.
Minor suggestions:
- Try a white background, please.
- Thousands places in numbers should be denoted by a comma, in English (e.g., "10,000")
- Number ranges indicated with unspaced n-dashes (e.g., "1,000–10,000")
- No need for parentheses around the number ranges.
- Middle dots as separators in the lists? E.g.:
עברית · 中文 · Български · Русский · Українська · Català · Dansk · Esperanto · Norsk · Română · Suomi
—Michael Z. 2005-01-22 17:43 Z
- I like the layout too. Personally, I prefer the space in the numbers, as that's an international standard, rather than having a comma or dot to separate out the thousands.-203.118.140.195 19:11, 22 Jan 2005 (UTC)
- I added a white background, and changed the number ranges to use spaced en-dashes. Unspaced dashes look ugly to me, and I like the parentheses. Not all languages use commas in numbers, so spaces are more neutral. I agree that the logo and "wordmark" should be smaller, but I didn't change them. It's impossible (or at least difficult) to have images that are not clickable links to the image description page. —AlanBarrett 19:40, 22 Jan 2005 (UTC)
I tried to do a version where a pale bookshelf image is the background to the number labels ("10 000+", etc), but wiki doesn't allow CSS background images. —Mzajac 06:06, 24 Jan 2005 (UTC)
Getting it to work
[edit]So, for this to actually work, we need a way of embedding a search form in the middle of the wiki page, and a way of embedding the wiki page in an HTML page, and a way of making the web server output the HTML page.
The webserver part is done: it automatically outputs the HTML from Www.wikipedia.org template.
The outermost HTML is easy: The code at Www.wikipedia.org template just needs to be stripped of anything we don't want, leaving a "$1" in that code as a placeholder for the wiki page.
The search form seems to need some magic from a developer to allow this wiki page to include a template (or a new message in the mediawiki namespace) that is written in HTML rather than in wiki code. Are any developers listening? —AlanBarrett 21:47, 22 Jan 2005 (UTC)
Comments
[edit]I like it a lot.
Aside from liking it, I think the languages stick to the ball a bit too much, and am not really convinced by the book design.
But generally, good work ! Anthere 23:17, 22 Jan 2005 (UTC)
Holy crap this is nice! --Daniel Mayer 03:49, 23 Jan 2005 (UTC)
I think it is great too. The only thing I would suggest is to remove the blue backdrop to the Logo, so that the words dont appear on both white and blue. Danny 05:13, 23 Jan 2005 (UTC)
- There is no blue backdrop to the logo. Image:Nohat-logo-XI-300px.png (which Catherine used) has a transparent background, and Image:Nohat-logo-nowords-bgwhite-200px.jpg (which I have recently added) has a white background. I suspect that you were seeing the effects of a browser bug, or perhaps a stale web cache. I saw similar effects myself at some point yesterday. —AlanBarrett 10:04, 23 Jan 2005 (UTC)
- Alan -- the transparent background on the word "Wikipedia" is not behaving transparently for me either (yes, I'm using the benighted WinXP/IE6 combo -- the better to see what the masses are seeing, right?). It appears as a grey rectangle against the white background. I've cleared my cache; is it still just me, or do we need another fix here? Catherine 02:44, 25 Jan 2005 (UTC)
- It started off as an RGB image, in which each pixel was black, white, or some shade of grey. I converted it to a greyscale image with an alpha channel, in which black remained black, white became transparent, and grey became grey-but-partially-transparent. IE6 probably has a problem with partial transparency, so perhaps the image should be converted to have all-or-nothing transparency instead of partial transparency. I won't be able to do that today, though. —AlanBarrett 07:03, 25 Jan 2005 (UTC)
- Internet Explorer says that IE does not support alpha channel transparency in PNGs. According to this page it does support binary transparency, however -- which is what you mean by all-or-nothing, I gather. (That page also suggests a PHP fix for the problem, but I'm not MediaWiki-savvy enough to know whether it would be useful for WP.) Catherine 08:08, 25 Jan 2005 (UTC)
- I have converted the image from alpha transparency to binary transparency. Sorry I didn't previously realise the need for working around this IE bug. The binary transparency has the disadvantage that the pixels that are a very light grey look almost white and are not transparent at all, and that looks bad on a coloured background, but if the canvas behind the image is white or almost white then it looks OK. —AlanBarrett 15:57, 25 Jan 2005 (UTC)
- Internet Explorer says that IE does not support alpha channel transparency in PNGs. According to this page it does support binary transparency, however -- which is what you mean by all-or-nothing, I gather. (That page also suggests a PHP fix for the problem, but I'm not MediaWiki-savvy enough to know whether it would be useful for WP.) Catherine 08:08, 25 Jan 2005 (UTC)
- It started off as an RGB image, in which each pixel was black, white, or some shade of grey. I converted it to a greyscale image with an alpha channel, in which black remained black, white became transparent, and grey became grey-but-partially-transparent. IE6 probably has a problem with partial transparency, so perhaps the image should be converted to have all-or-nothing transparency instead of partial transparency. I won't be able to do that today, though. —AlanBarrett 07:03, 25 Jan 2005 (UTC)
- Alan -- the transparent background on the word "Wikipedia" is not behaving transparently for me either (yes, I'm using the benighted WinXP/IE6 combo -- the better to see what the masses are seeing, right?). It appears as a grey rectangle against the white background. I've cleared my cache; is it still just me, or do we need another fix here? Catherine 02:44, 25 Jan 2005 (UTC)
Too much scrolling necessary
[edit]I copied the source of catherine's version yesterday to my computer to see how it looks without the meta-wiki navigation around. The problem I found is: you see only a very small part of the page without scrolling (at least on my powerbook), and this shouldn't be. I experimented a little bit to fit everything on one screen, mockup on http://djini.de/upload/portal/portal4.html (doesn't work on IE atm, and you have to switch manually to utf-8). If someone wants to build on this... --Elian 16:32, 23 Jan 2005 (UTC)
- Yesterday? That would have been before I reduced the logo size. Avoiding horizontal scrolling on narrow screens is much more important than avoiding vertical scrolling on large screens. As far as I am aware, the wikipediasister table is the only part that requires horizontal scrolling at 300px screen width. Vertical scrolling is normal and expected on just about any web page, and I don't see the point of writing everything in tiny fonts just to avoid vertical scrolling. With the current version of Www.wikipedia.org portal/Catherine, people with reasonably large screens should see the logo, the top 10 languages, the search box, and some of the lists of smaller languages. —AlanBarrett 16:54, 23 Jan 2005 (UTC)
- I see only the major ten languages (1024x768) and that's definitely not enough. I agree with you that scrolling is usually necessary, but it should be avoided on a start page as much as possible. (horizontal scrolling shouldn't be necessary at all)--Elian 16:58, 23 Jan 2005 (UTC)
- If it works better design-wise, it can be reduced to eight, or even the current six -- I just thought it would be nice to plan ahead and address scalability issues by trying what looked like the largest practical set of top languages -- and ten gave a nice "round" shape surrounding the globe, where eight looks more square and blocky. Let's keep working on this; I think it's going someplace good. Thank you for taking it and running with it, Alan and Elian... Catherine 18:34, 23 Jan 2005 (UTC)
- I like the idea of highlighting the "top ten": it's a nice round number. GeorgeStepanek 23:47, 23 Jan 2005 (UTC)
- What if the wordmark and logo were a bit smaller, and only the language and number of articles appeared, omitting translations of "the free encyclopedia"? I like it the way it is, but it would be worth trying that combination out. —Michael Z.
- The translations of "The free encyclop[a]edia" are essential. This page is not just a language selection switch for people who already know what Wikipedia is, it's also an introduction to Wikipedia for people who have never heard of it before.
- It still doesn't help much. --Node ue 20:50, 30 Jan 2005 (UTC)
Comments from en:Village Pump
[edit]Copying comments from the English WP Village Pump (as of 08:08, 29 Jan 2005 (UTC)), to consolidate discussion and demonstrate consensus. Catherine 06:14, 26 Jan 2005 (UTC)
--begin copied text--
- Please come look and comment and improve on an idea I had for the multilingual portal at www.wikipedia.org -- see [this subpage]. I'd really appreciate some feedback (and help with getting the graphics properly transparent and all). Thanks! Catherine\talk 06:47, 22 Jan 2005 (UTC)
- I really, REALLY like your design. Especially when compared to what's currently the portal page. BLANKFAZE | (что??) 18:06, 22 Jan 2005 (UTC)
- I like it a lot. There would be no sidebar, right? - Omegatron 18:08, Jan 22, 2005 (UTC)
- Looks awesome! --Stevietheman 19:13, 22 Jan 2005 (UTC)
- I like it a lot Catherine ! Very neat :-) SweetLittleFluffyThing
- Looks like a proper entry page/cover of a book rather than a hack on monobook. Love it. --BesigedB (talk) 23:21, 22 Jan 2005 (UTC)
- I like it a lot. However, this design does not work with some khtml-based browsers (Konqueror, though it might work with very recent versions of it, and perhaps Safari). Perhaps an image map would be safer. David.Monniaux 23:28, 22 Jan 2005 (UTC)
- It works okay (now) for me with Konqueror 3.2.2. Alan Barrett has changed a bunch of the CSS - can you try again with your khtml browser and see if he's fixed things for it too? -- John Fader 15:37, 23 Jan 2005 (UTC)
- Does not work with Konqueror 3.1, really horrible results. David.Monniaux 21:41, 23 Jan 2005 (UTC)
- No image map for text, please! A table would be preferable to that, but hopefully the CSS can work in all the modern browsers plus MSIE/Win. —Michael Z. 2005-01-23 19:00 Z
- Have you tested with Safari? I do not see how a table would help - for me, the image map would just be for the logo and 6 texts around. David.Monniaux 21:41, 23 Jan 2005 (UTC)
- It works okay (now) for me with Konqueror 3.2.2. Alan Barrett has changed a bunch of the CSS - can you try again with your khtml browser and see if he's fixed things for it too? -- John Fader 15:37, 23 Jan 2005 (UTC)
- That's really nice. The only thing I would consider is left aligning the "10,000 - 50,000 articles" titles and text below the top part. Beautiful! --Alterego 23:34, Jan 22, 2005 (UTC)
- Really cool-looking, although it perhaps de-emphasizes the Littlepedias (no differently than the current design does). Deco 04:40, 23 Jan 2005 (UTC)
- Excellent. Can I suggest you add "background:white;" to the styles for the names surrounding the globe - this way, when the browser window is so narrow that these guys must overlap the globe, they're still legible (sure, it's ugly, but marginally less so than without the background specification). -- John Fader 04:50, 23 Jan 2005 (UTC)
- Just to chime in - I love it too :) →Raul654 07:53, Jan 23, 2005 (UTC)
- Me too ;-) And even table-free! -- Gabriel Wicke 11:51, 23 Jan 2005 (UTC)
- Beautiful! — Pt (T) 13:26, 23 Jan 2005 (UTC)
- Wow! :ChrisG 21:47, 23 Jan 2005 (UTC)
- That's a beauty. Awesome! — Gwalla | Talk 02:05, 24 Jan 2005 (UTC)
- Very classy - lets go for it Apwoolrich 08:49, 24 Jan 2005 (UTC)
- Gods Of - aherm... I mean, definitely very impressive. I would suggest adopting at least something like this. Works at least in the Konqueror 3.2.0 I am using - Skysmith 11:51, 24 Jan 2005 (UTC)
- A truly extraordinary layout! Worthy not only of praise but of a new barnstar (graphicstar) for asthetic achievement in Wikipedia; of which you will be the first recipient, and designer if you wish ;'). BTW why are the edit section links incorrect? I had to click the section below to edit this one. - RoyBoy [∞] 00:04, 26 Jan 2005 (UTC)
- Big thumbs up from me, too. Very nice design. Grutness|hello? 04:09, 26 Jan 2005 (UTC)
- In a word: "Scweeeeeet!" Weaponofmassinstruction 04:28, 26 Jan 2005 (UTC)
- Nice, but dare I ask if it works with links, other text-based browsers, and screen readers? Rhobite 04:34, Jan 26, 2005 (UTC)
- Very well-done! Neutrality /talk 03:17, Jan 28, 2005 (UTC)
- Excellent work. That's very nice! -SocratesJedi | Talk 18:34, 28 Jan 2005 (UTC)
- It's attractive now, but as more languages reach the 50,000 article threshold, it's going to get more and more crowded around the globe. And it implies an elitism that shuts out the languages that cannot hover around the globe. GUllman 21:58, 28 Jan 2005 (UTC)
--end copied text--
Layout ideas
[edit]Since the divs are pretty intricate, and use all too many parametres I have no idea about, I'll let others who know this better than me edit this page. (I tried; I couldn't do what I wanted.)
So, here are some small thoughts about the Layout, nothing big, but I want to contribute.
- We could try arranging the top ten languages in a rounder shape. Right now, the arrangement has two pointy ends, and it would be nicer if they could be laid out in circle-arcs on both sides.
- The bookshelves are nice, but can't we shove them to the side? How does it look if we remove half of them, leave the text in the middle, but right-align the books? (Or something like that; the books are really peripherial illustrations, and we should keep the text alone in the middle.)
- Do we need to show the full range? 100-999 makes it seem like the accuracy is important, to three significant digits; it's not, we do rough groupings. Also, I'd like the text better if it was without parantheses, in a serif font, and possibly bolded.
- I made a stab at this once, but; the icons in the WikiSister Template should leave less whitespace between the icon and the name of the project.
Just to come with some small ideas. In general, I think this portal is so much more professional than the current one (but still simple). ✏ Sverdrup 21:44, 24 Jan 2005 (UTC)
- Regarding 3. my rationale for making the change was not just for the sake of accuracy (although given the emotion this topic generates, it is no small consideration), but also to make the layout more symmetrical and attractive. (This is also the rationale for centering the bookshelves.) It also bypasses the whole thousands separator argument. Previously these number ranges had spaces as separators, which were awkward and confusing in this context. GeorgeStepanek 00:18, 25 Jan 2005 (UTC)
- My two cents -- first, I agree that at this point the layout is best left to the css wizards among us -- I haven't had much luck trying to tweak it myself.
- I agree that with the necessary reduction in logo size (for better above-the-fold display), the language constellation has become a little too "pointy". I know Alan has been doing a lot of work to optimize the CSS layout for various screen widths, and the percentage widths have to allow for a lot of play, so I don't know if that's a temporary consequence or not. Perhaps it might work better with a smaller font size, or with eight languages instead of ten (I'm fond of ten, but not violently committed to it), or just with more fiddling with the percentages. Also, remember this may look better if/when we can set the page up without the sidebar, as intended.
- We can certainly experiment with different layouts for the books -- they were intended as a visual shorthand for the orders of magnitude, removing the need for the English word "articles", or twenty translations of same. Ideas for different sizes, layouts, colors, or even a different graphic altogether are welcome.
- I do tend to agree with George's reasoning on balance and number format, though.
- Don't think I can help with the Wikisister layout, but I agree. However, remember it's used in many places besides this one.
- Catherine 02:30, 25 Jan 2005 (UTC)
- My two cents -- first, I agree that at this point the layout is best left to the css wizards among us -- I haven't had much luck trying to tweak it myself.
- I see your points, thanks for putting them forward. However, I don't think the wikisister template is used on that many pages but this one and the main page; in any case, this page is most important and even all pages that use it would benefit if we remade it to be less sloppy. ✏ Sverdrup 09:08, 25 Jan 2005 (UTC)
- (All right, I guess it wasn't as complicated as I thought it would be...) Reload the page and see if that looks better to you. :) Catherine 09:48, 25 Jan 2005 (UTC)
- To fiddle with the layout of the top 10 languages, try editing the "max-width" in div.top10, and the percentages in the "left" and "right" parameters for each language. I tried to choose values that looked reasonable on a wide range of screen widths, from 300px up to huge, but there's surely room for improvement. Please test your changes in a browser window that's so narrow that the text under "Nederlands" crashes into the text under "Espanol", and in a window that's wide enough for the max-width to kick in. —AlanBarrett 06:46, 25 Jan 2005 (UTC)
IE and max-width
[edit]The problem for me appears to be the "max-width" -- it doesn't appear to have any effect at all on my browser (IE6 w SP2), no matter what the width or resolution of the screen, and no matter what the value I assign to it, even ridiculously large or small values. Therefore at my usual fairly large screen width, the circle is flattened just as you mention in the comments. Again, some google-surfing confirms that IE doesn't support this attibute. (Sigh.) Here's a workaround (that did very strange things in my untutored "let's copy and paste some code and see what happens" sort of testing), a note about the workaround, and a js fix. Maybe that will help you, maybe not -- I am trying! (And trying not to be trying...) Catherine 08:50, 25 Jan 2005 (UTC)
- Could somebody with IE6 please try "width:100%; width:expression(document.body.clientWidth>550?'550px':'100%'); max-width:550px;". I hope that IE will let the second width parameter override the first one, while browsers with proper support for CSS2 will ignore the second width attribute and pay attention ot the max-width parameter. Even if it works, it might rely on javascript being enabled in the browser's security settings. In the longer term, it would be nice to try the minmax.js idea described at http://www.doxdesk.com/software/js/minmax.html. —AlanBarrett 15:50, 25 Jan 2005 (UTC)
- Catherine, I see you tried it, but I think you got the three clauses in the wrong order. Try it with width:100% before, not after, after width:expression(). —AlanBarrett 18:15, 25 Jan 2005 (UTC)
- I tried it with the three width attributes in every combination of orders, just made better use of preview. All had the same results, which seemed to be to spread the logo and constellations out wildly over the page, as if it were ignoring the "top10" div altogether. Each time, the two center languages (the "pointy" ends) were at the edges of the page, so whatever else it was doing wrong, it wasn't doing the max-width thing right, either. Catherine 19:08, 25 Jan 2005 (UTC)
- Does it work now that I have swapped the values of the width and max-width properties? A browser that doesn't understand max-width will see "width:500px", and will give the right result with a wide window, but will require sideways scrolling with a narrow window. On the scale of punishments for using a buggy browser, sideways scrolling doesn't seem too bad to me. —AlanBarrett 19:52, 25 Jan 2005 (UTC)
- That did it! It looks beautiful now, and responds well to changing window sizes. Thank you! Catherine 21:47, 25 Jan 2005 (UTC)
- Does it work now that I have swapped the values of the width and max-width properties? A browser that doesn't understand max-width will see "width:500px", and will give the right result with a wide window, but will require sideways scrolling with a narrow window. On the scale of punishments for using a buggy browser, sideways scrolling doesn't seem too bad to me. —AlanBarrett 19:52, 25 Jan 2005 (UTC)
- I tried it with the three width attributes in every combination of orders, just made better use of preview. All had the same results, which seemed to be to spread the logo and constellations out wildly over the page, as if it were ignoring the "top10" div altogether. Each time, the two center languages (the "pointy" ends) were at the edges of the page, so whatever else it was doing wrong, it wasn't doing the max-width thing right, either. Catherine 19:08, 25 Jan 2005 (UTC)
- Catherine, I see you tried it, but I think you got the three clauses in the wrong order. Try it with width:100% before, not after, after width:expression(). —AlanBarrett 18:15, 25 Jan 2005 (UTC)
Here's another idea: http://dean.edwards.name/IE7/ contains some javascript that is supposed to make IE6 support many more CSS features. If the test cases at http://dean.edwards.name/IE7/compatibility/ actually work, then an admin could arrange for the javascript to be added to wikipedia's style sheets. —AlanBarrett 18:32, 25 Jan 2005 (UTC)
- I am told by the web developers at work (who I mentioned IE7 to when they were bitching about IE's crap standards support) that IE7 is horrible for performance. This is just anecdotal, I don't have numbers - David Gerard 14:12, 29 Jan 2005 (UTC)
Admin or developer help?
[edit]Are there any Meta admins or developers (blessed be their holy overworked keyboards) here who can help us with the sidebar and search box issues (on a separate "proposal" page, perhaps, so we can work out the kinks) -- maybe setting up a "$2" template so we can arrange a copy of the Www.wikipedia.org_template without sidebar, and with a layout like this?
$1 search box html $2
I don't feel I should apply for meta Adminship just for this, but I'll be happy to help any way I can... Catherine 02:32, 25 Jan 2005 (UTC)
- See also #Getting it to work above.
Node - Bookshelves
[edit]I'm not going to voice my feelings on the design in general, but I definitely will say that, in addition to the globe being huge, the bookshelves are big and make it so you have to scroll more and inconvenient in general. Why not have them about the size of a cursor for each book? --Node ue 20:20, 25 Jan 2005 (UTC)
- Some graphic ideas I'm playing with:
- Not great yet, but trying to get an idea if it's worth pursuing. Smaller, not as wide, with less vivid color, but it's getting harder to tell that they're books. Comments? Catherine 22:43, 25 Jan 2005 (UTC)
- Sorry, but I don't like it as much as the current version. The serif text just doesn't look right, and the books are too indistinct. Also, the blue books image colour-coordinates better with the blue language links. GeorgeStepanek 23:53, 25 Jan 2005 (UTC)
- How about using black for the borders of the books and blue for the middle? And they're still a bit large. --Node ue 00:50, 26 Jan 2005 (UTC)
- I'd prefer the shelves to be wider but less tall, with the widest one being about 600px. I have no opinion about the colour. —AlanBarrett 07:22, 26 Jan 2005 (UTC)
- I think the concept is good, while the image quality is very poor - we can't use those unless we update them. (And it's a gif--arrhg! /edit :) Color is fine to me, and I think something not blue would be better -- making our frontpage all blue makes the layout thicka and murky/unclear. ✏ Sverdrup 16:42, 27 Jan 2005 (UTC)
Wikipedia image
[edit]I disagree with the large "Wikipedia" image at the top, it's not very international. The French Wikipedia for example is Wikipédia, the Japanese is ウィキペーディア (and the domain "wikipedia.org" is still intuitive for both becaue URLs generally don't have accents and it's basically the transcription of the Japanese). People have gone to the domain already, they should've gusessed that it's called what it is without a black text image. --Node ue 00:58, 26 Jan 2005 (UTC)
- It helps to identify screenshots of the portal, such as on alexa.com. It also provides valuable confirmation that the user has indeed reached the correct page. Moreover, even though "Wikipedia" may not be as national as "Wikipédia" or "ウィキペーディア", it is surely as international as "fr.wikipedia.org" or "ja.wikipedia.org". GeorgeStepanek 03:33, 26 Jan 2005 (UTC)
- Uhm... What do you mean "it is surely as international as"? Those are URLs, and URLs are very, very, very, very different from sitenames (most Geocities cites will tell you that) for the main reason that most browsers still only support ASCII-only URLs. And while some people may be obsessed with how we appear on Alexa, only a tiny fraction of our hits come from them. --Node ue 20:50, 30 Jan 2005 (UTC)
Also, why is the searchbox where it is? Having a searchbox at all is debatable to me, but if we do have one we should at least have it on the sidebar. --Node ue 01:00, 26 Jan 2005 (UTC)
- Good point. Why do we have a search box? We wouldn't need developer help if the search box was removed. GeorgeStepanek 03:33, 26 Jan 2005 (UTC)
- Having a sidebar would ruin the wondrous symmetry of the opening page... this is a welcome screen more than a practical screen, no sidebar! And there is a search box there because this is an online encyclopedia. To force people to select a project in order to actually use Wikipedia is unnecessary and incongruous to basic web-design where major portals Yahoo, MSN and online encyclopedias have search functions displayed prominently on their main page. - 24.141.72.95 05:24, 26 Jan 2005 (UTC)
- The search box should be on our main page, definitely; we have already been critisised for not displaying it prominently enough. For example, britannica and other read-only encyclopedias display their search box on top of the page. As our wikipedias grow, we should expect that a lot of people come here just to use the search box and research something. Also, we don't want a sidebar in this page, to make more room for a larger logo and a more symmetric design. ✏ Sverdrup 16:36, 27 Jan 2005 (UTC)
- That's just it. This ISN'T our mainpage. We have searchboxes already on the local Wikipedias. This is a portal, not some sort of weird. --Node ue 20:50, 30 Jan 2005 (UTC)
Number of Users
[edit]Perhaps a running tally of registered users could be fitted in somewhere, or added to the reduced 8 language entries. - 24.141.72.95 05:14, 26 Jan 2005 (UTC)
- While the number is impressive, it doesn't mean that much to the average/newbie wikipedia visitor. It has been debated to add a word count per wikipedia, but even that was rejected. Many said they wanted to focus on one fathomable and impressive statistic, to leave vaguer ones to Wikipedia:About and Statistics pages. ✏ Sverdrup 16:39, 27 Jan 2005 (UTC)
- Perhaps so, but I would argue the large language list below doesn't mean much to average/newbies either. I'd still push for the user tallie(s) because it might encourage more participation; particularly for the smaller projects. Then again it could also have the opposite effect of people saying, oh they have enough people already. Darnit, I think I just talked myself out of the idea! Grrrrr... - 24.141.72.95 18:46, 27 Jan 2005 (UTC)
The top languages
[edit]I also like this concept. But the idea to put some languages fix around the logo I do not like. Now there is room for 10. I suggest to give the 5 biggest Wikipedias a fix spot and fill in the other spots regarding the language settings of the browser. If those languages are already loaded or there is still room fill the space whit a random Wikipedia.
So have the smal wikipedias also some time in the spotlight. To do this is more complex but if there can be created MediaWiki this should not be a problem. Walter 18:19, 27 Jan 2005 (UTC)
- This is a very good idea, and in some time, I hope we have a more dynamic frontpage. We should gather feature requests for a new and better portal, but I think this proposed portal is very good until new features are implemented. ✏ Sverdrup 22:32, 27 Jan 2005 (UTC)
- I understand that this can not be done in version 0.1alfa of the Catherine portal. I hope it is not forgotten. It is very importand to think about the small languages --Walter 23:48, 27 Jan 2005 (UTC)
- This proposal is unlikely to implemented as is for performance reasons. It is important to keep the front page static so that it can be cached. Alexa.com tells us that visits average around three page views. If the entry page could not be cached, then the load on our PHP servers would dramatically increase. However, the same effect could be achieved by someone manually changing the featured small language(s) every few days.
- I don't think that's correct. You can put a script doing this on the browser-side (using JavaScript or VBscript, or whatever). You don't need the server to process any information. 62.0.144.168 16:41, 1 Feb 2005 (UTC)
- But I think that the simple and intuitive concept of the "top ten" should not be discarded lightly. The top ten wikipedias get 91% of the page views, so the current design is optimised for 9 out of 10 visitors. I'd prefer to keep it that way. GeorgeStepanek 04:44, 28 Jan 2005 (UTC)
- Right, so we don't care about the minority at all do we? --Node ue 20:50, 30 Jan 2005 (UTC)
top ten
[edit]I like the 'top ten' idea, layout-wise, because the look remains stable, and it is not tied up with deciding on tiers (50,0000 / 10,000 / 100,000 or what). But: While the top 2 or 3 WPs are very well defined and set apart from the rest, in the 10th to 15th range, the differences are quite small. Since it will make a big difference if your WP comes 10th or 11th, this will lead to even more stub-spam, i.e. there will be article-creation contests between 10th and 11th WPs. I hate to repeat myself, but article count is not reliable. Word count is more reliable, but even if we evaluate 'top ten' by word-count, there will be spamming contests in the range 8th to 12th.... It's not the end of the world, of course, it's just that these layout decisions have a greater impact that you may imagine, and some of them lead to undesireable results. 130.60.142.62 13:33, 30 Jan 2005 (UTC) en:User:Dbachmann
- I know that that things will change over time, but currently the top ten languages by article count are the same ten languages as the top ten languages by word count and the top ten languages by page view. There's a bit of a gap between the top ten and the rest. There should therefore be no controversy as to exactly which languages go into the top ten. I suggest that we consider changes only when a language has clearly moved itself up the list, and that we consider all three metrics when making this decision. GeorgeStepanek 17:36, 30 Jan 2005 (UTC)
- as I said, my concern is not with the metric, this time, but with the spamming-contests the 'top-ten' layout is likely to produce. 130.60.142.62 09:41, 31 Jan 2005 (UTC)
- If this generates competition to create more and longer articles, then I don't see a problem with it. Yes, thoughtlessly applying a single metric like article count may lead to systemic biases: stubs will proliferate. Hence my suggestion to make a broader assessment. GeorgeStepanek 01:37, 1 Feb 2005 (UTC)
- as I said, my concern is not with the metric, this time, but with the spamming-contests the 'top-ten' layout is likely to produce. 130.60.142.62 09:41, 31 Jan 2005 (UTC)
Konqueror issues
[edit]Dutch user w:nl:Gebruiker:Danielm provided this screenshot to show how the design fails in Konqueror 3.1
Alan, can you help with this at all? I don't see anything immediately at http://www.konqueror.org/css/ that should cause a problem, but I'm a CSS newbie....thank you again for all your effort on this. Catherine 11:26, 29 Jan 2005 (UTC)
A few links:
- http://www.greywyvern.com/code/min-height-hack
- http://centricle.com/ref/css/filters/
- http://www.sitepoint.com/article/browser-specific-css-hacks
- Does this apply (from the forum comments on the SitePoint article)?
- Konqueror only accepts:
- <style type="text/css">@import url(basic.css);</style>
- but will not accept @import url(basic.css)
- written on already externalized stylesheets. [1]
This Wikipedia-l mailing list post says that for Konqueror we should "avoid using CSS2 and limit yourself on CSS1." ??? Catherine 20:37, 29 Jan 2005 (UTC)
- OK, so the height of div.top10 ends up being zero. Is it better after my edit of 19:13 30 Jan 2005? —AlanBarrett 19:24, 30 Jan 2005 (UTC)
This is how it looks to me in Konqueror. Silsor 03:21, Jan 30, 2005 (UTC)
- You seem to have a very large font for the text, so 500px is not wide enough for div.top10. My edit of 19:13 30 Jan 2005 uses "em" instead of "px" to set the width of div.top10, which should help it to adjust to large default font size. —AlanBarrett 19:24, 30 Jan 2005 (UTC)
- strange, on my konqueror (3.3.1), it displays nicely. 130.60.142.62 09:44, 31 Jan 2005 (UTC)
- It was always fine in Konquerer>=3.2. I think it's only recently become usable with Konquerer 3.1. —AlanBarrett 15:41, 31 Jan 2005 (UTC)
- The current version works fine on my Konqueror 3.1.2. However, there is a font problem, as also shown in the first screenshot above: The ("en/em"?) dashes in the list of languages show up as boxes. 129.240.86.20 11:11, 31 Jan 2005 (UTC)
- Both the 10000+ and 1000+ groups of languages use the same – characters, just with different font sizes. Konquerer 3.1 is rendering the large – as a box, but rendering the small one correctly. I don't think we need to work around this browser bug. —AlanBarrett 15:41, 31 Jan 2005 (UTC)
Using the white space
[edit]Round the logo there is a lot of white space. The page must stay empty there but some discrete use can maybe be done.
What about a small and grey list of links to all wikipedias whit only the language code? Walter 12:30, 31 Jan 2005 (UTC)
- If you have a narrow screen, there's no spare space. —AlanBarrett 15:44, 31 Jan 2005 (UTC)
Crossed-out "Wikipedia"
[edit]With "underline links" turned on in my WP preferences, the main Wikipedia wordmark looks like there's a line through it (in Safari). I tried adding some CSS to turn off underlining, but it didn't work. Maybe setting the vertical alignment can move the underline underneath the image, or maybe it can be displayed using the FIR technique. —Michael Z. 2005-01-31 16:23 Z
- I saw that once too. I think it was in one of the browsers that comes with KDE or Gnome. I filed it under 'browser bug' and stopped worrying, but if you want to fix it by adjusting vertical positioning, go ahead. The "FIR" technique you mentioned is no good, because neither the image nor the text would be displayed in a graphical browser that has images turned off. —AlanBarrett 17:46, 31 Jan 2005 (UTC)
Scrolling middle section?
[edit]Is it possible to arrange that the middle section, between the HR lines, is scrollable, leaving the top and bottom sections fixed? --Phil | Talk 09:34, 1 Feb 2005 (UTC)
- Yes, it's technically possible, but I don't like the idea. It would adapt very poorly to small screens. On my 1024x768 screen, (vertical size of the top part) + (vertical size of the bottom part) exceeds (available vertical space). Then there's the usability issue (many people find it more difficult to scroll part of a page than to scroll the entire page) and a new set of browser bugs to work around. —AlanBarrett 11:19, 2 Feb 2005 (UTC)
Bookshelf images
[edit]I changed all the bookshelf images to be the same size. Having multiple sizes causes the browser to download each size separately, which significantly impacts page load speed on slow links.
I chose 28px as the size for all bookshelf images, because the images are not easily recognisable at smaller sizes. However, I think that 28px is too large relative to the text size. Perhaps if the images were re-exported from the original source format at 24px or so, they would look better than what we get when the server re-sizes them. —AlanBarrett 11:52, 2 Feb 2005 (UTC)
- Done - does that work better? Catherine 19:53, 2 Feb 2005 (UTC)
- Yes, that's better. Thanks. The file size is rather large (29kB) for such a small image, but I can probably fix that with ImageMagick (maybe tomorrow).
- OK, I did that. A simple trip through pngtopnm followed by pnmtopng reduced the size from 29kB to less than 1kB.
- Yes, that's better. Thanks. The file size is rather large (29kB) for such a small image, but I can probably fix that with ImageMagick (maybe tomorrow).
I have uploaded new bookshelf images at Image:Bookshelf-40x24.png and Image:Bookshelf-40x20.png. These were derived from the original 151x150 Image:Booksshelf.gif via cropping the white space from the top and bottom, resizing, and converting to png format. I find the wide 40x24 images more legible than the 24x24 version. —AlanBarrett 20:52, 3 Feb 2005 (UTC)
Search box
[edit]Would it perhaps be cleaner to use a magnifying glass image as the search button, rather than an arbitrary and/or "elitist" subset of all the possible languages? Catherine 19:53, 2 Feb 2005 (UTC)
- I think the basic choice is between (a) a drop-down list of languages and one "go" button; (b) a drop-down list of languages and both "go" and "search" buttons; (c) no drop-down list, but multiple "go" buttons (one per language, see http://www.wikipedia.ch for a working example). I prefer (c) for a reasonably small set of languages, or (a) for a long list of languages, and never (b) due to user confusion and database load issues. The mockup that's currently on this page is intended to represent option (c). If people prefer option (a) or (b), then I think that some sort of language-neutral icon would be better than an arbitrary set of languages, but the alt text would still need to be in an arbitrary set of languages. —AlanBarrett 22:43, 2 Feb 2005 (UTC)
- Why not just a magnifying glass, as Catherine suggests? It's not universal, but in all cultures where Wikipedia would be used (ie, with any internet access) the magnifying glass is familiar. --Node ue 08:56, 11 Feb 2005 (UTC)
- Also, Alan, if you're worried about database load, why should we have bookshelf images?
- Why not just a magnifying glass, as Catherine suggests? It's not universal, but in all cultures where Wikipedia would be used (ie, with any internet access) the magnifying glass is familiar. --Node ue 08:56, 11 Feb 2005 (UTC)
- A magnifying glass would be good, as I said (see "language-neutral icon"). Bookshelf images don't cause database load (the images are cached by the squids), but the "search" kind of searching (as opposed to the "go" kind of searching) causes so much load that the developers often disable it. —AlanBarrett 13:07, 11 Feb 2005 (UTC)
Excellent Image Design
[edit]Catherine, I think you've done a fabulous job with this project and I wish you the best. Please contact me at your leisure at noisecontrol@gmail.com you are an excellent artist. I'm very new to OSS and wikipedia in general, but I try to contribute in a meaningful way.
Thank you,
Sincerely, Christopher J. Bradley