New website design

[Saagar Jha]

(Re-CC’ing macports-dev)

If I was redesigning the website (full disclosure: the number of websites I have designed is somewhere between one and two–my own website and providing creative input on small bits of other ones), I’d keep the current “theme” but simplify it a bit. The new CSS makes it look a lot more modern (I’m fine with the font size, but personally I would remove the shadows and maybe simplify the font stack to just system-ui, Helvetica, sans-serif), so it’s reasonable in that sense.

What I think we should really focus on is the content: the homepage should have the goal of clearly explaining what the project is to new users, how to use it, and how to install it; the rest of the content must be easily accessible from the the homepage but be arranged in a clear, hierarchical fashion. The description that we have is actually pretty good, but I think there are a couple of things that could be reworded or pruned because they’re not that useful ("Mac operating system” → “macOS”, remove or significantly abridge the bits about the “single software tree”, reword OS support to be clear, etc.) We can also stick the example usage here, though I’m not completely sold on trying to replicate macOS windows in CSS.

With regards to handling navigation, we should consolidate the content under some useful categories (e.g. “Documentation”, “Contribute”, “News”). Then I’d just move all the less-relevant content off the homepage and under these, as well as put the current content there too.

Finally, we have modern web things to care about, such as mobile usability (I had a screenshot here, but it went over the mailing list limit. Just imagine small text on my iPhone SE), @media(prefers-color-scheme), and possibly dropping the JavaScript we’re not using (do we actually need any?)

Looking forwards to hear what the others have to say.

Regards,
Saagar Jha

> On Mar 3, 2019, at 00:49, Mojca Miklavec <mojca at macports.org <mailto:mojca at macports.org>> wrote:
> 
> Dear Saager,
> 
> I would have merged your changes before, but I wanted to get more
> input from Ryan (who's kind of leading the project). He kept quiet for
> way too long and since nobody else complained, I merged the PR.
> 
> My only complaint so far would be that the font now seems a bit too
> big compared to other websites.
> 
> 
> Ad info reorganisation: this would probably need to be a bit of a
> group brainstorming effort.
> 
> Ad pictures: part of http://www.msys2.org <http://www.msys2.org/> (from 5th point on) is
> probably similar. It shows commands, but they are highlighted in a way
> that makes them look as if it was a screenshot.
> 
> Ad "edit me": it doesn't need to be the "Fork me on GitHub" ribbon. An
> example of what I had in mind would be http://mesonbuild.com <http://mesonbuild.com/> with
> "edit" in the top right. It doesn't have to say "GitHub" either.
> 
> I would continue the discussion on the list.
> 
> Mojca

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.macports.org/pipermail/macports-dev/attachments/20190303/eadf8701/attachment.html>