3by9

A Purpose Served

When I came up with the idea of 3by9 (yes for once I can honestly say that it was just me that came up with the idea…I know it’s a complicated idea that only brilliant minds like myself could think up) I knew that it wouldn’t have an extended period on the web. I was with two geniuses of the web and figured we all had something important to share with people. However, doing it over at the 9rules blog didn’t seem appropriate so I figured we could start another blog to share these ideas.

Since then over 200 entries have been published during the past 18 months and each of them showing how different our personalities are, but how similar our views of the world around us are. When I brought up the idea of 3by9 to Mike and Tyme I informed that every 3 months we would revisit the site to see if it was time to put it away. Well we did that the first 3 months and haven’t looked back since. However, we all agree that now is the time because we are moving in our own directions.

We are still very much a team when it comes to 9rules, but have started to diverge into our own projects and this has taken time away from the site. So instead of keeping a site dragging along it is time to put it to rest. It served its purpose and it was a relief knowing that we didn’t intend on making the world’s greatest blog, just a blog that was great to us.

If you are interested in what we are doing I suggest you subscribe to Flyosity and Tyme Said. Be sure to also follow us on Twitter: @scrivs, @tyme and @mike9r.

With all of that said thanks to everyone that reads the site and who has commented. It was a joy writing for a site with no restrictions, no concerns of traffic or worries about money. It was a blog that started the way blogging itself started, to share ideas and have our voices heard.

Pushing your limits

2009 was the year where, coming from two crappy years (medically), I was determined to pick up life where I left it. Where it was sort of ripped away from me. It’s not the end of January but so far I’ve:

• Had a party I wasn’t expecting to have in Vegas. Met a bunch of new people and inadvertently increased my exposure.
• Reached Level 80 in World of Warcraft.
• Ran an instance and raid in World of Warcraft.
• Made a couple of dishes I swore would cause my oven to explode if I tried them.
• Resolved the “where do the missing socks go?” dilemma in my house.
• Did some break-dance moves and didn’t break anything.
• Started the process of having some customized Dunks and AF1s made. So slick…
• Finally decided a direction I wanted to go with my career that I am satisfied with (not that I won’t tweak it).
• Found three new programs to watch on TV. Expand my horizons.

That doesn’t include the goals I achieved with the munchkins. The odd thing, looking back, is that I didn’t say “let me see what I can do different today”. I just did it. I wouldn’t say I’ve changed because I’ve always been that way. I’m picking up where I left off. Now let’s look at another example…

My ex-guild leader created a guild called Hell. It had several hundred members in it. The guild leader had a dream that God would be mad because he created a guild name Hell. When he became ill the next day, he freaked out and disbanded the guild without telling anyone, clearing the bank, etc. Poof, the guild was gone. Next he joined a guild named Hate. Then changed his name to TotalLoser. Then made a one person guild named Worst Player Ever (or something like that). He went from straight PvP to PvE. As I am typing this I looked on my buddy list and he’s changed his name again to Ezeil and he’s in another guild. Last night it was TotalLoser. I told my friend (who was in the guild too) that something was up with the dude and he said I was nuts. He spent a lot of time with him in voice chat and the guild leader was cooler than ever. As a new person I saw things my friend didn’t see.

Then we all watched his public melt down puzzled at what the “real” reason that was pushing him in the direction he was going. Let me be clear, I never would have guessed he’d have a meltdown like he had. I could tell something was bothering him from the way he spoke and what he did. My friend felt bad because he didn’t see it coming. It looks like he’s re-invented himself, moving on from his meltdown. He’s back PvPing which is great because he was really really good. I wish him the best of luck.

My point is that we all fall down (make mistakes, have tough situations to over come, etc.) but what we do after we fall makes all the difference. You can pick yourself up, dust yourself off and continue on in life (what I did) or you can make the situation worse (what my guild leader did).

But to survive you have to dust yourself off and continue on. It’s not easy…recovering from what I went through while I having to be strong for my family was the hardest thing I’ve ever done. I’m sure Ezeil felt bad dismembering the guild, not distributing the guild bank and the guilt from that made things worse (it was so public).

In the end, it really doesn’t matter does it? The end result is the same: to survive you have to pick yourself up, dust yourself off and continue on with the hand that has been dealt to you.

iPhone OS v3.0: Springboard Overhaul

The iPhone App Store is growing so fast that the original interaction design of the iPhone’s home screen — “Springboard” — is totally outdated. It needs an overhaul.

In case you’re not familiar with the iPhone’s iconic home screen, there are 5 rows of icons, 4 icons per row, and the bottom-most row has a special background behind it. In a previous version of the iPhone OS, you couldn’t re-arrange the icons and the four in the bottom row were stuck there permanently. Fortunately, Apple took the hint and did what Jailbroken iPhones had been doing for months — allowed you to re-arrange the icons to your liking — mainly because of the launch of the App Store and thousands of applications.

I currently have 4 screens full of apps, and I’m not really an “App junkie” either. I know people that have maxed out their screen real estate with double the screens and many times more applications than I.

There are many issues with the current configuration:

• Takes too long to scroll through pages, can’t access applications quickly.
• Every application icon has a similar shape so beyond the icon’s design, there’s no other distinguishable characteristics for identification.
• No way to organize your applications in any meaningful way.
• Only one “important area” where apps stay put, at the bottom. Apple chose this, not users.

With the App Store growing by leaps and bounds every day, there’s bound to come a point (very soon) where users are just going to accumulate too many applications and will stop downloading & buying new ones because they don’t have room. Not “storage room” within the hard drive, but physical pixel room. That’s not a good problem to have.

So what’s the solution? Here are my ideas:

• Make any application icon “sticky” so that it it stays put when you scroll to see other applications.
• Some kind of tagging or folder UI so that I can group Games with other Games and flip right to where all my Games are in one easy motion.
• Gestures would be nice. Swipe up to launch one application, swipe down to launch another.
• Drawers that can be accessible on all pages. Instead of clicking 3 times to get to the page you want, you always have access to a drawer tab that will immediately show a group of applications for quick access.

I don’t have all the ideas, and this is a very difficult problem, but I think it’s a start. I’m sure Apple engineers have been working on this for awhile so I expect to see an update at some point in the future. It’d also be nice if my background image could be shown in the Springboard background (like on my Jailbroken iPhone!) but hey, I’d settle for just a better interaction scenario.

There’s A Niche, You Just Have To Find It

A few weeks ago I talked about starting a new blog, Flyosity, and the ideas I had for hitting the ground running. Those ideas mainly revolved around small tweaks I made for search engine optimization purposes, so in this post I wanted to talk more specifically about content decisions and how things are going so far.

Focus

My focus is on Mac-related interface design topics:

• Icon design
• Mac software interface design
• iPhone software interface design

So far I’ve been pretty faithful to those broad topics, nailing at least one in each entry I write. Why those topics? I felt they were under-served at the moment. There are some great forums that focus on these topics (MacThemes, Jelly Labs come to mind) but not many individual voices I could read on a regular basis. Don’t get me wrong, there are some serious all-stars in the Mac and iPhone design community (I try to follow them all on Twitter) but they tend not to post highly-descriptive articles about their work. An icon release is fantastic, but for Flyosity, I wanted to talk more about why and how an icon was created, not just the release of it. I wanted my blog to be centered around learning and not just observing, mainly because I’m still learning.

Talk About What You (Sorta, Kinda) Know

I’ll be the first to admit that I’m still working on my photorealistic design skills, icons included. I’ve been designing for the web for so long that the transition to software design is taxing me a bit since much of it is new. Designing high resolution icons? Not something I’ve really done before, but that’s just the topic I want to cover on Flyosity as I think it’s interesting and challenging, especially to a newer designer. My goal is to put out as many tutorials as I can, mostly because it forces me to learn a particular technique so that I can write about it. Last night I posted an icon tutorial and it was something I’ve never really drawn before. As I wrote the tutorial I was learning as I went.

Google’s Been Kind

Because the topics I’m targeting aren’t very saturated yet, I’ve been able to slide up the results rankings for my key terms. At the moment I’m on the first page for “mac interface design”, “iphone interface design”, and “interface design blog” which is perfect for the content I’ve been writing. My site still has a PageRank of 0 but since there’s not a lot of similar content out there, I’ve been climbing up the results. I’d like to think that my SEO-related tweaks I made to my HTML source contributed but who really knows.

The Fun Part About Starting A New Blog

I haven’t started a new blog (where I’d be the sole writer) since 2003 and that was for my old Typepad blog that I keep up for posterity. This blog and others I’ve written on weren’t totally ran by me, so there wasn’t a whole lot of room for experimentation.

I created a new blog on a domain I’ve owned for awhile and it’s really a great experience, one that I haven’t had in awhile. The blog’s design isn’t totally finished yet so I won’t be linking to it in this post, but I wanted to talk about some of the decisions I’ve made already and why I made them.

Archives

Leading your visitors around your blog, showing them the various articles you’ve written in the past, this is all very important… if you’ve got articles to show them. With my new blog I don’t have much content up yet so creative archiving isn’t a key concern for me right now. What is a concern is setting the hierarchical and naming groundwork for moving ahead when I do have a few dozen entries under my belt. What am I talking about?

• Individual entry URL naming scheme
• Categories, tags, and choosing a URL for them
• Monthly or yearly archives? Both? Neither?

For post organization, I’ve chosen to have a small number of categories (about 5-6 or less) and to keep them fairly high-level. Tags will be used mainly for metadata, but I’ll get into that later.

My URL scheme for individual articles is http://domain.com/category/title-of-entry.php, a pretty standard convention. The /category will be the most important category on the entry. Entries will be posted into 1-3 categories, but I’m choosing 1 above others to deem the most important and this will go into the URL.

Right now I’ll be forgoing date-based archives in favor or category-based archives and pagination off the homepage.

Search Engine Optimization

To me, SEO is fun. Google’s ranking algorithms are like a black box, and different SEO techniques allow me to try things and see how they work within Google’s universe. If they don’t work, I tweak until I get a better result — trial and error. I’ve read enough blog entries and articles about SEO to know a bit about what things I need, so now that I’ve got a new blog I get to try them out from the start.

Here’s what I’m concentrating on in no particular order:

• Utilizing H1-H3 in a topic-focused manner
• Website title
• Focused meta keywords and description

I’m a junkie for semantic HTML and it works out great that Google pays so much attention to it. It’s really important for your H1, H2, and H3s on the page to be as descriptive as possible and related to your overall topic. My overall topic happens to be Mac and iPhone-centric user interface design, so I made sure that within my website title and the main H1, it’s clear to search engines what I’m focused on. By using image replacement techniques, I can easily show a logo to site visitors while at the same time displaying my semantically-rich H1 text to search engines.

My website title doesn’t have the name of my blog as the first word, it’s near the end. I’ve seen a few websites doing this lately, namely 37signals, most likely in an effort to win top placement on particular Google searches. My niche is pretty small and focused (software interface design, not web-based) so I’m using the same technique and will see how it goes.

There’s a great WordPress plugin called All In One SEO that automatically generates your META keywords and description for you, so I incorporated similar functionality into my new blog. On individual entry pages, the description is the first 30 words of my post plus an extra 5-word sequence related to my topic, and the META keywords are the tags that the entry was placed in. I don’t display the tags in the blog’s design, those are 100% for my META keywords, so I can be a bit more focused. I try to keep the maximum number of tags on an entry (aka META keywords) to 8 to keep them relevant.

The fun part about SEO is that for someone who’s not an expert in the field, it’s really a big experiment. The ideas I have implemented here will take a few weeks to bear fruit, and if they don’t, then I’ll mix some stuff up and try again!

Top 5 Coolest Pieces Of Blog Metadata To Design

This past weekend I was in Charlotte attending their Wordcamp conference and spoke on the Design/Technical panel. Each presenter put together a Top 5 (or 10) list and then based their talk on that. Here’s mine:

(Here’s a link to the larger version.)

Designing Blogs

Designing a blog is similar to designing any other type of website in many ways, but to me I always found it far easier, far more creative. The reason I like designing blogs is because of all the data you get “for free” as soon as you publish your first entry. The time and date it was published, categories, tags, comments, who published it, metadata buried in the entry, the list just keeps going and each piece of metadata is something you can use creatively to add to your design.

In my talk I came up with my 5 favorite pieces of metadata to work with when I’m working on the design. Information visualization is something I’m really interested in so some of the examples in the slide are things I’ve actually used in the past. The bars showing how many entries a categories has is extremely useful. The comment badge that gets fuller and larger depending on how many comments it has, I used that a few years ago and have always wanted to pull it back up.

The audience at the event was less technical than I assumed it’d be, so I pulled out a lot of my semantic metadata jargon and just focused on the possibilities. One thing I glossed over during my talk was how to link tags together to form a semantic mesh of information. Here are some psuedo-steps that you could use to code up something similar to this:

1. List all the tags an entry has.
2. For each tag, find all other entries you’ve posted that are also using that tag.
3. For each entry you find, find all the other tags that it also uses. Each of these tags might be considered a related topic to the original tag.
4. Use a Javascript visualization engine to plot the relationship between those tags and entries.

Connecting metadata is a powerful way of showing users how information relates to each other, even when it’s not totally clear what the relation is.

Designing With Blog Data

This coming Saturday I’ll be speaking on the design panel over at the Charlotte Wordcamp event in the building of the Charlotte Observer newspaper. It’ll be a lot of fun, and it’ll be good to talk about blog design again.

Designing a weblog is a lot of fun, and one of the reasons I love working with blogs is because of the sheer amount of information you can work with for the design.

When designing websites for clients, the big issue I’ve had to deal with is the lack of data you have to work with. Normally design mockups have lorem ipsum dolor text strewn throughout as there is no real text to work with yet, and very little information you can design. Design is about arranging information, and if you don’t have any information, then it’s an uphill task.

Blog design is the complete opposite. Here are some things you get for free when designing a blog. Numbers and data that you can work with when crafting the interface:

• Authors
• Entry dates and date formatting
• Categories an entry is posted into
• All the blog’s categories and sub-categories, and how many posts have been made to them
• How many posts in the last 30 days, the last 90 days, the last year, etc.
• Tags and tag clouds
• Related posts
• How many comments an entry has
• Recent comments
• Total number of comments, or number of comments in a date period
• Posting frequency

When designing a blog, you automatically get a ton of information to use by default. Mix up the information, blend it with other data points, design something useful and interesting. Draw some graphs, some charts, some relationship diagrams. There’s a ton you can do.

My presentation this weekend will be focused on cool data visualizations you can do with a blog. Charts, graphs, ways to organize information, layout ideas, all surrounding the concept of working with a blog’s metadata to enhance the overall design. No more lorem ipsum text when designing a blog, just work with what you’ve got.

Using HTML, CSS, and Javascript For Everything

To be honest, working in Objective-C and using the rich set of Cocoa APIs is difficult for me. I wasn’t a computer science major in school and never learned much about pointers or header files (thanks to 3 quarters of Java that I never used again) so it’s all a brand new landscape. I’ve learned new programming languages on my own before but they were higher-level constructs unlike C and Obj-C.

I downloaded the iPhone SDK the day it was unveiled and spent 5 hours reading about Cocoa and Obj-C on Apple’s Developer site. I absorbed it like a sponge, reading through all Apple-supplied example apps line by line trying to understand their magic. I put some views together, made some things happen, but had tremendous difficulty moving ideas in my head into code using a language I’ve never worked with, and I got frustrated.

It was frustrating mainly because I can do nearly anything I want to do inside a browser — any design, any user interaction scenario. I’ve been using CSS to create interfaces on the Web since 2002, HTML & Javascript since the late 90s. A web page is my canvas and I feel no limitation to what I can create. I rarely get bogged down in implementation details when creating something new on the Web, I mainly just dream it up and start making it work, thanks most recently to jQuery making Javascript fun again.

One of the first things I did after downloading the iPhone SDK was create a little application that loaded an HTML file from within the bundle into a UIWebView. This allowed me to use HTML, CSS, and Javascript to create something that loaded locally (aka, very quickly) and ran inside of a native iPhone application. After I became a little more comfortable with Cocoa, I wrote some hackish code that 1) was notified whenever a link was clicked, 2) stopped the new URL from loading, and 3) instead called a particular native method based on the string which returned its results by using stringByEvaluatingJavaScriptFromString to send it back to the HTML page. This allowed me to do some cool things like use JavaScript to call a native Cocoa method and then manipulate the results of that call. For desktop-based OS X apps, this is trivial as you can access the WebView directly via a WebScriptObject, but in the iPhone SDK there’s no such thing. I had to jump through some serious hoops to get JS talking to Cocoa, but in the end, it worked.

And that got me thinking.

Many people are unaware that HTML & CSS are used in popular desktop-based applications, in such ways that you’d probably never know they were being used unless you looked hard enough. Here’s a quick list of some apps that use HTML & CSS in interesting ways:

• Apple Mail — When you’re reading an email message, you’re reading it in a WebView. Many emails come through as HTML nowadays so it only makes sense to render the message directly as HTML. This is how Apple can do such innovative things with message templates — it’s all HTML & CSS.
• Help — In OS X, most applications display their Help pages (accessible via the Help menu in the menubar) as HTML.
• Safari/WebKit — I use the Web Inspector all day long when debugging Javascript, and it blew me away when I realized the entire thing is written in HTML, CSS, and Javascript. If you want to see some of the most precise and interesting CSS & Javascript you’ve likely ever seen, right-click within the Web Inspector and go to “Inspect Element” to view the source code of the Web Inspector itself.
• Firefox — One of the most interesting uses of CSS happens to be staring you in the face right now if you’re using Firefox. The entire interface of Firefox (toolbars, buttons, Find, etc.) are all styled using CSS applied to XUL, and XML-based interface definition language. When you use Find to search for text inside of a web page, the action that pops up the little Find box on the bottom of the window is actually just a Javascript call to change the display from none to block, just like you’ve used a hundred times before. This is actually what makes writing a Firefox plugin so appealing to web developers, because in the end you’re using CSS and Javascript to build your design and functionality.
• Dashboard Widgets — You probably already knew that OS X Dashboard Widgets are just HTML, CSS, and Javascript, but you didn’t, go check them out again and see the level of interface detail you can achieve with stuff you already know how to use. Hint: if you view the package contents of a Widget’s bundle you can dive into the HTML, CSS, and Javascript code of the Widget to see how it works its magic. I’d highly recommend doing this for some of Apple’s beautiful widgets.

Use What You Know

The only reason that the list of desktop-based usage of HTML & CSS is so high is because Apple’s open source rendering engine WebKit is baked into OS X, allowing you to load an HTML file into your Cocoa application without breaking a sweat. Almost 5 years ago someone wrote a tutorial to build a web browser with one line of Cocoa code, so people have been using web-based display languages within desktop apps for a long time.

Over the years, WebKit has gotten a lot more powerful and its new Javascript engine is the fastest in the business. If you pack HTML, CSS, and Javascript into your application bundle and load it locally into a WebView, depending on the complexity of your code, it renders only a touch slower than if you built it using Interface Builder. Matt Gemmell even put out some code that lets you change your desktop-based application’s interface live by swapping CSS files.

This kind of stuff just blows me away. Design your interface using XML/HTML & CSS, hook up your behaviors to Cocoa using the WebScriptObject (call Cocoa from Javascript) and then only call Cocoa when you need to do some heavy lifting. Bake it into a desktop-based application by using a WebView, compile, and deploy.

I’ve been looking back on the ideas I had a few months ago that I struggled to reproduce using Obj-C and Cocoa and now feel confident that I can build them using what I already know. The idea isn’t a 3D adventure game or a photo manipulation app, it’s just something that’s useful, and I think using HTML & CSS to build it into a native app would be a perfect way to turn it into reality.

Speed Over Style

I’m a software designer, but I’m also a user, and that’s very important.

Steve Jobs has been quoted as saying that design isn’t how something looks or feels, it’s how it works. So when a service that I use more frequently than nearly any other service on the web starts chugging and coughing, its design is failing.

I’ve been a Bloglines user since early 2003 and it’s essentially how I keep abreast of information on the Internet. It was a leader in the space a few years ago, but now that dozens of other web-based RSS readers are freely available — including Google Reader — its growth is probably stagnant. I’m a die-hard user, refreshing my Bloglines subscriptions many, many times per day. I don’t use a desktop-based reader as that’d probably kill my productivity, so refreshing my feeds in Bloglines and seeing a bunch of new articles is fun for me. I only subscribe to around 40 RSS feeds, so when something pops up, it’s always something I want to read.

Lately, Bloglines has been having some serious problems. Often I’ll open it up and none of my feeds in the left sidebar will show. I’ve contacted Bloglines about this but haven’t received a response. It’s an intermittent problem as occasionally they’ll show for me, but it’s very annoying. Bloglines is an older, iframe-based experience, but they also have a new “beta” version that uses Ajax to refresh panels with articles, similar to other web-based feed readers including Google Reader. I dislike this version, mainly because it’s simply not faster than the iframe-version for reading feeds, and also because it doesn’t automatically mark all articles on a feed as “read” as soon as I click to see them, I have to manually click on each article panel or else the article count next to the blog title never decreases. All very annoying.

The other day I realized that even though Bloglines was having issues displaying feeds for me, the iPhone version of Bloglines (web-based, not a native app, accessible via i.bloglines.com) was still perfect and it’s what I use on my iPhone to read RSS feeds. I decided to load up the iPhone version of Bloglines (which is incredibly stripped down) in Safari and it worked perfectly. The iPhone version of Bloglines is very snappy even on an iPhone EDGE connection, so on a broadband connection in a full desktop-based web browser, it screams! It’s unreal fast. The fastest feed reading experience I’ve ever had.

And that’s the story of how I started using the iPhone version of Bloglines as my normal, desktop-based feed reader. Because it’s the fastest one on the planet.

I’m not in the mood….

I don’t feel like writing an article. An article about Web 2.0 or technology? I have zero interest and I haven’t even been keeping up with it lately. Politics? Each and every politician can kiss my ass because I’m tired of them spewing shit they expect me to fall for. Life? Thanks but Mother Nature decided to mess up thousands of lives with Ike and after enduring no power for a couple of days (kids with no power is not a pretty thing) I need a break from life. Business? Enough depressing news about businesses failing and needing to be bailed out this week to last anyone a life time (if you have stocks, good luck with that). If I were writing about World of Warcraft I’d have a bunch to say and I might spin this somehow into WoW…..

So here I am writing an article I don’t feel like writing and I don’t like the ones I pre-wrote. On my own site I publish when I feel like it. Here? I refuse to miss a day. Then I realized what I’m doing right now is what we all do to some extent.

• Isn’t that what people do when they get in their cars and drive to the job they can’t stand?
• Isn’t that what people do when they roll over from having sex with the spouse they fell out of love with a long time ago?
• Isn’t that what people do when they go to the bowling league they somehow got pressured into joining but don’t want to cause drama by canceling?
• When you contain yourself when you smile at your co-worker/boss/insert-person-here when you really want to tell them off?
• When you wash those windows do you like doing it?

We all do things we don’t want to do everyday. Some people do it all day everyday. I can’t recall the last time I was enthusiastic about cooking. Or yard work. I can’t dance when I do those two things (without looking like an idiot).

What I don’t understand is why people continue to do things they don’t like without trying to improve the situation? Get a better job. Get a divorce or rediscover the love. Kill the league and join another. Learn how to tell people off without them realizing you did (that’s fun). Put on some music while you wash the windows and dance.

People do things out of habit. My Mom will do things on auto-pilot and she doesn’t realize she’s doing it. It used to drive me nuts because I would put something down for a moment and she’d auto-pilot (move it). Although auto-pilot comes in handy if she happened to have gone to the store, picked something up she thought I’d like and ends up auto-piloting (cooking) me a meal…anyway, that was her way of getting through chores she didn’t like doing.

In the situations I described above many times people fall into habit, a routine. Sex MWF, same club with the same people on the same days, same meals on the same days, get brand new clothes and they look just like the old clothes.

When you went to college even if you had a blast, did you want to stay there? You love your job, do you want to hold the same position five years from now? Do you really want your kids to remain kids? See the difference?

Habit does not equal fun. Or enjoyment. Or progression. Or growth. Habit means stuck in a rut.

To advance in life sometimes you have to kill the habits.

To reward myself for writing the article I’m not in the mood to write, I’m going to do something completely spontaneous - breaking a habit of what I’d normally do on a weekend.

Have a good one!