I fixed/changed a couple of things on here today. One I hadn’t noticed and one had been bugging me for a while. I have a much bigger list as I want to overhaul the code and make some design changes, but until I do my big re-launch, little things will suffice! Plus doing stuff to your own site is a good way to learn.

Small Screen Menus

The thing that had been bothering me was  the menu on small screens. Brad Frost has a great write up of all the different ways you can handle responsive menus here, and as I am no developer I went for the simple one with a small twist.

On smaller devices, the menu now reduces to a “menu” button, which is anchored to a repeat of the menu in the footer. I would have loved to have kept it as one menu, and not had the code repeat, but like I say the code needs an overhaul now I’m more up on my responsive!

The twist was that Brad’s comment about it being “jarring” got me thinking. I’ve never been into effects which make things take longer, but I did buy into the ideas in this great post about giving the user a clue about what’s going on.

I found this smooth scrolling script (requires jQuery…) and implemented that. It’s far less jarring this way, and if the script doesn’t load, you can still access the menu. Bonus points!

WordPress chucked in a weird one that I can’t figure out. I am a bit annoyed at having to leave it this way, but I’m hoping it won’t be for too long (haha, cobbler’s shoes anyone?) Basically, the repeat of the menu, for no obvious reason other than maybe there’s a WP bug, sometimes highlights the wrong page as active. It’s the same menu, the only thing that is different is that it appears after the content. No amount of poking seemed to do anything, so I’m going to sleep on it.

Holy Giant PNG Batman

The second thing was the background image on the homepage – it is a splatter of paint. Now, when I launched this site, it was in a rush, and then I was too busy to look at it again. Yay for busy, boo for the site. For some reason I cannot fathom, I used a transparent PNG. A giant, transparent PNG. It’s quite a big paint splatter, and unbeknownst to me weighed in at 1262.2K!

Luckily it didn’t show on small screened devices, but that’s only a small comfort. I randomly ran a YSlow test whilst staring at the site, to see how much damage adding jQuery for (initially) the small thing of smooth-scroll would do to the page weight. Well, I was shocked. And then I made a JPG and all is sort of well with the world. The new image is 68.1K. Guys, transparent PNGs were not meant to be giant!

Lesson learned. Hopefully I will get the menu figured out in my sleep, often happens.