Design Needs for Submariner-Website

[jberkus]

The new website draft has several design requirements that we need help with:

• Add general-user home page, similar to what is at https://submariner.io/ home page, with additional links to content
• Fix responsive design so that it behaves well with high-resolution screens as well as phones
• Reconsider logo and color scheme; designer suggestions wanted

Home Page: This page should include: what submariner is, link to getting started docs, link/exerpt for most recent news, link to general docs. For SEO reasons, it may be better to break each of these out into their own static "home" pages, depending on the docs build setup.

Responsive Design: currently the site looks good at mid-resolutions, but on high resolution monitors the text goes too small/wide, and on phones it's unreadably big.

Logo/Colors: current home page uses a strong aqua color that may be problematic for some viewers, and doesn't work well for contrast with either black or white text. Reconsider this if there's a better color scheme. Also, suggest some alternative logos for the project that might be more stickerable.

[tigert]

Hmm, the responsiveness seems OK to me though? On phones it might depend on the screen pixel density (DPI) but at least on my phone it seems pretty spot on. Same with wide monitors, it seems to flow quite ok - and the extreme ends of the scale (like a fullscreen browser on a 4k screen) are a bit tough to cater a website for anyway, as it is just not very practical use case.

In any case, those responsive things are probably best handled with a web framework that does its magic and is tested accross devices and resolutions, maybe Hugo itself or the used theme has something to control this with?

[mangelajo]

The problem I've seen is that when the screen is too wide, the text becomes very hard to read because it's too wide. I hope we could limit the width.

[mangelajo]

Thanks @tigert for helping us with this.

[tigert]

Hm, the page does have responsive breakpoints (it adapts to different screen sizes) and it works ok on my phone and various screen sizes. The wide thing is that one "great for" box that is wider than everything else, but that is likely easy to fix, maybe it needs to be wrapped inside some other container in the page.

What we could do, is to make the font a bit larger as it is quite small, especially if you have a high DPI screen.

I can give it a try, will need to poke at Hugo (that's what it is made with, right?) to learn how that works, but that should not be too hard.

I know it will be an issue on a 4K monitor, but I am also wondering how many people actually use a fullscreen browser on a very large screen.

[tigert]

No wait. I built this repo with hugo, and I see I was confused, as it is not the submariner.io site but a different one. D'oh.

Let me see and I'll get back to this. Sorry about the confusion.

[mangelajo]

@tigert look here for guidance:
https://submariner-io.github.io/en/contributing/website/

Let me know if you need any help getting it up and running.

[tigert]

I got it to build and serve on a container with podman. In case someone else finds this useful:

cd src/

podman run --rm -it -v $PWD:/src:Z -p 1313:1313 -u hugo jguyomard/hugo-builder \
    hugo server -w --bind=0.0.0.0 --baseUrl=[laptop ip address]

The laptop ip address is needed so I could view it from other devices (my phone) on the same LAN. This was on Fedora 31.

[mangelajo]

I got it to build and serve on a container with podman. In case someone else finds this useful:

cd src/

podman run --rm -it -v $PWD:/src:Z -p 1313:1313 -u hugo jguyomard/hugo-builder \
    hugo server -w --bind=0.0.0.0 --baseUrl=[laptop ip address]

The laptop ip address is needed so I could view it from other devices (my phone) on the same LAN. This was on Fedora 31.

That's cool, I'll try to integrate that as a make target as soon as we finish with the current release, good for testing from other devices :)

[tigert]

Hmm, so this is going slower than I hope.

I am trying to figure out whether there is an easy way to restrict the width of the whole page, but the CSS seems to have absolute positioning for the sidebar and such, so I am not sure how easy it is to add a responsive breakpoint for huge monitors without causing problems somewhere else :-/

The whole theme is designed with the documentation browser use case, where you resize it next to your IDE I guess. so I am not sure how this would be implemented. I fear my CSS skills are not good enough here.

[jberkus]

Should we tackle some of the other design issues then?

[nyechiel]

@tigert is working on a new homepage design, see #137

[tigert]

Some food for thought. This is just an image at this point, we need to figure out how to implement it in the website.

My reasoning is that the current template works well for documentation, so we could create a separate landing page that links to the documentation, and we'll have a common high level navigation bar on both templates that connect the two.

And yes, we also need to create that diagram which explains how this works.

[nyechiel]

Some food for thought. This is just an image at this point, we need to figure out how to implement it in the website.

My reasoning is that the current template works well for documentation, so we could create a separate landing page that links to the documentation, and we'll have a common high level navigation bar on both templates that connect the two.

And yes, we also need to create that diagram which explains how this works.

This design looks great, @tigert. I am looking forward to see how this can be integrated into the website. FYI, we removed the videos from the homepage for now, see #210

[tigert]

Hm.

So, one option is to just do two sites: submariner.io and submariner.io/docs (or even docs.submariner.io) where the main page is more like a showcase, and could use a different "landing page" template from the hugo themes that we could modify, and then use the "learn" theme for docs.

Because I fear if we start to mess with an existing theme to make it look completely different, the CSS stuff tends to get nasty and you are very easily going to lose all the mobile responsiveness and chances of blowing up things if you want to update the themes is going to be higher.

Thoughts?

[nyechiel]

Hm.

So, one option is to just do two sites: submariner.io and submariner.io/docs (or even docs.submariner.io) where the main page is more like a showcase, and could use a different "landing page" template from the hugo themes that we could modify, and then use the "learn" theme for docs.

Because I fear if we start to mess with an existing theme to make it look completely different, the CSS stuff tends to get nasty and you are very easily going to lose all the mobile responsiveness and chances of blowing up things if you want to update the themes is going to be higher.

Thoughts?

Thanks @tigert. It's probably the most pragmatic thing to do, assuming we don't want to mess with Hugo theme, etc. @mangelajo if you don't have an objection, maybe we can propose this in the next upstream call? /cc @Oats87 @dfarrell07

[mangelajo]

It makes a lot of sense to me @tigert @nyechiel.

I'm all for doing something like that.

[mangelajo]

@dfarrell07 @Oats87 @tpantelis @skitt any opinions?

[skitt]

+1 from me, I like the idea of having effectively two sites.

[dfarrell07]

Makes sense to me. There will be a lot of links that need updating, but we can do that. I prefer docs.submariner.io, but both are okay.

[tigert]

Ok that sounds good.

Do you prefer to use Hugo for this site too? Maybe there are some templates we could adapt for the site? Anyone know more about hugo that could recommend something?

I am not that familiar with Hugo, it seems to be easy to create a site, but I assume it's like the rest of web frameworks, that if you want to change things a bit more, you need to dig a lot deeper under the hood.

[dfarrell07]

I think it makes sense to try to keep our current setup as much as possible, as it works very well for both local development and deployment to production. I guess it's possible to add a second site using a second theme and keep everything else similar @mangelajo?

There are a lot of other Hugo themes: https://themes.gohugo.io/

Maybe you'd like to recommend one you like the design of @tigert?

[mangelajo]

I was expecting that may be the front side could be just plain HTML ? may be Hugo could do too for flexibility but I'm not sure if that's necessary

…

On Wed, Nov 18, 2020 at 1:19 PM Daniel Farrell ***@***.***> wrote: I think it makes sense to try to keep our current setup as much as possible, as it works very well for both local development and deployment to production. I guess it's possible to add a second site using a second theme and keep everything else similar @mangelajo <https://github.com/mangelajo>? There are a lot of other Hugo themes: https://themes.gohugo.io/ Maybe you'd like to recommend one you like the design of @tigert <https://github.com/tigert>? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#72 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAI7G4VBL3NNIS7DONLAEADSQO3T5ANCNFSM4LZWOJOQ> .

-- Miguel Ángel Ajo @mangel_ajo <https://twitter.com/mangel_ajo> OpenShift / Kubernetes / Multi-cluster Networking team. ex OSP / Networking DFG, OVN Squad Engineering

[nyechiel]

@tigert are you still planning to look at this?

[tigert]

Yes, I am checking through the hugo themes.

I think it makes most sense to use a theme that is mobile friendly and try to customize it to our needs, instead of thinking of implementing it all from scratch.

[tigert]

https://themes.gohugo.io/syna/ < this might be something as a starting point, but I need to dig into it a bit more. These sometimes have weird quirks like using the main config file to store the landing page content.. But this looks promising so far.

[tigert]

https://shipwright.io is also built with Hugo, that might be another one to study (the site is in github)

[tigert]

So I think this theme (Docsy) that shipwright also uses ight fit our needs, it is for documentation but seems to feature a landing page layout which might be good for us to showcase submariner.

demo: https://example.docsy.dev/

https://themes.gohugo.io/docsy/

[stale]

This issue has been automatically marked as stale because it has not had activity for 60 days. It will be closed if no further activity occurs. Please make a comment if this issue/pr is still valid. Thank you for your contributions.