Sabayon website makeover

Discuss all artwork and development - Suggestions needed

Moderator: Moderators

Sabayon website makeover

Postby svantoviit » Fri Jan 15, 2016 0:01

In another discussion mudler has asked on opinions on the new web for Sabayon they are working on. So here are my three cents:

  1. The first impression is just bootstrap-boring. Bootstrap is a practical solution (see Gentoo, Fedora, OpenSuse), the danger is uniformity.
  2. Colours - the hottest topic of every design :wink: It would be just great if Sabayon finally would find its colour palette so one would at the first glance know it's Sabayon.
  3. And what about the style tag between head and body? :shock:
In my eyes Sabayon is an elegant distro and this should be obvious when you visit the website.
svantoviit
Old Dear Hen
 
Posts: 706
Joined: Sun Feb 28, 2010 17:55

Re: Sabayon website makeover

Postby mudler » Fri Jan 15, 2016 14:30

First of all, thanks very much for your feedback it's really appreciated.

1) yes, for this indeed we *really* need designer
2) this is too much subjective, cannot speak myself since my tastes are barely acceptable
3) can you be more specific?

I'd like anyway to move this discussion to Github https://github.com/Sabayon/sabayon-website-next/issues
So we can actually manage TODOs, enhancement and contributions :)
Image
User avatar
mudler
Simple Hen
 
Posts: 64
Joined: Fri Aug 22, 2014 1:29

Re: Sabayon website makeover

Postby svantoviit » Fri Jan 15, 2016 22:24

mudler wrote:3) can you be more specific?

I speak about this part of the code in /layouts/index.html:
Code: Select all
{{ partial "header.html" . }}
<style>
body {
margin-top: 0px; /* 100px is double the height of the navbar - I made it a big larger for some more space - keep it at 50px at least if you want to use the fixed top nav */
}

.btn-primary {
  margin: 1px !important;
}

</style>
<body>

The style element has to be placed inside <head>. Or move the styles into the stylesheet.

But this is actually just one of several misplaced tags/nesting issues. You can't nest <a> tags this way:
Code: Select all
          <a href="/desktop">
          <div>
          <button type="button" class="btn btn-danger btn-circle btn-xl"><i class="fa fa-desktop fa-3x"></i></button>
          </div>

          <h2>Desktop</a> <span class="label label-warning">Edition</span></h2>

You should check the code with some validator.

BTW Why Hugo? Do you plan to ditch Drupal?

PS: I'm happy to see new active devs coming to Sabayon. Thank you for your effort!
svantoviit
Old Dear Hen
 
Posts: 706
Joined: Sun Feb 28, 2010 17:55

Re: Sabayon website makeover

Postby mudler » Fri Jan 15, 2016 22:49

The style it's needed to enforce the body to stay up. try to run it otherwise: just the index differs from the others, that's why you see that style over here while the others site sections are fine (yes, you just discovered my temporary hack :P ). misplaced tags isn't an issue, they will be automatically formatted on the way to go with automatic programs, it's just an handmade-alpha draft as for now, just to have feedback and also trying to involve other people.

Hugo it's a website static generator written in Golang: extremely portable, very powerful and light. There is no need to actually have a CMS for the frontpage. The deploys are automatic, so content is just fetched by the github repository.

The whole point here was to have a feedback on the visual effect of the site, and you perfectly made your point clear (i want to hear all feedbacks, we actually want to do a good looking, accessible site), because what is good looking for me, can't be good looking for everyone.

If you know HTML/JS/CSS and want to help, you are very welcome to open a pull request or an issue @Github
Image
User avatar
mudler
Simple Hen
 
Posts: 64
Joined: Fri Aug 22, 2014 1:29

Re: Sabayon website makeover

Postby wolfden » Fri Jan 15, 2016 23:23

KISS is what I like, Keep it Simple Stupid

People need a clean interface with easy to find info without having to drill down link after link. So I do like the interface of this as it stands.

Maybe a better description of what Sabayon is. I know most want to know what it is based on, source vs binary, package manager, # of packages available, DE, etc.. It's hard for someone like me to give feedback as I know what it is all about and have a hard time looking at it as a first time ever discovery.

Does the user have the proper amount of information to say "this sounds and looks great" without them saying " wow, information overload, I am confused" or "what is this and does it come with sauce" I believe it presents it's self with information very well, but it definitely needs more of what is Sabayon. Maybe a section like
Sabayon Features
- item
- item
- item
- item
- item

Also, one thing I always want to see is a default screenshot of the desktop. When I look at other distros, I always use google image search to see what it looks like upon boot. If I see desktop of hello kitty and rainbows, I'm like, pass. I'm not saying we need a full size image on the main page, but maybe something like 200x400 or thumbnail that can be clicked to a full size image. A section with a screen shot of each DE we offer.
wolfden
Sharecropper
 
Posts: 9051
Joined: Sat Jan 14, 2006 0:55
Location: Midwest USA

Re: Sabayon website makeover

Postby sabayonino » Sat Jan 16, 2016 12:19

Hi guys.

I'm not a web designer but ...

what about something like this web page ?
(This is news article that describe improved sign-up to the WCG community)

I know . it is a different world too ...

my 2c. :cyclops:
User avatar
sabayonino
Sagely Hen
 
Posts: 3014
Joined: Sun Sep 21, 2008 1:12
Location: Italy

Re: Sabayon website makeover

Postby wolfden » Mon Jan 18, 2016 0:45

Wow, that is some pretty fancy stuff IBM world has, a bit too much in my humble opinion, but it is pretty cool. Have you seen the Kali Linux website? https://www.kali.org/ I like that, but would hate to copy it.
wolfden
Sharecropper
 
Posts: 9051
Joined: Sat Jan 14, 2006 0:55
Location: Midwest USA

Re: Sabayon website makeover

Postby sabayonino » Mon Jan 18, 2016 12:08

wolfden wrote:Wow, that is some pretty fancy stuff IBM world has, a bit too much in my humble opinion, but it is pretty cool. Have you seen the Kali Linux website? https://www.kali.org/ I like that, but would hate to copy it.



Site(s) are specifically designed for mobile devices also ... :roll:
User avatar
sabayonino
Sagely Hen
 
Posts: 3014
Joined: Sun Sep 21, 2008 1:12
Location: Italy


Return to Artwork and Development Suggestions

Who is online

Users browsing this forum: No registered users and 1 guest