The post iPhone look-alike on your kitchen wall on Hackaday inspired me to create a slide-out Social Locator for my site. If the iPhone interface is intuitive and recognizable enough to be used for a kitchen computer then it is probably a good model for anything. The “social widgets” on my home page are cool (to me) but if all a visitor to my site wants to do is find the link to my Facebook page there is way too much stuff to wade through. I wanted a quick and easy way to provide links to my online locations without cluttering up the page. I decided to use the “slide out” model and I realized an iPhone style interface would be perfect for it. Below are some screenshots of the closed and open state, but you can see the widget in action on my home page (or any page on my site) by clicking the “Shortcut” tab on the left hand side of the page.
I don’t know – I just pulled the name out of thin air on the fly. It sounded like a good term for what I’m trying to do – provide a widget with links to my online places. Why the iPhone-like interface? Because most people get it. The little icons and text provide a hint and brief description of what the links are and you click on one to go to that place. I can’t think of an easier interface to use than that.
My 18-year old son, who is pretty tough to impress, said “That’s the coolest thing I’ve ever seen!” I don’t know if I’d go that far, but I don’t mind that for once he thinks that I have some amount of coolness. I don’t necessarily need to provide a tool for “everyone” who is looking for me online – my Mom, wife and kids know where to find me just fine. But I thought it was cool enough to share and someone might find it useful on their own site.
If you’ve read any of my last few posts you know where I’m going with this – jQuery! I went looking for a slide out plugin for jQuery and found the tabSlideOut jQuery plugin. It was everything that I needed and nothing more. Now that I had the base functionality I needed some iPhone styled icons. I was afraid I was going to spend a few hours in Photoshop but another search brought me to the iPhone-like icon maker. This is a very slick online tool and was perfect for the job at hand. The instructions say to provide a 512x512 image, but I found that even 16x16 favicon’s (converted to png with the help of the “hidden” Google favicon to PNG converter) were good enough for creating the 50ishx50ish sized icons that I needed.
Leave a comment and let me know what you think of my new “Social Locator”. If you’d like, use these instructions to create one for yourself. Give me a shout if you have any questions.