Is it not a little ironic that this is a medium site?
Also, stop with the flat and “clean” design. If there’s something your users are supposed to click on, make it look like something you can click on. Make links that look like links, buttons that look like buttons, etc. Even lobsters fails at this, there’s a menu at the top of the page but it doesn’t look anything like a menu, it’s just a horizontal line of gray words.
Um… those gray words are all just links to other pages. No hamburger menus on Lobsters!
Also, the names of the words make a user think they might be menu options. Then, the user hovers over them to see the link icon appear. There is an investigate step there vs links that are obviously links which is a usability loss. I don’t the loss is significant, though, given nature of our community. We’re technologists and explorers. Heck, the whole point of the site was coming to look for good links. :)
Still, a feedback as simple as “reduce opacity or add an underline on hover” would go a long way in showing the user there’s an interaction “here”.
Submit a pull request? https://github.com/lobsters/lobsters
Didn’t know that was an option (well, I never looked into that anywyas).
I’ll keep it under hand for when I find time to do so, thanks.
If it changes state on the server, make it a button. Otherwise make it a link.
It’s a logic I’m starting to follow more and more (while it’d already be noticed on my blog and such, as I pretty much only have a basic CSS) this logic.
In fact, I’m working on re-building my CV from scratch with pretty much 2 CSS instructions (for background and foreground colours), and I’ve never found an easier-to-maintain CV.
For castling.club, I tried to not even set colors. I wonder how that works, in practice, for browsers that apply a theme? All it has is a translucent blue background for links, which I was hoping would work for both light and dark themes.
In practice, the page is just black text on white for macOS. Maybe the dark style in 10.12 will affect it? I remember Epiphany on Linux followed the GTK theme back in that day, which actually broke a lot of sites that only set one of text or background color.
A problem I found with not setting colours anywhere was the contrast. Just reducing the contrast by putting a text colour of #222 and a background colour of #ddd can help quite a bit with reading.
I don’t know how one can handle “system theme support” or disable it in CSS though, if that’s even possible.
I had to build a web app a few months ago and instead of using images for icons, I just used emoji. They provide a nice level of visual punch and take just 1 unicode character of space :)