Skip to content
Snippets Groups Projects

Draft: 2024 homepage redesign

Closed Imported Draft: 2024 homepage redesign
2024-redesign into master
Closed Imported Administrator requested to merge 2024-redesign into master

For !259 (merged) we wanted to get a new link into the navigation bar, and make it less cluttered. This ended up in a redesign of the homepage, many thanks to @dikasetyaprayogi on whose designs this is based ( #169 (closed)), and to @susurrus for ideas on making the navigation bar less cluttered, etc!

The code needs more work, but I'm pretty happy with the text changes and how the design looks like now (maybe needs some minor tweaks). What do you all think?

Changes

  • Add a new link to "Team" in the navigation bar, to describe the groups we now have (Core Team, Trusted Contributors, Active Community Members, Testing Team) (content is in !259 (merged))
  • Move most of the links of the navigation bar into a new, sturctured "Explore" page, and add some more links there. This should make it much easier to find, for example, the source code. I've read that people find it hard to find the "src" button, whereas now it should be clear: Explore -> Development section: Source Code
  • Merge the "Chats and Social Media" page into explore as well.
  • A new, modern design (again, huge thanks to @dikasetyaprayogi!!)
    • New header
      • Currently opened page is highlighted
      • "Download" was renamed to "Install"
    • Start page:
      • One image with the current default wallpaper for edge shown on both a phone and a laptop, to indicate the types of devices that pmOS can run on
      • To not only highlight GNOME (the UI shown in that image), prominently add the logos of KDE, Phosh and SXMO too and link to their homepages
      • Shorten the "about" text, don't go into detail with the architecture there; instead link to the explore page
      • Update the "what others say" section while at it
  • "State of postmarketOS" page is linked from the install page now, instead of having it in the header (makes the header cleaner)
  • Blog: now has a short introduction section, with RSS link (close #168 (closed)) and link to the edge blog

Screenshots

Start page:

(hovered the team button while taking the screenshot by accident)

Screenshot_2024-05-12_at_18-35-29_postmarketOS____real_Linux_distribution_for_phones

Explore:

(hovered the team button while taking the screenshot by accident)

Screenshot_2024-05-12_at_18-36-15_postmarketOS____Explore_postmarketOS

Blog:

Screenshot_2024-05-12_at_18-35-54_postmarketOS____blog

TODO

  • make it adaptive (responsive)
  • implement dark mode
  • credit @dikasetyaprayogi in the footer
  • make code less ugly
  • add architecture related text that was on the start page before to the FAQ
  • tweak graphics files (there was a comment about svgs not working in tor browser, look into that... after all we use a svg for the logo in the current design too)

Close #169 (closed)

Edited by Administrator

Merge request reports

Checking pipeline status.

Closed by AdministratorAdministrator 8 months ago (Jul 18, 2024 8:08pm UTC)

Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
static/css/base.css
19 19 grid-template-columns: auto minmax(340px, 1024px) auto;
20 20 margin: 0px;
21 21
22 background: #f5f5f5;
22 background: #f9f9f9;
23 23 font-family: sans-serif;
24 24 line-height: 2;
25 25 font-size: 13pt;
  • Administrator
    Administrator @root started a thread on the diff
    • static/css/base.css
    3 3
    4 4 /* LINKS */
    5 5 a {
    6 color: black;
    6 color: #1a1a1a;
    7 7 }
    8 8
    9 9 a:hover {
    10 color: #0d8000;
    10 color: #ff1fb8;
    • Administrator
      Administrator @root · Imported
      Author Owner

      Is this colour really part of the pmOS identity? It feels off. I would've expected a shade of green. Either way, it is pretty bright, and reducing the contrast when hovering that much doesn't sound like a good idea.

      By Markus Göllnitz on 2024-05-12T20:49:37

      Edited by Administrator
    • Administrator
      Administrator @root · Imported
      Author Owner

      I would recommend for the hover color to have smooth transtition into pressed state color, therefore maybe gray (neutral) or (lesser) green.

      By dikasp on 2024-05-13T03:53:10

    • Administrator
      Administrator @root · Imported
      Author Owner

      I went with the color we used in this sticker https://gitlab.com/postmarketOS/artwork/-/blob/master/stickers/2023-01/mainline_pink.svg?ref_type=heads and I thought it looked cool/interesting because it stood out. It seems to me that it still has a high contrast / at least it should be enough for a hovered link (?)

      @camelCaseNick, @dikasetyaprayogi: does this make sense? or any color codes you would recommend instead?

      By Oliver Smith on 2024-05-13T05:35:24

    • Administrator
      Administrator @root · Imported
      Author Owner

      @ollieparanoid Maybe like this more or less..

      rect60

      buttons.svg

      By dikasp on 2024-05-13T06:44:56

    • Administrator
      Administrator @root · Imported
      Author Owner

      I went with the color we used in this sticker https://gitlab.com/postmarketOS/artwork/-/blob/master/stickers/2023-01/mainline_pink.svg?ref_type=heads and I thought it looked cool/interesting because it stood out. It seems to me that it still has a high contrast / at least it should be enough for a hovered link (?)

      My personal opinion is: This colour works with that sticker, because it's the only colour in use there, but doesn't really fit the general pmOS brand and its green. If you like the hue, though, I'd go with #d0008e.

      I would definitely never reduce the contrast for when hovering. After all, hovering should bring focus to the widget. I like the colour inversion in @dikasetyaprayogi's suggestions above. I would use it as the hover (and focus) style, though, and argue that there is no need for a dedicated pressed style – but if wanted would go even darker.

      By Markus Göllnitz on 2024-05-13T13:50:41

      Edited by Administrator
    • Administrator
      Administrator @root · Imported
      Author Owner

      Thanks to both of you! I'll play around with your suggestions :)

      By Oliver Smith on 2024-05-13T14:16:49

    • Administrator
      Administrator @root · Imported
      Author Owner

      Some notes:

      • The contrast is lower than the one of the dark green (#008443), which is the non-highlighted navigation links, and lower than the almost black (#1a1a1aff) of most other links (only links in headlines are also dark green).
      • But it is hard to get a higher contrast than that without ending up with a very dark color again, that is either very close to the dark green / almost black, and IMHO doesn't look appealing. The dark violet looks like the visited link color that browsers have by default (or used to have?).
      • The contrast of #ff1fb8 is still good for its purpose in my opinion. According to some random contrast checker it has 3.24 over the almost white bg (#F9F9F9), and I read that w3c recommends at least 3. And it does still look pretty readable to me.
      • The hovered link color is only displayed briefly, when the user hovers a link - we can assume that they have already read it and want to click on it next anyway. So most of the time, it will not "disturb" the color scheme, only during this brief phase when the user is about to click something.
      • The color doesn't match the rest of the colors, but as I wrote, I think that makes it much more interesting. I've played around with lots of other colors and that made the hovered links feel a bit boring.

      So... I'll keep it for now, let's see what others say :)

      By Oliver Smith on 2024-05-14T15:50:38

    • Administrator
      Administrator @root · Imported
      Author Owner

      I read that w3c recommends at least 3

      It is only acceptable for large text and images. You should aim for 4.5. (see https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) If you go strictly by the W3C accessibility guidelines, as this is non-bold 14pt font, it is not considered large, and thus is not accessible.

      By Markus Göllnitz on 2024-06-07T01:32:46

      Edited by Administrator
    • Please register or sign in to reply
  • Administrator
    Administrator @root started a thread on the diff
    • templates/index.html
    18 <label for="img-pinephone">PINE64 PinePhone</label>
    19 </div>
    20 <div class="grid-text">
    21 We are sick of not receiving updates shortly after
    22 buying new phones. Sick of the walled gardens deeply
    23 integrated into Android and iOS. That's why we are
    24 developing a sustainable, privacy and security focused
    25 free software mobile OS that is modeled after
    26 traditional Linux distributions. With privilege
    27 separation in mind. Let's keep our devices useful and
    28 safe until they physically break!
    29 <a class="more-link" href="/state">
    30 What is the current state of postmarketOS?
    14 <div class="start-banner-grid">
    15 <p class="start-banner-text">
    16 The Linux distribution for mobile devices and more...
    • Administrator
      Administrator @root · Imported
      Author Owner

      Consider the correct ellipsis Unicode character:

      Suggested change
      16 The Linux distribution for mobile devices and more...
      16 The Linux distribution for mobile devices and more…

      By Markus Göllnitz on 2024-05-13T05:32:11

      Edited by Ghost User
    • Please register or sign in to reply
    • Administrator
      Administrator @root · Imported
      Author Owner

      Regarding making this mobile friendly: What would you say about the text The Linux distribution for mobile devices and more… in say Loupe for a banner for mobile? The current banner looks fantastic, but could be replaced by the text inside the visual below a threshold for more efficiently using the space on mobile.

      By Markus Göllnitz on 2024-05-13T05:35:25

      Edited by Ghost User
    • Administrator
      Administrator @root · Imported
      Author Owner

      I imagine this would make the text smaller, and therefore harder to read? so I would rather just place the text differently when the screen size is smaller, above or below the image (with css media queries).

      By Oliver Smith on 2024-05-13T05:35:25

    • Administrator
      Administrator @root · Imported
      Author Owner

      Maybe a separate one liner image and text then and just let the webengine had the render job.

      By dikasp on 2024-05-13T07:25:58

    • Please register or sign in to reply
  • Administrator
    Administrator @root · Imported
    Author Owner

    Wow! This is such an improvement!

    By Markus Göllnitz on 2024-05-13T08:14:55

    Edited by Ghost User
    • Administrator
      Administrator @root · Imported
      Author Owner

      It would be great if the title font-family would be changed. Currently, the default sans – often DejaVu Sans / Bitstream Vera – isn't really a great display typeface, imho. If you already use Cantarell, now. Why not give that a go?

      By Markus Göllnitz on 2024-05-13T04:08:45

      Edited by Ghost User
    • Administrator
      Administrator @root · Imported
      Author Owner

      imho. If you already use Cantarell, now. Why not give that a go?

      I presume that's to keep DE centric neutrality (not too GNOME'ish or another).

      Maybe a typhography pro here can suggest us more modern open font to use.

      By dikasp on 2024-05-13T04:08:45

    • Administrator
      Administrator @root · Imported
      Author Owner

      Yes exactly. If somebody can suggest a different font to use, we could try that.

      By Oliver Smith on 2024-05-13T05:35:25

    • Administrator
      Administrator @root · Imported
      Author Owner

      What about Josefin Sans weight 300 for titles? Could also be used for “The Linux distribution for mobile devices and more…” but then I'd say weight 500 – to make it even less GNOME-y. I think that font is a decent display font.

      By Markus Göllnitz on 2024-05-23T17:44:33

      Edited by Administrator
    • Please register or sign in to reply
  • Administrator
    Administrator @root · Imported
    Author Owner

    Thanks for the feedback!

    By Oliver Smith on 2024-05-13T05:47:33

    Edited by Ghost User
    • Administrator
      Administrator @root · Imported
      Author Owner

      Based on the recent discussion (above) here what I have in mind (updated)

      details

      image1-7

      I don't recommend but just letting to know that the design are flexible so it can be changed just by clipping in new images/screenshot

      image1-5

      editv3.svg

      editv4.svg

      • Traced those bunch of project logo into (monocolor) svg - altough I had do my best to make everything in svg on my draft, photos & screenshot is impossible to be svg though.
      • Maybe the link of all supported UI list can be put into explore or installation page ?
      • I think the overall wording can be better, I'm not that great spokesperson.
      • (from previous design discussion) The base background can be lighter if desired, I'm just suggesting not using a fully white/black (ffffff/000000)

      credit @dikasetyaprayogi in the footer

      Thanks, I'm really honored :) :green_heart:

      EDIT by ollieparanoid: put the screenshot in <details>, so it's easier to scroll through this merge request

      By dikasp on 2024-05-13T14:23:39

      Edited by Administrator
    • Administrator
      Administrator @root · Imported
      Author Owner

      Thanks! I think we should really leave the logos as-is, it even says e.g. in GNOME's logo and trademarks:

      Always ensure that the logo is: [...] black or white, depending on the background color (other colors are not permitted)

      Besides that, personally I think it's an advantage to not only have green there. I think these icons work nicely as accents. (Note that I haven't studied art or anything, I make stuff up as I go there, whatever looks good to me.)

      Maybe the link of all supported UI list can be put into explore or installation page ?

      Personally I think it's fine the way it is now: "User Interfaces" headline that describes what this is, instead of just having a bunch of logos that may mean nothing to the visitor, along with the "more" link that links to the all user interfaces wiki page. The headline there looks consistent with the "About" headline below.

      I think the overall wording can be better, I'm not that great spokesperson.

      Probably yes, but this is just the text that was there before. We can also change it in a follow-up merge request / patch, I'd rather not expand the scope here even more :)

      • The base background can be lighter if desired, I'm just suggesting not using a full white/black (ffffff/000000)

      I think the color you suggested earlier, which this uses now, is fine. :thumbsup:

      By Oliver Smith on 2024-05-13T14:23:39

      Edited by Ghost User
    • Administrator
      Administrator @root · Imported
      Author Owner

      @ollieparanoid

      Slightly updated the comment just a moment before it get moderated.

      I'm also not an art student or whatever :) . What I'm proposing is just a suggestion, fell free to edit or adapt as you like.

      Thanks, I try to put long images into collapsible section later on.

      By dikasp on 2024-05-13T14:23:44

      Edited by Administrator
    • Administrator
      Administrator @root · Imported
      Author Owner

      Just looked at the new designs above, I really like the white logos on the wallpaper. Maybe I'll go with that, not sure right now if I prefer it over the current one. I'll play around with it some more (while also trying to get it finished up). Thank you so much! :D

      By Oliver Smith on 2024-05-13T14:24:13

      Edited by Administrator
    • Please register or sign in to reply
  • Administrator
    Administrator @root started a thread on the diff
    • templates/index.html
    61 tested packages get updated to make sure it’s
    62 always a solid, reliable and stable
    63 experience."
    64 </div>
    65 &mdash; <a href="https://medium.com/@camden.o.b/the-ultimate-one-year-review-daily-driving-the-pinephone-25bc41a05533">Camden Bruce</a>, creator of DahliaOS
    66 <br><br>
    67 <div class="quote">
    68 "With the widespread move to mobile devices,
    69 users lose control over their computing
    70 devices. PostmarketOS gives us the ability to
    71 run code that we can read and modify on these
    72 devices."
    73 </div>
    74 &mdash; <a href="https://hackaday.com/2019/01/17/postmarketos-turns-600-days-old/">Eric Evenchick</a>, Hackaday journalist
    53 <h2>
    54 About
    • Administrator
      Administrator @root · Imported
      Author Owner
      Suggested change
      54 About
      54 Our Mission

      “About” sounds so dry.

      By Markus Göllnitz on 2024-05-13T13:15:14

    • Administrator
      Administrator @root · Imported
      Author Owner

      Not sure, this isn't a proper "mission statement" either. Do you have another suggestion? Otherwise I'd just keep "About" as it is the case on the current homepage. This could also be changed easily later on in a follow-up MR.

      By Oliver Smith on 2024-05-13T14:14:08

    • Administrator
      Administrator @root · Imported
      Author Owner

      Another idea would be “The Why”. But yes, there could be a follow-up to this.

      And if so, I would like to stir up the About and What Others Say sections, because it can definitely be made better at conveying a message of what pmOS is, does, why, and why one should care. … If you want me to look into that / discuss ideas.

      By Markus Göllnitz on 2024-05-13T20:47:33

    • Administrator
      Administrator @root · Imported
      Author Owner

      I think About for now is good. It's a common idiom on websites so people should know to look for it and what to expect. I'd suggest revisiting this when there's a formal mission statement.

      By Bryant Mairs on 2024-05-19T09:00:41

    • Please register or sign in to reply
  • Administrator
    Administrator @root · Imported
    Author Owner

    I think it looks very nice! And love that the UIs are presented this prominently in the webpage :smile:

    By Pablo Correa Gomez on 2024-06-15T11:26:55

    Edited by Ghost User
  • Administrator
    Administrator @root · Imported
    Author Owner

    Thanks to everybody for their input! I'm focusing on the v24.06 release right now for postmarketOS, will finish this up afterwards :)

    By Oliver Smith on 2024-06-15T11:26:53

    Edited by Ghost User
  • Administrator mentioned in merge request !271 (merged) · Imported

    mentioned in merge request !271 (merged)

    By Oliver Smith on 2024-06-16T14:48:22

    • Administrator
      Administrator @root · Imported
      Author Owner

      If somebody is skilled with HTML and CSS, and would like to help finish this up:

      The current state of this is a proof of concept with mostly bad HTML/CSS changes. It looks sort of fine on desktop, but is not adaptive (doesn't look good on mobile) and I didn't pay any attention to dark mode at all.

      The bulk of work that needs to be done here is coding this nicely, and I'm currently focusing on tasks with higher priority. So if anyone wants to give it a try, please post here and create a new merge request based on this with better code.

      From the design I would mostly leave it as-is, except for probably changing the hover color (as discussed above), and maybe change the font, but things like that don't have a big code impact and could be done easily towards finishing this up.

      By Oliver Smith on 2024-06-26T20:03:16

      Edited by Ghost User
    • Administrator
      Administrator @root · Imported
      Author Owner

      I could do that – probably this weekend or next week.

      By Markus Göllnitz on 2024-06-26T20:04:14

      Edited by Ghost User
    • Administrator
      Administrator @root · Imported
      Author Owner

      wow that was quick :D nice!

      By Oliver Smith on 2024-06-26T20:04:25

    • Please register or sign in to reply
  • Administrator mentioned in merge request !277 (merged) · Imported

    mentioned in merge request !277 (merged)

    By Markus Göllnitz on 2024-07-07T23:16:36

  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
    • Please register or sign in to reply