Website relaunched [Solved]

[Ryuno-Ki]

Hi,

since a couple of months I worked on the website and I am feeling quite comfortable now to push it to production.
But before it hits production, you'll see it on https://next.sabayon.org/

So now is your chance: Please take some minutes to browse the new website and give feedback. The changes should take effect somewhen around Wednesday, 13th June 2018 1:00 AM (CEST).

As a side effect, the UI of SCR will look broken or different (I guess), because it shares the same theme.

Now we have the chance to make some tweaks before it lands „on production”.
In the future, it will be easier for us to maintain the content and write new posts easily.

If you are interested in the technical details, look at:

• https://github.com/Sabayon/sabayon-website-next/pull/78
• https://github.com/Sabayon/sabayon-webs ... me/pull/21
• https://github.com/Sabayon/community-website/pull/34

If you have any questions, don't hesitate to approach me.

Thanks for your engagement!

EDIT 01st July 2018: We are live! Thank you for all who engaged and provided feedback!

It can happen, that you'll see a white background and turquoise link colours. That is the theme used with the former layout. From what I can tell it is caused by a caching on CloudFlare's site, i.e. should go away over time.

Using TOR browser I confirmed that the new website layout actually went live and looks like in our next.sabayon.org.

Thank you again! You rock!!

[svantoviit]

Why don't you use something like

Code: Select all

{{ now.Format "2006" }}

in footer.copyright.html to get the current year?

[albfneto]

Albfneto, Brazil.
I'm using and testing the Sabayon's site. Seems to me that is working good.
But i'm not a Computer Professional, I'm a Chemist.

[svantoviit]

The changes should take effect somewhen around Wednesday, 13th June 2018 1:00 AM (CEST).

Apparently the changes have not been propagated yet to https://next.sabayon.org/. I see a different result when I build the site from the master branch.

BTW. the instructions in the README do not work for me. Cloning the theme goes fine, but building results in an error:

Code: Select all

sabayon-website-next (master) $ HUGO_THEME=https://github.com/Sabayon/sabayon-website-next-theme make build
/tmp/sabayon-website-next/.hugo/hugo -t sabayon-website-next-theme
Started building sites ...
ERROR 2018/06/13 20:46:19 Error while rendering "taxonomy": template: theme/indexes/tag.html:16:3: executing "theme/indexes/tag.html" at <partial "navbar.html...>: error calling partial: Partial "navbar.html" not found
make: *** [Makefile:64: build] Error 255

Code: Select all

$ hugo version
Hugo Static Site Generator v0.42.1 linux/amd64 BuildDate: 2018-06-13T10:16:36Z

[Ryuno-Ki]

Shoot!

The build broke. Fixed it for the website and have to look into the community-website.

Upshot: Date moved by one day.

Thanks for highlighting it, svantoviit.

Code: Select all

HUGO_THEME=https://github.com/Sabayon/sabayon-website-next-theme make build

works for me now.

[svantoviit]

It's still work in progress, right? How to formulate it... the old site is still much better.
The title image is somehow big, taking all the screen and the posts or pages are really spartan.
It's not clear what this design wants to communicate.
Beside that the site has issues scaling properly down on smaller screens.
I would also keep the information on the license as on the actual site, thus removing the image. Saves bandwidth and requests.

Generating the year as proposed earlier works just fine and you don't have to update it manually:

Code: Select all

diff --git a/layouts/partials/footer.copyright.html b/layouts/partials/footer.copyright.html
index 06555d0..f5d01f1 100644
--- a/layouts/partials/footer.copyright.html
+++ b/layouts/partials/footer.copyright.html
@@ -1,12 +1,12 @@
 <section class="copyright">
     <div xmlns:dc="http://purl.org/dc/elements/1.1/">
         <span id="copyright" property="dc:rights">&copy;</span>
-        <span property="dc:date">2004-2018</span>
+        <span property="dc:date">2004-{{ now.Format "2006" }}</span>
         <span property="dc:publisher">Sabayon Promotion</span>
         (CF: 93018620224).
     </div>

For those curious a 1594 x 1845 screenshot of the landing page on TinyPic.

[Stupot]

I agree. I'm not sure what the point of that giant Sabayon wallpaper is supposed to be. It seems like all it does is keep a user from seeing the things they are actually looking for. It seems like a step backwards from the current site to me as well.

@Ryuno-Ki what was the motivation behind the change? Maybe if I have an idea of what we're attempting to accomplish with the overhaul it might help us making sense of it and give better feedback.

The links at the top of the page (Community, Contribution, Download, Press) seem unnecessarily small, no scaling. Also Community has a period after it?

The Download Sabayon button...while the blue does bring attention to the button, it seems jarring. It doesn't fit in with the color scheme at all.

The current site, you don't have to pick a mirror close to you to download the iso you're looking for. It is very well laid out for a new user to quickly find what flavor they want to download and to get downloading it. (Also, next.sabayon.org's list of mirrors is empty?)

[Ryuno-Ki]

It's still work in progress, right? How to formulate it... the old site is still much better.

Kind of, yeah. The thing is, the longer I wait the harder it gets to integrate …
But it is not possible to integrate it peu a peu either.
So at some point in time a hard cut is needed.

The title image is somehow big, taking all the screen and the posts or pages are really spartan.
It's not clear what this design wants to communicate.

Formerly we showed a screenshot of our greeter. I thought maybe the current wallpaper would be nice also.
Would it help to put it inside a laptop view (like the greeter before)?

Beside that the site has issues scaling properly down on smaller screens.

Will look into it. Would help, if you could go more in detail, i.e. what breaks for you? Bonus points if you could name the resolution in question.

I would also keep the information on the license as on the actual site, thus removing the image. Saves bandwidth and requests.

Hm, but how many people are willing to read text?

Generating the year as proposed earlier works just fine and you don't have to update it manually:

Code: Select all

diff --git a/layouts/partials/footer.copyright.html b/layouts/partials/footer.copyright.html
index 06555d0..f5d01f1 100644
--- a/layouts/partials/footer.copyright.html
+++ b/layouts/partials/footer.copyright.html
@@ -1,12 +1,12 @@
 <section class="copyright">
     <div xmlns:dc="http://purl.org/dc/elements/1.1/">
         <span id="copyright" property="dc:rights">&copy;</span>
-        <span property="dc:date">2004-2018</span>
+        <span property="dc:date">2004-{{ now.Format "2006" }}</span>
         <span property="dc:publisher">Sabayon Promotion</span>
         (CF: 93018620224).
     </div>

For those curious a 1594 x 1845 screenshot of the landing page on TinyPic.

The year doesn't change often, so i don't feel an urgent need to change it … but I'll keep it in mind to include it later on.

[Ryuno-Ki]

I agree. I'm not sure what the point of that giant Sabayon wallpaper is supposed to be. It seems like all it does is keep a user from seeing the things they are actually looking for. It seems like a step backwards from the current site to me as well.

@Ryuno-Ki what was the motivation behind the change? Maybe if I have an idea of what we're attempting to accomplish with the overhaul it might help us making sense of it and give better feedback.

To answer it together with the question from svantoviit:

I tried to follow a principle, with each page trying to answer only one question.
On the landing page, I think, the major principle should be to make people try it out, i.e. download an ISO.

The alternative is to present information to learn more about Sabayon before trying it out. Hence the two buttons.
I agree, that the info sites are quite sparse. For now I reused what we had already, but would fill up content as we go. It would become way easier, because we can edit it in Markdown now instead of HTML as before.

The links at the top of the page (Community, Contribution, Download, Press) seem unnecessarily small, no scaling. Also Community has a period after it?

The navigation at top should help the user tailor his request. Right now we could face troubles to add more links. I thought about which user groups we may could have and tried to come up with categories for them.

I will look into the font size.

The period is a typo. Thanks for pointing out.

The Download Sabayon button...while the blue does bring attention to the button, it seems jarring. It doesn't fit in with the color scheme at all.

I tried to limit the number of colours to have a colour scheme in the first place. The blue should resemble the blue from the logo and is used for highlighting. Maybe I can mute the colour, though.

The current site, you don't have to pick a mirror close to you to download the iso you're looking for. It is very well laid out for a new user to quickly find what flavor they want to download and to get downloading it. (Also, next.sabayon.org's list of mirrors is empty?)

The mirror list shouldn't be empty (it isn't for me build locally). Will investigate it.

What steps would you suggest for a download? Old behaviour is to first ask for the flavour (server / desktop / cloud) and then specify.
The new UI currently shows the information we had on the landing page (because I had no idea where to put it). I agree, that I should emphasize the flavours more…

[Stupot]

I find that buttons are much easier to click than text. On the current site, I can click much faster and get to where I'm aiming to go quicker because of it. Something to think about. We can always address that with an update in the future.

I honestly think most users are looking for a desktop install. I think the homepage should link directly to a page that has the content of:
https://next.sabayon.org/download/flavours/desktop/ with options of Desktop and Cloud as links at the bottom.

It seems like the new site really just involves more navigating to get to where you want to go. And the navigating takes longer because clicking needs to be so exact.

For instance, to see an announcement on the latest release, for the current site there's a direct link to those release notes that's easy to see and leads you to https://www.sabayon.org/latest/

For the redesign, you click to go https://next.sabayon.org/press/ then click to go to https://next.sabayon.org/press/release/ then finally click to go https://next.sabayon.org/press/release/ ... ayon-1805/