New WordPress Mobile Site

by Amy Stevens AdamscloseAuthor: Amy Stevens Adams Name: Amy Stevens Adams
Email: amy@capecodbranding.com
Site: http://capecodbranding.com
About: http://www.amystevensadams.comSee Authors Posts (34)

In a week of exciting developments, this is no exception. CCBbuzz now has a mobile site! What does this mean for you? Well, if you use an iPhone (like J0hn & I do) or an iPod Touch then you can access our blog in ‘mobile’ format. Accessed easily by going to www.ccbbuzz.com on your iPhone, this gets you right to the important content on our blog and helps it load faster, all while still offering necessities like ‘search’ and the WP login. We are very pleased to offer this cool feature to our readers. This post will tell you why, & HOW we implemented the mobile site.

First, our ‘why’.  We had decided to take our blog in a slightly new direction starting June 1st, one that focuses more on bite-sized chunks of information. We thought about what is important to us and realized that quick, easy-to-read snippets of info that teach us something in less than 5 minutes is what we like to see/read. Therefore, we think our readers would like the same. This goes hand-in-hand with the new mobile site. Now you can access our blog while you’re [waiting in line, grabbing lunch, in a taxi/on the train, waiting for a client, etc]. It is streamlined and brief. Add to that our love of Apple products and we have a winner!

Now the ‘HOW’.  I’ve wanted to do a mobile site for a while, but had put it at the bottom of my to-do list, thinking it would be uber hard. Not so! By chance yesterday, I found a WordPress plugin, created by Dale Mugford & Duane Storey called WPtouch.  What an amazing find! 5 minutes later we had a CCB mobile site! If you’re a WordPress user it’s simple, download the plugin and you’re done.

On top of the basics, you can customize some features. In your WordPress Dashboard, if you go to Settings > WPtouch, you’ll find a page for customization. It is fairly self-explanatory. I spent about an hour playing around with the different options; changing something, looking at it on my iPhone, changing it again, etc. The main things I did were to match the CCB colors on the Header of the page (this is done by entering your hex codes in the “Style and Colors” section), and I uploaded a custom icon for our homepage (the CCB bee).

The most time consuming part for me was creating the icon. I did it in Fireworks. I started with the infamous rounded-square that all iPhone apps use. I made ours CCB blue and put our new bee image in the middle. Then to finish, I added the rounded reflection (the smile-line on the top 1/3 of the square). Once finished, I sized the image down to 60 x 60 and saved it as a .png. The reason to leave it as a png is so the background can be transparent and the rounded corners won’t sit against a square background. All in all, it took me about an hour to get the icon perfect.

From there, you can upload the image on the WPtouch settings page (Settings > WPtouch in the WP dashboard).  I had a bit of an issue at first. I attempted to save my image to my desktop and then upload it. This won’t work. Your image needs to be saved in wp-content/uploads/wptouch/custom-icons/. I didn’t have the folders “uploads/wptouch/custom-icons” in my WP folder, so I created them, saved my image there and uploaded the files using FTP (I use Dreamweaver). Once I had done that, I didn’t have any issue uploading the new icon on the WPtouch settings page. Once it was saved, I set my ‘default’ image to my newly uploaded icon. Now we have our cute bee as the icon instead of the default image.

I recommend a mobile site, specifically WPtouch to anyone with a WP blog who wants to add convenience for their readers.

Oh, and if you’re curious how to take a screenshot of your iPhone… it’s simple.

1. Go to the page you want and line it up the way you want

2. Hold down the ‘Home’ button (the round button under the screen)

3. While still holding down the ‘Home’ button, press the ‘Sleep/Off’ button (the long skinny button on the top of the phone)

This will capture a screenshot and save it in the Photo gallery on your phone. You can download them to your computer the next time you sync.

That’s it. Hopefully you learned lots of cool info in less than 5 minutes!

-Amy Stevens Adams of Cape Cod Branding

Filed under Amy's Articles, Business Developement, How-to, Personal Developement | Comments (3)