Archive for the 'Web Design' Category
New: A Mobile Version of 37Signals’ Highrise CRM
WhoBook MOBI is a version of Highrise optimized for mobile phones. If you haven’t heard of Highrise, 37Signals’ dead simple CRM web app, you should check it out. Basically it’s an online contacts database, with support for notes about contacts (“Left him a voicemail Tuesday”), tasks (“Follow up with John”), and cases (for organizing multiple people on a project). There are tons of uses for Highrise – it’s used by many small business to keep track of customer relationships, and even by one local pastor to keep track of interactions with his congregation. I used Highrise extensively in my job search – as I interviewed at multiple companies, in multiple rounds, all those faces started to blend together. I had amassed a huge stack of business cards with short handwritten notes on the back. I needed a way to organize it all.
Enter Highrise. I spent two hours one day typing all those contacts into Highrise. Now I can search by name, by company, or even by industry (I’ve tagged all my contacts with the industry they work in). Highrise also keeps track of every email I’ve ever exchanged with that contact, as well as any notes that I’ve added to help me remember who they are (“John loves the Giants” or “Steve has red hair and looks like Ron Howard”). In fact, my story and use case has been featured on the 37Signals Product Blog.
I became so dependent on having my Highrise contacts that I soon realized the biggest shortcoming of the application: no mobile version. Luckily, Highrise has a robust API, so I was able to program exactly the mobile version that I needed to get my Highrise contacts onto my cell phone.
The result is WhoBook MOBI. It’s built specifically for Blackberry and older mobile phones with WAP-based browsers, and provides read-only access to your Highrise contacts. Simply search for their name, and you’ll get back their contact information (with one-click dialing on the phone numbers) as well as any notes you’ve written about them. In addition to the mobile web interface, WhoBook MOBI also has SMS support – send a text to 41411 in the form “WHOBOOK john” and you’ll receive a text back with John’s phone number(s).
WhoBook MOBI is free, unlike some other websites out there that do similar things. I’m also pretty sure that it’s the only way to access your Highrise contacts via SMS that exists. If you find it useful or have any feature requests, I’d really appreciate any feedback at feedback@whobook.mobi or in the comments here.
UPDATE 4/11/2010: Since I wrote this post, 37Signals has released an iPhone app for Highrise. The official app works great for those with iPhones, but if you’re in the 90% of mobile phone users who don’t own an iPhone, there is still no official Highrise mobile app for you. That’s where WhoBook MOBI comes in – it’s entirely text-based and optimized for the basic WAP browsing available on old school Blackberries and “regular” mobile phones. I’ve just done a scrub of the codebase and added a few new features, so check out WhoBook MOBI if you’re not a member of the iPhone crowd and want to access your Highrise contacts on the go.
PHP: Remote Kill Switch – Make Sure You Get Paid
Web Developers: Have you ever gotten to the end of a project, and had a client withhold the last of your fee to exact additional changes or features that were not in the original plan? Perhaps a client that decided your work “wasn’t what we expected” and tried to withhold payment?
Well worry no more. Put the power back in your hands with a Remote Kill Switch. The idea is this: you build into their website a small function that checks with a server you control to make sure the client’s account is in good standing. If it is, the site loads as normal. If not, their site doesn’t load, and they get a message asking for payment.
We’ll accomplish this with a little PHP and a protocol called XML-RPC (remote procedure call). Your client’s server will transmit an XML encoded, unique string identifying itself to your server. Your server will check to see if that unique string is one you’ve specified as disabled. If there is a match, it responds with a XML encoded string telling the client’s server to disable the application.
Sound like something you’d want to implement? Here’s how it breaks down:
Part One: Your server. You’ll need a fairly reliable host, and a fast one at that. You don’t want to slow down the remote application load with requests to your server. However, the below code is set to continue loading the remote application even if it does not receive a response from your server, ensuring that downtime on your end does not cause downtime on their end.
Part Two: The code on your end. Also known as the RPC server. Create a new file and paste the following:
require('XMLRPC.inc.php');
function checkapp($the_app)
{
$deactivateMe = ""; // to disable a webapp, enter it's short code here
if (isset($the_app) && $the_app == $deactivateMe)
return true; // Application Disabled
else
return false; // All systems go
}
$server = new IXR_Server(array('activation.checkapp' => 'checkapp'));
You’ll also need to download XMLRPC.inc.php and upload it to your webserver in the same directory as the file you created above. You will need to change the file extension from .phpp to .php.
Part Three: The client code. Also known as the RPC client. Insert this code in your client’s site, preferably toward the beginning of execution:
require('XMLRPC.inc.php');
$appname = "UNIQUE_APP_SHORTCODE";
$client = new IXR_Client('http://path_to_file_created_earlier.php');
if (!$client->query('activation.checkapp', $appname)) {
if($client->getResponse() )
{
die("Application Disabled. Please pay your web developer.");
}
}
Again, download XMLRPC.inc.php and upload it to the server in the same directory as the file you created above. This library is required both by the client to make the request, and the server to respond to it.
That’s it! If the client ever doesn’t pay you, and you want to shutdown the site you developed for them, just set $deactivateMe in Step 1 to the “UNIQUE_APP_SHORTCODE” you entered in the code in Step 3.
You can see that the above setup allows you to protect multiple web apps at once, just remember what shortcodes you assigned at what sites! I recommend keeping them in comments at the top of your XML-RPC server PHP file. However, a limitation of my code is that you can only disable one remote site at a time. I’m sure my code could be expanded to use an array that would allow you to disable multiple sites at once.
I realize that this is significantly more technical than my typical fare (which I will return to next post), but I hope it’s helpful to some people, if only as a demonstration. Feel free to rip my code apart in the comments, I’m sure I’ve left something out.
Selling Ads on Your Site – Why ‘Forever’ is a Long Time
I was recently approached by someone that wanted to purchase advertising space on my blog. The offer looked something like this (numbers have been changed):
Offer price: $500
Pages ad would be placed on: 6
Duration of Agreement: Forever
Bloggers, let me ask you – does that sound like something I should agree to? On one hand, you might say it’s pretty good for a personal blog I write in my free time. However, once we break down the numbers, we’ll see that it’s not.
My reasoning hinges on understanding two financial concepts – opportunity cost and net present value of a perpetuity. I’ve linked those terms to explanatory articles – make sure to have a basic grasp on the two terms before we move forward.
While the $500 sounds pretty good, we can use net present value math to convert the one time payment of $500 in today’s dollars to its equivalent amount in yearly payments, every year, forever. Because we’re working the formula backward, I will use $500 as the net present value (what I would be paid today), and solve for the equivalent yearly payment amount. I will use 4% as the risk free rate, which is just slightly below the return on a US Treasury Bond.
Net Present Value = Yearly Payment Amount / Risk Free Rate of Return
NPV = P / R
$500 = P / 0.05
$500 * 0.05 = P
P = $25 per year
Because the original $500 was for advertisments on 6 pages, divide the final number by 6:
$25 / 6 = $4.17 per page per year
So it turns out that the $500 offer is really equivalent to only $4.17 per ad per year! And not only is that rate extremely low, I’m locked into it forever! It doesn’t seem like nearly as good a deal anymore does it?
Things start looking even worse when we consider the opportunity cost of taking the offer. If I agree to place new ads on my pages, they will replace the Google Adsense ads that exist there now. This means that I would forego the revenue I would normally receive from those ads. That lost revenue is my opportunity cost.
The Adsense banner ads at the bottom of each post don’t do particularly well, but, for estimation purposes, they return about $10/year. This is obviously higher on more popular posts and lower on less popular ones, but $10 is a good average. So, by accepting this new advertising offer, I will be earning $4.17 per page per year from the new ads. However, I will also be foregoing $10 per page per year from Adsense. This means that I will actually be losing $5.83 per page, per year, FOREVER if I accept the offer!
So it turns out what looked like a good deal from the beginning is actually not such a good deal after all. Bloggers – as you consider ways to monetize your blog, be very careful to weigh your alternatives and consider your opportunity costs. Also remember – forever is a long time to be locked into anything, especially a contract that could be costing you money!
Note: If you want to learn more about present value and the time value of money, checkout this powerpoint from the University of California, Santa Barbara.
Another Note: I’m not writing this blog for the money. Anything I take in goes first to cover hosting, and whatever is left over I loan out to budding entrepreneurs in the developing world using Kiva.org. It’s a way to give back to the entrepreneurial community that brings a lot of personal enjoyment for me. You should all check out Kiva, it’s very cool.
How To Get Rid of Snap! Link Previews Forever
I hate Snap! Previews. You know, those little bubble icons like this
that appear after every link on so many blogs (most notably TechCrunch). Their uselessness has been pointed out before by such big name blogs as Lorelle on WordPress and Performancing. Lorelle says “Personally, I consider these Snap Previews a blight on the web” and Performancing’s David Krug says that Snap Preview is ruining your blog.
Snap Previews take extra time to load, are not accessible, and are generally annoying when they popup under your cursor. So, here’s how you can disable them for good, across all the sites you visit:
- Find a website that uses Snap Previews. If you can’t think of one off the top of your head, use TechCrunch.
- After the page has loaded completely, trigger a snap preview by hovering over a link or Snap Preview icon. If all goes according to plan, this is the last Snap Preview you will ever see.
- Click the “Options & Disable” link in the top right of the preview (see screenshot, click for larger version)
- Click Bubble Disable for “ALL SITES” (see screenshot, click for larger version)
- Click “Close Options” and click off of the preview. You’ll never see another Snap Preview again!
February is Blogtipping Month
Inspired by Ben Yoskovitz mentioning Ready Fire Aim in his blogtipping post, I’ve decided to catch the bug and do one of my own. Blogtipping is a simple concept -
- Choose 3 blogs (I’ve chosen 4 though)
- Make a list of 3 things you like about each one
- Make one tip as to how each blog could be improved
Most of the blogs listed below are entrepreneurship focused, however, I’ve included a web design and technology related blog as well. Hopefully I’ve included one or two you haven’t heard of before…
Blog #1: OnStartups by Dharmesh Shah – Feed
- I love Dharmesh’s writing style, it’s very hands on and direct. I find it easy to immediately apply his tips in my day to day life.
- The “Pithy Insights” posts are brilliant. Often lists like these are generic, but Dharmesh’s are always unique and on point.
- Dharmesh writes regularly, and his post length is long enough to be thorough, but not so long that he drones on.
- Tip: Work a little on your design. The header is excellent looking, but once the reader gets down to the content of the blog, things are a little muddy. The tags and social bookmarking links are kind of jumbled, and it looks like you’re not exactly sure where they should go.
Blog #2: Bokardo by Joshua Porter – Feed
- I like the 3 column layout. Most of the time I think 3 columns is too much for a blog, but Josh’s flow together nicely, and contain relevant information.
- The “Colophon” box in the footer is an excellent touch. It makes me feel like Josh is not only instructing me in design with his content, but also wants to use the design of his blog as a teaching point, and exposing his color and font choices makes it easier for other designs to be inspired by his.
- Josh seems to make an effort to write to promote conversation. Almost all his posts either ask questions of his readers, or express his viewpoint, while leaving the topic open for discussion.
- (Bonus praise) Josh includes a RSS subscription link at the bottom of every post, prompting readers to subscribe if they liked his article. A good way to grab subscribers.
- Tip: I’m not sure I’m a fan of the excerpts on the front page. Some of them aren’t long enough to indicate the subject of the article. I’d suggest reducing the number of posts that appear on the frontpage, but including their full text.
Blog #3: WorkHappy by Carson McComas – Feed
- I love that Carson prominently displays a “submit” link where readers can submit content to his blog.
- The “Happy Quote” feature that is sprinkled throughout the content provides great quotes (I love quotes) amd breaks up the long blocks of text.
- Normally I skip over recommended reading sections, but Carson’s caught my eye. Most of his selections are extremely relevant, and I’m tempted to grab one or two on them from Amazon on his recommendation.
- Tip: I’d like it if your design was centered on the page. To me, it feels as though the whole site is sliding off the bottom-left of the page (especially at higher resolutions). Don’t change your design, just center the whole thing on the page, to distribute the whitespace evenly on either side.
Blog #4: The Entrepreneurial Mind by Jeff Cornwall – Feed
- It’s great to read about entrepreneurship from someone who’s made it his career to study and teach it. Jeff’s posts have an educational quality to them that is really unique, and I feel he’s writing to teach, not just to garner page impressions.
- I enjoy that Jeff occasionally strays from purely entrepreneurial content, sometimes writing on politics, economics, and world events. However, he always brings it back to how it affects the entrepreneur.
- I like the list of the 5 most recent posts at the very top of the homepage. It makes it easy to read the headlines and jump to a post I may have missed, without scrolling.
- Tip: So much great content, and unfortunately not a lot of feedback. Try to make an effort to encourage discussion in the comments section. Leave part of the issue open for debate, or ask a question of your audience. After all, what teacher doesn’t like a little participation!
That’s it for this time, I hope I’ve opened your eyes to some new voices, and been helpful to those blog authors highlighted above. See everyone next time.
Crucial WordPress Plugins
I’ve promised a post on all the plugins I use here on Ready Fire Aim, and that every blog should use to increase traffic and usability. I won’t focus as much on SEO in this post, however, some of these plugins will certainly help readers not only discover your blog, but encourage them to click around once they’ve arrived, increasing pageviews and ad impressions. Some others on the list exist only to make your job easier as a blogger. So here we go -
- Akismet
- Custom Admin Menu
- deli.cio.us cached++
- Firestats
- Feedburner Feed Replacement
- runPHP
- Similar Posts
- WordPress Reports
Yes it comes with newer versions of WordPress, but it’s still worth highlighting. Akismet will almost eliminate spam comments on your blog. It does this by checking all submitted comments against a common database shared by all Akismet users (read, almost every WordPress blog in existence), so it’s extremely accurate. TechCrunch has caught over 1,000,000 spam comments with Akismet. Enable it if you haven’t already.
This plugin allows you to organize your WordPress Administrator menus in any way you like. This becomes especially useful as you install lots of plugins, each with a separate configuration page.
Automatically grabs your latest tagged links from Deli.cio.us and displays them on your blog. Great for links that don’t deserve their own post, but are worth sharing with your readers. You can see it in action on the bottom right of my footer.
Simply the best statistics package for WordPress I’ve come across. Tracks all referring links, so you can see where your traffic is comings from. Also breaks down your visitors by operating system, browser, and country. Extremely useful, in a narcissistic way.
Another stat tracking plugin, this one ensures that all your feed subscribers go through FeedBurner. If you don’t use FeedBurner, it’s something you should look into. It gives you total control over your feed, the option to add some extras, and the ability to track how many feed subscribers you have.
A little more hardcore than some bloggers may need, this plugin allows you to run blocks of PHP code inside your posts. I use it to generate the direction listings in my Files section.
You can see this post in action in the sidebar of every post on this site. It compares the text of the post currently being displayed with all the other posts on your site, and displays links to those it deems most relevant. This is a good way to make your site “sticky”, so visitors will click around, instead of just reading one post and leaving.
Another statistics package, which compliments FireStats very nicely. Whereas Firestats gives a nice view of the past 24 hours, WordPress Reports integrates with Google Analytics and Feedburner to provide all kinds of useful stats for the past week and month, and shows you how they compare to the week or month before that. Lets you see which posts are “hot” and which are cooling off.
That’s pretty much everything I use here, I’ll probably post again on this topic in a few months, as I find more useful plugins. Until then, enjoy these, I hope they make blogging easier and more fun for you and your readers.
WordPress Plugins for SEO
Almost everyone has heard of Search Engine Optimization (SEO). What is it? Wikipedia defines SEO as “…a subset of search engine marketing that seeks to improve the number and quality of visitors to a web site from “natural” (“organic” or “algorithmic”) search results.” Put in plain english, SEO is anything you do to your website to maximize it’s visibilty in Google, Yahoo, MSN, and any other search engine spider that comes crawling your way.
So what are some things that you can do to move your site up in the rankings? If you use WordPress, as many blogs do, you can start by installing the following plugins to give yourself a leg-up on the competition. You can see them all in action on billda.com.
- Google Sitemap Generator
- Head META Generator
- Optimal Title
- Permalink Redirect
This plugin will automatically generate a Google Sitemap for all the pages in your WordPress database, and resubmit your sitemap to Google whenever you post something new. A sitemap tells Google where all the pages on your site are, and increases the chance that Google will fully index all your content.
Automatically inserts a meta description tag for your blog, inserting a dynamic description depending on the page being viewed. Search engines use this tag to link your site with search keywords, and to generate a short summary of what your site is about.
Replaces the default wp_title() function that generates titles in the form “Blog Name -> Post Name”. This format doesn’t put your content first, and can be confusing in search results. The plugin changes the default behavior to generate titles in the more readable “Postname -> Blog Name” format.
Ensures that there is only one URL for each blog entry. By default, WordPress with accept URLs with or without a trailing slash. However, this means there are actually two URLs for each blog entry, and your hits and linkbacks will be split between the two. Permalink Redirect uses a search engine friendly 301 redirect to ensure your site isn’t penalized by Google or sabotaged by your competitors.
That’s all I’ve got in terms of SEO, however in the next few days I’ll have a post detailing ALL my favorite WordPress Plugins (and everything I use on this site).
5 Web Design Tips for Startups
This article is the third in the Entrepreneurship Series.
Chances are if you’re starting a company these days, you’ve also thought about what your website will look like. This is especially true for web based startups – your website is your storefront and your public face, probably your most direct and frequent contact with customers. Therefore, you should spend time to ensure that your website is as effective and user friendly as it can be. The best websites clearly and pleasantly convey your company’s message, and make it obvious how the casual browser can become a customer or user. You can take large steps toward these goals by following these guidelines:
1.) Put your most important content “above the fold”
For years, newspapers have put their headlines and biggest stories “above the fold” – meaning the top half of the page that you would see before opening the paper. This same principle applies to web design. Put your most important content at the top of the page, where people can see it without scrolling. Visitors should be able to get a clear picture of your site’s purpose, learn how to navigate around, and hear your call to action (see below) without ever scrolling.
2.) Have a prominent “call to action”
Virtually all web sites have a persuasive purpose – to get someone to register, subscribe, bookmark, or buy something. The success of your business is often measured in terms of the number of users you have, and a loyal user is worth more than you may think. As an example – Google recently bought YouTube for $1.65 billion, or $82 per each of YouTube’s 20 million unique monthly visitors. So how can your business convert a casual visitor into a user? All you have to do is ask, and be sure your visitors hear you. Somewhere above the fold (as discussed above), make sure there is a colorful, prominent, and clickable “call to action”. In marketing speak, a call to action is text that compels a person to take action (typically buy a product). For example – “Register for free today”, “Call us at (704) 555-1212″, or “Buy our widget now”. This conveys to the visitor what you want from them, and what they need to do right now to get involved.
3.) Minimize “hoops”
Web surfers in general have notoriously short attention spans, so if you’ve been lucky enough to hook them with your call to action, you need to make sure you reel them in quickly and successfully. Even if a visitor is interested in registering for your site, an overly long, elaborate, or invasive sign up or order process will quickly send them elsewhere. Minimize the number of hoops they must jump through to become a registered user. When designing your sign up form, consider what information you need right now, and which can wait until after the person is registered (prompt them to fill out their profile). Chances are, all you really need right now is their email address and a password. Unless you’re going to charge them up front, their name, credit card, address, dog’s name, and favorite food can probably wait until later.
4.) Play well with others
One of the hallmarks of “web 2.0″ is open content. Sites like Flickr, Facebook, and YouTube have all made their data available to other applications via APIs. Take advantage of their openness – let your users import their information from these sites and others (assuming it’s relevant) instead of uploading it again themselves. This minimizes “hoops” for the user, as they only have to upload/update/enter their information once, even if it’s on another site. And as we’ve learned before, having fewer hoops is crucial for getting and retaining users.
If you’re going to take advantage of other site’s openness, you should also follow their lead. Make your own content available for your users to view and use anywhere on the internet. Implement an API, offer RSS feeds and email notifications. Let people embed your content in blogs, MySpace pages, and personal homepages. Witness how successful this philosophy has been for YouTube. One of the major reasons YouTube has been so successful is that their typical user never actually visits their site. Most of YouTube’s videos are embedded elsewhere on the web, with only a small YouTube logo in the bottom right to identify them. YouTube’s brand is spread across the entire internet, making it nearly impossible to not see their logo during a browsing session. As a web designer, your first instinct is to try to increase traffic and page views, but remember – by being social and opening your content, you are able to put your content and brand in front of your users, even if they’re not actually browsing your web site.
5.) Be transparent
In the same spirit of openness, also make an effort to make (parts at least) of your company transparent. Today’s internet is all about community, and your company needs to be a part of that. One of the best ways to keep in touch with the community is to keep a company blog. Periodically write a teaser post about an upcoming feature, an update on the direction of the company, or call for feedback. Let your users comment on these posts, and read their comments. Then, next time you’re looking at new features to add, consider what your users asked for. If you end up adding what they asked for (and you should!) write a post announcing the new feature, and credit the original feedback you received that inspired it. This makes your users feel involved and connected, and encourages them to continue participating in your community.
In summary, keep the user in mind when designing every aspect of your startup’s web site. Everything you do should be designed with the user’s experience in mind. Today’s internet is a fast paced place with tons of new startups, and if you want yours to be relevant, you’re going to have to fight for it. Grabbing visitors with a well designed and usable web site is the first step toward success.
