Paddington skin leaves even less screen space for the article itself. Remember we will have an oversized TOC soon as well. People with 800x600 screens (still plenty of them) will see hardly any text without scrolling.
Headers are still way oversized. Newspapers use headers this big whenever a Titanic sinks somewhere.
'Wikipedia English' in two different point sizes and grey for the variable part, very bad to the eyes.
This design (in progress, I know) will produce even more cases of Severe Wikipedia Reader Stress Syndrome.
Erik Zachte
Now here's something you should see, *this* is what I call a website: (this really rocks the boat!)
http://www22.brinkster.com/rotemdan/Wikipedia-Vorbis-site-rip.html
The original site was http://www.vorbis.com
(Basically I ripped the Vorbis site as is, I didn't upload all the images to brinkster so there should be dead placeholders on top)
I am willing to work (if i'll find the time) for a new layout based on standard XHTML/CSS (I can also do basic PHP), so that's just an example to give a general idea of what I consider the layout for an average website in the 21st century. ;-)
Rotem
Rotem-
Now here's something you should see, *this* is what I call a website: (this really rocks the boat!)
http://www22.brinkster.com/rotemdan/Wikipedia-Vorbis-site-rip.html
1) We need all the screen width we can get for articles, otherwise floating tables, images etc. won't work very well. The design contains no navigational elements at all, BTW. 2) Having some dynamic content at the side may seem like a good idea, but it really gets old quickly -- literally. After browsing 10 articles, you'll be very tired of that "New articles" box. 3) The technobubbles in the table headers are inappropriate for an encyclopedia.
Using colors intelligently for navigational and structural elements, on the other hand, seems like a good idea.
Regards,
Erik
Erik Moeller wrote:
Rotem-
Now here's something you should see, *this* is what I call a website: (this really rocks the boat!)
http://www22.brinkster.com/rotemdan/Wikipedia-Vorbis-site-rip.html
- We need all the screen width we can get for articles, otherwise
floating tables, images etc. won't work very well. The design contains no navigational elements at all, BTW. 2) Having some dynamic content at the side may seem like a good idea, but it really gets old quickly -- literally. After browsing 10 articles, you'll be very tired of that "New articles" box. 3) The technobubbles in the table headers are inappropriate for an encyclopedia.
Ofcourse ofcourse!!! I just ripped the site as is! these are really small things (I actually did remove the bar on the right but then I didn't have a place to write some explanations, of course it shouldn't be there!)
What I like is the great use of color and graphics, the boxes, the backgrounds, the great font that looks good on 800x600 resolution (not too big).
Tasks like "Edit this page" etc. would be put as icons wherever we want to put them (probably on top) with very intuitive symobls.
just a second, I will remove the bar on the right and put that version on another file, It would be on:
http://www22.brinkster.com/rotemdan/Wikipedia-Vorbis-site-rip2.html
Rotem
Rotem Dan wrote:
Ofcourse ofcourse!!! I just ripped the site as is! these are really small things (I actually did remove the bar on the right but then I didn't have a place to write some explanations, of course it shouldn't be there!)
What I like is the great use of color and graphics, the boxes, the backgrounds, the great font that looks good on 800x600 resolution (not too big).
Tasks like "Edit this page" etc. would be put as icons wherever we want to put them (probably on top) with very intuitive symobls.
the problem with intuitive symbols is that they usually aren't.
just a second, I will remove the bar on the right and put that version on another file, It would be on:
http://www22.brinkster.com/rotemdan/Wikipedia-Vorbis-site-rip2.html
something wrong with your email -- you are posting in the past! you've just replied to a 23:31 mail at 14:58
On 21 Jul 2003 00:31:00 +0200, Erik Moeller erik_moeller@gmx.de gave utterance to the following:
Rotem-
Now here's something you should see, *this* is what I call a website: (this really rocks the boat!)
http://www22.brinkster.com/rotemdan/Wikipedia-Vorbis-site-rip.html
- We need all the screen width we can get for articles, otherwise
floating tables, images etc. won't work very well. The design contains no
While maintaining a max-width on the article space (max-width, however, is not supported by MSIE/Win) that is not too wide for optimal reading. (about 40-45em is usually good)
Following comments on "Paddington", I started again from scratch. This is what I've done today. Most of it is subject to change.
one thing I'm happy with though is the start of the article is *very* near the top of the page.
* The footers are still being worked on * the elements in the sidebar could be put into boxes like in Rotem Dan's Seinfeld example. * i'm not too keen on the centering I put in the sidebar either!
-- tarquin
On Mon, Jul 21, 2003 at 11:23:05AM +1200, Richard Grevers wrote:
On 21 Jul 2003 00:31:00 +0200, Erik Moeller erik_moeller@gmx.de gave utterance to the following:
Rotem-
Now here's something you should see, *this* is what I call a website: (this really rocks the boat!)
http://www22.brinkster.com/rotemdan/Wikipedia-Vorbis-site-rip.html
- We need all the screen width we can get for articles, otherwise
floating tables, images etc. won't work very well. The design contains no
While maintaining a max-width on the article space (max-width, however, is not supported by MSIE/Win) that is not too wide for optimal reading. (about 40-45em is usually good)
I drafted a compromise design:
http://jeluf.mine.nu/jf/kiribati/
The right side is used to place the floats, while the left side uses some 60% of the screen width for the article. On my 1024x768 screen this results in about 50 em text width.
Navigational items have been added to the top of the design. Vorbis's images were replaced by our old-fashioned topbar.
Note the "edit..."-links at the top of each float. Those should ideally be editable on its own. A new box can be added using the toolbox containing all the edit links.
I kept the donations box in place, it could be a blue box to the right, too.
TODOs: Page looks OK in Mozilla and Opera. MSIE has to big fonts. Font face is mixed, some texts are sans-serif, some are serif. This is fine tuning, I think one can get the concept nevertheless.
Regards,
JeLuF
Jens Frank wrote:
I drafted a compromise design:
http://jeluf.mine.nu/jf/kiribati/
The right side is used to place the floats,
Those are not floats! It's still table-based.
while the left side uses some 60% of the screen width for the article. On my 1024x768 screen this results in about 50 em text width.
There are still many 460x480 screens out there! A default skin must cater to those.
Note the "edit..."-links at the top of each float. Those should ideally be editable on its own. A new box can be added using the toolbox containing all the edit links.
It's interesting the way that "interior" elements such as the images and the statistics table are placed above the "system" elements. How would that be achieved? What if the stats are not the same width as the system elements? And I'm not sure it's a good idea to mix system stuff with article content.
Taking on board the boxed from the Vorbis design ...
is this better?
(note the footers still are in rough form!)
On Mon, Jul 21, 2003 at 03:11:29PM +0100, tarquin wrote:
Taking on board the boxed from the Vorbis design ...
is this better?
(note the footers still are in rough form!)
For those who can't read HTML embedded in Mails, this is tarquins page: http://jeluf.mine.nu/jf/kiribati/montparnasse-2.html
Regarding the page: Much to long lines. Amazingly many people nowadays have screen sizes of 19" and 1600x1200 pixels. Lines become very long and it's hard to find the beginning of the next line.
Really, go to the kiosk down the road and buy any newspaper. It is printing text in multiple columns. Even the encyclopedias I own do so. Why is this? Basically two reasons: It's easy to read, the eye easily finds the beginning of the next line. And in print it's very space efficient.
Your design is very conservative. Few colors, text mainly. I hacked in some ugly colors, mainly to show alternatives. You can find them at http://jeluf.mine.nu/jf/kiribati/milan.html It's just a quick an dirty approach. Not tested in anything but Mozilla.
I'm not very happy about the language box. It looks so crowded. I think I'll blame the | for it.
In a good old tradition, the footer is still left untouched.
Regards,
JeLuF
Jens Frank wrote:
For those who can't read HTML embedded in Mails, this is tarquins page: http://jeluf.mine.nu/jf/kiribati/montparnasse-2.html
I assumed people could just save the files to their HD and open it in a browser -- sorry.
Regarding the page: Much to long lines. Amazingly many people nowadays have screen sizes of 19" and 1600x1200 pixels. Lines become very long and it's hard to find the beginning of the next line.
But the default screen size is *still* 640x480. People still surf the web with this. If the lines are too long, *make your window narrower* People with small screens cannot make *their* wider!
Your design is very conservative. Few colors, text mainly.
yes. Because we need a default skin that everyone can agree on.
I hacked in some ugly colors, mainly to show alternatives. You can find them at http://jeluf.mine.nu/jf/kiribati/milan.html It's just a quick an dirty approach. Not tested in anything but Mozilla.
Those llok good. But I'm not sure about having a background grey and then the article white in front of it. It makes the page look smaller -- less space.
I'm not very happy about the language box. It looks so crowded. I think I'll blame the | for it.
Good point.
In a good old tradition, the footer is still left untouched.
;-) I'll work on that now.
tarquin wrote:
In a good old tradition, the footer is still left untouched.
;-) I'll work on that now.
http://meta.wikipedia.org/upload/4/46/Montparnasse-2.html
complete with styled footers & a bit more colour.
On Mon, Jul 21, 2003 at 05:10:13PM +0100, tarquin wrote:
tarquin wrote:
In a good old tradition, the footer is still left untouched.
;-) I'll work on that now.
http://meta.wikipedia.org/upload/4/46/Montparnasse-2.html
complete with styled footers & a bit more colour.
Hyphens are much better. Perhaps make a between language and hyphen so that hyphens only appear at the end of the line, not at its beginning.
Personally, I would place only one searchbox. I prefer the one below the not-yet-there logo.
BTW, the Milan page is not wider or smaller than the Montparnasse one. You just notice the wide gap betweeen article and sidebar better when it is grey.
When having stubs, can we ensure that the article tools are ''at least'' below the personal tools? The turquoise bar on the middle of the page looks misplaced.
Regards,
JeLuF
Jens Frank wrote:
Hyphens are much better. Perhaps make a between language and hyphen so that hyphens only appear at the end of the line, not at its beginning.
Ok. But that's up to the rendering rather than the designer :)
Personally, I would place only one searchbox. I prefer the one below the not-yet-there logo.
It would be nice to have the namespace checkboxes in the footer version. At the foot of the page they are out of the way so they don't scare newbies. At the moment, to do a namespace search I have to do one "fake" search just to get to the controls -- bad for server load!
BTW, the Milan page is not wider or smaller than the Montparnasse one. You just notice the wide gap betweeen article and sidebar better when it is grey.
More white makes the page more restful. I've been wondering how to move away from the "two sides boxed off" look we have at the moment:
------------- | | ----------- | | (article is trapped here) | |
Having the sidebar elements in separate boxes, placed on the same background as the rest of the page is a neat way round that. Thank you Vorbis layout for that idea! :)
When having stubs, can we ensure that the article tools are ''at least'' below the personal tools? The turquoise bar on the middle of the page looks misplaced.
Limitation of CSS, sadly :( -- see http://css-discuss.incutio.com/?page=FooterBeneathSidebar
http://meta.wikipedia.org/upload/4/46/Montparnasse-2.html
complete with styled footers & a bit more colour.
the right nav bar needs to be a little bitwider in my opinion just a couple more pixels...
change Article in other languages to "Also available in..." you could uven use a bulleted list for that, that'd be cool
Lightning
Montparnasse - pass 1hey.... i like it
Lightning ----- Original Message ----- From: tarquin To: wikitech-l@wikipedia.org Sent: Monday, July 21, 2003 10:11 AM Subject: Re: [Wikitech-l] Re: Be bold in improving Wikipedia's ugly layout! (Rotem Dan)
Taking on board the boxed from the Vorbis design ...
is this better?
(note the footers still are in rough form!)
------------------------------------------------------------------------------
Wikipedia - The free encyclopedia - English Main Page - Recent changes - Random page - Current events - Login - You have new messages! Gare Montparnasse Printable version | Edit this page | Page history
The train station of Montparnasse (Gare Montparnasse) in Paris, France opened in 1840. A second new station was built between 1848-1852 and was completely rebuilt after World War II and renovated completely in 1969.
Turn-of-the-century Montparnasse defined the term "starving artist" as virtually penniless painters, sculptors, writers, poets and composers came from around the world to thrive in the creative atmosphere and for the cheap rent at artist communes such as La Ruche. Living without running water, in damp, unheated "studios" often as not overrun by rats, many sold their works for a few francs just to buy food. Jean Cocteau once said that poverty was a luxury in Montparnasse. First promoted by art dealers such as Henry Kahnweiler, today, works by those desperately poor artists sell in the millions of dollars.
It is most famous for a few incidents: a.. the derailment on October 22, 1895 of the Granville-Paris Express that overran the buffer stop. The engine careened across almost 100 feet (30 meters) of the station concourse, crashed through a two-foot thick wall, shot across a terrace and sailed out of the station, plummeting onto the Place de Rennes 30 feet (10 meters) below where it stood on its nose. b.. The old train station is also the place where, on August 25, 1944, the German military governor of Paris, General Von Choltitz, surrendered his garrison to the French General Leclerc after disobeying an insane Adolf Hitler's direct order to destroy the city. Today, the station is used for the trains to Brittany, and the TGV to Tours, Bordeaux. There is also a metro station. There is a high-speed travelator on trial.
placeholder for a logo This article in other languages Dansk | Deutsch | Español | Esperanto | Français | Italiano | ??? (Nihongo) | Latina | Nederlands | Polski | Português | ??????? (Russkij) | Svenska | ?? (Zhongwen) Site links Main Page Recent changes Random page Current events Personal tools My user page My talk page My watchlist My contributions Search Wikipedia
Article Tools Edit this page | Watch this page | Discuss this page | Page history | What links here | Related changes Delete this page | Protect this page | Move this page This page was last modified 03:20 8 Dec 2002. All text is available under the terms of the GNU Free Documentation License.
------------------------------------------------------------------------------
body.encyclopedia { background: white } body.meta { background: #ffffdd } body { margin: 0px; padding:0px; } #topbar { background: #6688AA; /* from ColBlue */ background: #8ad; /* light blue */ color:white; color:#fff; border:none; /* for NN4 */ width:100%; margin: 0px; }
#topbar h1 { font-size: 160%; margin: 0px; padding:1px 2px; } #topbar h1 span { font-size: 65%; } #topbar span#alert { color:#f80; font-weight:bold; } #topbar div { background: #ddd; font-size: 90%; color:black; padding:1px; } /* ================= article */ #article { padding:0.5em; margin-left:0.5em; margin-right:15em; /* sidebar margin */ } h1.pagetitle { font-size: 150%; padding-top: 0; margin-top: 0; padding-bottom: 0; margin-bottom: 0; } p.subtitle , p.languages , p.actions { padding: 0em 1em; margin: 0em ; font-size: 90%; color:#723; } /* ================= sidebar */ #main { position:relative; /* only needed if sidebar sits below masthead */ }
#sidebar { position:absolute; top:0px; right:0px; width:11em; padding:0.5em; /*border-left: solid 2px #8ad; /* light blue */; text-align:center; } #dummylogo { width:100px; height:100px; background: #ddd; margin:0px auto; font-size:75%;
} #sidebar h2 { margin: 4px 0px 0px; padding: 0px; font-size:100%; background: #8ad; } #sidebar div { border: solid 2px #8ad; padding: 0.5em 1em; margin: 0em ; font-size: 90%; } #sidebar #dummylogo { margin:0px auto ; width:100px; height:100px; }
/* ================= sidebar */ #footer { padding:2px; margin-left:0.5em; margin-right:12em; /* sidebar margin */ /* border-top: solid 2px #8ad; /* light blue */;
} #footer div { padding:0px; margin:4px 2px 0px; background: #eee; } #footer h2 { margin: 2px 0px 1px; padding: 0px; font-size:120%;
}
/* ================= hacks */ /* Feed these styles only to NS4.... */ /*/*/ /*/ h1.pagetitle { margin-top: -30px; color:red; } p.actions { margin-top: -20px; } /* Okay, we can let the others back in.... */
On Mon, Jul 21, 2003 at 02:54:46PM +0100, tarquin wrote:
Jens Frank wrote:
I drafted a compromise design:
http://jeluf.mine.nu/jf/kiribati/
The right side is used to place the floats,
Those are not floats! It's still table-based.
OK, misnomer. Floats from the article's point of view, in contrast to inlined images. Elements that don't have to have a fixed position to the article but can be freely placed by the designer.
while the left side uses some 60% of the screen width for the article. On my 1024x768 screen this results in about 50 em text width.
There are still many 460x480 screens out there! A default skin must cater to those.
On 640x480, the text is fully readable, you have to scroll horizontally to read the sidebars. Since those are independent contextual strings, this seems acceptable to me.
Note the "edit..."-links at the top of each float. Those should ideally be editable on its own. A new box can be added using the toolbox containing all the edit links.
It's interesting the way that "interior" elements such as the images and the statistics table are placed above the "system" elements. How would that be achieved? What if the stats are not the same width as the system elements? And I'm not sure it's a good idea to mix system stuff with article content.
The stats and the system elements have been forced to have the same width. This should be possible for almost any of our factsheets. The few exceptions should be rendered inline anyway, they are probably to wide to be a good floats, anyway. Else you will get text like this when using 640x480 text resoluti on.
Taking the stats out of the article is probably only feasible by completly changing the way we handle them. Currenty they are inlined into the wiki, ugly since it's hard core HTML. Going to a design like Kiribati would be easiest when "sidebar elements" become wikipedia articles of its own. That's also why they have an edit link.
Regarding mixing: Perhaps the colour code should be changed, e.g. gray background for all the system stuff, white for the article, the sidebar could be either blue (making it a thing of its own) or white (showing it's part of the article). For me those don't strictly belong to the article, that's why I made them blue.
BTW, I'm not sure this is a good approach, too. I just try to be bold because I think the current design is a little bit old fashioned.
Regards,
JeLuF
Erik Zachte wrote:
Paddington skin leaves even less screen space for the article itself. Remember we will have an oversized TOC soon as well. People with 800x600 screens (still plenty of them) will see hardly any text without scrolling.
Headers are still way oversized. Newspapers use headers this big whenever a Titanic sinks somewhere.
'Wikipedia English' in two different point sizes and grey for the variable part, very bad to the eyes.
This design (in progress, I know) will produce even more cases of Severe Wikipedia Reader Stress Syndrome.
Yes, those are good points. Recent comments & yours lead me to conclude we need 2 new skins:
* default: a simple, clear, "light" skin. most "system" links either removed or only present in the footer. This is aimed at casual users, readers, etc -- the Great Unwashed Masses who don't use Special Pages or maybe don't even edit * a redesign of our current standard skin. Most registered users may want to set this in their preferences
wikitech-l@lists.wikimedia.org