Page MenuHomePhabricator

Define the look&feel of the Developer Hub
Closed, ResolvedPublic

Description

One of the goals of the Developer Hub prototype is to implement a look&feel to be tested and matured.

You can see the current direction in the form of mockups and a temporary prototype.

Details

Reference
fl480
TitleReferenceAuthorSource BranchDest Branch
Gerrit patches list: Display subject of changeset firstrepos/phabricator/extensions!11aklapperT301025wmf/stable
Add fundraising civicrm-jobs, update othersrepos/releng/dev-images!29andyrussgfundraising-jobsmain
Customize query in GitLab

Related Objects

StatusSubtypeAssignedTask
ResolvedVolker_E
ResolvedNone
DeclinedNone
DeclinedNone
ResolvedQgil
ResolvedQgil
ResolvedQgil
Resolved Spage
Resolved Spage
Resolved Spage
Resolved Spage
Resolved Spage
DeclinedNone
DeclinedNone
Resolved Prtksxna
Resolved Prtksxna
Resolved Prtksxna
Resolved Spage
ResolvedJdlrobson
ResolvedNone
DeclinedNone
ResolvedNone
ResolvedQgil
ResolvedVolker_E
Resolved violetto
ResolvedVolker_E
ResolvedVolker_E
DeclinedNone
ResolvedNone
ResolvedVolker_E
DeclinedNone
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedPastakhov
ResolvedNone
ResolvedPastakhov
ResolvedNone
ResolvedVolker_E
ResolvedNone
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
DeclinedNone
Resolved Spage
Resolved Spage
DeclinedQgil
Resolved Spage
DeclinedNone
DeclinedNone
ResolvedNone
DeclinedNone
ResolvedAnomie
DeclinedNone
OpenNone
OpenNone
Resolved Spage
Resolvedori
Resolvedjeropbrenda
OpenNone
Resolved Spage

Event Timeline

flimport raised the priority of this task from to High.Sep 12 2014, 1:43 AM
flimport added a project: Web-APIs-Hub.
flimport set Reference to fl480.

qgil wrote on 2014-07-28 16:24:06 (UTC)

@MSyed, in terms of design, what is missing from the mockups and the prototype from your point of view, if anything? I'm only asking to be sure of what is left.

About color schema for code, have you considered using http://ethanschoonover.com/solarized ? Or is there a specific reason to use blue-red? Maybe this point is moot. The color schema might be defined by whatever tools we use to publish code anyway, and in that case we should keep consistency between manual and automatically generated documentation.

qgil wrote on 2014-08-21 11:34:28 (UTC)

@MSyed, at Wikimania you showed updated mockups in your presentation? Where can they be found?

msyed wrote on 2014-08-25 22:01:53 (UTC)

@Qgil will post the mocks here as soon as I get them to a shareable state.

qgil wrote on 2014-08-26 06:16:17 (UTC)

Replying to @Legoktm's comment at T491#22:

The idea is to provide a simple and clear user experience for visitors of this site. We are working on a specific look & feel and we want to define a soft wall to mark a clear separation between this site and the big, diverse, and potentially confusing mediawiki.org of nowadays. One way to achieve that would be to export everything to a separate site. I believe it is a lot better to define this separation by design, while keeping users in mediawiki.org for common usernames, searches, watchlists, etc.

How much we have to walk away (or not) from plain Vector to achieve this? We don't know yet. We have started working on a prototype with total design freedom. I still think / hope that Vector + custom CSS will be enough, but I'm also happy exploring the possibility of having a specific skin for this specific namespace, a feature that sounds technically interesting per se. What is clear to me is that having an own design is not a reason strong enough to build dev.wikimedia.org elsewhere as a standing-alone project.

Qgil lowered the priority of this task from High to Medium.Jan 24 2015, 7:03 AM
Qgil added subscribers: Qgil, Prtksxna, Spage.
In T301#3654, @Qgil wrote:

I'm also happy exploring the possibility of having a specific skin for this specific namespace

@Prtksxna has been working on a skin for #LSG, and I think the default plan could just to use it.

In action: http://living-style-guide.wmflabs.org/
Design: http://prtksxna.github.io/living-styleguide-template/
Skin code: https://git.wikimedia.org/summary/mediawiki%2Fskins%2FLivingStyleGuide

And it turns out that running a specific skin in a specific namespace can be achieved with https://www.mediawiki.org/wiki/Extension:SkinPerNamespace

Sounds like a plan? @Spage, what do you think?

In T301#992888, @Qgil wrote:

And it turns out that running a specific skin in a specific namespace can be achieved with https://www.mediawiki.org/wiki/Extension:SkinPerNamespace

Is dev.wikimedia.org supposed to be a MediaWiki instance? I was hoping it won't be one.

The current idea is to use a namespace in mediawiki.org -- see T312: Technology selection for the Developer Hub and feel free to bring your ideas there.

@Jaredzimmerman-WMF sketched a skin design where broad "divisions" like Wikimedia | Data | Styleguide | Transparency | Annual Review go across the top, and then a TOC for the current division appears in the left-hand nav, similar to current http://living-style-guide.wmflabs.org/ . The nice thing about this is it can handle the pages in these divisions migrating from separate wikis to namespaces. It's a promising approach.

Are we concluding then that the Developer Hub doesn't aim to have a look&feel on its own? If so, I'm all for this, and we could close this task.

I think this is fine, it will likely be a subtle variation on Blueprint
https://phabricator.wikimedia.org/tag/blueprint/ theme e.g. a few
additional page template types, but otherwise unchanged.

*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation

M +1 415 609 4043 \\ @Jaredzimmerman http://loo.ms/g0

I agree with @Qgil and @Jaredzimmerman-WMF. We can close this task and probably raise particular issues in Blueprint as to what changes might be required to support Developer Hub too.

The "developer hub" skin needs

  • left-hand nav
  • support for in-page TOC
  • links to "divisions" across the top

The current LSG doesn't have those pieces or if it does they don't resemble Juliusz' prototype or the wireframe. So no, please don't close this.

e.g. a few additional page template types

How does a page signal to Blueprint it needs a different page template?

I'll be focusing on this in March, by then I'll have some actual content.

In T301#1025618, @Spage wrote:

The "developer hub" skin needs

  • left-hand nav
  • support for in-page TOC

It'll have these, @violetto is working on the designs.

  • links to "divisions" across the top

I am not sure what this means.

I'll be focusing on this in March, by then I'll have some actual content.

I'd be happy to work with you!

@Spage, I have created a task about the navigaton elements: T93062: Define the navigation elements of the Web APIs hub. I don't think the look&feel of dev.wikimedia.org is conditioned by these elements. We are agreeing that we will just adopt Blueprint's look&feel, and therefore I think we can close this task.

If there are things from Blueprint's l&f that we think should improved or done differently, we can file tasks against Blueprint or try to implement them ourselves via CSS.

Blueprint issues from talking to Prtxsxna

  • They have no concrete plans to put it on mediawiki.org.
  • It doesn't support Jared's idea T301#1010178 for broad "divisions" like Wikimedia | Data | Styleguide | Transparency across the top (Could fake it with a wiki template similar to Tech header).
  • It gets left-hand content from the wiki's MediaWiki:Sidebar. But mw.org already has a rich complex sidebar. (An easy enhancement, and the Blueprint UX hides the sidebar most of the time)

So, in the short- to mid-term, the pages on mw.org will be framed by Vector unless we rethink T312: Technology selection for the Developer Hub. I hope that's OK for T299: Release the Developer Hub prototype. Lotta moving parts.

Sorry, but I do think that look & feel is an essential part of the prototype. Our first requirement at https://www.mediawiki.org/wiki/Dev.wikimedia.org#Technical_infrastructure is

Possibility to customize the UI in order to provide a pleasant user experience.

Plain Vector with no less than mediawiki.org's header and left column defeats in great measure the purpose of the prototype, because we will need to have a lot of imagination to envision how the launched project will look like.

As long as we want to base dev.wikimedia.org in a MediaWiki, Blueprint is still our best chance of success. @Prtksxna, @Jaredzimmerman-WMF, It is fine if today you "have no concrete plans" for our use cases, but do you want us to use your skin and maybe bring some feedback to improve it? (For what is worth, I'm not sure how big it's our problem with the current Blueprint as long as the navigation UX needs for dev.wikimedia.org are not defined (T93602). When it comes to navigation, @MSyed's wireframes are not specific enough, and they haven't gone through real requirements and test.

Back to the prototype, if there is really no short-term chance to deploy Blueprint as optional skin in mediawiki.org, we will need to think in a Labs instance.

Just to clarify my idea was for a future enhancement, not an actual plan on
the roadmap or something that anyone agreed to. I could also see it an an
option or extension that gets toggled on on sites/project where it is
wanted/needed but not a default part of the skin.

And just to clarify my proposal: install Blueprint skin in mediawiki.org, so we can activate it by default in the namespace selected for the developer documentation (T369). It will be an optional sking, so there will be no look & feel change for the rest of mediawiki.org.

As a side effect, users willing to try Blueprint will be able to enable it in their preferences. I don't think how this can be a bad thing, we can label it "Blueprint-EXPERIMENTAL or something, if there are concerns about expectations. I have been advocating for the availability of experimental optional skinf in mediawiki.org for better testing and to free our minds. (i.e. T49091)

In T301#1134932, @Qgil wrote:

@Prtksxna, @Jaredzimmerman-WMF, It is fine if today you "have no concrete plans" for our use cases, but do you want us to use your skin and maybe bring some feedback to improve it?

Personally, I'd like to see Blueprint being used on Mediawiki, but I don't think I'll have the time to support it for the DevHub. I mentioned to @Spage that right now we're focussing the design and development according to the needs of the styleguide. Even so, any issue that'll make it unusable as the DevHub skin (navigation stuff maybe) should be surfaced sooner than later. That way, even if I can't work on that issue right away, I can make sure that I don't make it hard to solve the issue later.

(For what is worth, I'm not sure how big it's our problem with the current Blueprint as long as the navigation UX needs for dev.wikimedia.org are not defined (T93602).

Issue link missing here.

It will be an optional skin, so there will be no look & feel change for the rest of mediawiki.org.

I don't see a problem with making it an experimental skin on Mediawiki as long as the expectations for support are set clearly.

Personally, I'd like to see Blueprint being used on Mediawiki

I created T93613.
From talking to you, @werdna, and @Jaredzimmerman-WMF I think you also "would like" to eventually host the Living Style Guide on mediawiki.org, I made T93610

If you have no plans to do either next quarter (April-June), or ever, let Quim and I know.

I'll be working on navigation and using some kind of skin in April-June.

@Spage, if you are going to continue working on this project in your spare time, then I recommend you to prioritize the creation of a prototype with Blueprint skin in Labs, and close this task as resolved.

After a couple of random conversations about this project, it is clear to me that potential readers and casual reviewers are conditioned by the mediawiki.org look&feelk even before they read the title of the page. If we want to provide a fresh look to our documentation, we need to provide a fresh look&feel. By now I'm convinced that trying to build a prototype with Vector look&feel and MediaWiki sunflower in the corner will we a hard psychological work.

Is this task about picking a design for the devhub or actually implementing it? Not sure why Blueprint is a project here.

Resolving, as per T301#1237839. Our look&feel is determined by the Blueprint skin. Specific pages with specific l&f requirements can be addressed individually.