The Problem

How about an example so this makes sense? Railstips uses Mephisto, which is written in Ruby On Rails. It is kind of bad form to install Rails and PHP on the same server (some would say it is bad form to install PHP at all, but I digress). When I switched Railstips to use mod_rails, I lost my rewrites that told requests for /mint to go to mint instead of Rails (as mod_rails recommends turning mod_rewrite off). The solution, though not obvious at first, was simple.

The Solution

I setup mint.railstips.org on a PHP server and installed mint there. Then on Railstips.org, which uses mod_rails, I simply linked to the full mint install url in the tracking code, ie:

<script src="http://mint.railstips.org/mint/?js" type="text/javascript"></script>

I swear originally when Mint came out you couldn’t do that, but Shaun must have made a change. I actually noticed that this was possible from the FAQ’s on the Mint website.

So, in the future, if you want to use Inman’s awesome analytics software, all you need to do is setup PHP on a server somewhere and install Mint. It doesn’t need to be on the same server/domain as the site or application you wish to track.

Note: Be sure that whatever domain Mint is installed at matches the domain on your Mint license. For example, if Mint is installed at mint.railstips.org, be sure that your mint license is for mint.railstips.org. If it isn’t, login at HaveAMint.com and transfer the license to where you intend to install Mint.

Hopefully, by now, you realize that last paragraph should be wrapped in a <sarcasm> tag. It seems like browser support, or rather lack there of, has been a hot topic amongst developers lately. I don’t have much to say but let me present with good and bad examples of handling browser support.

Good Example

Recently, 37Signals announced that they will be discontinuing support of Internet Explorer 6 in their products. The first thing they say in the post is when support is discontinued.

On August 15th, 2008 we will begin phasing out support for Internet Explorer 6 across all 37signals products.

Then they explain the implications of this decision.

If you are using IE 7, Firefox 2 or 3, or Safari, you don’t have to do anything — everything will continue as is for you.

Lastly, they explain why they made the decision.

Supporting IE 6 means slower progress, less progress, and, in some places, no progress. We want to make sure the experience is the best it can be for the vast majority of our customers, and continuing to support IE 6 holds us back.

I don’t know how intentional the order of that information was but it is pretty smart. The first thing people care about is when and what. They get that out of the way to assuage the fears that any may have that a product they pay for can no longer be used. Once they get those immediate needs covered, they discuss the why. People don’t care about the why until they know how it affects them.

IE 6 is an extremely outdated browser. It has performance issues and a newer version has been out since 2006. There is absolutely no reason to support IE6 for web applications anymore. 37Signals made a good decision and properly communicated it to their customers.

Bad Example

With much hype and excitement Apple recently launched MobileMe. Being a fanboy, I fired up my browser and signed up. Once into the app, I quickly became frustrated because nothing I clicked seemed to do anything. I know how the web works but I couldn’t get anything to do anything. Then it hit me. I wasn’t in Safari, I was in a version of Webkit (the engine that powers Safari). I closed Webkit and opened up Safari to find that everything worked. All the problems I had went away. Also, open up the app in IE7 and you get this message.

I can understand not supporting IE6 but IE7? Granted they say you can still use it but that it just doesn’t work as well.

Internet Explorer 7 has known compatibility issues with modern web standards which affect Web 2.0 applications such as MobileMe.

To me that is a total cop out. Maybe IE7 won’t perform as well but it is not so difficult to support that a message needs to be shown and users should be forced to click continue to actually use the app.

On top of the IE7 stuff, there are several little things that bother me about MobileMe. In an effort to make it feel more desktoppy, some normal web expectations were thrown to the wayside such as tab indexes and text selection.

</rant>

Go ahead and drop support for IE6 in your web app. You deserve a break from it, but IE7? IE7 is not that difficult to support. There are several ways to skin a cat (or so I’ve heard) and usually one of them will work in all the major browsers.

I have a love/hate relationship with the iPhone version of Google Reader. A little over a week ago, Google launched a beta version of the iPhone interface for Google Reader and tears of joy ran down my face as I leapt through fields of clovers with puppies and bunnies.

Ok, maybe there wasn’t that much fanfare in the Nunemaker household, but it is a killer, I repeat, killer update. I love seeing perfect touches of JavaScript that make web applications more usable, for usability’s sake and not to prove that the developer knows how to read the Script.aculo.us wiki.

The new version (pictured above right) shows a list of items with nice bold headers and faded intro lines of text, which is cool, but that is not where the Reader engineers earn free beer. The perfect touch is literally a touch a way. Tap on an item and it expands, right in line, with the full post. There is a nice big star that is easy to hit if you want to favorite the post and you can do the typical share, keep unread and see original goodness. A few glides of your my mouse-click, strengthened, programmer finger later and I’m down to the next article. From there, I can continue to scan until I see something interesting, or I can touch the item and read another interesting post.

Granted, it’s not my job to create an iPhone interface for Google Reader, but I was so unhappy with the previous one, that I started too. I say that to give props where they are due. I don’t know if I could have come up with such a perfect interface interaction but I’m glad the Reader team did. Once again I love reading my feeds on my iPhone. Thanks Google. Also, I’m wondering how long until there are a crap load of iPhone web apps that use the interaction in a similar fashion.

My favorite thing about software is when it teaches me something about myself that I didn’t know. That something doesn’t need to be important, it just needs to be something. I’m a huge fan of twitter so I was pretty excited when I came across this twitter mashup. It uses Yahoo Pipes (to parse data client side) and Google Charts (to present data) to show you a scatter chart of when you typically tweet and bar charts of your tweets by month, day of week and hour.

It’s a really interesting representation of my twitter activity and technologically it is a sweet use of both Yahoo and Google tools. So what did those charts teach me? Simple: I tweet most between 8 and 10PM on Wednesday and Thursday. I find that interesting. Also, Saturday around 2PM seems to be popular for whatever reason.

I write all this for one reason. The next app that you build, think about this. Think about how you can use the data that your users are entering to teach them something about themselves. It can be something silly, like when they tweet the most, or something more profound that they would have never noticed without your help. Every time someone clicks or types in your app, it’s a chance for you to collect data and teach the user something about themselves or teach you something about how they are using your app. Don’t just build something to collect data. Build something that learns what your users are doing and adds value to their lives.

Some Related Links

• Google Web History – what months, days and such you search the most on, what terms you search for the most, suggests searches you might be interested in based on your habits
• Google Reader Trends – shows you which days you read feeds on, which feeds post the most items, which feeds you read the most or the least, etc.
• Flickr Stats – stats on your photos views, but also on which photos you’ve tagged, put in sets, etc.
• Last.fm – shows you what music you listen to and suggests stuff you might like

The Back Button

The back button is probably the most clicked button in a web browser. I’m amazed when I watch my family and friends that aren’t “webbies” continually hit the back button. I’m more of an “open a new tab” kind of guy, than a “click and wait for something and then it’s not what I want so hit the back button” kind of guy. Anyway, everyone knows the bigger something is, the easier it is to click. Firefox 3 thought about that and made the back button twice the size of the forward button. Really nice touch.

The Address Bar

Another nice touch is when you click in the address bar, it auto-selects the entire url. The Firefox crew probably thought (correctly in my opinion) that people more often replace the entire url than modify the one currently there.

Also, the address bar now is a bit contextual. As you type it searches through your history by url and by page title. This means I could type in ‘addictedtonew’ or ‘about me’ and my about page would likely show up in the results. You can see the example in the screenshot below.

Overall

Overall, it feels a lot faster and lighter. It still doesn’t feel like a Mac application but it seems to be getting better.

The Trend

Now, with 13 sites live and another 16 in development, I am seeing a trend. Most pages on the web are more than just a title and some content. Thankfully, when originally developing Conductor, I tweaked some ideas that I liked from other systems and created page parts. Basically, we can put a page part in a template and a new tab will appear in the page editing area. The picture below has a main content area and three page parts (info, thumbnail and url).

The Problem

Nothing seems wrong with that idea, right? It allows us to store content in smaller chunks which gives developers more control over markup, which in turn gives designers more control over layout. Wrong. Exhibit #1: the edit window for a page using a faculty template on the law school website.

Below is an example page rendered in the template above.

We wanted to show things like biography, courses, and contact information in unique ways but not force content owners to mark things up uniquely. Because I assumed that all pages will be made up of huge content regions and not tiny pieces of data, the only way we could do that is by creating a page part for each item we wanted to store separately. This, as you can see in the screenshot above, caused a very tab happy interface. While this works, I believe it creates a sub par experience for the content owner (who does all of the updates). One reason I believe that is now the content owner has an entire text area, to fill in something as small as a website url, which could be better represented by a small text field.

The Solution

All of the above has led me to an idea. It might be something that sounds good as an idea but in reality would be awkward. It might also not be my original idea, as someone else could have used it somewhere in the same fashion I speak of, unbeknownst to me, but here it goes. All you need is a way to store data and a way to present data. Also, those two things are completely intertwined. How you want to display data affects how you want to store it. The more control you need when displaying data means the more separated the data needs to be stored.

Each piece of content that makes up a website needs two templates: one that determines how it is stored and the other how it is displayed. There could also be a third template that is how it behaves but I’ll leave that out for now. I think the ideal website management system has almost a form builder interface for developers to define what they need stored. From there, the developer should also be able to create the xhtml or xml or json templates that determine how the data will be consumed. The final piece of administration would be an area where content owners can fill in those created forms with glorious content.

The Use Case

Here is an example use case. Content owner wants to show courses on their website. Developer creates new content template called ‘Course’. They define the storage half of the template to be name and number as text fields, professor and semester as selects (from comma separated list of options), summary as a text area and order the fields how they should be presented to content owner. At this point, the content owner can begin entering name, number, professor, semester and summary for all their courses, while developer starts creating the other half of the template, which is how it should be viewed by site visitors. Developer dumps in xhtml, css, and javascript to view all the courses styled up to meet a designer’s every whim.

You might be thinking, uh, duh, this is what happens on every web application. Someone needs something stored, so you create your model and your controller and your views and you are good to go. You’re right, but that stuff always happens at the programmer level and requires a programmer to do it. What I’m thinking about would be at the software level and could be done by anyone with front end web development skills (xhtml, css and javascript).

The Conclusion

Once this beast was created, a front end web developer could build dynamic websites very easily tailored to a content owners needs and the administration of the website could be left in the hands of the content owners. The bad news is that I would have to start from scratch to build a pure version of what I just explained. The good news is I can get close to the same result using what I’ve already built in Conductor (more on this at a later date).

Bad Start

About three or four hours in, I realized that things weren’t going the way I wanted and that it was going to take a lot longer than expected to implement. The solution that I had come up with felt complex and was going to require a big rewrite to our theme system. Anytime something feels complex, I go back to the whiteboard because it usually means I haven’t fully thought it through. A bit frustrated, I went back to the whiteboard. This time instead of starting with how I would store the data, I focused on how I wanted to present the data (the interface that the end user would see). Again, you can see my scratching below.

Good Start

As I framed in the interface on the board, the problem started to seem simple and I came up with a new way of doing it that would require no alteration to our theme system or any other existing part of Conductor. Also, this new way makes more sense.

Conclusion

So what am I trying to get at? I think this has taught me the difference between good software and bad software. Bad software starts with the developer thinking how they are going to store the data and technically make it work. Good software starts with the end user. It firsts figures out what will be the easiest way for the user to learn and use the feature and then figures out technically how to do it. I don’t think this is a revelation or that I’ve never built anything in this manner. I am sure, though, that I wasn’t as aware of this before when building applications.

Don’t start technical and force implementation. Start with the interface and let things come naturally.

I’ve been thinking for a while now, “Ok, twitter is great but where to next?” What could they possibly do that would make me want to use it more? Could I use it more is probably a valid question as well. :)

Information Overload

One of the things that is rampant online now, especially in my life, is information overload. I spend most of my days online and I process a butt load of information. Over the past month, I’ve been working to streamline how I receive and partake in this information using services such as del.icio.us (ma.gnolia before that), instapaper and google reader and ideas such as zero inbox, gtd and a few I’ve come up with on my own. This has helped, but since I’ve began to branch out on twitter, I’ve noticed that it takes a lot of time for me to keep up with all the people I follow.

Now, you might say, “Information overload is self-induced” and you would be correct but even still, I’d like to find a better way to process the information rather than cut it out all together. The main reason for this is that though I often am strapped for time and have to really be choosy about what I soak in that day, there are also, occasionally, days that I can’t find something to read if I try. Not sure what brings about those days but it happens.

A Little History

The first place that information overload hit me was Google Reader. My feeds got out of control not too long ago so I started unsubscribing. That helped for a while but I’m creeping back up again. I started to think about how I read my feeds and realized that though it is not documented and exists only in my head, each feed has a rating. Not necessarily a 1-10 rating, but more of a no matter what, when i have time, and when i am bored scale. There are some feeds, like those in the label friends, that I read no matter how busy I am. Likewise, there are others, that even when I have time, I tend to avoid them for whatever reason, but I’m not yet ready to unsubscribe. My coping mechanism in GReader is to label things in particular ways and that helps me process that information more efficiently.

A Few Suggestions

So I say all of that to help twitter how? Well, I’ve noticed that lately I wish I could cluster twitter in the same way I often do other web applications by tags or labels, so that I can better throttle and sort through information on a busy day, and yet still enjoy all those fabulous tweets on a more relaxed day. First off, I was thinking it would be cool to categorize those I follow by entity type. Show me only the tweets from real people. Show me only the tweets from companies. Show me only the tweets from magazines or rss to twitter bots. Those types of classifications would be handy. Twitter is by far the quickest way to get news about anything. Often links, news and such appear on my iphone 30 minutes before they hit Google Reader and other types of media I consume.

Also, just in the twitterers I follow that are people, there are different circles. I have my friends circle, which I follow most closely and even send to my phone. I have my rails circle which I follow for updates on what people in the community are working on or what they think are cool. I have my web dev circle, which is noticeably smaller than I would like it to be, as I don’t want to over commit myself to twitter. Heck, I even am starting to follow those in a higher ed circle. I’d really like to be able to see these groups separately. One reason is, as in google reader’s case, to be able to assign importance (even if it is mentally) to certain followings. Another reason, a bit more important, is that often these groups have conversations amongst themselves and it would just be easier to follow if I could see them separated.

So that is it. My suggestion to twitter is, recognize that you are becoming people’s chat and feed reader and inbox all in one and start working on helping them organically organize that inbox. The end. Oh, and plz give me ridiculous stats about myself based on my twitters along the lines of google reader trends and web history. kthxbai.

Broken Back Button

I understand why Google provides a stripped down version of the site when you click on an item and I like that they provide a ‘See Original’ link. The problem now is when I click the see original, which I often do, I can no longer get back to where I was in my unread items. If I hit the back button, it takes me all the way back to the Google iPhone home and not to where I was in my feeds. I understand that the iPhone is Ajax-capable but that doesn’t mean use it everywhere and if you do, please don’t break the back button in an app as simple as a feed reader.

Width Issues

With this latest update, the stripped down version never seems to be the correct width (as it previously almost always was). I constantly have to scroll left and then back right to read the whole line of a paragraph. For longer articles, I have to do this so much that I tend to just star it and come back to it in the full web version to read later. If you are going to set a width and it’s not correct, don’t turn off the zoom in/out feature of the iphone. I’d rather squint than scroll.

These two issues may not seem huge but they have made it a pain in the butt to read my feeds on the go (or sitting on my couch to lazy to open up my laptop).

On Ajax

I was one of the first people to jump on the Ajax bandwagon. I remember playing with it before there were libraries that did it all for you. Heck, it might not have been officially coined Ajax back then. That said, I’m starting to think it has all been a mistake. Don’t get me wrong. There are times when it is not just ok but actually vastly improves user experience. However, the number of developers who understand when those times are seems to be few.

Next time you go to throw some Ajax in an application or website, be sure to not break expectations (such as the back button) and that it actually improves user experience. Anyway, I’m off the soap box for now. :)

At any rate, I don’t really have anything important to say, I just wanted to try out the software and see what I thought. For the sake of adding some value in this post, I’ll link to a few things I have found interesting the past while.

• ToDoist.com – Simple and fast task management. There are a few things I would improve but these guys nailed the bulk of it on the head.
• Google Chart API – Looks interesting. Haven’t played with it yet, but rest assured that I will.
• Mac OSX Leopard – Several have said that this was not worthy of a major release. I tend to think they haven’t really given Leopard an in depth look. I’m a week in and each day I find a new thing that I really like. I’ll probably collect a list and post an article here before too long. Oh, I’m also digging my iphone.
• Ack – Ack is a tool for programmers similar to grep but designed to search through big source code trees. It is quick and does nice search term highlighting all from the terminal.
• Explosm Comics – These are appalling and hilarious.
• Jake and Amir – Appalling and hilarious as well. My favorite is “The Burp.“

Anyway, that is all for now.

Update: MarsEdit is impressive. Everything worked, even editing to do this update.

Simplicity

One of the things I’ve noticed since getting an iPhone is that I love the simplicity of Mobile apps. Take Google Reader’s mobile version for example.

I have three choices for reading my feeds — all merged together in one reading list, individually by feed or individually by tag. I don’t know about you, but I have a crap load of feeds which means that I will never read by individual feed. This leaves me with two options — by tag or all merged together. I love it. Two options. One or the other.

If I have time, I simply meander through my reading list. If I don’t, I start with the tags that are most important to me, like friends or ruby-and-rails. Call me old school but I actually prefer this to the full ajaxy Google Reader scroll version that you get if you visit google.com/reader.

Take a sec and look at the two images I have added to this post thus far. Which one do you prefer? I choose the mobile version for a few reasons:

1) Light on Resources

Extremely light on resources which means all the browser has to do is load the html which means it’s lightning fast, even on my phone. I don’t need pretty. This doesn’t mean I need ugly, it just means that simple design is ok (and is most often better design, flashy design masks crappy skills).

2) Context is King

When I’m reading my feeds, I just want to read my feeds. I think too often we (app developers) are forcing users to multi-task or, at least, are rewarding them for multi-tasking (which is just as bad) with the interfaces we create. Let’s start rewarding people for single-tasking. Let’s reward those who have the ability to focus and attempt not to distract them. Or, another way to look at it might be, let’s starting teaching those who are in a state of continual partial attention (newsweek, linda stone) to actually focus.

3) Expectations

As Snook puts it, “the web is founded on a limited set of interactions: links, buttons and forms…Once we’ve created a barrier to usability, either through understanding or technology, we have to work to eliminate those barriers while still maintaining the new interaction.”

Usability, at least in the terms I’m talking about in this post, has a lot to do with expectations. The more a user is surprised by an interaction, the more afraid they are to explore. I guess what I’m trying to get at is I would like to see a lot more web apps using standard interactions and a lot more work on slowly introducing new ones. Let’s start focusing on context and expectations rather than scriptaculous and wow factors (not that they don’t have their place). If you aren’t sure where to start, I would recommend Garrett Dimon’s absolutely fricken amazing slides on Application Interface Design.

In fact, I’m actually using Textmate as I write this. You can view the screencast here. Note: the screencast has a boring spot you can skip where firefox is restarting. I’m too lazy to edit it out.

Using a JavaScript include, they track clicks on one of your pages and create a heatmap of those clicks for you to view. This is flat out cool. Simple idea, simple product (only three ways to consume the stats–overlay, list and heatmap), but I don’t even want to think about what it took to create this tracking beast. Below is a heat map of my homepage after being tracked for a few days. It’s really interesting to see not only what people are clicking on, but where on the link they are clicking. Seems like most of my site’s visitors like the middle.

The only issue I have is the initial capture of your site is not changeable once you start to track clicks. The reason this sucks is if you care about your blog, you are updating it, which means new articles will appear, but not in the capture that shows the heatmap. You can see in the image that ‘Screw You Kodak‘ is the first post, but at the time of this writing ‘Getting Real‘ is actually my newest post (not including the one you are reading).

I’m very curious as to what, if any, will be the pay scale once they are out of beta. This is definitely something I would pay for.

keypad ‘enter’: Intelligent Go To File

Ever get tired of traversing rails directory structure when trying to find a view or partial? This shortcut check the current line you are on upon pressing the enter key to see if there is a render or redirect statement. If one is found, it automatically opens this file up. As if that wasn’t enough, it also works for stylesheets, javascripts and in between controller actions and views. Yes, it is that cool.

command-option-p (with selection): Create Partial from Selection

This shortcut takes a selection, asks for a name and creates a partial. Not only that, but it creates the <%= render :partial => “whatever”%> method call to the partial that is created.

command-option-p (without selection): Inline Partial Edit Mode

This shortcut is flat out amazing. Simply hit command-option-p and all your partial calls are replaced with the actual code from the partial. Make your changes, hit command-option-p again, and the render partial method call is put back in its place and the partial is saved with the changes. I dinked around with it abit and definitely got the geek snorts.

command-option-g: Rails Generator

No need to even open up the terminal with this shortcut. It gives you stupid easy access to the Rails script/generate while remaining in Textmate.

ctrl-option-command-\: Install a Bundled Plugin

This automatically installs a plugin to your current project. Currently there are only two plugins bundled with it, but I can imagine it would be easy to add your own. I really like this feature.

Snippets

Not only does the bundle come with all the above cool shortcuts, but it also has several snippets which are helpful for migration. You can read all about these in the features once you download the bundle but I wanted to at least mention it.

Plugins

The bundle also comes with two plugins. One, textmate_footnotes: Clickable Web Pages and Backtrace, does two really cool things. First, it makes the line number and file name error messages clickable. Upon clicking, it opens up the file in Textmate. If you have done much debugging, this is really handy. The second feature is also pretty cool. It adds links to the bottom of the page when in development mode. These links open up the exact controller or view that rendered the page. Nice.

Final Thoughts

Have you downloaded it yet? I’m serious, this thing is awesome. Duane has been posting updates to it like crazy so I look forward to some really cool features in the coming weeks.

Whenever I have a weird issue, I like to post about it so that it is easier for others having the same problem to find a solution.