Revisit Catalog Homepage Look and Feel

mwengren commented 6 years ago

At a recent IOOS meeting, it was recommended we reverse the vertical arrangement of the Search Data box, and the 'Welcome to IOOS Catalog' box.

It could also use some general look and feel improvements, perhaps embellish the welcome paragraph with more of an abstract/description.

This will be part of the 1.2 release in Dec.

Specific improvements:

[x] Reverse the vertical order of the Search and Welcome/Statistics boxes. Change styling of search box to match below:
[x] Redo CSS/styling to resemble IOOS.us - header/footer colors, remove the gray tiling and replace with something more IOOS-like as a background (washed out photo collage or something visually appealing). Update: looks good, let's see if a washed out grayscale background image would look good for the whitespace.
[x] Add a box/table with logos and prominent links to the CS-W service endpoint and CKAN API endpoints. Add links to background info to these services, one to the CKAN API docs (from footer link), one to pycsw documentation site. Something like: |Service|URL|Documentation| |CS-W|https://data.ioos.us/csw?service=CSW&request=GetCapabilities (alongside CS-W icon|pycsw documentation|
[x] About page improvements: Micah to provide IOOS-specific content (link to github.io Catalog site, project background, other help links to API docs, etc)
[x] Footer: Consider redoing footer to resemble IOOS.us more (remove links to OKFN, remove link to CKAN API documentation, add IOOS related links similar to IOOS.us)

ericmbernier commented 6 years ago

catalog-ioos

Attached is a WIP screenshot of the latest Catalog changes. Kelly, the developer handling this issue, intends to clean up the header and footer today, as well as any additional changes we may decide on in today's meeting.

@mwengren Let us know if you have any comments or suggestions.

ericmbernier commented 6 years ago

ioos-catalog-homepage @mwengren Attached are more updates. The washed out image in the background is placeholder, as is the Links box. Are there logos, and descriptions you want for each link, so this box takes up more vertical real estate?

mwengren commented 6 years ago

Oooh, I like that! Washed out image looks pretty good as is, but if you want to make tweaks on that to improve it that is fine with me. For the table, I was thinking of something like:

Service Type	Service URL	Documentation
OGC CS-W (w/logo)	https://data.ioos.us?csw	http://docs.pycsw.org/en/latest/csw-support.html
CKAN API (w/logo)	https://data.ioos.us/api/3/	http://docs.ckan.org/en/latest/api/

Hopefully that will take up some more space with logos included to make it prettier.

ericmbernier commented 6 years ago

@mwengren Do you have any image(s) in mind for the washed out background? Turns out the one in the pic above is not one we can use. If not, we can dig something up.

mwengren commented 6 years ago

@beckybaltes @dpsnowden @kbailey-noaa @jbosch-noaa : How do you like the proposed Catalog homepage changes (see earlier comments in the issue history)? We're looking for good images of gliders, buoys, or anything else IOOS for the 'washed out' background image on the home page that isn't copyrighted. Do we have anything lying around from Glider DAC or elsewhere we could use?

BeckyBaltes commented 6 years ago

It looks pretty good to me. Rutgers has a bunch of free images on their COOL flickr page and we can use any of the ones in Kate Culpepper's repository on the .gov site. I can check about non-RU images too.

BeckyBaltes commented 6 years ago

glider-tile subsea_uw_web

These are from the .gov website. They have appropriate attribution there if you need it.

ericmbernier commented 6 years ago

ioos_catalog2

@mwengren Here is the latest iteration. The background image isn't 1080p, thus it can appear fuzzy when inspected closely. Are there any hi-res images available for us to utilize?

mwengren commented 6 years ago

@ericmbernier Which image is this? The second one Becky posted? Unfortunately, the boxes cover up everything except the water, ugh. Maybe I'll try some gimp editing to see if I can combine the Slocum glider with the wave glider and make something interesting. Either way, this is fine as it's just window dressing, so not a big deal. I like the rest of the homepage changes though so I think we're almost done here.

ericmbernier commented 6 years ago

@mwengren Yea, that is the second image. The first one was very dark, and jarring, when added.

mwengren commented 6 years ago

@ericmbernier No idea if this will be an improvement or not, but can you try this photoshopped merge of those two images as a background? Hopefully with a white fade affect towards the bottom it will look ok.

ericmbernier commented 6 years ago

@mwengren Attached is the latest image. I think I like the prior iteration better. capture

mwengren commented 6 years ago

Hmm, looks like the issue is the image I sent isn't wide enough. There's some serious stretching going on there. Let's keep the first option. May try to revisit later, since I like the glider being there.

Does this background/theme carry over to the /datasets view? In other words, will the gray background on this page be replaced by this new image?

ericmbernier commented 6 years ago

@mwengren Yes, the styling is consistent across all pages. If you don't want the image on the datasets view we can make the background white, or keep it grey as it currently is.

capture2

EDIT: Added an image.

mwengren commented 6 years ago

No, I'm in favor of the background on all the other pages as well. If you can make a screenshot, it would be great to see what it looks like though, since we don't have a dev/preview site for me to review these new changes.

ericmbernier commented 6 years ago

@mwengren I edited the above post with a screenshot soon after posting it. Let us know what you think!

mwengren commented 6 years ago

@ericmbernier looks good! Underwater image without the glider is probably fine. Might be too distracting if it were more prominent anyway. We can see about improving in the future perhaps, but for this release, we'll know for ourselves it's lurking invisibly behind the content. Most people probably won't even notice the anchor (or whatever it is called) sticking out a bit.

mwengren commented 6 years ago

@ericmbernier Couple of things on the footer. I noticed we lost the i18n pulldown. Can we restore that somewhere that makes sense? I'd rather keep that available. Also, the phone # 301-713-3290, I am in the process of trying to figure out if that belongs there or not. we may want to remove that, stay tuned. I'm also working on the About/FAQ page and will send that soon.

ericmbernier commented 6 years ago

@mwengren Ok, let us know and we will make the changes.

mwengren commented 6 years ago

@ericmbernier Reviewing some more.... can we look into how to increase the number of 'popular tags' on the home page to more than three? Could we go for five or six and see how that looks?

mwengren commented 6 years ago

hey @ericmbernier, a change request: can we change the telephone number on the footer to 240-533-9444? We realized the current one is dead, has been dead since our office move awhile ago.

ericmbernier commented 6 years ago

@mwengren Will do!

ericmbernier commented 6 years ago

@mwengren capture capture2

Attached are the latest screenshots. We were also able to up the popular tags to 6, but it is not seen above. Lastly, how do you feel about the home page and the two boxes to the right? With the new blurb on the left, the left box now extends further down the page than the two right boxes. Is this ok? If not, should we add anything to the two boxes on the right, or space/pad them up a bit more?

EDIT: Updated home page screenshot.

benjwadams commented 6 years ago

Has been deployed to production

ioos / ckanext-ioos-theme

Revisit Catalog Homepage Look and Feel #164