I found this one visually appealing:
http://dribbble.com/wirwoluf/projects/104912-wikipedia-redesign
No doubt others will now take it apart :-)
- d.
One thing this and previous designs agree upon is to use a three-column layout for content. On today's wide screens, reduced line length for the main text should improve readability, and still use the side columns pragmatically; it seems the TOC usually goes to the left, and infoboxes to the right.
On Mon, Jan 28, 2013 at 8:20 PM, David Gerard dgerard@gmail.com wrote:
I found this one visually appealing:
http://dribbble.com/wirwoluf/projects/104912-wikipedia-redesign
No doubt others will now take it apart :-)
- d.
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
On 28 January 2013 21:59, Magnus Manske magnusmanske@googlemail.com wrote:
One thing this and previous designs agree upon is to use a three-column layout for content. On today's wide screens, reduced line length for the main text should improve readability, and still use the side columns pragmatically; it seems the TOC usually goes to the left, and infoboxes to the right.
If we detect a wide screen (I have a 1920x1200 at work), going at least two-column would definitely be a good idea.
Is anyone working on responsiveness in Vector?
- d.
There is an ideal column width for readability, which is well understood in newspaper publishing but less so in books and even less so on the web. I think its around 10 words.
-Steven On Jan 28, 2013 2:00 PM, "Magnus Manske" magnusmanske@googlemail.com wrote:
One thing this and previous designs agree upon is to use a three-column layout for content. On today's wide screens, reduced line length for the main text should improve readability, and still use the side columns pragmatically; it seems the TOC usually goes to the left, and infoboxes to the right.
On Mon, Jan 28, 2013 at 8:20 PM, David Gerard dgerard@gmail.com wrote:
I found this one visually appealing:
http://dribbble.com/wirwoluf/projects/104912-wikipedia-redesign
No doubt others will now take it apart :-)
- d.
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
On 28 January 2013 22:17, stevertigo stvrtg@gmail.com wrote:
There is an ideal column width for readability, which is well understood in newspaper publishing but less so in books and even less so on the web. I think its around 10 words.
Trouble there is that newspapers are portrait and have pages, but screens are usually landscape and (the important bit) stretch indefinitely vertically. A good example of the problem with doing it like a newspaper is https://sites.google.com/site/sophieinnorthkorea/ - brilliant article, but on a laptop screen the layout is just really confusing.
- d.
On Tue, Jan 29, 2013 at 9:23 AM, David Gerard dgerard@gmail.com wrote:
Trouble there is that newspapers are portrait and have pages, but screens are usually landscape and (the important bit) stretch indefinitely vertically. A good example of the problem with doing it like a newspaper is https://sites.google.com/site/sophieinnorthkorea/
- brilliant article, but on a laptop screen the layout is just really
confusing.
And newspaper layouts are handcrafted for exactly one width and height. It's hard enough to get articles to display nicely with embedded images and infoboxes with a single column - could that really work multi column? Maybe a better use of the extra horizontal space would be to expand some of the embedded images and infoboxes out of the text?
I was going to point to theglobalmail.org as an interesting example of a multi-column layout on the web (horizontal scrolling!) but it looks like they've caved in and gone to a conventional one column vertical layout.
Steve
Newspaper columns are not all of uniform size. Layout editors choose one width from within a certain readable range of column widths. Different stories may be of different widths, but a particular story will keep to the same width, as different widths would look strange. Of course if a story jumps to another page, it can have a different width.
On the web the same principle applies that columns of text which are too narrow (when pinched by photos etc) or too wide (single column on a wide screen with browser at full width) then its probably going to make readers unhappy. -S On Jan 28, 2013 4:27 PM, "Steve Bennett" stevagewp@gmail.com wrote:
On Tue, Jan 29, 2013 at 9:23 AM, David Gerard dgerard@gmail.com wrote:
Trouble there is that newspapers are portrait and have pages, but screens are usually landscape and (the important bit) stretch indefinitely vertically. A good example of the problem with doing it like a newspaper is https://sites.google.com/site/sophieinnorthkorea/
- brilliant article, but on a laptop screen the layout is just really
confusing.
And newspaper layouts are handcrafted for exactly one width and height. It's hard enough to get articles to display nicely with embedded images and infoboxes with a single column - could that really work multi column? Maybe a better use of the extra horizontal space would be to expand some of the embedded images and infoboxes out of the text?
I was going to point to theglobalmail.org as an interesting example of a multi-column layout on the web (horizontal scrolling!) but it looks like they've caved in and gone to a conventional one column vertical layout.
Steve
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
On Mon, Jan 28, 2013 at 1:59 PM, Magnus Manske magnusmanske@googlemail.comwrote:
One thing this and previous designs agree upon is to use a three-column layout for content. On today's wide screens, reduced line length for the main text should improve readability, and still use the side columns pragmatically; it seems the TOC usually goes to the left, and infoboxes to the right.
Word.
On 28 January 2013 20:20, David Gerard dgerard@gmail.com wrote:
I found this one visually appealing:
http://dribbble.com/wirwoluf/projects/104912-wikipedia-redesign
No doubt others will now take it apart :-)
Minor quibbles:
* The header hits a common problem - treating read/talk/edit/history as four different interfaces to the same page, while they're really three interfaces to the page (read/edit/history) and one link to another page (talk) with its own three interfaces.
* The three-column system will look strangely constrained for pages with very short (<<1 screen height) infoboxes or very few headings.
* It's not clear what would happen to our usual mass of footer navboxes, most of which assume full-width screens. Perhaps they could be migrated to the side columns?
Major quibbles
* Languages have got lost entirely! (again...)
On 29 January 2013 11:46, Andrew Gray andrew.gray@dunelm.org.uk wrote:
- The header hits a common problem - treating read/talk/edit/history
as four different interfaces to the same page, while they're really three interfaces to the page (read/edit/history) and one link to another page (talk) with its own three interfaces.
I think that may be deliberate, per comment here from the designer: "But maybe more people should talk or edit. :)"
http://dribbble.com/shots/900712-Wikipedia-redesign-header-colors
I couldn't find a way to comment to the designer to point them to this thread or to the WP redesigns page ... can anyone else work out Dribble's exquisitely-designed interface?
- d.
On 29 January 2013 12:10, David Gerard dgerard@gmail.com wrote:
I couldn't find a way to comment to the designer to point them to this thread or to the WP redesigns page ... can anyone else work out Dribble's exquisitely-designed interface?
I found my way to the designer's website and emailed him about the redesigns page and this thread. He says thank you :-)
- d.
For those of you who like to try out a similar three-column layout, this just fresh from the presses:
https://en.wikipedia.org/wiki/User:Magnus_Manske/common.css
(activates on wide screens only)
On Tue, Jan 29, 2013 at 8:55 PM, David Gerard dgerard@gmail.com wrote:
On 29 January 2013 12:10, David Gerard dgerard@gmail.com wrote:
I couldn't find a way to comment to the designer to point them to this thread or to the WP redesigns page ... can anyone else work out Dribble's exquisitely-designed interface?
I found my way to the designer's website and emailed him about the redesigns page and this thread. He says thank you :-)
- d.
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
Hey, that works :)
I put it on userstyles.org. So if you use the "Stylish" plugin for Chrome or Firefox, you can add it here:
http://userstyles.org/styles/82333/wikipedia-3-columns-magnus-manske
Steve
On Wed, Jan 30, 2013 at 11:06 AM, Magnus Manske magnusmanske@googlemail.com wrote:
For those of you who like to try out a similar three-column layout, this just fresh from the presses:
https://en.wikipedia.org/wiki/User:Magnus_Manske/common.css
(activates on wide screens only)
On Tue, Jan 29, 2013 at 8:55 PM, David Gerard dgerard@gmail.com wrote:
On 29 January 2013 12:10, David Gerard dgerard@gmail.com wrote:
I couldn't find a way to comment to the designer to point them to this thread or to the WP redesigns page ... can anyone else work out Dribble's exquisitely-designed interface?
I found my way to the designer's website and emailed him about the redesigns page and this thread. He says thank you :-)
- d.
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
A couple of screenshots to save people the effort: https://dl.dropbox.com/u/767553/eiger-normal.png https://dl.dropbox.com/u/767553/eiger-three-columns.png https://dl.dropbox.com/u/767553/eiger-three-columns-more.png
Looking at these, it's remarkable that we've put up with such a bad layout for wide screens for so long. I mean, seriously - that eiger-normal.png looks *awful*. The text is far too wide to read comfortably, and then there's this huge white space next to the contents box.
And all with a tiny amount of CSS. Great job, Magnus!
Steve
On Wed, Jan 30, 2013 at 11:31 AM, Steve Bennett stevagewp@gmail.com wrote:
Hey, that works :)
I put it on userstyles.org. So if you use the "Stylish" plugin for Chrome or Firefox, you can add it here:
http://userstyles.org/styles/82333/wikipedia-3-columns-magnus-manske
Steve
On Wed, Jan 30, 2013 at 11:06 AM, Magnus Manske magnusmanske@googlemail.com wrote:
For those of you who like to try out a similar three-column layout, this just fresh from the presses:
https://en.wikipedia.org/wiki/User:Magnus_Manske/common.css
(activates on wide screens only)
On Tue, Jan 29, 2013 at 8:55 PM, David Gerard dgerard@gmail.com wrote:
On 29 January 2013 12:10, David Gerard dgerard@gmail.com wrote:
I couldn't find a way to comment to the designer to point them to this thread or to the WP redesigns page ... can anyone else work out Dribble's exquisitely-designed interface?
I found my way to the designer's website and emailed him about the redesigns page and this thread. He says thank you :-)
- d.
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
Thanks! I'll be fiddling with it some more; now that TOC and thumbnails are in separate columns, they don't really need the grey background etc.
Also, help would be appreciated; for example, I can't figure out how to top-align the TOC (position:absolute) and have it "bump down" left-side thumbnails (position:relative) at the same time.
On Wed, Jan 30, 2013 at 12:41 AM, Steve Bennett stevagewp@gmail.com wrote:
A couple of screenshots to save people the effort: https://dl.dropbox.com/u/767553/eiger-normal.png https://dl.dropbox.com/u/767553/eiger-three-columns.png https://dl.dropbox.com/u/767553/eiger-three-columns-more.png
Looking at these, it's remarkable that we've put up with such a bad layout for wide screens for so long. I mean, seriously - that eiger-normal.png looks *awful*. The text is far too wide to read comfortably, and then there's this huge white space next to the contents box.
And all with a tiny amount of CSS. Great job, Magnus!
Steve
On Wed, Jan 30, 2013 at 11:31 AM, Steve Bennett stevagewp@gmail.com wrote:
Hey, that works :)
I put it on userstyles.org. So if you use the "Stylish" plugin for Chrome or Firefox, you can add it here:
http://userstyles.org/styles/82333/wikipedia-3-columns-magnus-manske
Steve
On Wed, Jan 30, 2013 at 11:06 AM, Magnus Manske magnusmanske@googlemail.com wrote:
For those of you who like to try out a similar three-column layout, this just fresh from the presses:
https://en.wikipedia.org/wiki/User:Magnus_Manske/common.css
(activates on wide screens only)
On Tue, Jan 29, 2013 at 8:55 PM, David Gerard dgerard@gmail.com
wrote:
On 29 January 2013 12:10, David Gerard dgerard@gmail.com wrote:
I couldn't find a way to comment to the designer to point them to
this
thread or to the WP redesigns page ... can anyone else work out Dribble's exquisitely-designed interface?
I found my way to the designer's website and emailed him about the redesigns page and this thread. He says thank you :-)
- d.
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
Update: Current Eiger page: https://dl.dropbox.com/u/23027995/Eiger%20current.png
The TOC is partially obscured by the image, but it will pop into the foreground if you push the mouse over it.
On Wed, Jan 30, 2013 at 12:41 AM, Steve Bennett stevagewp@gmail.com wrote:
A couple of screenshots to save people the effort: https://dl.dropbox.com/u/767553/eiger-normal.png https://dl.dropbox.com/u/767553/eiger-three-columns.png https://dl.dropbox.com/u/767553/eiger-three-columns-more.png
Looking at these, it's remarkable that we've put up with such a bad layout for wide screens for so long. I mean, seriously - that eiger-normal.png looks *awful*. The text is far too wide to read comfortably, and then there's this huge white space next to the contents box.
And all with a tiny amount of CSS. Great job, Magnus!
Steve
On Wed, Jan 30, 2013 at 11:31 AM, Steve Bennett stevagewp@gmail.com wrote:
Hey, that works :)
I put it on userstyles.org. So if you use the "Stylish" plugin for Chrome or Firefox, you can add it here:
http://userstyles.org/styles/82333/wikipedia-3-columns-magnus-manske
Steve
On Wed, Jan 30, 2013 at 11:06 AM, Magnus Manske magnusmanske@googlemail.com wrote:
For those of you who like to try out a similar three-column layout, this just fresh from the presses:
https://en.wikipedia.org/wiki/User:Magnus_Manske/common.css
(activates on wide screens only)
On Tue, Jan 29, 2013 at 8:55 PM, David Gerard dgerard@gmail.com
wrote:
On 29 January 2013 12:10, David Gerard dgerard@gmail.com wrote:
I couldn't find a way to comment to the designer to point them to
this
thread or to the WP redesigns page ... can anyone else work out Dribble's exquisitely-designed interface?
I found my way to the designer's website and emailed him about the redesigns page and this thread. He says thank you :-)
- d.
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
WikiEN-l mailing list WikiEN-l@lists.wikimedia.org To unsubscribe from this mailing list, visit: https://lists.wikimedia.org/mailman/listinfo/wikien-l
On 1/30/13 1:41 AM, Steve Bennett wrote:
A couple of screenshots to save people the effort: https://dl.dropbox.com/u/767553/eiger-normal.png https://dl.dropbox.com/u/767553/eiger-three-columns.png https://dl.dropbox.com/u/767553/eiger-three-columns-more.png
Looking at these, it's remarkable that we've put up with such a bad layout for wide screens for so long. I mean, seriously - that eiger-normal.png looks *awful*. The text is far too wide to read comfortably, and then there's this huge white space next to the contents box.
And all with a tiny amount of CSS. Great job, Magnus!
I like it as well. Actually, I recall a previous version from Magnus that was sort of like this which I also liked; am I imagining that?
The main issue with the present layout, imo, is that wrapping text around images produces clutter for no real gain when pages are so wide. I do like wrapping text around images on narrower pages, such as a typical book, or narrower portrait-format screens. In those cases, the alternatives feel inferior to me. Narrow columns really don't work for me: I use the IEEE and ACM 2-column article formats regularly in my day job and do not find them either aesthetically pleasing or particularly readable. And using a wider column without wrapping results in the image taking up the whole page for a certain amount of the vertical space, which is only sensible if it's a major object of discussion which should narratively fit into the text, rather than a side illustration.
But at larger widths, you can put the side illustrations out in the margin, because there is tons of space.
-Mark
On Thu, Jan 31, 2013 at 11:29 PM, Mark delirium@hackish.org wrote:
On 1/30/13 1:41 AM, Steve Bennett wrote:
A couple of screenshots to save people the effort: https://dl.dropbox.com/u/**767553/eiger-normal.pnghttps://dl.dropbox.com/u/767553/eiger-normal.png https://dl.dropbox.com/u/**767553/eiger-three-columns.pnghttps://dl.dropbox.com/u/767553/eiger-three-columns.png https://dl.dropbox.com/u/**767553/eiger-three-columns-**more.pnghttps://dl.dropbox.com/u/767553/eiger-three-columns-more.png
Looking at these, it's remarkable that we've put up with such a bad layout for wide screens for so long. I mean, seriously - that eiger-normal.png looks *awful*. The text is far too wide to read comfortably, and then there's this huge white space next to the contents box.
And all with a tiny amount of CSS. Great job, Magnus!
I like it as well. Actually, I recall a previous version from Magnus that was sort of like this which I also liked; am I imagining that?
You don't imagine it, but the previous CSS one wasn't nearly as good, and
yet another one requires JavaScript (though it has more features; check icons on top): http://toolserver.org/~magnus/redefined/?page=Barack_Obama
On 1 February 2013 10:05, Magnus Manske magnusmanske@googlemail.com wrote:
yet another one requires JavaScript (though it has more features; check icons on top): http://toolserver.org/~magnus/redefined/?page=Barack_Obama
Looks nice! Feels a bit visually busy ... maybe not being used to it. The "languages" dropdown seems a bit mystery-meat navigation to me - perhaps head it "Other languages" like the "Categories" dropdown next to it.
This page appears to break it:
https://toolserver.org/~magnus/redefined/?page=Factory%20Benelux%20discograp...
- d.
On Fri, Feb 1, 2013 at 9:16 PM, David Gerard dgerard@gmail.com wrote:
Looks nice! Feels a bit visually busy ... maybe not being used to it. The "languages" dropdown seems a bit mystery-meat navigation to me - perhaps head it "Other languages" like the "Categories" dropdown next to it.
Yeah, the newer one is a lot easier on the eyes. Comparing the two, the reasons seem to be: - more space around between text and borders - the links in the TOC are black in the newer one (really effective!)
I don't really have an opinion on all the elements outside the actual encyclopaedia content, as I think that's out of scope. Meaning, even if we had an opinion, it would be too hard to get it implemented :)
Magnus, I spent a while trying to solve the image-overlapping-TOC problem, but I don't think it's possible with pure CSS, given the current page structure. With a little bit of javascript, you could set the TOC to position:relative (like the images) and set top to be minus its current vertical position.
Steve
On Fri, Feb 1, 2013 at 11:28 AM, Steve Bennett stevagewp@gmail.com wrote:
On Fri, Feb 1, 2013 at 9:16 PM, David Gerard dgerard@gmail.com wrote:
Looks nice! Feels a bit visually busy ... maybe not being used to it. The "languages" dropdown seems a bit mystery-meat navigation to me - perhaps head it "Other languages" like the "Categories" dropdown next to it.
Yeah, the newer one is a lot easier on the eyes. Comparing the two, the reasons seem to be:
- more space around between text and borders
- the links in the TOC are black in the newer one (really effective!)
I don't really have an opinion on all the elements outside the actual encyclopaedia content, as I think that's out of scope. Meaning, even if we had an opinion, it would be too hard to get it implemented :)
Magnus, I spent a while trying to solve the image-overlapping-TOC problem, but I don't think it's possible with pure CSS, given the current page structure. With a little bit of javascript, you could set the TOC to position:relative (like the images) and set top to be minus its current vertical position.
Yes, but it's sooooo elegant with pure CSS, and once I start adding JS, I'll keep adding code until it becomes self-aware ;-)
On 1 February 2013 10:16, David Gerard dgerard@gmail.com wrote:
This page appears to break it: https://toolserver.org/~magnus/redefined/?page=Factory%20Benelux%20discograp...
Well, *that* link is a typo. This link loads the article:
https://toolserver.org/~magnus/redefined/?page=Factory%20Benelux%20discograp...
- but the tables are no longer sortable!
- d.
On Tue, Jan 29, 2013 at 10:46 PM, Andrew Gray andrew.gray@dunelm.org.uk wrote:
Minor quibbles:
- The header hits a common problem - treating read/talk/edit/history
as four different interfaces to the same page, while they're really three interfaces to the page (read/edit/history) and one link to another page (talk) with its own three interfaces.
So there are six interfaces. You expose the four most important ones this way, you make talk:edit a button or something that's part of the talk page itself, and you ignore talk:history. That's for nerds. (I'm not sure if I've ever looked at a talk page history. It's pretty rare.)
In reality though, I think using tabs for actions is the wrong approach (and is after all what the old skin did). Buttons with standard glyphs, sparingly used, would work better. A big pencil button for "edit", a less prominent "discuss this" button for talk, with history squirrelled away somewhere. You don't need a view button - standard behaviour would be to have something like a clickable page title or a "<- Roman Empire" link on those other pages.
- The three-column system will look strangely constrained for pages
with very short (<<1 screen height) infoboxes or very few headings.
Mmmm...dunno about strange. Lots of blogs etc have wide margins.
- It's not clear what would happen to our usual mass of footer
navboxes, most of which assume full-width screens. Perhaps they could be migrated to the side columns?
Or they could remain full-width. That'd only be a problem if the article was short but had long right-hand-side infoboxes. You could deal with that by making the infobox column scrollable.
Major quibbles
- Languages have got lost entirely! (again...)
Minor detail. It'd be great to have some cues that show which of the interwiki links have significant amounts of content (especially any with more content than the one you're looking at).
Steve