Philoking.com

When completing the design work for my the website for my new band All With Time, I noticed the WordPress theme I had chosen to base my site design from (FoxHound’s Wonderful Dark n’ Gritty) had an interesting visual bug on iPads.

The iPad, being the “best way to browse the web” *sarcasm* decides it is smarter than your site’s design and resizes background images that are larger than 1024px to fit.

The result is that all of your site content is scaled to be viewed in the viewport, and the background is not:

Well, your old buddy Philoking loves you and wants to save you the time I spent searching for and understanding the solution!

There are two variations of logic here, and I went the cheaper route.

Webkit Background Size

Webkit has a handy CSS override that you can place right your existing tag, div and ID style declarations to tell the iPad not to resize your image. In FoxHound’s theme this is declared in grey.css (or blue.css, red.ss or green.css if you have changed the theme color setting) and it’s simple to override:

body { 

    background: #000 url(images/background.jpg) center top no-repeat; 

    -webkit-background-size: 2000px 1175px; 

} 

#wrapper { 

    background: #000000 url(images/background.jpg) center top no-repeat; 

    -webkit-background-size: 2000px 1175px; 

}

I chose this fix because it was exceedingly simple to implement and was fast to test.

Alternate iPad CSS and Images

The second approach, and probably the right approach, is a bit more time consuming. It involves the following:

• Create alternate style sheets for different devices/orientations
• Create new artwork that is scaled and/or cropped to fid that devices
• Test Test Test…

The Result

That seemed like a bit more effort than I was willing to go for at the moment, so I chose option 1.

The result is obviously great. While we are on the topic of WordPress and themes, I’d like to add that outfits like FoxHound provide some really great themes at a great value. While our nature lends us to go for the freebie themes or even worse take premium themes without paying for them, I’d like to add my perspective.

I think I paid $70 for this theme when I bought it. I’ve now used it for two sites that both look completely unique simply by creating custom graphics. With a solid foundation to build your site from, you can create something compelling very quickly. I have about five hours of time in developing this entire site.

Hope this helps!

This is a little something I found on accident recently. For 80% vanity and 20% link longevity, I decided I set up my own URL shortener for Philoking.com at pking.me. There is a nice free URL shortener called YOURLS that runs on PHP/MySQL (basically the same setup that will run WordPress.)

Setting this tool up is very simple, only a bit more technical than setting up WordPress itself and once you are in business, you can set up other tools to use it.

This weekend I set everything up and was excited to see cute little pking.me links running around. That, as it turns out, was only a small part of the fun.

I use Tweetdeck to follow Twitter and decided to look into making my own shortener the default for Tweetdeck. It was very simple to do, and once I had, I saw something very interesting.

I had just posted this tweet and then checked my YOURLS admin page to see there had already been 25 clicks on my shortened URL, that’s feedback you can’t get from Google Analytics, at least not right away. It’s pretty interesting to be able to see.

With a little bit of creative querying, you should be able to tell what times your most viewed tweets are, and what URLS or tags draw the most attention. Talk about adding some fuel to your Tweeting intelligently. Nice!

We talk about a lot of blog topics around here. How to write great posts, how to write compelling titles and how to deal with Search Engine Optimization issues. There is one thing that is often overlooked, old blog posts.

Search engines never forget. If your blog post already has a good bit of traction you could stay highly ranked for a topic for ages. Take a look at my traffic example:

Top Blog Posts 10/19/2009 – 10/26/2009

• 2/19/08 Holy World of Warcraft Batman, 64-bit WoW 596 views
• 1/11/09 Is Windows 7’s Aero Peek a copy of Apple’s Expose 519 views
• 6/25/07 TVersity, PS3 Perfect Streaming Media Player 427 views
• 1/28/07 World of Warcraft, Poor Frame Rates on Vista 294 views
• 5/18/09 How to make a bootable Windows 7 Install Flash Drive 202 views

That is pretty interesting. For the last week, 3 out of the 5 most popular posts on my blogs were written before 2009, a year that is nearly over. Several are a few years old and still getting hundreds of page views a week.

What Does This Mean?

It actually means a few things. Without pandering, these are probably topics you should be writing about more, and linking to through updates to these posts. They obviously have the “Google Juice” so to speak, so why not take advantage of it.

Second is the less obvious, update these posts! Information changes, blogs are live and dynamic, do not write and forget. These posts have the potential to hurt your blog if you do not keep them current. Google and Bing are telling these people that you are an authority on this subject. Several years is a very long time to let technology information sit still. If the user reads your posts and finds the information to be irrelevant or even worse inaccurate, that hurts your reputation.

Use Them or Lose Them

Obviously my first advice is to update these posts and get the maximum value out of them. The last advice is that if you can’t or don’t want to, get rid of them. Make sure you have a compelling 404 page, preferably one that searches your blog for articles related to the query term, and try to convert that user to a reader.

As a blogger, your credibility is the only thing you have. Bad articles and inaccurate information will turn that 30 second page view away. Good information and quality content will turn that same fly by into a subscriber. Don’t let these old posts kill you. Use Google Analytics, keep track of which old posts are being regularly visited, visit them yourself, and make sure they still stand up several years later.

Ok, maybe that doesn’t make a whole lot of sense, but work with me here. In the software development world, a lot of times we talk about who our customers are. Not what kind of pancakes they like, or what they think about rainbows, but what set of characteristics makes them a unique user type.

With almost any software, there are multiple ways it can be used. To help us decide how well a feature fits in a particular product, many times we will develop a persona of who our target user is and how we think they might use our product.

What Exactly Is a Persona?

The almighty Wikipedia says:

Personas are fictitious characters created to represent the different user types within a targeted demographic that might use a site or product. Personas are useful in considering the goals, desires and limitations of the users in order to help to guide decisions about a product, such as features, interactions, and visual design.

We deal with personas in my work life all the time, but as I deal with many amateur developers and web designers, I thought it might be valuable to share this technique and maybe get some feedback from readers that have their own unique perspective.

How Do You Build One

The obvious answer is first get to know your customers or users. Who are these people and what do they want and need to do? Watch people use your product. Learn the tendencies and habits of these people. A good place to start would be by reading The Inmates are Running the Asylum by Alan Cooper. This book will explain the great detail of some of the ideas I will share next.

The basic concept is this, you imagine. Of course you can back your imagination up with statistics, usability studies and all manner of scientific data, but they key to creating them and using them is imagination. You have to be able to imagine using your product through they eyes of someone else. Someone that might have more limited knowledge or capabilities. Sometimes you might have to imagine someone with much more capability. (for example designing an SDK) The key is being able to suspend what you know, or what you think you know, and imagine your products and ideas through the eyes of who will potentially buy, use and hopefully love your software.

The Benefit

In our work place, the obvious benefit is it allows everyone on the team to know who we are talking about as a user when we say “Bob would definitely want to do this.” We speak of personas as people all of the time where I work. We have all studied and understood who the character is, so we are able to communicate with each other as if the person was a real user. The benefit is that the fake person IS a real person, or better yet in our case, millions of real persons.

Personas are particularly useful at diffusing disagreements about product designs. When you have a group of intelligent, strong willed people, who all believe passionately about what they are working on, sometimes passion overrides logic. Even when someone is very loyal to their particular design idea, it’s easy to explain the negatives through the use of a persona, hopefully without offending the person in the process.

More Practice (Scenarios)

Once you have established strong personas, the next step is to write compelling user scenarios through the eyes of your personas, but that’s a blog for another day.

More Reading:

Persona Development

Scenario Development

Alex King’s Twitter Tools Plugin is a must if you are a WordPress Blogger and Twitter user. It’s most compelling feature is that it can automatically post a Tweet when you post a new blog post. This also works for time delayed posts, it Tweets when the post is published. One of the things I didn’t like about it was that it prefixed every blog post with “New Blog Post: “ which is a sure fire way to make sure more than half your followers don’t click it.

The thing is, you have already said what you want to say in your title hopefully, so how about we just Tweet the title and a link? Changing this code comes with one dire warning, you have to keep something in the prefix, that’s how the plugin finds Tweets to create the digest post, so instead of “New Blog Post: “, I am going to change mine to just “BP “.

Editing The Code

There is one class in the source code that defines the settings you can’t change in the UI, that class is called “twitter_tools.” Lines 18-27 define UI items, and 29-36 are supposed to not be end user editable, but we aren’t going to let that stop us.

   1:  class twitter_tools {

   2:      function twitter_tools() {

   3:          $this->options = array(

   4:              'twitter_username'

   5:              , 'twitter_password'

   6:              , 'create_blog_posts'

   7:              , 'create_digest'

   8:              , 'digest_title'

   9:              , 'blog_post_category'

  10:              , 'notify_twitter'

  11:              , 'sidebar_tweet_count'

  12:              , 'tweet_from_sidebar'

  13:              , 'give_tt_credit'

  14:              , 'last_tweet_download'

  15:              , 'doing_tweet_download'

  16:              , 'doing_digest_post'

  17:          );

  18:          $this->twitter_username = '';

  19:          $this->twitter_password = '';

  20:          $this->create_blog_posts = '0';

  21:          $this->create_digest = '0';

  22:          $this->digest_title = __("Twitter Updates for %s", 'twitter-tools');

  23:          $this->blog_post_category = '1';

  24:          $this->notify_twitter = '0';

  25:          $this->sidebar_tweet_count = '3';

  26:          $this->tweet_from_sidebar = '1';

  27:          $this->give_tt_credit = '1';

  28:          // not included in options

  29:          $this->update_hash = '';

  30:          $this->tweet_prefix = 'New blog post';

  31:          $this->tweet_format = $this->tweet_prefix.': %s %s';

  32:          $this->last_digest_post = '';

  33:          $this->last_tweet_download = '';

  34:          $this->doing_tweet_download = '0';

  35:          $this->doing_digest_post = '0';

  36:          $this->version = '1.0';

  37:      }

Lines 30 and 31 are what we are concerned with. Line 30 defines the Tweet Prefix. On my blog I changed this to just ‘BP’ to shorten it and get me back some characters. Line 31 defines the format string for the post, I also wanted to get rid of the colon, so I changed it to read:

$this->tweet_format = $this->tweet_prefix.' %s %s';

That’s it, now when your blog publishes, it will post a Tweet that’s a bit more concise and looks more like you wrote it rather than an automation.