An Uninteresting Update About This Blog’s Design

Ever since entering the smartphone world recently I’ve been more aware of how this site looks on mobile viewports. On the whole it transfers well; I use my own child theme, based on WordPress’ Twenty Eleven theme with only a few CSS adjustments and stuff like custom PHP functions for the ads.

The thing that really bugged me was the search bar, which seemed to be just plonked up in the header arbitrarily. It stuck out more on mobile devices. So I decided to put it in the footer, where I keep all the sidebar type of things, and I added a link to it from my main menu.

The new problem was that it was an anchor tag, which is really disorienting native functionality and in this case creates another click (it seems petty but it will get noticed…design minutia is the heart and soul of UI/UX). So I solved it by using jQuery’s fun scroll function and set the focus on the search field. So now it operates as click-type and not click-click-type. I also used this scroll for the “Contact” first tier link and the “More>>” sub-link.

Additionally I added a nice “Scroll To Top” button that appears when you…scroll down from the top. It zips the user to (surprise!) the top. It works fine in every browser but it’s wonky on my Android (Gingerbread) phone. So there’s something else to think about.

To do list:
01 Make better header – doesn’t look fun on mobile
02 Dewonkified version of scroll to top function for mobile
03 Fix width of Google ads? It causes horizontal scrolling on mobile. Seems to come “as is” from Google so I don’t know if I can really customize.