Check Out This Mobile Version of My Site (and links to how I learned how to do it)
July 10, 2013 self-promotionA while back I mentioned how mobile sites are your digital calling card. I believe this even more strongly now; I've run into a number of people who only access the internet via a tablet or phone... and have no plans to change that.
|Original Mobile Design|
First, I installed a switcher button, which was nice enough, but just more clutter.
I ran across this wonderful guide for creating a "menu" button using only CSS. (For those wondering why this is important, simple == faster == better on the web.)
The short explanation of what it's supposed to do: You have one stylesheet which first defines your mobile site, and only then defines all the fancy stuff. Benefits besides speed? It will change formats on the fly if someone shrinks their window. It will work with plain text browsers - so it's going to be text-to-speech accessible. Oh, and the design is optimal for all you SEO junkies, because it puts the menu at the bottom and uses CSS to move it up later on. (Schweet.)
Again, that link is here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/
Let me tell you, retconning existing code was a bit of a bear. I'm sure there's duplicated CSS and the like in there... but it seems to be working pretty well. I'm sure it would have been easier if I started from scratch.
Here's what I'm asking of you: Help me debug this thing.
I think I've got it right, and I'll show you screengrabs for the full and mobile version. Swing by alliterationink.com and alliterationink.com/store.html and let me know if they look (pretty much) like this for you as well.
EDIT: The design for the blog is hosted by Google. I'm referring to http://alliterationink.com