5 ms·
Off-topic: I absolutely love the design choices made by the author of this site. It's the basic browser stylesheet with some nice refinements. A real triumph of
by JonAtkinson 7y ago
Off-topic: I absolutely love the design choices made by the author of this site. It's the basic browser stylesheet with some nice refinements. A real triumph of minimalism and incredibly readable.
- srbby 7y agoFont is too big.
- pteraspidomorph 7y agoIt's very pleasant on QHD. I agree that they probably should have a different sheet for lower resolutions.
- giancarlostoro 7y agoThis is what kills me about web developers of 2017-2019 (maybe farther back to 2015 or 2016?). We had this awesome hype about supporting mobile resolutions with CSS years ago but now it seems like nobody accounts for the various screen form factors available when designing websites. Like those sites with the overly huge logos that look ridiculous and annoying on 1080p but I'm sure on 2k and higher they look fine. I don't want to scroll down an entire page worth of scrolling to read your article, it should be immediately available. Thankfully there's Firefox's Reader Mode.
- cptskippy 7y agoEverything is mobile first these days We had to write a line of business app used by office staff opening mail to feed high speed scanners to support mobile first with a responsive design.
- giancarlostoro 7y agoWhat worries me more is that, it's not always mobile first either. Sometimes it's just 4K first.
- cptskippy 7y agoI don't think I've encountered that yet, though I could see how someone living in a 4k would could overlooked us 1080plebs. It's like when the world switched from 640x480 to 800x600 and then to 1024x768. I'm more curious though if what you're experiencing might also be sites designed for high res phones. Most phones these days are 1080p or better.
- barrkel 7y agoIn principle, using resolution-independent units like points should be fine; it's using px instead of pt that leads to problems. (And the site is using px; it shouldn't.)
- pteraspidomorph 7y agoAs a web developer in the past I found - though maybe that has changed in recent years, let me know if that is the case - there aren't any real resolution-independent units you can use to design an interface that is comfortable on every medium. You can peg your design to things like viewport width or font size, but you always end up having to make an arbitrary decision at some point, because there is no way for the web browser to know the physical dimensions of the screen the webpage is actually being displayed on. You have to make educated guesses based on the relationship between width and height, user agent and other headers, stuff like that, and create different stylesheets for each case. The style for the 1920x1080 screen (rotated horizontally) of the smallest smartphones can't have the same font size as the style of a 1920x1080 30 inch desktop monitor.
- iamacyborg 7y agoHey man, I work in email dev, I'm at least a decade behind current web dev standards.
- chrismorgan 7y agoYou are incorrect. All CSS units are defined in a resolution-dependent way. (I think there has only every been one exception to this, an experimental unit `mozmm`, now discontinued, that attempted to be resolution-independent, representing one physical millimetre.) On screen, the px unit is king, being defined however the device chooses to define it—most commonly one or two device pixels. All other units are defined in terms of it: 1in = 96px = 72pt, &c. On print, the ratios are the same, but physical length units actually have meaning now, corresponding to physical measurements—well, maybe they do; in practice browsers play fast and loose with it all, second-guessing the website’s stylesheets all over the place, which is normally a good thing for users because few websites take care for print stylesheets, but is utterly debilitating if you actually care and want precision. Now the question of what the root font-size is (a unit I like to call “browser em” or “bem”—I’ve never heard anyone else give it a proper name)—that’s a much more interesting question. It’s almost always 16px (I have no stats ready to hand, but I’d suggest >99% of page views), but there are devices out there that have other values, mostly between 13px and 19px, and you can change the value in some browsers also. However, website layouts commonly break if the value is not 16px, if the font sizes are based in bems and media queries in px, or font sizes in px and media queries in bems, and the developers have assumed 16px (which is completely normal). The ideal situation is to use either px everywhere or bem everywhere. In theory, using relative units everywhere is potentially nicer. In practice, you’re fine using pixel units everywhere. But 24px is still way too big.
- iamnotacrook 7y agoQuite. It's like I've wondered into the Large Print section of the library. What's wrong with normal sized fonts, and letting the minority with impaired eyesight or curious hardware resize as desired? Or maybe browsers could expose some standard config info to sites saying "yeah, extra normal for me please"? I could use reader mode for everything, except it breaks some sites.
- username90 7y agoJust make it smaller? Ctrl + mouse wheel down or minus in chrome.
- martin_a 7y agoTotally. Not sure though, why. 1.2em would have just been fine, but instead 24px (which is 1.5em) is too large.
- iamacyborg 7y agoMostly just me being lazy and writing the stylesheet for my 1440p screen at home, I've done very little optimisation for other screens/devices.
- vince14 7y agoI'm also on 1440p and seeing your website with that "huge" font made my instantly happy. My Firefox is scaled up using layout.css.devPixelsPerPx with a value of 1.2 and even then I've to scale up most websites to at least 120% in order to see anything.
- hailk 7y agoTheir normal paragraph is 24px. Which is huge compared to the average content you find on web. The title is 48px. I find it more legible than the average web content, yet it's a little jarring. Some 22px/40px worked very well for me. Still a good example of minimal design.
- iamacyborg 7y agoThanks!