Distinguish test vs production pages

[wrightmw]

Add a light background color or distinctive border to all pages viewed in the test server to distinguish them from production server.

[kilodalton]

@wrightmw We already have a pink banner with a notice near the top indicating demo/test on the demo/test servers. Are you not seeing that on some pages? If you click to close it, it will re-appear only when you refresh that particular page.

[selinad]

Hi @kilodalton - yes, it is there - I think we get immune to it at some point though. For SGD, we always had different color background for dev/test - something persistent throughout the site that makes it always obvious. Since we are sending it out to people, I think it wise to have it be much more noticeable.

[wrightmw]

@Karen Daltonmailto:kdalton@stanford.edu I agree with @Selina S. Dwightmailto:selinad@stanford.edu , I think that pink banner would get overlooked after a while... a more noticeable on difference would help to remind curators that they are on the test vs production pages.

---

From: selinad notifications@github.com Sent: Monday, November 02, 2015 12:41 PM To: ClinGen/clincoded Cc: Matt W. Wright Subject: Re: [clincoded] Distinguish test vs production pages (#450)

Hi @kilodaltonhttps://github.com/kilodalton - yes, it is there - I think we get immune to it at some point though. For SGD, we always had different color background for dev/test - something persistent throughout the site that makes it always obvious. Since we are sending it out to people, I think it wise to have it be much more noticeable.

[https://avatars1.githubusercontent.com/u/1878194?v=3&s=400]https://github.com/kilodalton

kilodalton (Karen Dalton) kilodalton has 2 repositories written in JavaScript, Shell, and Python. Follow their code on GitHub. Read more...https://github.com/kilodalton

Reply to this email directly or view it on GitHubhttps://github.com/ClinGen/clincoded/issues/450#issuecomment-153150433.

[forresttanaka]

The anti-anti-pattern I guess is ENCODE which just has a banner like ClinGen currently does, and was one of my earliest assignments after I started here. Granted ENCODE’s banner is much bolder. I originally made it kind of subtle, but was told “Bolder! Bolder!”

But making it the whole page background or some border or something wouldn’t be difficult.

[selinad]

Ha! Bolder would be better, but people can turn it off, etc. I would still prefer something much more persistent.

[mrmin123]

Something like this?

[wrightmw]

Yes, thanks for this. I like the red border. @selinad suggested a light background color. Perhaps we could compare these two options and see which looks better?

[mrmin123]

Light-red background:

[tsneddon]

@mrmin123 - both look good but will let Selina weigh in!

[kilodalton]

@mrmin123 @tsneddon @selinad @wrightmw I would prefer if the whole site was not rendered in pink. That may clearly indicate something to you but it makes the site look really bad. Even something like a pale yellow or something would be better or make the border Min added less red but more distinctive (thicker?)? @forresttanaka Forrest, do you have any suggestions?

[kilodalton]

For what it's worth, the test site is the widely accessible version that we let more folks have access to so we can show them what we have done. It still should maintain a certain aesthetic.

[forresttanaka]

[forresttanaka]

You could also make the header image different or empty.

[wrightmw]

@kilodalton I have to confess that my heart sank a little when I saw the swathe of pink across the screen. I am not a fan of pink. A thicker border would be good or a different color background? I don't think changing the header alone would be distinctive enough. I'll wait for @selinad to weigh in before adding further comment.

[kilodalton]

I think it has value for the demo site to maintain much of the look of the "true" site (I would vote against altering the header image to make it significantly different or empty). I think it looks good and we want to be able to show it off.

Another possibility, although also not ideal. A scrolling "DEMO" non-closable notice box/vertical rectangle which is always visible in the window on the left and/or right of the currently viewable screen. The action of those active scroll notices are slightly annoying but they draw your eye without affecting the visual aesthetic of the site too much.

[tsneddon]

Yeah, I prefer the border, especially since I've worked on a couple systems where this was how they made the distinction between test and production. I think it is the most obvious way to highlight the difference out of the 2 options presented. I'm liking the idea of the DEMO box though...

[kilodalton]

I vote for the demo (+/- border if we go that way or other notice as I mentioned) to be the darker red

[wrightmw]

I have also previously worked with the border option and it worked well. It also means that other than the border the site remains unchanged between the two.

[mrmin123]

But pink is so fashionable!

[mrmin123]

[kilodalton]

I think if we are going with the dark red then the demo notice should also be that color

[kilodalton]

Also...the global red box currently overlays the blue bar at the top of the page… what would you think about having it just be on the sides/bottom… or if possible sides/bottom and not extend into the header (so we have still have the blue bar that is at the top of the interface)? (like more of a red "|_|" shape) …I am just just trying to preserve what we can (if possible) of the look of the “real” site.

[selinad]

Thanks for working through a few mock-ups. I agree that the pink background is not desireable. I was thinking a really light yellow or blue (blue would be better). However, @kilodalton makes a good point that we don't want to ruin the look and feel of the site - it is somewhat different from SGD in that it will be available to people outside our group.

I could actually go with just the dark red bar ( @forresttanaka version) if it weren't collapsible! It's much more obvious than the pink. Having the red border alone may not obviously indicate it is a test version.

My only other thought would be a background that was not all white but had TEST INTERFACE on the diagonal in a light gray (kinda like a watermark)....it would show where there is no content. Is that a technique used anywhere on websites?!

@tsneddon @wrightmw would you be OK with just a non-collapsible dark red bar?

[forresttanaka]

Easy to make that bar non-collapsable.

On the watermark, I feel like I’ve seen that before but not sure. It should be made an SVG so it’s not too large a file to load, and we’d have to make sure it doesn’t get loaded if it’s not used, or it can be made inline with CSS and probably not be too bad.

[tsneddon]

@selinad - I feel something in addition to the bar is needed. The watermark could be a solution if it's easy to implement.

[selinad]

Thanks @forresttanaka & @tsneddon

Maybe the dark red bar with the red border starting just under it on both sides (justified), going down each side and wrapping around the bottom? Then it might be clear the red border indicates test.

[selinad]

@forresttanaka if you think the watermark wouldn't take much time, it might be fun to see, but wouldn't want you to get into a big project!

[forresttanaka]

@mrmin123 Can probably do it too. You just need to make a watermark SVG in Illustrator (might need me for that, but it would only take a few minutes) and assign that to a CSS class background image. Then in Javascript you’d only include that class for the body or .content or something if it’s the test site.

[mrmin123]

@forresttanaka If you have the time could you generate the SVG for me? I've only used illustrator once or twice, so I'm not too comfortable with it. I can implement it into the site, however, since most of the code is in there anyways.

[forresttanaka]

I made an SVG that makes this background pattern. Does it seem OK? I can adjust spacing (and anything else of course).

[mrmin123]

Thanks @forresttanaka ! Current implementation:

[mrmin123]

While discussing with @kilodalton I floated the idea of attaching the 'demo notice' bar to the bottom of the viewport. The bar will be always visible, at the bottom of the page, no matter where you are scroll-wise.

On dashboard:

On curation central:

[selinad]

Hi @mrmin123 @forresttanaka Thanks so much for mocking this up!

@tsneddon @wrightmw and I are here together and like the "watermark" background - the only place where it is a potential problem, but not game changer, is up around the title ("Curate Family Information"). Not sure if something can be easily done about that (e.g. only on sides or make that area where the title is have a white background).

None of us like the red bar at the bottom - best at top.

Also, if we have the background, then the red bar can go back to being collapsable.

thx!

[kilodalton]

If there is concern about people not recognizing that it is a demo site, the demo notice probably should not be collapsible, especially since it doesn't interfere with site functionality.

[mrmin123]

@selinad The only concern I have with blanking/whiting out the center column is if the width of the browser is just right then you wouldn't see the background anywhere. In this screenshot, imagine that the center column has a background of all-white. It would cover up the test-site background almost entirely:

[selinad]

Yes, thought of that as well, but I always have white showing. To be safe, leave it showing in center, too (ok'd by TMS).

What happens on the record curation page? Does watermark show behind abstract?

We are all ok with leaving the red non-collapsable. Merits to both sides.

thanks!

[mrmin123]

@selinad Yes, it's currently behind the abstract:

[selinad]

We all like it!! Thank you!

[mrmin123]

Demo instance here: http://450-mc-test-vs-prod-b9ef920-minchoi.instance.clinicalgenome.org/

[forresttanaka]

Yeah, I’d say you’d have to be pretty jaded to go blind to that. It’s quite a bit more subtle on mobile because very little of the background normally shows through, but I’m sure that won’t matter.

No one wants my Pumpkin Spice Header huh? :cry:

[kilodalton]

I feel like the "TEST INTERFACE" frequency (spacing) as seen on the demo instance is really very overwhelming and "busy" on pages with a lot of white space and significantly interferes with reading text on non-form areas (pubmed abstract, family/indiv labels). @forresttanaka Could you make a version where the pattern is slightly more dispersed for us to try?

I understand we want to indicate that this is a demo site, but again this is also the only place where people can go to see the work we've done and how the site looks since we have a "closed" system for the production site.

I think a banner on the top plus a banner that persists in every view on the the bottom (a distinctive red bar in both places) would be sufficient and not interfere with the reading of the text on the site.

[forresttanaka]

Made the text smaller, and the pattern repeats every 384px instead of 256px.

[mrmin123]

[forresttanaka]

Not that I want to put a HECK of a lot more thought into this, but another option is to put “TEST INTERFACE” on one line instead of broken into two. That reduces the spacing in one direction, and increases it in another.

[mrmin123]

Any further opinions on this? Any instance requests?

[kilodalton]

@mrmin123 A new instance would be helpful. Of special concern is readability of any text that is in the center well on the white background that would be hard to read interspersed with the grey "test interface" underlay (abstracts, family names, etc).

[selinad]

I agree that an instance would be helpful for this particualr ticket. thx!

[mrmin123]

@kilodalton @selinad Had to resolve some silly technical issues on my end, but here we go: http://450-mc-test-vs-prod-c919957-minchoi.instance.clinicalgenome.org/

[selinad]

I like it! Works for all the pages, even if in that tiny bit of space at the top. In combination with the red bar, I think we are set. Will wait for any other opinions.

Thanks @mrmin123 ! Selina

[wrightmw]

@mrmin123 Thank you, it looks great. Users can easily see they are on the test page, and it's not overbearing. I like it.