usable in any place a human can be used

20091206

you asked for it

[caption id="attachment_337" align="alignright" width="300" caption="who is this happy at work?"]who is this happy at work?[/caption]

I've been getting some feedback lately on the aesthetics of my blog, mostly its of the I-don't-like-light-text-on-a-dark-background variety. I got into a pseudo-argument about it here on Hacker News, then I realized I was being an idiot. People were telling me, I like your content, I want to read what you wrote, but because of the style choices you made it hurts to read and so I won't. So I thought long and hard about it and implemented a fix.


I wanted to first off let everyone know that this blogs theme started off as a great theme called zDark that I really enjoy. Over the last 2 months I have tweaked it and added somethings, removed others, and have gotten it to a place that I really like. Nothing is set in stone though, at the suggestion of Mark Essel I've bumped the text color from #bbbbbb to #dddddd. The point is that when someone complains about the theme, even though it's the exact wrong way for me to react, my first thought is "No one talks about my baby like that, nuh uh, no you didn't!"


After the initial offense wore off, I realized that people just don't want their eyes to hurt after reading my post, and I can understand that. That's when I resolved myself to fixing this issue, and I went looking for a solution, but not just any solution would do.


First off, I didn't want to change the default theme of the website, I really like it, and dark-on-light text hurts my eyes. Second, I wanted it to be something that stayed changed, without having to give people user accounts. Third, I wanted something that was unobtrusive yet obvious.


I fired up google and found Integrating Alternative Stylesheets in WordPress Themes it seemed like a great method for providing such functionality. It drops a cookie on the user's machine to remember the preference later, which is an appropriate use for cookies. So far this had hit points 1 and 2 of my wish list, now I just needed an unobtrusive, yet obvious user interface.


I hopped over to IconFinder (which in general is just a great resource) and started searching for some text icons. After a while I found a great dark-on-light icon and a few seconds in Paint .Net with the inverse color tool gave me a great light-on-dark icon.


Then I had to find a place to put these icons and hook up the functionality. I decided to put them above the posts in the menu bar, as can be seen in the figure below


[caption id="attachment_335" align="alignnone" width="580" caption="new style switcher"]new style switcher[/caption]

I felt like that (without the arrows and bright pink circle) would fit the third requirement of being unobtrusive yet obvious.


The only problem left was getting the damn thing to work. After pulling down the javascript from Integrating Alternative Stylesheets in WordPress Themes, I couldn't get it to work, there were some parse errors in it. A quick trip to JSLint and a little bit of work later, I actually understood how the thing worked and had it up and running. Here is my non-minified styleswitcher.js that is currently powering this functionality.


This is how I should respond to complaints, not by arguing, but by addressing the concern and coming up with a solution that makes all parties happy. The functionality is live and you can try it out right now. The dark-on-light theme is definitely a work-in-progress. I am working on some stuff for it and hope to have it somewhere nice soon. I'm thinking of doing a nature inspired theme for it, that still captures the same layout and feel as the current theme's techno-neon roots. Looking back at that sentence makes me realize the insanity of what I'm trying to do, so it may take a while. Please bear with me as I try to make the dark-on-light theme as nice as the light-on-dark. For now though, if the light-on-dark hurts your eyes, this new functionality should at least make the content readable to you.


To sum up.



  • Lesson learned, user feedback is a good thing, you shouldn't argue with it, incorporate it.

  • The new dark-on-light theme is up and running, although its kind of ugly

  • I will be releasing a more beautiful and integrated dark-on-light theme soon enough, I thank you for your patience

6 comments:

  1. Thanks, I wish my blog looked half as good as yours Matt. I can't resist information overload. Minimalism re-education required ;).

    I have wptouch to handle mobile themes, works awesome.

    Last humble request, disqus. I dig the fact that it brings in reactions from HackerNews.

    That's all for now, cold wind and iPhone typing are bad for my fingers. Be well.

    ReplyDelete
  2. I just started using the dark-on-light and it's much more pleasant when reading this blog amongst other pages. Thanks!

    ReplyDelete
  3. @Mark that is next on the todo list, thanks for the suggestion

    ReplyDelete
  4. I think you should make the links darker in the light theme, it's a bit hard to read them. :)

    ReplyDelete
  5. What do you do about the next 20 feature requests? ;-)

    ReplyDelete
  6. I'm gonna go out on a limb and say he implements the best of them Jeff. Matt's a machine!

    ReplyDelete