This is a pretty nice demo of the process of turning a basic page into a "design" (in the sense that applying positioning, spacing, contrast, and things like typography is visual design - I might call it layout instead).
So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility.
Try having someone with less than stellar eyesight look at this page. Or someone who's trying to read it on a smartphone outside in sunlight or with the brightness of their screen set at less than maximum. Design isn't about what looks nice, it's about what works well - pages that a portion of your audience cannot read don't work well.
As someone with less than perfect vision, I've seen far too many websites embrace the "greyness" in design, employing far too light shades of grey to display their main content.
This is especially evident if using an older monitor with a TN panel. While IPS monitors have become affordable in the last 2-3 years, there was a period of time when they carried a hefty premium, so most consumers are still probably stuck with at least 1 TN panel in their home.
I cannot describe a user experience of reading a low contrast web page on a TN panel as anything but horrible and have had to manually override CSS rules to be able to process the content.
My personal theory is that stuff looks / renders differently on Macs due to them having 1) retina screens, 2) different font smoothing algorithms, 3) glossy screens.
Most designers work exclusively on Macs and they are not even aware of the issue.
In particular, very thin fonts look well on Macs while they look like absolute garbage under Windows (to the point where some serifs are plainly not displayed so you can't recognize the letters).
I also think that certain "gray on gray" combinations on average have higher contrast on Mac displays than on non-Macs.
If it is true that most designers are not aware of the accessibility issues caused by their designs in various environments, how can we still call them designers?
It has always been my deep understanding that the artist is trying to communicate within a constrained space. Without knowing the bounds of this space an artist is truly lost. By constraining, however, the artist is able to focus, form and foster a microcosmos.
The modern web designer is rarely an artist. Web design entails extending of bounds more often than focusing them. Selling out instead of focusing and selling paradigms.
> If it is true that most designers are not aware of the accessibility issues caused by their designs in various environments, how can we still call them designers?
... penny for every time I heard a developer say something stupid about their own field.
Just because you're not aware of 1 thing, doesn't mean you shouldn't be called a designer anymore. Just so you're aware, your horse is high as a kite.
Since I started this, I'd make the analogy that "not realising what level of contrast can pose problems" is about as common as "not commenting your code properly".
I own and work on at any given time, all three of Mac, Windows, and Fedora Linux, and let me tell you this shit gets infuriating.
I don't even know why we have the TrueType font standard anymore, if not a goddamn platform on Earth even bothered to render them remotely the same.
You know how hard it is to find a code font you like, when it doesn't even look the same from platform to platform? I've actually given up and gone so far as using old bitmap fonts from the 16-bit era, because at least I can trust those to look the same, in theory. Sometimes even then the Mac's ludicriously overzealous font smoothing will render them unintelligible.
I am impressed at the quality of the Mac's rendering but man alive, it's so extreme sometimes that it's tempting to call any font running on a Mac a derivative work.
The flipside of course is that if you're on any kind of Linux, even getting your font rendering to something like palatable can be all manner of obnoxious, not least because it will even vary from software to software. Tweak the system fonts all you want, it'll do fuck all when your browser decides to just completely override and ignore the system font rendering for it's own, usually uglier, ideas.
This is why designers give up and just design for the Mac. Because ultimately, they want things to look good, and trying to make things look both good, and consistent, on everything, is an intractable nightmare.
> The flipside of course is that if you're on any kind of Linux, even getting your font rendering to something like palatable can be all manner of obnoxious
> Most "designers" work exclusively on Macs and they are not even aware of the issue.
FTFY. Seriously, if you do all your design work on a particular piece of display hardware and actually are unaware that things tend to display differently on different hardware and in different environments then yes, hand over your "designer" title, please.
I used to have colleagues like that. I didn't tell them this quite as bluntly (because, colleagues) but oh did I wish I could. Have some pride in your work, please. Now this was in the time that "responsive" was not yet a thing (and we were happy when IE7 came out hahaha finally PNG transparency :p).
But today? What is responsive design if not a fundamental awareness that your site is going to look different on different types of hardware? How can a designer get away with such ignorance today?
I do development exclusively on Linux so their docs look like this: http://i.imgur.com/80uc91Y.png Urgh. Luckily Firefox's Inspect Element lets me turn off their awful stylesheets and make them legible.
Similarly, the site is optimized by Apple for viewing on an Apple, also not fair. I don't see why I couldn't make a page on Linux render like that. And odds are very good it would look better on other OSes by default without extra effort, vs the other way around (bonus for playing the free & open game).
Also what has this to do with Retina? I always assumed Retina is just a resolution thing, right? But the screenshots are the same resolution.
It was for me. I don't have bad vision by the way. It's just that I decided not to zoom in this time to experience the website properly. Once I got the the grey colour step, it was clear that the top comment here would be about it ... for good reason :)
That said, great presentation and a lot of great advice in this submission.
Interesting. I have on gripe with that page is that the examples of bad contrast say "NO CONTRAST" while the good examples say "HIGH CONTRAST". The bad examples should be more accurately labeled "LOW CONTRAST".
Yours is a definition of contrast, but not the one used in design or vision science [1, 2], where contrast is defined as a difference in luminance or color between regions of an image that makes objects and textures visible. If an image has no contrast, it is a solid patch. If an image has low contrast, the brightest or most colorful regions are not too different from the other regions, as if seen through a dense fog. If an image has high contrast, the brightest or most colorful regions are quite different from the other regions.
Here we're talking specifically about "visual contrast", which has a meaning in perception slightly different than the common usage of "contrast".
Visual contrast is measured on a spectrum that starts at zero and goes up from there - a box of a particular color inside a box of the same color would have no contrast, but if there is any difference in the color values then there is at least some visual contrast.
Wikipedia isn't a great source for definitions, but has a reasonably thorough take on this https://en.wikipedia.org/wiki/Contrast_(vision), going into the details of contrast sensitivity, which deals with almost-imperceptible levels of contrast.
I just wish they'd fix their site so it doesn't break the layout horribly if someone has set their default browser text size to something other than 16px! The irony of a site that is about maintaining accessibility for those with less than perfect vision breaking under one of the most likely changes to be made by someone with less than perfect vision is rather awkward.
Yeah, the grey coloured text was quite hard to read on this screen too.
But do you know what else was hard to read?
The code blocks themselves. Because of the syntax highlighting and pastel colours, I had to focus quite a bit to see any of the actual code. It got better with a few more lights on in the room, but someone with below average vision would likely struggle to read much of this page.
I was going to comment the same. The first change to the text color was to #555, which IMO is way too light already. Something like #333 works much better at "softening" the sharpness of black over white while still maintaining the text pretty readable.
But after that step the tutorial redefined the text color to #566b78, which is even lighter. I understand that the blue shade is a nice touch, but decreasing the legibility of the text so much is not.
Besides these nitpicks, the article is great though :)
Maybe it's a matter of screen quality? I don't have the best eyesight, but I saw no discernible difference between the #000 and the #555 when it switched. And neither were either too harsh or too soft on my eyes. But I was looking at it on a macBookPro.
Almost very designer I've worked with has eschewed black in favour of one of the lower order grays, not just to make the contrast less jarring but also to ease the browser's own font smoothing a little as it tries to jump from 0 to 255.
You could probably get a similar effect by softening the background color from a harsh #FFF. You might not need to use as light of gray text color then.
Yeah, i suspect that might be the case. The author may have designed this on a similar high-contrast screen too. I saw it on a regular 1366x1024 laptop screen and the reduction in contrast from black to #555 was discernible.
I saw this on a 1080p 15.4" display and whilst the switch to #555 was not especially jarring in itself, it made the harshness of the perfectly white background more prominent.
I noticed this too, it's easy to fall into the trap of subtlety when designing. Subtle often ends up as low contrast which can definitely hurt accessibility. I think the first body color #555 was nice and it gets a good accessibility score too[0] whereas the second edition of the body color #566b78 is a bit too low contrast and subsequently gets a non perfect accessibility score[1].
> So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility.
I'd say this is a half truth. Yes completely black text feels unnatural and a bit off, but done correctly you can pick a color that's still legible without being #000. There is an intersection of legible black on #FFF that's not pure black.
It hurts my eyes when text is #000000 but maybe its because I have a really nice screen with high resolution. I understand it is about what works well but for some, above #000000 is much more comfortable.
I'm the same way, that is why I find it interesting that so many people are complaining that the tips in the article. They definitely help my type of vision a lot. I find #000 very harsh and difficult to read and these softer tons help me.
If I find an article with #000 (or for example... HN comments) I can't sit and read them all at once, I have to go through them in bits and pieces and give me eyes a rest.
Can't you adjust your monitor (usually the "brightness" setting) until it's comfortable for you? Personally, I like keeping the text black and adjusting the background to be darker if I want to reduce contrast.
Why? #000000 is meant to be pitch black, as black as being locked in a room without windows or light. #ffffff is meant to be as light as looking right into the sun itself, blindingly bright. (And my monitor accomplishes quite something like that).
So if I want to be able to play games tweaked for this wide spectrum, and read text, I either just can't, or have to hope websites use grey-on-grey.
That analogy doesn't work because your screen cannot reproduce every color that is perceptible to people.
#000 is as dark as your screen is when the screen is turned off, which is not the darkest color that you can perceive. And if at any point it is uncomfortable to look your screen because it is blindingly bright, then the screen brightness is set too high.
Honestly, with my glasses I've got pretty good eyes, and the gray text was a LOT harder to read than the black text. When it faded it became like reading through a blur.
My laptop has a pretty bad screen and several shades of light grey and dark grey appear white or black, respectively, so these sites can be really annoying.
I think everyone is different and it is hard to make everyone happy. This website is 100% more readable to me than HackerNews. It was painful to switch back to HN comments after viewing the final product of the site.
So yes there are some people who will have issues reading what is proposed, there are other people who have a hard time reading what you are proposing.
It is not true that pure black text on pure white background is a better user experience for most people. It might be better for a small minority of people with vision problems.
While it is reasonable to argue whether #555 is the exact right level or not, the point is you need you need to make the contrast less harsh than black on white. Otherwise its just fugly.
I checked the site and it's absolutely lovely, I was all ready to jump at the occasion and share this link to all my friends who ask me about "design tips" some times (I got a decade of experience on them so I intuit and spot things that are "off" but often it's first this 4 minute stuff that needs fixed), and when he got to the text #555 bit I was like "NOOOOOOOOOOO now I have to send this to all my friends with the caveat 'but please ignore the text #555 bit'" (which will get lost somewhere and we'll end up with more bad contrast sites).
I can say a bit more about this, but since the site is all about "do this!" (no reasoning given) I'll first just say: "don't do that!" :)
The claim that black text is harsh on the eyes is a similarly unfounded-yet-oft-repeated "Designer Wisdom" like that Golden Ratio shit--it's also similar in the way that it's not per se wrong to use it, but like bbq-sauce on pizza/sex, only if you know wtf you're doing, not something to apply willy-nilly without clue or cleverness.
And it's IMHO slightly worse than the Golden Ratio because 1. the Golden Ratio doesn't hurt and 2. the Golden Ratio thing sounds sciencey but is hard to experimentally confirm or refute while anybody can see that black on any screen was never really black to begin with so what are you on about in the first place "never use pure black" (as a designer, I WISH I could use pure black, but we can't, scientists told me only a black hole is really pure black, and you can't paint with those because they're bad for the environment or something), it's a really arbitrary distinction.
As for "don't use pure black", I do that, but the most important rule of design remains:
You have got to know the rules before you break the rules!
And the rule is black on white. Which you can't achieve. So practice on that first. Then you can break it and ask yourself "why am I breaking it?". Personally what I like to do is use a very dark colour like #321 or I don't know, #114 maybe. This way, on a high quality bright and contrast-rich monitor the people with medium-good eyesight get a slightly coloured tone in the blacks that you can use to match the other colours, warm it up, cool it down etc. And for everybody else, it looks like black! I usually do the same for white. And if you use something like redshift (or Flux) it gets all messed up any way, but if you place your blacks/whites slightly off minimum/maximum and you do it in harmony with the other colours, then a transformation like redshift will also leave a lot of that colour harmony in tact. So that's a good reason not to use pure black or pure white. However, upping your blacks all the way to #555, will get a lot of use out of the non-linearities in the blackbody-radiation that redshift emulates and it'll mess up the colours.
Also #555 is 33%! Post-gamma, even! You just threw away one-third of your dynamic range for what reason? Say somethingcontrastsomethingsomething again, I double-dare you. Again, learn to use contrast first, before you decide to get rid of it because you've heard somethingsomething somewhere.
Otherwise, wow this site is absolutely lovely!! :D Let me not understate that!
The main text in the article is actually not flagged for low contrast it the Accessibility Audit. Only the inline code and pre elements (which I agree are hard to read).
Looking at page timing, people seem less jarred by the slight contrast difference, even if they would have a hard time distinguishing the two. As for why, I am not sure.
I'd love to see a blog post on some of the nitty-gritty details on this. Even if there's no known root cause, it'd be fascinating to see your analysis on this.
If you think about paper, it's not perfectly white because of the material and light passing through it and reflecting off it. Neither is the ink perfectly black. I've also found that a mix of shades is preferable to either pure white or black. On my latest site I used:
Lovely! Definitely like the style here and the focus on content first. Like other people have said it's similar to Motherfucking Website[1], and a Better Motherfucking Website[2]. I'll need to start including this when I link to those two.
For my website[3] I'm really trying to keep weight on the wire down too so I am opting to skip the custom font and header image. It's quite nice to have 10-15kb pages in the age of the web obesity crises[4]. A header image and a custom font does have a big effect on how personal the content ends up though.
Congratulations on not using any Javascript on the front page, except for what looks like the same email-obfuscating JS that Cloudflare injected on my site until I disabled that. In my mind, external JS is one of the worst things you can do to a website, and even self-hosted JS is bad if it's affecting layout/behavior much: people without JS enabled get a crap experience.
Yeah, I can see how a lot of people would want the email obfuscation but I don't--especially as I was polishing off a blog post about how ideologically pure my website is, with no javascript or external resources!
I got rid of GA because Cloudflare provides some analytics and that's enough for me.
I particularly like the simple links at the top, but found the list of articles confusing - it took a while for me to realise that the articles weren't just one paragraph filler texts.
Thanks and you are absolutely right about the list links not feeling very clickable. I'll add some hover effect to make it more clear. Thanks for the feedback.
I've been working on a related project — Typography.js that vastly simplifies web design. It ships with 30 pre-built designs and I'm working on tools to make it really simple to create custom typography themes in-browser.
CSS is a very low-level language for expressing design intent. It's great if you want to set the background color but if you say: "I'd like to add white space to my typography" — it could take dozens of recalculations + css changes to test your idea.
Typography.js's goal is to create the most elegant/powerful API possible for defining your site's typography and remove a lot of the tedium/difficulty around experimenting with your design.
Thanks! Just a note, the design tools on the website are only 1/2 baked. Still need to add support for manipulating remaining options + way to export your designs.
That being said, the core engine is quite solid and the themes are ready to be used.
> Black text on a white background can be harsh on the eyes. Opting for a softer shade of black for body text makes the page more comfortable to read.
No, it doesn't. The low contrast text is definitely harder to read in direct comparison with black. This is the point where I suspected that the page might be a parody of modern web design. Unfortunately it seems to be serious.
The syntax highlighting is similarly awful and the grey background makes it even worse.
Yeah I found this assertion pretty troubling too. The "black" on most displays is already "soft" since even black pixels are leaking light. I've never read a page in a book and thought "you know, this ink is too black, it's straining my eyes".
I've never thought the ink in a book was too black, but once in a while, I do think the paper is too white. Usually actual paper is a lot more friendly than #FFFFFF, though.
It's not as simple as that. For one thing, there is a wide range of different screens used to display text, and each screen may exaggerate or reduce contrast to a different degree. It's also important to remember that very high contrast such as pure black on pure white can cause serious problems for dyslexic readers.
Please, do not specify "Arial" or "Helvetica" in your font-family... just use "sans-serif" by itself... Just use sans-serif as your main fallback font after specific web-font. This will use the browser default (often Arial in windows, Helvetica on OSX) which is usually the best looking Helvetica-like font, or the user's preference.
Yes, sometimes it's a different font, but usually a better looking default. Helvetica looks hideous on windows, which is why it's often "Helvetica Neue", Arial, sans-serif... that said, just use sans-serif unless you want a specific font (with webfont option).
>Gah... Do NOT specify "Arial" or "Helvetica" in your font-family... just use "sans-serif" by itself... In windows this will be an Arial font, and in OSX "Helvetica" and on other platforms the closest default alternative
You aren't wrong - but this isn't exactly true. It will be the browser default font which the user can change themselves [0]. Which is even better! For the small group that don't force their font choices by default yet change their default font settings, it is better to use serif/sans-serif instead of specifying a font family to respect the user's choices.
I force my font choices to be used everywhere, so any CSS that specifies a font-family is just mild bloat on the CSS file in the end. I understand people like to take into consideration the font choices for their design, but it really should be in the user's hands without having to jump through hoops.
My litmus test for web design typography is mixing fonts. For coding-related things especially mixing fixed-width with normal fonts. This page clearly fails [0]. Not even the baseline aligns due to 2px bottom padding. Usually only the x-height mismatches, which means "<code>x</code>" (fixed-width) does not have same height as "x" in normal font (serif or sans-serif).
Here is a good example from my website [1]. Note how "use" and "mu" have the same height. It is not perfect, but matching cap height as well is maybe impossible without buying fonts.
This is when you design in the browser with the medium in mind.
Problem is when someone gives you a PSD made by someone who badly ripped off someone else website with no idea about what the box model actually is, asking you to make a 1:1 replica in the browser.
> Long lines of text can be hard to parse, and thus hard to read. Setting a limit of characters per line greatly enhances the readability and appeal of a wall of text.
I agree with this 100%.
What I don't understand is why many developers argue that this principle does not apply to code and that we shouldn't have line length limits "because it's not 1970 and we have large monitors." If long lines of prose is difficult to parse, then long lines of code are even more cumbersome to parse, especially when you are either 1) slowed down by having to scroll horizontally all the time or 2) distracted by the awkward naive line wrapping done by the editor.
Interestingly, I can't reach the site because our corporate security software (Sophos) categorizes this site as "Weapons." I suppose, in a sense, good design can be a secret weapon... :/
Love it. One typo I noticed in the image section, "Graphics and icons can be used either as ornaments to support your content, or take actively part in the message you want to convey".
I've wondered this for a while: does actually ever actually use those share buttons at the end? I don't think I've ever seen anyone using em.
The way I see it... You can just share the URL. And if you're the type of person that frequently shares content, presumably you'd use a browser plugin of some sort, just so you can get a consistent experience across sites.
I literally just used one of the share buttons, and I frequently use them on news sites, blogs, etc. But I might be in the minority. It never even occurred to me to use such a plugin, but that's a good idea!
From a single user's perspective its very easy to see how no one would use them. But yes, plenty of people do. Go to a random buzzfeed article and you'd be amazed at the numbers.
I think there's no harm in adding them, some people may use them even if they are just a reminder to share. I think they should be kept fairly simple though, no JS etc.
I'd agree - except for the tracking behaviors that come with the most common solutions - copy paste a line of js, or enable a plugin that has the same js, etc.
Simple self hosted share links that were just links would be reasonable, but it seems not many take that route.
I've been trying to find some opinions on the "first rule", i.e. "Centering".
Phones and tablets are already a book-like viewport. Desktop browsers are a different matter, for these presumed reasons:
- most monitors in 2016 have lots of pixels along the X axis
- most browsers are maximised or run in full-screen mode
Joe Designer also has lots of pixels and/or a maximised browser, hence squashes content into a column.
Some do it wrong, which means some websites end up looking like a thin column of text on your cinema display.
What I'm getting at is this: I run my desktop browsers already in a book-like viewport (using Spectacle.app on Mac and XMonad on Arch Linux, or a simple resize-with-trackpad when I don't) so I'm a few keystrokes away from having to parse long lines of text. I don't really like it when website authors choose my viewport width on my behalf.
Choosing your own typefaces and colours - fine. Layout? Not so much. What do others think?
Beautiful. Personally, I would've probably stopped at the "Custom font" step (I don't really like header images and the share buttons) to keep it simple, but hey that's just me.
For a web noob like me, I thought this was pretty awesome. I'm trying to build myself a website now, in 2016, when the last time I legitimately did it was 1999. This actually helped quite a bit with the way I think about it. Sure I'm using a Bootstrap template, but this made me think about why things are the way they are by default, and why I might want to consider some changes.
While clever, there's a few problems with the navigation on this site.
1. The back button doesn't undo the changes. Abstractly, clicking on a link performs some navigation which the back button is supposed to reverse. That doesn't work here.
I have created a static site generator "minni" that powers my blog at - http://jyotiska.github.io/blog/. It is super simple, has less than 10 CSS declarations and no JavaScript. I don't really expect anyone else to use it since it was created according to my own design preferences. Here is the link in case any one wants to take a peek - https://github.com/jyotiska/minni
I made my own due to some very unusual choices. For example, publishing a post is done by adding a line to a collection file. Posts not in there are considered drafts.
MFW and BMFW did this better. Why? because most of the stuff this added over BMFW is actively user hostile. Besides, I just want my freaking content to look good, with minimal page load.
Don't add any unecessary weight. If your content (not SPA, not "web 2.0," CONTENT, the stuff that actually makes up most of the web) takes longer to load than HN, you're doing it wrong. Thankfully, this site seems to understand that.
As for colors, just leave them the user's default, set black on white, or use Solarized or another high-contrast theme.
Wonderful! For a moment at the start though, I wondered how such a poorly designed page, could teach anything about web design. Then I clicked the first link... :)
>Providing space [...] around [...] your content can increase the appeal of your page.
Just like black bars when the aspect ratio of a movie doesn't match that of my monitor increase the appeal of said movie.
I find margins on mobile pages a complete waste of horizontal space. My device screen is only 6cm wide and already surrounded by plenty of space in my field of vision. Why make it even narrower?
Impressive work to say the least. Can't wait for the etcd integration. Bravo for nice build instructions on you github page - if only more projects did that. Love the choice of SQL and JS, and the native HTTP interface. And, for a beta, the documentation and architecture information is solid as well. High quality work. Keep going! And THANK YOU for releasing this to the world.
"Times" font isn't "unstyled", it's styled to a newspaper, which I've found o be easy to read in a newspaper and hard to read on a website, I don't know why, but it has nothing to do with one being "styled" and another not; in fact, serif is more "styled" because of the serifs.
I think Times New Roman, if you just fix the line height and page width, can be beautiful, legible, and familiar.
Random example: Frank Chimero's site renders with Times New Roman body text on my Mac, since I don't have Minion Pro or Calluna which are prioritized before Times in the stylesheet, and it looks lovely.
This is really well done, kudos! It actually feels a little like I'm learning by doing here as the design firms up in place as I proceed. Very cool idea!
First using grey blocks for code, while widespread, in my opinion is a visual interruption to reading flow. Indentation is preferable (and using the courier/monospaced font).
Second sans-serif. I understand the history - serifs are delicate and look clunky on <200 dpi screens. But as we move to widespread retina displays, isn't the old lesson of typography, namely that serifs help legibility and convey an image of "seriousness", about to make a comeback? Some will argue about the legibility point, but even from a styling standpoint, aren't we getting just a little bit tired of helvetica and its brethren everywhere?
However, if you run Chrome's Accessibility Audit (https://chrome.google.com/webstore/detail/accessibility-deve...) on this page, you get warnings about low contrast for 100+ elements and a link to https://github.com/GoogleChrome/accessibility-developer-tool....
So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility.
Try having someone with less than stellar eyesight look at this page. Or someone who's trying to read it on a smartphone outside in sunlight or with the brightness of their screen set at less than maximum. Design isn't about what looks nice, it's about what works well - pages that a portion of your audience cannot read don't work well.