When this is additionally compounded with a non-standard super thin font, the result is text almost invisible, even when zoomed, at least on non-retina non-macs.
I also noticed some (very few, but not that rare) websites use a font that looks completely rubbish on my Windows machines (certain serifs not being displayed, making it impossible to decipher letters). I thought it was impossible that every Windows user had this, they would have learnt. Turned out my ClearType settings hugely affected the rendering of mentioned font (ClearType is antialiasing method on Windows, when you enable it, it goes through manual calibration process, hence every Windows machine may have radically different config)
Don't go wild with colors and fonts for main content of the page. The more standard ones you use, the better chance it will render well for every user. Not everyone has same device with same config as yours.
When you're aware that high contrast can exacerbate and trigger scoptic sensitivity reactions in those with dyslexia, that page takes on a different tone.
Okay, so should I have to provide a screen reader download with my website as well? If you have a condition that between 5 - 17% of the world has[1] then you should be responsible for setting up your own environment (possibly with the help of your OS) the way it works for you.
You want a huge portion of the world, most of whom not knowing how, to override your stylesheet because you can't be bothered to take five seconds to ease up on contrast (or even consider it)? Please tell me you're joking.
>You want a huge portion of the world, most of whom not knowing how, to override your stylesheet because you can't be bothered to take five seconds to ease up on contrast (or even consider it)?
No, but given the way that the web and browsers are designed, along with the way that my site is designed the option is there for people that want to take it. Again, should I have to provide a link to a spoken version of my website in case somebody who is blind doesn't have a screen reader installed?
ADA is about making things accessible. So long as somebody can, with reasonable accommodation, access my website (for example, my design being simple and trivially overridable with user styles) then I'm accessible. If someone with dyslexia cannot handle the contrast levels of my site because a small minority of dyslexic users have their dyslexia triggered by that amount of contract then that is precisely what user style sheets are for, and I don't think it's unreasonable to ask somebody who is a minority of a minority to use the tools that are provided implicitly for them to configure things in a way that is easier for them.
I didn't know about SSS. If you have it, I feel very sorry for you. Do you use some special apps for minimizing the effects?
It's true that modern devices, particularly mobiles, emit too much light. I always set device/monitor brightness to very low. Additionally I use f.lux/twilight to shift colors slightly towards red. When the page is black on white, I can adjust brightness enough to not bother me too much.
But when the page is gray on gray thin font, the only way to read the text is to enable custom stylesheet that changes font to black Georgia. Easy on desktop, not so easy on mobile.
Hard black on hard white is 21:1 contrast, and most accessibility guidelines aim for on the order of magnitude of 3:1, 4:1, 7:1, or so, depending on usage. Black text is tiring on the eyes with an LCD, and high contrast text can trigger word motion and blurring for those who suffer from dyslexia. That's right: your text contrast in your 'ideal' black/white world can make dyslexic readers struggle to read what you've written. It's not 'trendy,' it's out of respect for those with disabilities.
Please make an effort in your own work to respect those in the world with dyslexia, colorblindness (never use red/green for status without another visual indicator, an overwhelmingly common sin that I'd wager 80% of those reading have done at some point), full blindness, and many other disabilities that can affect those who use your software. If your organization doesn't have accessibility guidelines, it should write some; there are a lot to start from online. You can (and should) also run your software through accessibility tools to help.
Hard black, #000000, is a modern thing and itself the trend. Typography has never in history been hard black until Web pages started just throwing 'black' on 'white' down without understanding color and color physiology. Hard black, all zeroes, is even outside of generally usable color in television; almost all broadcast equipment stays in the 16-255 range and relegates 0-15 for superblack purposes. Notice you can tell when a TV is on? That's why, and there are numerous technical reasons for even that.
#222 on #eee is fine but some sites do #777 on #ddd or go farther. This radically lowers the contrast and makes text really unpleasant to read with some fonts.
This is not a tend. For instance, finding pure black in fine art or elsewhere is next to impossible and if you do it's a modern trend (not the opposite).
The contrast ratio (how bright whites are to black) is the important thing, and the contrast ratio of printed text in sunlight is a lot greater than your average LCD.
I always wondered about this one, you hear it a lot:
"A little less contrast
Black on white? How often do you see that kind of contrast in real life? Tone it down a bit, asshole. I would've even made this site's background a nice #EEEEEE if I wasn't so focused on keeping declarations to a lean 7 fucking lines."
But my monitor is not perfect, nobodies is so why make stuff less well readable, I don't understand it. It annoys me to no end when I have to copy paste stuff into a text editor just to get a white background because someone decide a background should never be white and people seem to agree. If I want less contrast I'll tone down the background lighting of my screen.
There are lots of people who are annoyed to no end that the background of most websites is white and their browser does not offer simple way to change that. Plugins like stylish help to both groups. Just set the background color to what you want in custom css style, cope with the broken graphics and enjoy the web.
So, when your background is too bright... why not reduce monitor brightness? The letters will stay as black as they are (hey its 2016), your background gets less bright. This has other advantages too. Why must a website creator choose how much (maximum) light my screen emits around the letters?
I do reduce often, but this makes everything else on my desktop too dark so I can't read it. So I have a keyboard shortcuts that run xrandr --brightness <intensity> that I use frequently, but it is not the ideal solution for everyone. Better solution of this problem would be if websites detected brightness+contrast preference set up in browsers, like they detect language or browser window size, and changed their CSS accordingly. It would be great accessibility and UX improvement of the Web. We should make some standard for that and push it up into browser projects. Anybody experienced with such a task?
Just because I want a less bright background for reading text doesn't mean I want my monitor to be incapable of displaying a bright white - it's not only used for reading text.
Resizing windows is one of the most annoying interactions to perform on a computer
You have to zero in on that edge with your mouse. There's only a window of ~10 pixels so you have to try to be precise, and it seems to be a rather expensive graphical thing to show because I always see ugly, jolting artifacts, and I have a GTX 970
I'm usually using Linux, so I forget how painful this is on other systems. On Linux (and similar), you can just Alt+Middle-drag (or Alt+Right-drag, depending on Gnome vs. KDE) anywhere in the window. The closest corner will move.
Edit: I also highly recommend using mice instead of touchpads for all computer interactions. I cringe when I watch a coworker using an Apple magic touchpad, because they have to move so slowly.
The variation I keep seeing today is sites that lose any left margin at all when the browser is less than 1000px wide (or 930 or whatever magic number the designer had in mind that week).
It's pretty special seeing text butted up hard against the left margin. I'm glad the proliferation of web standards has advanced to the point that this is acceptable!
You aren't alone - I fine huge gutters on the left/right to be very distracting. If I have my window set to be very wide, I WANT TO USE THAT WIDTH.
However, I realize that I'm in the minority - I don't find narrow columns easier to read, I don't consider analog watches "more attractive" than digital, while I love physical books I don't feel I lose any experience in going to a nice eInk reader, and I find most icons to be worse than a short text label. For these sins I am prepared to simply suffer a tiny bit until society catches up to me :)
Sure. The padding adds 15px of space on both sides of the body so that the text doesn't "stick" to the edges when the size of the screen is less than the defined max-width (i.e: on mobile). Doesn't make a difference on desktop though.
This stuff belongs in the domain of graphical design. Rule of thumb is to provide padding towards the edges around text, a little more to the sides than to the top, eg. [padding: 1em 2em;] depending on the font used because of inherent vertical padding in writing. If the text hugs the container, it seems cramped, and we get distracted by the lines of the bounding container.
I recommend giving "The Elements of Graphic Design" by Alex W. White a read, where he talks about issues of space and typography and why certain conventions exist. CSS is after all a way to express graphical design relations in code, which isn't very useful if one is unaware of the principles driving clear and useful design.
Actually, no, you still have to perform the "find the window" function and the "bring the window to the top" function, for both maximized as well as non-maximized windows. And once any given window is sized, the 'management hassle' for 'find and raise' is identical between both modes (maximized and non-maximized.
The screenshot you posted is of a Mac, so because of that I am going to assume you are using a Mac (because otherwise you would have posted a screen shot of some other OS). This explains why you believe that window management is a hassle.
Mac's window management support is on par with MSWindows window management, which is to say, they both suck for handling more than a handful of windows at once, and they both suck for doing much more than "find something - bring it to the top" (and even that function on both is awful as well). Which is really sad given that Apple is the company that brought the whole multiple overlapping windows GUI model into the popular view (Apple Lisa).
Additionally, because you are using a Mac, I am going to assume you are likely using a Mac laptop (simply due to the sheer number of Mac laptops sold vs. Mac desktops, there is a significantly higher probability you are on a Mac laptop). This leads directly to a second reason why you believe window management is a hassle. On almost any touchpad/trackpad, with the current UI hooks used by Mac (and Windows as well), window management is a hassle and sucks terribly. This is because all the UI hooks are designed around a mouse with a separate button (or buttons) that can be independently held down separately from creating mouse motion. On any touchpad/trackpad that lacks separate mouse buttons that can be independently held down with your second hand, performing any kind of "hold mouse button down while moving" operation is made significantly more difficult and a major hassle. This is due to the need to reposition your fingers on the pad to perform large movements, and the act of repositioning loses the "hold button down" mode, so you have to repeat the "hold button down" action just to reposition your fingers. But this is not a flaw with multiple window UI's, this is a flaw with Apple deploying a touchpad without separate buttons and failing to update the UI interface to better mesh with the physical constraints of a single touchpad without external buttons.
I didn't post the original screenshot, you're probably confusing me for the poster of the parent comment.
I am using Windows and I'm writing this from a desktop, from a Linux VM. I don't find window management to be much better when using a mouse. I maximize all my non-instant messenger windows.
Maybe one day I'll use a different window management paradigm, but I doubt it. I already have a special keyboard layout and every time I use a standard keyboard layout I feel/look like a newbie since I need to adapt to the new circumstances. Switching to a different window management paradigm would mean that I would have an even harder time adapting to using another PC.
I know everyone here is all about naked websites but I couldn't help but add these three lines of CSS to the body:
Makes the whole thing much more pleasant to read! (And even looks good on mobile)Here's a screenshot: http://imgur.com/UFHJp8a