Design: Docs landing page

[catrobson]

Design a landing page for the OSIO docs. https://github.com/fabric8io/fabric8-online-docs/issues/40#issuecomment-337604181

https://docs.prod-preview.openshift.io/

For now, we just need:

• a decent overall look, pbbly based on os.io
• some clear heading (it's there already but could look better)
• a way to link to the two docs (again, already there) (in the future, there will likely be more docs; also, it would be nice to do more than link to the docs -- there could a very short description)

What we want to include that's not already there:

• link to OSIO itself
• link to this repo and potentially other relevant repos
• link to the RH Developer Program

Considerations for the future (this will need acks from others, but I imagine it could be useful):

• feed from OSIO-tagged StackOverflow questions
• integration of OSIO elements (login, access to profile, status icon)
• links or feed from OSIO YouTube
• ...?

Also, at this point, the page carries its own CSS, which is awful. I suppose some CSS shared with OSIO could be used to minimize loading time.

[catrobson]

@muruGanesan can you and the team take a look at this and provide some insights and designs to Robert Kratky?

[muruGanesan]

@catrobson, I will assign someone to look at this.

[muruGanesan]

@catrobson, Ashish is assigned to this task. He will start the work on Monday 18th Dec 17, He would like to get some information/background about this requirement.

[AshishDurgude]

Hi @catrobson I have created the visual but feed section is remaining, before proceeding further I want some feedback on my visual and please point me in the right direction for the same.

[catrobson]

Thanks Ashish!

A few comments (In the future, placing designs in InVision makes it much easier to comment in context of the screen rather than having to use words to explain where on the page I am describing):

• Overall, the layout and structure of the page look great. I think this is a nice way to lay out the information!
• The header background looks like it is using not 45% angles, which is our brand standard (https://brand.redhat.com/elements/pattern/). Please change the background to follow the standard angles.
• It feels like the font size on the header should be larger font size. Also, the blue link on the red background doesn't read well, I would suggest moving this out of the header area and onto the line of the first header "OSIO Documents", right aligned as you have it, or create a footer that this information sits in as a "contact us" type link (see Red Hat Developers Program website for footer example).
• For the related websites (OSIO and RHDP) I would use the logos and drop the header text. Hovering over the logo should have alt text with that title. For the Repositories, I would drop the logo, and make OpenShift.io Repositories plain text as the header of that card, spelled out rather than abbreviated OSIO.
• I'd look at how the stack and youtube feeds normally look on some other sites. I don't think they need full page width, so you might be able to do those in separate cards side by side rather than tabs.

[AshishDurgude]

@catrobson Thanks for your feedback. I'll work on that.

[rkratky]

@muruGanesan, @AshishDurgude, thanks. I didn't know this was being worked on. In the mean time, we were discussing one other thing:

Also, I had a chat with @rhoads-zach who's responsible for RHOAR/LOSIO docs (see https://appdev.openshift.io/docs/), and we discussed the possibility of having a unified landing page for all os.io-related docs (pending acks from interested parties). Could you please, look into that as an option when designing the docs.os.io page?

I believe it would make a lot of sense to have a single docs front page from which links could go to content specific to the different solutions (OSIO, LOSIO, RHOAR, ...).

Comments about the mock up:

• I like the 'card' look, but please consider that in the future, there might be many more documents to link to. Right now, we only have two, but I believe we need a design that would allow for more than 4 or 5, which seems to be the limit of the current proposal.
• We need a clear way to distinguish between links to HTML and PDF versions of the individual docs (and maybe other formats, such as EPUB, in the future).

[catrobson]

@rkratky curious why you would want something outside of the customer portal for the single solution to docs for multiple products? Today that is the shared docs location option, and I think we would probably want to have a larger discussion with other stakeholders like Dawn Eisner and Sam Knuth if we're going to be proposing something else.

[rkratky]

@catrobson The LOSIO/RHOAR docs I mentioned already are published outside of the CP. And since they're related to OSIO, it would make sense to present them from the same place as OSIO docs.

As for why there are any RH docs outside of the CP at all (i.e. what's the reason for the existence of docs.openshift.io in the first place -- instead of publishing OSIO docs on the CP), that was a request by Todd and co.

We (the docs team) initially expected to publish OSIO docs on the CP just like other product docs, but we were asked to go for docs.os.io instead. I'm not terribly happy about that, but that's the way it is. And I can understand the ask to have docs under the same umbrella as the rest of the product.

(When this became clear, I also asked the CCS tooling team about the possibility of using the CP publication toolchain for publishing on external properties (such as docs.os.io) to avoid any duplication of effort, but that was rejected as something they won't support.)

Btw, Sam knows about docs.os.io et al.

[catrobson]

@rkratky Thanks for bringing me up to speed! Ok, I understand where we are now and agree with a unified front to docs from Launch, RHOAR, etc.

[AshishDurgude]

Hi @catrobson.my invision account has only reviewer access. Can you please provide me the contributors access, so that I can upload my designs to invision?

[catrobson]

@AshishDurgude updated!

[AshishDurgude]

@catrobson Thanks for giving me collaborator access. Here is the link: https://redhat.invisionapp.com/share/YPF2HO3V4. Suggestions are welcome.

[AshishDurgude]

Hi @catrobson & @rkratky , this is the updated design link: https://redhat.invisionapp.com/share/R9F33K98F

[AshishDurgude]

Hi @catrobson & @rkratky, I have updated the design. please look at it. https://redhat.invisionapp.com/share/C3F2HNKHV

[AshishDurgude]

@rkratky, https://redhat.invisionapp.com/share/C3F2HNKHV

I have added the red header. I have a question. In the Invision, the comment you gave the suggestion that "boring" header we're using now for the pages with individual docs.". So do you want me to create that page also? If yes, can you send me the individual docs page link? If no, then can you explain more about this? & if this is the screen you want. Then it's done.

[catrobson]

@rkratky are you all set with the designs here, or is there more discussion to have?

[rkratky]

@catrobson I added some more comments for Ashish to the mock up.

[AshishDurgude]

Hi @rkratky and @catrobson, I made some changes as per his reviews. here is the link. https://redhat.invisionapp.com/share/C3F2HNKHV

But before that, I have a question to @catrobson. If you open the above link, then on the first screen, you will see that I added tabs for OSIO and RHOAR document. It's that okay?