4 ms·
please tell me what is wrong with default browser rendering I'll take that bait. - The default font is Times New Roman. It's hard to read at the best of times
by onion2k 5y ago
please tell me what is wrong with default browser rendering
I'll take that bait.
- The default font is Times New Roman. It's hard to read at the best of times, but on a mobile device it's truly horrible.
- By default the color scheme is black text on white with bright blue links. On a page that has links embedded in paragraphs the sharp contrast change makes the links stand out too much, making text less readable.
- Browsers make text expand to fill the window with an 8px margin. On a 4K monitor with a maximised window that means the margin is 0.21% of the available space and paragraphs are usually just one long line of text. Again, it's not very readable.
- Browsers don't apply 'text-rendering: optimizeLegibility;' by default, so the algorithm used for anti-aliasing makes the text (guess what's coming...) less readable, but it does render faster by a few milliseconds.
- Forms can layout very weirdly if you're not careful, with spacing around labels that makes it unclear what element the label applies to.
There's a lot more to add, but I'll stop there.
The fact is that browsers have moved on, display tech has changed, and there's a much wider range of devices used to view pages. There just isn't a set of defaults that works well any more. I'd argue that there isn't even a single set of defaults that could work - websites need to optimize the way content is displayed for the device being used. The defaults for a small mobile device should be very different to the defaults for an 8K HDR monitor. Relying on the browser to work out how something should work for a user just won't work now.
- chrismorgan 5y ago• The default font is a serif, which on most platforms means Times New Roman. It’s not the greatest font out there, but it’s generally quite good for legibility provided you don’t shrink it too much. It’s not horrible in the slightest on a mobile device. You may just be used to sans-serif fonts. • The default colours of #000 on #fff with #00e for links is excellent contrast that achieves precisely what is desired. Certainly it is a little more than is necessary, and I prefer to tone it down a little to #03d, but it’s not bad. • Yeah, the full width body and 8px margin is not a default style that has aged well. You know how mobile devices took up the meta viewport tag and the text size adjustment algorithm, because sites were designed for larger screens? It’d be kinda nice, as a theory, if browsers would perform a similar intervention for large and wide screens (using the existing meta viewport tag as the signal); but in practice, few enough sites and people would benefit from it that they’re not going to do it. • Please don’t touch text-rendering. On most platforms the effect is not noticeable with a side-by-side comparison even if you’re looking for it, and where there are differences, not everyone agrees about which is better. On slow devices that support the property (a mistake, they should just disable it), it murders performance on long pages. Just let the browser do its thing. There’s generally low-hanging fruit in text layout and rendering on websites that has a much more significant effect on readability. (Also, blame Apple for deliberately ruining text rendering for low-resolution screens some years back.) • Forms: eh, they’re simple and clear enough, so long as you lay them out with appropriate line breaks, table cells or paragraph margins. Certainly a sequence of <div><label>…</label><br><input></div> will be confusing, but when you consider the scope of what base stylesheets like this cover, they don’t tend to change the situation on form spacing and grouping at all.
- happysadpanda2 5y ago> - Browsers make text expand to fill the window with an 8px margin. On a 4K monitor with a maximised window that means the margin is 0.21% of the available space and paragraphs are usually just one long line of text. Again, it's not very readable. Disclaimer: I'm an old coot and my hardware is lagging behind, still on a single 22" display on my desktop, etc, etc, so I am most likely missing something, AND your overall argument here does appear sound, but I do found myself wondering: why, if you have a 4k display and massive amounts of screen realestate, do you have a maximized browser window? I mean, with my crappy hardware I can understand why I am doing it, but I assume that I am the odd one/edge-case here, not you.
- onion2k 5y agowhy, if you have a 4k display and massive amounts of screen realestate, do you have a maximized browser window? It's the job of every web dev to write code that works everywhere. If the user has chosen to run their browser maximised on a 4K monitor that's their choice. When you write code, saying "the user is using it wrong" is never going to be an acceptable excuse for shipping something that doesn't work well for everyone in my opinion.
- dylan604 5y ago>saying "the user is using it wrong" is never going to be an acceptable excuse unless you're Steve Jobs
- ipaddr 5y agoWhere did you get that impression? Web developers aim to write code that works for most, most of the time. If you happen to be using netscape navigator or using an 8k monitor at maximum scale you won't be in a group that qa can cover. As more people get 4K more websites will support it.
- 9dev 5y agoBecause 99% of the websites I browse are optimised for wide screens and/or contain lots of information that legitimately fill my 4K screen. I'm not going to resize my entire browser window for that one special snowflake that doesn't use CSS on their blog, I'm simply navigating away.
- bityard 5y agoIf anyone is browsing the web fullscreen at 4k and complaining that the web pages are too wide, I'm not sure the problem is with the stylesheet