Re: Feedback on redesigned OpenBSD.org
mich...@mlpdesign.com said on Fri, 11 Aug 2023 18:33:03 -0500 >Hi all > >Ok, here's is update2 to the design. Note: I still need to break this >down into individual patches for review but wanted to get feedback on >the aesthetics first. > >v1: https://www.openbsd.design/cvs/www/index.html > >v2: https://www.openbsd.design/cvs/www2/index.html > >What's Change in v2: > > >Based on feedback either directly or on the mailing list, I did the >following: > >*** Note: I have only focused on the Light Theme for this version *** > >- Removed puffy from footer I see no need to remove Puffy. Besides being a symbol of OpenBSD, it tells the reader the lower bound of the web page. I'd suggest you put it back. > >- Removed all web fonts (just system defaults now) This is excellent, because it lets all users instantly see it at the size they picked for their browser defaults. So it serves both the person with 20/10 vision and 20/60 corrected vision. And because a fontface isn't named, it's guaranteed to be the Sans font the user is accustomed to on their web browser. > >- Increased the line-height In my opinion the line height in both versions is excellent. In my opinion, the inter-paragraph vertical distance should be increased slightly in V2. > >- Reverted most (but not all) colors back to either > browser defaults or what's on openbsd.org > >- Increased font-size (and specified it in 'em') For normal text, why specify font size at all? I reserve font size only for special things like headers or special s. > >- Removed the max-width of 840px (now full-width) I think you should put back the max-width, but express it in em. I work a lot with the LyX project mailing list, where we use LyX to create documents that are both readable and aesthetic. A rule of thumb I learned there is that each line should be roughly 70 characters long. I find that when lines have too many characters, I lose my place while going all the way back left and one down. > >- Removed/reverted the black OpenBSD logo back to what's on openbsd.org > > >For what it's worth, here's my thoughts about the new design: > > >Polish: My main concern is that it's not as polished as v1, and that >could >determine future OpenBSD users. I agree the new one isn't as polished, although I'm not sure this would determine future OpenBSD users, as the candidate for OpenBSD is going to be pretty geeky. > >Readability: Readability is significantly worse in v2 vs. v1 Agreed, but this can mostly be reverted by bringing back the maximum line width. Your original font was crisper than my browser default, but as I mentioned, better sacrifice a little beauty to make it universally useful. > >- Line Length, by making the line length unlimited in width, it makes >it extremely difficult to read body text. Reason being, your eye needs >to track to the next line. The rule of thumb is, the longer the line >length the bigger the line-heigh needs to be. When the line length can >be unlimited long, it's difficult to set an appropriate line-heigh >which hurts >readability. I agree wholeheartedly. When encountering pages with too-long lines, I have to skinny up my browser window to skinny up line length, and then expand the browser again when looking at another tab. By the way, I think that even in V1 your lines were too long. The only time I recommend against maximum line length is on pages whose content contains a lot of code. You can't wrap code the way you can other things, so you need as much width as you can get. Somebody could argue that you're wasting a lot of space on the sides of your text. My answer would be "so what?" Mice have scroll wheels now, and with shorter lines it's easier to keep your place when scrolling than with ginormous lines. > >- Colors, the more colors that are present, the more distracting a >website >will become. That's ok if it's a marketing website, but a site that's >primarily >documentation - you want to reduce the color palette down to only 2 (3 >max) >colors. This is why technical manuals are mostly created in grayscale, Please prefer #00 text on #ff background. Those of us with poor visual acuity need all the help we can get. Yes, I know, I know, some folks get headaches with pure black on pure white. You can't please all the people all the time, but with #00 on #ff at least you know your work is *readable* by the most people possible. And let me tell you, *I* get headaches trying to read midgray on lighter gray. >because color very much distracts the eyes and makes it more difficult >to >read body text. I feel like v2 color palette, which are peoples ask to >revert >to the previous color palette causes that. (And I still haven't revert >to >all of the openbsd.org colors) I could argue either side of the "multiple colors are more distracting than helpful" topic. By the way, in the V2 left side link list, topic headings
Re: Feedback on redesigned OpenBSD.org
On Sat, Aug 12, 2023 at 06:23:07PM +0200, Wolfgang Pfeiffer wrote: > > On Fri, Aug 11, 2023 at 10:38:46PM -0400, Amelia A Lewis wrote: > > On Fri, 11 Aug 2023 20:11:02 -0600, Theo de Raadt wrote: > > > When did it become an assumption that we would adopt any of these > > > changes? > > > > I don't think that it did become an assumption, but as a number of > > people have responded to the initial design, to the point that the > > designer offered a revision, I thought I might add to the discussion. I > > apologize if it was out place to do so. > > The debate - since three days now - strongly suggests, that at least > some of those contributing to the debate were assuming that a change > of the looks of openbsd.org might be accepted. Otherwise: what sense > would it make to debate it here? > > The point tho seems: there were at least two threads over the last 11 > years on that topic: > > 2012: > "OpenBSD's webpage desing" > https://marc.info/?l=openbsd-misc=2=4=desing+webpage=b > > 2016: > "Suggestion: new webpage for openbsd.org" > https://marc.info/?t=14634695033=2=2 > > Result: > Just compare the archived version of the site from 2011 to the > present one: > https://web.archive.org/web/20111223000626/http://www.openbsd.org/ > > So to make sure my effort is making sense: what I most certainly would > have done before working on a redesign of the current page would have > been to ask its maintainers, whether they wanted the change. And if > yes: what sort of change. Because obviously it's, well: their page. > Not mine. Plus: they probably have specific needs that I don't know > about for the coding of it, to make it compatible with the frequent > changes of it: updates, announcement of patches etc. - Meaning: Before > doing any attempt to rewrite the code, I would have asked the > current maintainers about the constraints for a change. > > Theo de Raadt about a rewrite of openbsd.org in 2016: > > -- > https://marc.info/?l=openbsd-misc=146378604413389=2 > > "We rarely do whole-scale replacements of anything in OpenBSD, unless > there is compelling reason the old should be discarded. I have > probably received 500+ proposals for website rewrites, a handful with > the effort already expended. This is another offer which will be > rejected. It is kind of sad. > > I think the site is fine. [ ... ] I agree there would be value in > small tweaks to improve the view for narrow displays. > > This is a project that does rapid incremental changes. This entire > concept of throw-it-away, you-want-the-new-warts; I don't get where > it comes from." > > -- > > Nice weekend, everyone! > >From what I am reading in this thread, nobody seems to agree about what they really want. I think that that is a pretty good sign that a consensus is not going to happen. openbsd.org is on CVS. OpenBSD comes with a built-in httpd. As long as it's not publicly available, anyone can run a copy and insert whatever CSS meets their needs. The current website version can be updated from CVS. Just change the stylesheet link to whatever your favorite styling looks like and you are good. If you don't know how to write CSS, learn it. What doesn't require learning something new to use or contribute to OpenBSD? Nothing. That is my opinion. I definitely do not get a vote, especially since I have never even submitted a diff for the website. Unless I am using my phone, I give it a 50% chance that I will be using a text browser to view the site. I use lynx 100% to look at the packages and installation files. It just works. -- Chris Bennett
Re: Feedback on redesigned OpenBSD.org
On Fri, Aug 11, 2023 at 10:38:46PM -0400, Amelia A Lewis wrote: On Fri, 11 Aug 2023 20:11:02 -0600, Theo de Raadt wrote: When did it become an assumption that we would adopt any of these changes? I don't think that it did become an assumption, but as a number of people have responded to the initial design, to the point that the designer offered a revision, I thought I might add to the discussion. I apologize if it was out place to do so. The debate - since three days now - strongly suggests, that at least some of those contributing to the debate were assuming that a change of the looks of openbsd.org might be accepted. Otherwise: what sense would it make to debate it here? The point tho seems: there were at least two threads over the last 11 years on that topic: 2012: "OpenBSD's webpage desing" https://marc.info/?l=openbsd-misc=2=4=desing+webpage=b 2016: "Suggestion: new webpage for openbsd.org" https://marc.info/?t=14634695033=2=2 Result: Just compare the archived version of the site from 2011 to the present one: https://web.archive.org/web/20111223000626/http://www.openbsd.org/ So to make sure my effort is making sense: what I most certainly would have done before working on a redesign of the current page would have been to ask its maintainers, whether they wanted the change. And if yes: what sort of change. Because obviously it's, well: their page. Not mine. Plus: they probably have specific needs that I don't know about for the coding of it, to make it compatible with the frequent changes of it: updates, announcement of patches etc. - Meaning: Before doing any attempt to rewrite the code, I would have asked the current maintainers about the constraints for a change. Theo de Raadt about a rewrite of openbsd.org in 2016: -- https://marc.info/?l=openbsd-misc=146378604413389=2 "We rarely do whole-scale replacements of anything in OpenBSD, unless there is compelling reason the old should be discarded. I have probably received 500+ proposals for website rewrites, a handful with the effort already expended. This is another offer which will be rejected. It is kind of sad. I think the site is fine. [ ... ] I agree there would be value in small tweaks to improve the view for narrow displays. This is a project that does rapid incremental changes. This entire concept of throw-it-away, you-want-the-new-warts; I don't get where it comes from." -- Nice weekend, everyone!
Re: Feedback on redesigned OpenBSD.org
On Sat, Aug 12, 2023 at 07:21:24PM +0900, Pontus Stenetorp wrote: > On Sat 12 Aug 2023, Stuart Henderson wrote: > > > > To me, it looks just "different" rather than particularly better > > (except on mobile browsers, where I find the redesigned one a bit worse > > by having the links hidden away down the bottom. Scrolling to read the > > text on mobile browsers with the existing version is a bit of a > > nuisance, but so is scrolling to access the links in this rework). > > > > And "different" is a bit of a problem, there are at least 7 associated > > websites which intentionally have the same basic design, which now > > no longer match up. > > > > (I found v1 a lot worse than the existing one, mostly due to overriding > > browser default font/colour choices and disabling underlining for links). > > As someone using the current website both on desktop and phone, the > only thing that has ever sprung to mind as a possible improvement would > be to constrain the line length, as I often have to tighten the window a > bit (interestingly, a good line length tends to be around 80 > characters [1] and where have we heard that number before?). On > man.openbsd.org there is a fixed line length, just that it is a tiny > bit too wide for reading comfort. > I have always found that 72 characters is a bit better than 80. In CSS, that would be 72ch. Versus 80ch. I often adjust the width of the window my browser is in to control that width, assuming the website doesn't fight me and force horizontal scrolling. I have key bindings on fvwm2/3 to do that. But definitely add the viewport to the head. Nothing bad can happen with that and FWIW, it bumps up OpenBSD in many searching algorithms (assuming that that is desirable). -- Chris Bennett
Re: Feedback on redesigned OpenBSD.org
On Sat 12 Aug 2023, Stuart Henderson wrote: > > To me, it looks just "different" rather than particularly better > (except on mobile browsers, where I find the redesigned one a bit worse > by having the links hidden away down the bottom. Scrolling to read the > text on mobile browsers with the existing version is a bit of a > nuisance, but so is scrolling to access the links in this rework). > > And "different" is a bit of a problem, there are at least 7 associated > websites which intentionally have the same basic design, which now > no longer match up. > > (I found v1 a lot worse than the existing one, mostly due to overriding > browser default font/colour choices and disabling underlining for links). As someone using the current website both on desktop and phone, the only thing that has ever sprung to mind as a possible improvement would be to constrain the line length, as I often have to tighten the window a bit (interestingly, a good line length tends to be around 80 characters [1] and where have we heard that number before?). On man.openbsd.org there is a fixed line length, just that it is a tiny bit too wide for reading comfort. [1]: https://practicaltypography.com/line-length.html I honestly like the current design. It is functional and stands out when so many other projects seem to have spent too much time on style rather than substance.
Re: Feedback on redesigned OpenBSD.org
To me, it looks just "different" rather than particularly better (except on mobile browsers, where I find the redesigned one a bit worse by having the links hidden away down the bottom. Scrolling to read the text on mobile browsers with the existing version is a bit of a nuisance, but so is scrolling to access the links in this rework). And "different" is a bit of a problem, there are at least 7 associated websites which intentionally have the same basic design, which now no longer match up. (I found v1 a lot worse than the existing one, mostly due to overriding browser default font/colour choices and disabling underlining for links). -- Please keep replies on the mailing list.
Re: Feedback on redesigned OpenBSD.org
Aug 12, 2023 01:43:10 mich...@mlpdesign.com: > > Ask: I'm curious to hear from others if v2 is more aligned with your desire > for the look of the updated site. I think is much better. And I think that when you align to standards it is difficult to lose in readability. I'm just checking by my tablet and verifying the vertical orientation I still find small the font under a certain screen width.. ;D -- Daniele Bonini Aug 12, 2023 01:43:10 mich...@mlpdesign.com: > > Ask: I'm curious to hear from others if v2 is more aligned with your desire > for the look of the updated site.
Re: Feedback on redesigned OpenBSD.org
On Fri, 11 Aug 2023 20:11:02 -0600, Theo de Raadt wrote:
> When did it become an assumption that we would adopt any of these
> changes?
I don't think that it did become an assumption, but as a number of
people have responded to the initial design, to the point that the
designer offered a revision, I thought I might add to the discussion. I
apologize if it was out place to do so.
Amy!
--
Amelia A. Lewisamyzing {at} talsever.com
Never imagine yourself not to be otherwise than what it might appear to
others that what you were or might have been was not otherwise than what
you had been would have appeared to them to be otherwise.
-- The Duchess [Lewis Carroll]
Re: Feedback on redesigned OpenBSD.org
Hi Theo No assumption on my part at least. I’d hugely value hearing you input if you have time though. E.g. are you open to these types of updates. If so, which parts would & wouldn’t you be supportive of. Etc. Thanks in advance. On 2023-08-11 21:11, Theo de Raadt wrote: When did it become an assumption that we would adopt any of these changes?
Re: Feedback on redesigned OpenBSD.org
When did it become an assumption that we would adopt any of these changes?
Re: Feedback on redesigned OpenBSD.org
I'm going to add my couple bits worth.
Summary: I prefer v2 apart from line length; a max might be better.
I'm reading on a laptop with a fairly large display (1920x1200), using
Chrome.
On Fri, 11 Aug 2023 18:33:03 -0500, mich...@mlpdesign.com wrote:
[snip]
> What's Changed in v2:
>
[...]
> - Removed all web fonts (just system defaults now)
I can't tell if I like the system fonts better than the custom ones,
because they're not equal in size, so there are too many combined
differences to be sure.
> - Increased the line-height>
Specified in ex? Or something else?
[ ...]
> - Increased font-size (and specified it in 'em')
The overall change in font is much better for me. I recognize that
small and fancy seems to appeal more to those with a twenty-year old's
eyesight (20:20), but my eyes are presbyopic and larger fonts appeal
much more. Using em to specify relative sizes also means that my
default choices are consulted, and I like that.
> - Removed the max-width of 840px (now full-width)
Not too happy about this, though; it's definitely harder to track lines
as long as they end up being (I can solve that myself by narrowing the
window, of course, but I usually can't be bothered). I've found it
useful to specify line height in ex, and max width in em. For sites
with large blocks of text in paragraphs, setting the max width for p to
somewhere around 50-60 em tends to make the text fit the eight to ten
word English standard (it's maybe a little generous, but I find it
avoids the problem of lines so long one gets lost somewhere between
left margin and right).
> For what it's worth, here's my thoughts about the new design:
>
> Readability: Readability is significantly worse in v2 vs. v1
I will defer to other's sense of style, but for readability I have to
strongly disagree; at least within my setup v2 is much more readable
and (importantly, I think) gives more deference to my preferences on
default sizes and font choices.
> - Line Length, by making the line length unlimited in width, it makes it
> extremely difficult to read body text. Reason being, your eye needs to
> track to the next line. The rule of thumb is, the longer the line length
> the bigger the line-heigh needs to be. When the line length can be
> unlimited long, it's difficult to set an appropriate line-heigh which hurts
> readability.
Agreed. I think you ought to restore a max, also specified in em, with
a corresponding line height in ex.
>
> - Colors, the more colors that are present, the more distracting a website
> will become. That's ok if it's a marketing website, but a site that's
> primarily
> documentation - you want to reduce the color palette down to only 2 (3 max)
> colors. This is why technical manuals are mostly created in grayscale,
> because color very much distracts the eyes and makes it more difficult to
> read body text. I feel like v2 color palette, which are peoples ask
> to revert
> to the previous color palette causes that. (And I still haven't revert to
> all of the openbsd.org colors)
I'd kind of like to see a v2 with your typographically-selected colors
for text blocks restored (that is, mostly grayscale, so black on white
(or dark gray on cream, for that stylish effect, perhaps) in the light
theme. It might, though, be worthwhile to maintain project team's
colors for highlights and headings and accents and things. I dunno.
Amy!
--
Amelia A. Lewisamyzing {at} talsever.com
Money can't buy happiness, but poverty can't buy *anything*.
Re: Feedback on redesigned OpenBSD.org
Hi all Ok, here's is update2 to the design. Note: I still need to break this down into individual patches for review but wanted to get feedback on the aesthetics first. v1: https://www.openbsd.design/cvs/www/index.html v2: https://www.openbsd.design/cvs/www2/index.html What's Change in v2: Based on feedback either directly or on the mailing list, I did the following: *** Note: I have only focused on the Light Theme for this version *** - Removed puffy from footer - Removed all web fonts (just system defaults now) - Increased the line-height - Reverted most (but not all) colors back to either browser defaults or what's on openbsd.org - Increased font-size (and specified it in 'em') - Removed the max-width of 840px (now full-width) - Removed/reverted the black OpenBSD logo back to what's on openbsd.org For what it's worth, here's my thoughts about the new design: Polish: My main concern is that it's not as polished as v1, and that could determine future OpenBSD users. Readability: Readability is significantly worse in v2 vs. v1 - Line Length, by making the line length unlimited in width, it makes it extremely difficult to read body text. Reason being, your eye needs to track to the next line. The rule of thumb is, the longer the line length the bigger the line-heigh needs to be. When the line length can be unlimited long, it's difficult to set an appropriate line-heigh which hurts readability. - Colors, the more colors that are present, the more distracting a website will become. That's ok if it's a marketing website, but a site that's primarily documentation - you want to reduce the color palette down to only 2 (3 max) colors. This is why technical manuals are mostly created in grayscale, because color very much distracts the eyes and makes it more difficult to read body text. I feel like v2 color palette, which are peoples ask to revert to the previous color palette causes that. (And I still haven't revert to all of the openbsd.org colors) But that's just my opinion. Ask: I'm curious to hear from others if v2 is more aligned with your desire for the look of the updated site. -mlp
Re: Feedback on redesigned OpenBSD.org
j...@bitminer.ca said on Fri, 11 Aug 2023 09:52:18 -0600 >- font size is too small; but so is the original. Lato at 14px is >similar to Times Roman at 16px in words per line but it's still too >small. (Chrome on windows, 100% zoom).Try 14.5px and >letterspacing 0.1px and see if this is better for you. In my opinion websites should specify neither the font face (Lato or Times or whatever) nor the size, either in points or percentage, especially points. This allows all visitors to read the content in a fontface they actually have on their system, and a size matching their visual acuity. SteveT Steve Litt Autumn 2022 featured book: Thriving in Tough Times http://www.troubleshooters.com/bookstore/thrive.htm
Re: Feedback on redesigned OpenBSD.org
David Demelier said on Fri, 11 Aug 2023 09:48:05 +0200 >On Wed, 2023-08-09 at 14:01 -0500, mich...@mlpdesign.com wrote: >> Hi everyone >> >> WHAT: >> = >> I greatly respect OpenBSD; while I don't have OS tech level expertise >> to contribute - I do have some design skills and wanted to contribute >> to the community and project. >> >> So I created a new CSS (stylesheet) for OpenBSD.org >> >> It can be viewed at: >> >> https://www.openbsd.design/cvs/www/index.html >> > >This is really great and modern. My only question is why other pages >are centered while the front page isn't. The front page has a clickable table of contents on the left, whereas the other pages don't. So my question is, how much more work would it be to have the clickable table of contents on *every* page. By the way, I haven't looked at your HTML or CSS yet, but aesthetically I find your presentation clean and elegant. Very nice! Three possible improvements: 1) You've obviously gone the extra mile to make this site mobile friendly, and you've done it well. You might want to think about making increasing the line spacing of the clickable table of contents so one can thumb links without fatfingering. 2) Just my personal opinion: Links should be full underlined. Yes, it's not pretty, and it's so 1995, but underlined and colored links leave no doubt as to what they are and they can be quickly found with a visual scan of the document. I love that you give the user feedback on hover (changing the dots to solid underline). The more feedback the better. What I'm doing on my newer web pages (http://troubleshooters.com/web/index.htm for instance) is to change colors for hover AND for click, letting the user know "I heard you". I also change link colors once that link has been visited. I think the more feedback the user has, the better. I use full underlying with color changes to tell the user what's happening. Like I said, following my advice on link user feedback would be trading a little aesthetics for greater user feedback, so your mileage may differ. 3) I'm not sure, but I have a feeling you set your default font to be a certain size (a little bit small). If this is true, I'd recommend putting the size and exact typeface in the hands of the user's browser settings, to accommodate users of all varying visual abilities and preferences. If you follow this advice, please don't change your specifying sans-serif and your already perfect line spacing for text in and between paragraphs. I teach HTML and CSS and I couldn't have made a site this beautiful. Good work! SteveT Steve Litt Autumn 2022 featured book: Thriving in Tough Times http://www.troubleshooters.com/bookstore/thrive.htm
Re: Feedback on redesigned OpenBSD.org
When I first saw it there was this "aha" feeling that it was a big improvement. Good stuff! Then I read a few of the comments and looked at the pages with a bit more of a critical eye. So here are some comments and suggestions: - font size is too small; but so is the original. Lato at 14px is similar to Times Roman at 16px in words per line but it's still too small. (Chrome on windows, 100% zoom).Try 14.5px and letterspacing 0.1px and see if this is better for you. - the black box OpenBSD in top left of the index.html or part of the headers of other pages is not pretty. Think about perhaps changing to light gray, or a link colour. (Too bad there is no colour branding or other trademark colours otherwise a light blue would work.) - the h2 header font is a bit too compressed, a little more whitespace between glyphs would look less anxious. Noticed while looking at FAQ pages. Overall the revision looks really good, thanks for the effort. Hope some of this can be committed. J
Re: Feedback on redesigned OpenBSD.org
Hi Mark On my desktop with dual 4K screens @3840x2160 (16:9) resolution the new design is basically illegible because the css wrongly determines this to be a high resolution small screen (aka phone) which is a step backwards, browser-zooming to 200% is not really an option because that also changes the layout. Also centering text blocks on the page really doesn't improve legibility on big screens. Would you mind elaborating on what is the cause of it being illegible? E.g. font too small, the web design isn't scaling / adjusting to browser settings, etc.
Re: Feedback on redesigned OpenBSD.org
On my desktop with dual 4K screens @3840x2160 (16:9) resolution the new design is basically illegible because the css wrongly determines this to be a high resolution small screen (aka phone) which is a step backwards, browser-zooming to 200% is not really an option because that also changes the layout. Also centering text blocks on the page really doesn't improve legibility on big screens.
Re: Feedback on redesigned OpenBSD.org
On Wed, 2023-08-09 at 14:01 -0500, mich...@mlpdesign.com wrote: > Hi everyone > > WHAT: > = > I greatly respect OpenBSD; while I don't have OS tech level expertise > to contribute - I do have some design skills and wanted to contribute > to the community and project. > > So I created a new CSS (stylesheet) for OpenBSD.org > > It can be viewed at: > > https://www.openbsd.design/cvs/www/index.html > This is really great and modern. My only question is why other pages are centered while the front page isn't. -- David
Re: Feedback on redesigned OpenBSD.org
Great project and introduction - I think you are on the right path! A suggestion: Do like everyone here does with other code changes - Work in smaller steps. Simplify and minimize (a little more). Do not change any colors or images on an initial pass of the changes. Try only changing just the formatting, to support mobile. Once this is done, working as expected and approved, then try tweaking the colors and images (if needed). On 8/10/23 18:02, Daniele B. wrote: > I agree with the general thoughts around these last observations. > > The gui you are proposing is a little too black starting from the sidebar > logo and the font a little small. > Probably is that we like blood here but not the black color. (if not in > night mode) > > Also most of us are probably affectionated to the stylished standard html gui > and what > I mean with this are all the classic a and a:visited colors, the classic > browser font, _self on links etc > Sometimes appears more friendly and "honest" to the user leaving or adopting > these stylish standards. > The server pictures are also just a little geeky meaningful stuff. > > Possible sidebar logo solution: adopt the foreground color of the main > versioned logo (if you like that sidebar logo: it is however a repetition..); > fonts: under a certain screen size you can adopt a vw sized font, and over a > certain screen size a general px sized font, it is a trick commonly used by > me in my web apps. > > -- Daniele Bonini > > Aug 11, 2023 02:10:52 Matthew Ernisse : > >> The dark mode link colors are way too dark, especially in the case of >> previously visited links. They are nearly unreadable. I have not looked at >> light mode -- I don't use it. >> >> I don't know if it is font sizes or paddings but the index.html sidebar >> links feel cramped. One would imagine having a hard time tapping on them on >> mobile if one were inclined to such a thing. In fact I that comparing the >> versions side by side, all the font sizes are too small. >> >> I don't think removing the text-decoration: underline from links has served >> a purpose. If anything it makes it less usable. There are these random >> cases where you have blue mono-spaced fonts for some reason and it's not >> immediatly obvious to me if the color is supposed to indicate a clickable >> link or if the color + font change is supposed to indicate something else.
Re: Feedback on redesigned OpenBSD.org
I agree with the general thoughts around these last observations. The gui you are proposing is a little too black starting from the sidebar logo and the font a little small. Probably is that we like blood here but not the black color. (if not in night mode) Also most of us are probably affectionated to the stylished standard html gui and what I mean with this are all the classic a and a:visited colors, the classic browser font, _self on links etc Sometimes appears more friendly and "honest" to the user leaving or adopting these stylish standards. The server pictures are also just a little geeky meaningful stuff. Possible sidebar logo solution: adopt the foreground color of the main versioned logo (if you like that sidebar logo: it is however a repetition..); fonts: under a certain screen size you can adopt a vw sized font, and over a certain screen size a general px sized font, it is a trick commonly used by me in my web apps. -- Daniele Bonini Aug 11, 2023 02:10:52 Matthew Ernisse : > The dark mode link colors are way too dark, especially in the case of > previously visited links. They are nearly unreadable. I have not looked at > light mode -- I don't use it. > > I don't know if it is font sizes or paddings but the index.html sidebar > links feel cramped. One would imagine having a hard time tapping on them on > mobile if one were inclined to such a thing. In fact I that comparing the > versions side by side, all the font sizes are too small. > > I don't think removing the text-decoration: underline from links has served a > purpose. If anything it makes it less usable. There are these random cases > where you have blue mono-spaced fonts for some reason and it's not immediatly > obvious to me if the color is supposed to indicate a clickable link or if the > color + font change is supposed to indicate something else.
Re: Feedback on redesigned OpenBSD.org
On Wed, Aug 09, 2023 at 02:01:14PM -0500, mich...@mlpdesign.com said: So I created a new CSS (stylesheet) for OpenBSD.org It can be viewed at: https://www.openbsd.design/cvs/www/index.html I think it has been noted before but I'll echo that index.html just feels plain wrong. The dark mode link colors are way too dark, especially in the case of previously visited links. They are nearly unreadable. I have not looked at light mode -- I don't use it. I don't know if it is font sizes or paddings but the index.html sidebar links feel cramped. One would imagine having a hard time tapping on them on mobile if one were inclined to such a thing. In fact I that comparing the versions side by side, all the font sizes are too small. I don't think removing the text-decoration: underline from links has served a purpose. If anything it makes it less usable. There are these random cases where you have blue mono-spaced fonts for some reason and it's not immediatly obvious to me if the color is supposed to indicate a clickable link or if the color + font change is supposed to indicate something else. Removing the table borders (eg on the download page) makes the page seem muddier -- the eye wanders and it's harder to tell how the information is related than when there were borders. -- Matthew Ernisse https://www.going-flying.com/
Re: Feedback on redesigned OpenBSD.org
I too find the front page a little odd, maybe because it is more scrunched up on my desktop. The colors are a little too dark in dark mode. I can't read the text for previously clicked links. I like the change quite a bit on mobile. Courtney On 8/10/23 12:45, Benjamin Stürz wrote: Hi Michael, great work, especially with the light theme, but the dark theme is too dark for my taste and IMO the puffy should link to the front page. As Kevin said, the front page looks odd, for me too. Maybe the layout of it should stay as is, or be completely changed. I think that the styling of "OpenBSD" at the top sub-pages (like faq) should stay the same, since its persistent across OpenBSD's projects, like OpenSSH. Otherwise I think you did a fine job, especially with the line length. Sincerely, Benjamin Stürz On 2023-08-09T19:01Z mich...@mlpdesign.com yeeted this message at the world: Hi everyone WHAT: = I greatly respect OpenBSD; while I don't have OS tech level expertise to contribute - I do have some design skills and wanted to contribute to the community and project. So I created a new CSS (stylesheet) for OpenBSD.org It can be viewed at: https://www.openbsd.design/cvs/www/index.html WHY: I wanted to attempt to accomplish the following: - Responsive. Currently, the site is not responsive and difficult to read on a mobile device. Like /index.html, /lyrics.html and /support.html - Simplify the color palette. There's many different colors competing for attention (and causes distraction) on the website for vary choices of headline, table, background, etc colors. - Make code samples or inline KBD easier to distinguish. - Size images correctly for better reading of content. - Bring an updated freshness to the overall site, while not losing its original great character. CHANGE: === Note: with the exception of adding a ViewPort to /index.html, *no* HTML pages were changed. Only the OpenBSD.css file & inclusion of 3 web fonts. The changes to the website include: - a new OpenBSD.css stylesheet - include of a tag on /index.html (in order to make /index.html have a responsive layout) - Added 3 web fonts that are OFL1.1 licensed & attributed in CSS Lato normal and bold for body text Domine for headings - Adding puffy to the footer of all pages except for /index.html (I thought this was a nice playful way to bring some character to the overall website.) - Restyled Dark Mode colors as well (not just Light Mode) - Hid the server rack photo on /index.html While I appreciate the image, I thought it might be too distracting. - Any links to cvsweb, I styled as monospace font. DESIGN PRINCIPLES: == I searched through the mailing list and found 2 previous attempts of individuals showing a new design concept for openbsd.org. The principles I stood by is: - HTML should not be changed, the structure and content of the site is already great. The only change should be to the CSS file. Note: as previously mentioned, I did need to update /index.html to add a missing ViewPort so the page would be responsive. - The design change should apply the ENTIRE website hosted on www.openbsd.org, which this does. - Kept the same recognizable layout. I saw examples in the past where individuals made substantial structural changes for no apparent reason. - The design update should focus making content the main feature, since OpenBSD is known for having such great documentation. NEXT STEPS: === I've never posted to an OpenBSD mailing list, so please be kind. 1. I'd welcome feedback. Note, I've updated both Light Mode and Dark Mode. https://www.openbsd.design/cvs/www/index.html 2. I purchased the domain https://OpenBSD.design and would like to transfer this to the proper party to own/maintain. Please email me direct so I can do so. 3. I need to make a diff, but for some reason - I'm running into issues doing so and I think it's related to the introduction of the 3 new font files. Any suggestions beyond what's documented at https://www.openbsd.org/faq/faq5.html#Diff I hope this design update is welcomed with open minds. Looking forward to reading feedback. -mlp
Re: Feedback on redesigned OpenBSD.org
Hi Michael, great work, especially with the light theme, but the dark theme is too dark for my taste and IMO the puffy should link to the front page. As Kevin said, the front page looks odd, for me too. Maybe the layout of it should stay as is, or be completely changed. I think that the styling of "OpenBSD" at the top sub-pages (like faq) should stay the same, since its persistent across OpenBSD's projects, like OpenSSH. Otherwise I think you did a fine job, especially with the line length. Sincerely, Benjamin Stürz On 2023-08-09T19:01Z mich...@mlpdesign.com yeeted this message at the world: Hi everyone WHAT: = I greatly respect OpenBSD; while I don't have OS tech level expertise to contribute - I do have some design skills and wanted to contribute to the community and project. So I created a new CSS (stylesheet) for OpenBSD.org It can be viewed at: https://www.openbsd.design/cvs/www/index.html WHY: I wanted to attempt to accomplish the following: - Responsive. Currently, the site is not responsive and difficult to read on a mobile device. Like /index.html, /lyrics.html and /support.html - Simplify the color palette. There's many different colors competing for attention (and causes distraction) on the website for vary choices of headline, table, background, etc colors. - Make code samples or inline KBD easier to distinguish. - Size images correctly for better reading of content. - Bring an updated freshness to the overall site, while not losing its original great character. CHANGE: === Note: with the exception of adding a ViewPort to /index.html, *no* HTML pages were changed. Only the OpenBSD.css file & inclusion of 3 web fonts. The changes to the website include: - a new OpenBSD.css stylesheet - include of a tag on /index.html (in order to make /index.html have a responsive layout) - Added 3 web fonts that are OFL1.1 licensed & attributed in CSS Lato normal and bold for body text Domine for headings - Adding puffy to the footer of all pages except for /index.html (I thought this was a nice playful way to bring some character to the overall website.) - Restyled Dark Mode colors as well (not just Light Mode) - Hid the server rack photo on /index.html While I appreciate the image, I thought it might be too distracting. - Any links to cvsweb, I styled as monospace font. DESIGN PRINCIPLES: == I searched through the mailing list and found 2 previous attempts of individuals showing a new design concept for openbsd.org. The principles I stood by is: - HTML should not be changed, the structure and content of the site is already great. The only change should be to the CSS file. Note: as previously mentioned, I did need to update /index.html to add a missing ViewPort so the page would be responsive. - The design change should apply the ENTIRE website hosted on www.openbsd.org, which this does. - Kept the same recognizable layout. I saw examples in the past where individuals made substantial structural changes for no apparent reason. - The design update should focus making content the main feature, since OpenBSD is known for having such great documentation. NEXT STEPS: === I've never posted to an OpenBSD mailing list, so please be kind. 1. I'd welcome feedback. Note, I've updated both Light Mode and Dark Mode. https://www.openbsd.design/cvs/www/index.html 2. I purchased the domain https://OpenBSD.design and would like to transfer this to the proper party to own/maintain. Please email me direct so I can do so. 3. I need to make a diff, but for some reason - I'm running into issues doing so and I think it's related to the introduction of the 3 new font files. Any suggestions beyond what's documented at https://www.openbsd.org/faq/faq5.html#Diff I hope this design update is welcomed with open minds. Looking forward to reading feedback. -mlp
Re: Feedback on redesigned OpenBSD.org
On Wed, Aug 9, 2023 at 3:12 PM wrote: > Child Pages. > > I'd like to draw peoples attention to the child pages of > my redesign. > > Just a few examples (but note, ALL child pages have been > updated with new design): > > A. FAQ > > before: http://www.openbsd.org/faq/index.html > after: https://www.openbsd.design/cvs/www/faq/index.html > > B. FAQ - Install Guide > > before: http://www.openbsd.org/faq/faq4.html > after: https://www.openbsd.design/cvs/www/faq/faq4.html > > C. Platforms > > before: http://www.openbsd.org/plat.html > after: https://www.openbsd.design/cvs/www/plat.html > > D. Songs > > before: http://www.openbsd.org/lyrics.html > after: https://www.openbsd.design/cvs/www/lyrics.html > > E. Porters Handbook > > before: http://www.openbsd.org/faq/ports/index.html > after: https://www.openbsd.design/cvs/www/faq/ports/index.html > > These are just a few examples. I really like this! I don't know what the drawbacks are, if any, but it massively modernizes the design and the responsiveness is a huge benefit as well! Thank you for taking the time to do this and I hope it, or something very similar, comes to fruition soon.
Re: Feedback on redesigned OpenBSD.org
Hi Christian Does your redesign work well on text mode browsers? I tested with lynx, renders exact same. It's no different than existing official openbsd.org website because no HTML was changed, only CSS.
Re: Feedback on redesigned OpenBSD.org
On 8/9/23 23:02, mich...@mlpdesign.com wrote: Child Pages. I'd like to draw peoples attention to the child pages of my redesign. Does your redesign work well on text mode browsers? regards, chris
Re: Feedback on redesigned OpenBSD.org
Child Pages. I'd like to draw peoples attention to the child pages of my redesign. Just a few examples (but note, ALL child pages have been updated with new design): A. FAQ before: http://www.openbsd.org/faq/index.html after: https://www.openbsd.design/cvs/www/faq/index.html B. FAQ - Install Guide before: http://www.openbsd.org/faq/faq4.html after: https://www.openbsd.design/cvs/www/faq/faq4.html C. Platforms before: http://www.openbsd.org/plat.html after: https://www.openbsd.design/cvs/www/plat.html D. Songs before: http://www.openbsd.org/lyrics.html after: https://www.openbsd.design/cvs/www/lyrics.html E. Porters Handbook before: http://www.openbsd.org/faq/ports/index.html after: https://www.openbsd.design/cvs/www/faq/ports/index.html These are just a few examples. Please click around to see that all pages on www.openbsd.org have been restyled. -mlp
Re: Feedback on redesigned OpenBSD.org
Hi Kevin
Thank you for the quick reply and looking at the live site.
1. Regarding the /index.html, currently that's the only page on the
official
openbsd.org website that is left aligned (all other pages are
centered aligned).
I kept that as-in, but I capped /index.html total width to 840px
since it seemed
difficult to read extremely long sentences.
2. Have you had a chance to look at the Light Mode design? That's where
I put
the bulk of my time and effort.
3. I've been able to create a diff, many thanks to TJ.
The diff is below:
? font-domine-700.woff2
? font-lato-400.woff2
? font-lato-900.woff2
Index: index.html
===
RCS file: /cvs/www/index.html,v
retrieving revision 1.758
diff -r1.758 index.html
9a10,11
Index: openbsd.css
===
RCS file: /cvs/www/openbsd.css,v
retrieving revision 1.22
diff -r1.22 openbsd.css
2a3,28
/* Font 'Domine', copyright: Impallari Type; License: SIL OFL 1.1
https://scripts.sil.org/ofl */
@font-face {
font-family: 'Domine';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(font-domine-700.woff2) format('woff2');
}
/* Font 'Lato', copyright: Lukasz Dziedzic; License: SIL OFL 1.1
https://scripts.sil.org/ofl */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(font-lato-400.woff2) format('woff2');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(font-lato-900.woff2) format('woff2');
}
4c30
<--red: #E0;
---
--red: #8B;
6c32
<--blue: #E0;
---
--blue: #11; /* hack since some pages, like plus.html hard code
--blue into the html page. old value was #E0 */
7a34,74
--navbar-background-color: #EE;
--navbar-border-width: 1px;
--navbar-border-color: #E3E3E3;
--navbar-indent-size: 0px;
--navbar-padding: 27px 20px 0 20px;
--font-family: 'Lato', sans-serif;
--font-family-heading: 'Domine', serif;
--font-line-height: calc(4px + 2ex);;
--font-color-body: #22;
--font-color-heading: #00;
--font-size-body: 14px;
--font-size-header: 14px;
--font-size-monospace: 13px;
--link-color-unvisited: #004080;
--link-color-visited: #004080;
--link-text-decoration-color: #cdd4e5;
}
a:link, a:visited {
color: var(--link-color-unvisited);
text-decoration-color: var(--link-text-decoration-color);
text-underline-offset: 3px;
text-decoration-style: dotted
}
a:hover {
text-decoration-color: var(--link-color-unvisited);
text-decoration-style: solid
}
/* style links to man pages & cvsweb differently,
but not on index.html main navigation */
a[href*='//man.openbsd.org']:not(nav a),
a[href*='//cvsweb.openbsd.org']:not(nav a) {
font-family: Courier, monospace;
font-size: var(--font-size-monospace)
}
/* on frontpage (index.html), don't underline the links in navbar */
nav a {
text-decoration: none
10,11c77,86
< :link {
Re: Feedback on redesigned OpenBSD.org
Hi Chris On iOS/Safari, you can adjust the web browser font size by clicking the "aA" in the url bar, and then adjust the font to be some size larger than "100%". It works for me at least when I test it on my redesigned site. On 2023-08-09 15:19, Chris Bennett wrote: I haven't even looked at these changes, yet. But I have a terrible time reading text on mobile devices. There doesn't seem to be any way (that I know of), to change text size without either using the phones settings for text size (Yuck) or changing the default size or accessibility settings in the browser. I always grab a tablet for sites that really screw up text sizing. My phone is just too small for sites with tiny text or huge text. That's just my opinion and experience with bad eyesight. -- Chris Bennett
Re: Feedback on redesigned OpenBSD.org
I haven't even looked at these changes, yet. But I have a terrible time reading text on mobile devices. There doesn't seem to be any way (that I know of), to change text size without either using the phones settings for text size (Yuck) or changing the default size or accessibility settings in the browser. I always grab a tablet for sites that really screw up text sizing. My phone is just too small for sites with tiny text or huge text. That's just my opinion and experience with bad eyesight. -- Chris Bennett
