I think you'll be able to see it with http://www.nytimes.com/2014/01/09/nyregion/christie-aide-tied-to-bridge-lane...
This is quite interesting, since we've talked about similar redesigns involving elements they use here, such as...
- Fully unifying the design across tablets, desktop, etc. - Fixed header - More use of dropdowns (like the "hamburger" menu from mobile) to collapse cluttered menus - Much tighter column width
Other elements that I think are interesting and new to us are...
- Putting the comments in a column alongside the content directly, when opened - Variable type sizing (see the cog icon for settings) - Content recommendations in a carousel at the top of the page - Navigating in a category of pages using left and right swiping. (Personally I think they will regret this one. People hate it so.)
What a nice, narrow measure they have…
I already have May investigating the dynamic type size for mobile, but theres no reason it couldn't be used on desktop too.
I also like how the fixed header becomes the article title once scrolled, another thing we were thinking about.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation
M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Wed, Jan 8, 2014 at 9:59 PM, Steven Walling swalling@wikimedia.orgwrote:
I think you'll be able to see it with http://www.nytimes.com/2014/01/09/nyregion/christie-aide-tied-to-bridge-lane...
This is quite interesting, since we've talked about similar redesigns involving elements they use here, such as...
- Fully unifying the design across tablets, desktop, etc.
- Fixed header
- More use of dropdowns (like the "hamburger" menu from mobile) to
collapse cluttered menus
- Much tighter column width
Other elements that I think are interesting and new to us are...
- Putting the comments in a column alongside the content directly,
when opened
- Variable type sizing (see the cog icon for settings)
- Content recommendations in a carousel at the top of the page
- Navigating in a category of pages using left and right swiping.
(Personally I think they will regret this one. People hate it so.)
-- Steven Walling, Product Manager https://wikimediafoundation.org/
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On Wed, Jan 08, 2014 at 09:59:07PM -0800, Steven Walling wrote:
I think you'll be able to see it with http://www.nytimes.com/2014/01/09/ nyregion/christie-aide-tied-to-bridge-lane-closings.html?_r=0
I can't see that, unfortunately, just a log in page. Perhaps because I'm outside the USA.
• Variable type sizing (see the cog icon for settings)
It's good to be able to do that, but I always thought of it as the browser's job. I suspect that assumption may be broken with mobile, though (which would be a pity).
On Thu, Jan 09, 2014 at 11:28:47AM +0000, Nick White wrote:
On Wed, Jan 08, 2014 at 09:59:07PM -0800, Steven Walling wrote:
I think you'll be able to see it with http://www.nytimes.com/2014/01/09/ nyregion/christie-aide-tied-to-bridge-lane-closings.html?_r=0
I can't see that, unfortunately, just a log in page. Perhaps because I'm outside the USA.
OK, I found the cause of the problem. You have to accept cookies from nytimes.com to be allowed to view the site.
This is really interesting. Apart from the specific patterns (which are also interesting), I like how they put the focus on content by reducing chrome, moving content forward, and encouraging exploration.
Recently I was exploring some preliminary ideas of designs also focused on reducing chrome and encourage exploration:
- Design concept: https://commons.wikimedia.org/wiki/File:Chrome-less_exploration_designs.pdf - Prototype (zoom out a bit if not on a tablet): http://pauginer.github.io/prototypes/related-content/desk/index.html
I already have May investigating the dynamic type size for mobile, but
theres no reason it couldn't be used on desktop too.
If we finally add some responsive supporthttps://www.mediawiki.org/wiki/Requests_for_comment/Grid_system to MediaWiki, targeting styling for different screen sizes should be simple. That applies not only to font size but also to other properties. The LESS preprocessor support in MediaWiki helps also to easily adjust style for different screen sizes (provided that breakpoints are defined). For example:
#bodyContent {
@media @palm {
font-size: 20px; } @media @desk { font-size: 16px; } @media @billboard { font-size: 200px; }}
Pau
On Thu, Jan 9, 2014 at 1:40 PM, Nick White nick.white@durham.ac.uk wrote:
On Thu, Jan 09, 2014 at 11:28:47AM +0000, Nick White wrote:
On Wed, Jan 08, 2014 at 09:59:07PM -0800, Steven Walling wrote:
I think you'll be able to see it with
http://www.nytimes.com/2014/01/09/
nyregion/christie-aide-tied-to-bridge-lane-closings.html?_r=0
I can't see that, unfortunately, just a log in page. Perhaps because I'm outside the USA.
OK, I found the cause of the problem. You have to accept cookies from nytimes.com to be allowed to view the site.
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On Fri, 10 Jan 2014 12:49:56 +0100, Pau Giner pginer@wikimedia.org wrote:
If we finally add some responsive support to MediaWiki, targeting styling for different screen sizes should be simple. That applies not only to font size but also to other properties. The LESS preprocessor support in MediaWiki helps also to easily adjust style for different screen sizes (provided that breakpoints are defined).
I've been lobbying for that for quite some time, but I've been told that WMF doesn't care about low-resolution behavior on desktop skins and that they're focusing on MobileFrontend instead (https://bugzilla.wikimedia.org/show_bug.cgi?id=44387) and my proposed changes have been outright rejected. Has this changed?
Thanks, that's some great inspiration.
I love that 'also read' section with the little thumbnails at the bottom. I think that's something we should definitely thinking about. I also agree that the typography with its tighter column is far better and makes the content way easier to read. However, I'd personally prefer some more line-height, as well as a slightly larger default font-size. I'm currently working on a little demo that incorporates these things.
I wouldn't say that a fixed header is good per se and we should copy it without thinking about it. We should always keep the user in mind when it comes to these decisions. Is a fixed header in our case proven to improve user experience? Great.
Most importantly, I absolutely think that a unified design for all devices is the future. With more and more devices coming out each day, our current distinction between 'mobile' and 'desktop' becomes more and more obsolete.
- best, max @awesomephant <www.twitter.com/awesomephant>
On Thu, 9 Jan 2014, at 16:59, Steven Walling wrote:
I think you'll be able to see it with http://www.nytimes.com/2014/01/09/nyregion/christie-aide-tied-to-bridge-lane...
This is quite interesting, since we've talked about similar redesigns involving elements they use here, such as...
- Fully unifying the design across tablets, desktop, etc.
- Fixed header
- More use of dropdowns (like the "hamburger" menu from mobile) to
collapse cluttered menus
- Much tighter column width
Other elements that I think are interesting and new to us are...
- Putting the comments in a column alongside the content directly, when
opened
- Variable type sizing (see the cog icon for settings)
- Content recommendations in a carousel at the top of the page
Here I'll stop and kindly ask such design to die as it's wasting my precious screen space. Please and thank you.
- Navigating in a category of pages using left and right swiping.
(Personally I think they will regret this one. People hate it so.)
-- Steven Walling, Product Manager https://wikimediafoundation.org/ _______________________________________________ Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On Sat, Jan 11, 2014 at 6:14 AM, Gryllida gryllida@fastmail.fm wrote:
On Thu, 9 Jan 2014, at 16:59, Steven Walling wrote:
I think you'll be able to see it with http://www.nytimes.com/2014/01/09/nyregion/christie-aide-tied-to-bridge-lane...
This is quite interesting, since we've talked about similar redesigns involving elements they use here, such as...
- Fully unifying the design across tablets, desktop, etc.
- Fixed header
- More use of dropdowns (like the "hamburger" menu from mobile) to
collapse cluttered menus
- Much tighter column width
Other elements that I think are interesting and new to us are...
- Putting the comments in a column alongside the content directly, when
opened
- Variable type sizing (see the cog icon for settings)
- Content recommendations in a carousel at the top of the page
Here I'll stop and kindly ask such design to die as it's wasting my precious screen space. Please and thank you.
Trading screen space for legibility doesn’t sound that bad, it’s actually a good thing.
From what I understand the carousel is only displayed at the top of
the page and disappears or is minified when scrolling down.
- Navigating in a category of pages using left and right swiping.
(Personally I think they will regret this one. People hate it so.)
-- Steven Walling, Product Manager https://wikimediafoundation.org/
On Sat, 11 Jan 2014, at 18:05, Denis Jacquerye wrote:
On Sat, Jan 11, 2014 at 6:14 AM, Gryllida gryllida@fastmail.fm wrote:
On Thu, 9 Jan 2014, at 16:59, Steven Walling wrote:
I think you'll be able to see it with http://www.nytimes.com/2014/01/09/nyregion/christie-aide-tied-to-bridge-lane...
- Content recommendations in a carousel at the top of the page
Here I'll stop and kindly ask such design to die as it's wasting my precious screen space. Please and thank you.
Trading screen space for legibility doesn’t sound that bad, it’s actually a good thing. From what I understand the carousel is only displayed at the top of the page and disappears or is minified when scrolling down.
-- Denis Moyogo Jacquerye African Network for Localisation http://www.africanlocalisation.net/ Nkótá ya Kongó míbalé --- http://info-langues-congo.1sd.org/ DejaVu fonts --- http://www.dejavu-fonts.org/
Thanks Denis. I like being able to skim (a half of) page content without scrolling.
On Sat, Jan 11, 2014 at 10:29 AM, Gryllida gryllida@fastmail.fm wrote:
On Sat, 11 Jan 2014, at 18:05, Denis Jacquerye wrote:
On Sat, Jan 11, 2014 at 6:14 AM, Gryllida gryllida@fastmail.fm wrote:
On Thu, 9 Jan 2014, at 16:59, Steven Walling wrote:
I think you'll be able to see it with http://www.nytimes.com/2014/01/09/nyregion/christie-aide-tied-to-bridge-lane...
- Content recommendations in a carousel at the top of the page
Here I'll stop and kindly ask such design to die as it's wasting my precious screen space. Please and thank you.
Trading screen space for legibility doesn’t sound that bad, it’s actually a good thing. From what I understand the carousel is only displayed at the top of the page and disappears or is minified when scrolling down.
Thanks Denis. I like being able to skim (a half of) page content without scrolling.
In a way, I do agree with you. There are just not that many good articles or discussion pages one can skim without scrolling anyway. For articles, I think if we manage to have a layout where text leaves space for margins that can be filled with images or other media, notes and infoboxes, we can hit two birds with one stone: fill that precious screen space and make the text more legible.