I was designing OrangeJuice and wanted to spice it a little with some mouseover effects. Everything was going smooth and easy and I was thrilled about the results. For a moment I even forgot about ranting against IE6; oh, what a glorious moment of aesthetic contempt, what a contemplation of ideas in act. And then, after a few hours, what a deception, how my wings got broken, causing me to fall like a damned angel. Well, let me tell you about it.
About my design habits
When designing, I use two rather good machines, a desktop computer with lots of RAM and a powerful CPU, and a notebook, which is weaker but in pretty good condition. When the theme is finished, I test it online, using an older notebook, with a single core CPU, 512 MB RAM and no monitor calibration. I like to see my themes just like the average user does. And so I did the other day.
Mmmmm My browser’s got a secret
I uploaded the theme, enabled it and clicked compulsively the link to the blog’s homepage. The theme was there, safe and sound. It needed a few padding and margin fixes, but the overall result was satisfactory. While fixing the positioning, I realized that the page events (scrolling, mouseovering) took a very long time to happen.
First, I was puzzled; then I got a very unpleasant feeling: I wasn’t only frustrated (which was normal), but also irritated; and the irritation was about the blog.
Firefox vs IE6: it’s a tie
I managed to cool down and began trying to save the day. I removed the link to the javascript enabling the threaded comments and I double-checked the code, but the situation wouldn’t change.
The oddest thing was that everything seemed to be normal in IE6: the theme was loading fast, the scrolling was easy, the mouseovering smooth and instantaneous. The problem was therefore in the things that IE6 can’t do.
CPU loading: the sky is the limit
Actually, the theme’s CSS contains a few declarations unsupported by IE6 (some generated content before the post title and the list items). I removed anything that IE6 couldn’t do, but the mouseovering in FF was still very slow. I dropped my eyes on the task manager icon and I so green. Every time I was mouseovering a link, the CPU load was climbing up to 100%; and it would have climbed even higher, but, as I already told you, it was an old notebook.
The secret revealed
The issue, as you can imagine, was the style of the :hover pseudo-class. It wasn’t something spectacular, just a small 10px padding and a border-bottom instead of the ugly text-decoration:underline, but it was causing FF to recalculate everything on page, over and over again. This was the case even when I removed the :hover padding and left only the border-bottom, which was 1px wide. By the way, Firefox has the same problem with the background images, the scrolling becomes a nightmare and the reading a pain.
Final remarks
I can say I learned my lesson. Next time I design a WordPress theme, which would be tomorrow, I’ll stay away of all these fancy effects mimicking the js.
Secondly, I began to cherish that ole notebook. It became my connection to the real world, reminding me that I make themes for people having all sorts of computers. (God, I wish that every design agency had a crappy computer somewhere in a dusty office, just to test on their websites once in a while.)
Finally, the technical conclusion: some :hover CSS declarations are safe (e.g. background-color, text-decoration), while others, namely those altering the element’s position, might turn a visit into a really unpleasant surprise.
That’s all, see you next time.
I love it so much that I am planing to use it. Just couple of questions:
1. How do I change fonts?
2. How go I expose the comment section on the bottom of the page like you have it here?
3. Is there any Admin to Orange Juice in WordPress?
Hi, Benam, sorry for the long delay. I’m very glad you liked it and hope I’ll be able to respond your questions.
If nothing unexpected occurs, the next version should be available in about a month.
1. In order to change the fonts, you’ll need to edit the style.css file. The fonts used in the released version are Georgia and Palatino Linotype; so all you have to do is “search and replace”.
2. I’m not sure I understand what you’re asking. The two themes have the same structure when it comes to comments; the only difference is that this one uses the old comment loop, prior to version 2.7.
3. No, for the moment there’s no Admin. I plan to add an “options page” in the next version I’ll be releasing; the thing is I couldn’t figure what people actually want on such a page, so I decided to wait for some feedback
I have the f* save issue, thanks man.
Man, I found one.
If you turn off “smooth scroll” ,it wouldn’t be this problem.