What Are You Doing Here?

Well, more often than not you’re looking at technology-based articles or screencasts. One of my most popular posts, with several hundred unique visitors is the Google Sync vs. MobileMe article and its ensuing follow-up. The screencasts, especially ones that teach web or Photoshop-related topics, regularly receive a good number of visits as well. This is a good thing, because these are definitely the paths I’d like to pursue when moving forward with this blog. There are only 4 pages on the site: About, Portfolio, Archives, and Contact. About and Portfolio get the most views, despite not being updated since the site has gone live. Archives seems like a huge gateway for people to find what they need, though I believe the ability to sort this page by certain criteria (popularity, # of comments, etc) would be a massive usability improvement.

Trimming the Fat, the Message, and more…

Taking a bird’s eye view of the site, it’s definitely geared towards technology; both physical things like electronics as well as intangibles like code and video. There’s a bias towards Apple, for sure, but not in an anti-Windows way. Occasionally I’ll post personal (life) things, reviews, and little bits of fun Photoshoppery. So, thematically, it’s all over the place. I think the first thing I’d like to do is narrow my focus down a bit to a few key points. I really like the way Tumblr handles this, where everything falls into 7 categories:

• Text
• Photo
• Quote
• Link
• Chat
• Audio
• Video

Taking that a step further is a company like Panic, whose blog uses different treatments depending on what category a post falls into. Observe: http://www.panic.com/blog/

So I think my new site will have a small number of vague primary categories (as opposed to my current, very specific 30+) and then pertinent subcategories for people who want more granular control over their browsing experience. Another option would be to keep the vague primary categories and then fill in the gaps with tags or Wordpress 3.0’s new taxonomy system. All of this will be covered in a later step, for sure.

The homepage will no longer be simply just the blog; a years worth of data has proven that’s the best way to increase the bounce rate well above average. I intend to create a page that briefly tells people who I am, perhaps showcases some recent work, and then gives a few samples of things from other areas of the site.

In a nutshell, here is how I would describe myself:

I’m a web designer by trade, passionate about cutting edge technologies and semantic markup. I love utilizing video not only in the form of screencasts to teach but also in personal or corporate projects as a means of communication or just having fun. I work with all types of clients, big and small, and love discovering great new things to share with the community.

I have to make sure I build my brand around that core message, which shouldn’t be too hard since I practice what I’m preaching.

What Am I Found For?

Most of the terms I’m found for correlate to what I discussed in the first paragraph: apple vs google, mobileme vs google sync, etc. I also get a lot of traffic from “How To…” searches in regards to web development on Mac. A surprising number of people also Google my full name to get to the site. Not sure if they’re looking for one of the other Andrew Gormleys out there in the world, but it’s hard to imagine as the people who find me via that search term tend to stay on the site for an average of 5-6 minutes. In this regard, I think I’ll just keep doing what I’m doing, but start to trim the fat and work on more concise post titles for easier findability.

Summing It Up

I now have a really good understanding of my audience and what it is I’d like to say from a messaging point of view. Fortunately these two things are very similar in nature so it’s not a matter of sacrificing one or the other, but simply making the two more cohesive.

The Next Step

In the next installment, I’ll actually start diving in concept art and mapping out ideas for the new site. This is where I think things will start to get really interesting, so stay tuned as I continue on my journey to a great new site.

Preface

It would probably help if you read Cameron Moll’s most excellent article Good Designers Redesign, Great Designers Realign on A List Apart before continuing with this or any other article in the series.

Establishing The Audience

The first thing I always do in situations where a realign is in order is check Google Analytics as well as my server log files (in this case, via Urchin) to get an idea of what people are up to when they come to my site. I decided to also check the main RSS feed to see if people are consuming content that way, since that’s usually how I like to manage my information intake.

Using the window of time April 5th, 2009 to April 5th, 2010, here are the a few points that I’ve gleaned:

• Average unique visitors per day: 52
• Average pageviews per day: 137
• Average bounce rate: 72.2%
• Average time spent on site: 00:01:54
• Average pages per visit: 2.34
• Current number of RSS subscribers: 230
• Average number of RSS subscribes: 137

Sadly, that was more traffic than I expected to be receiving on a day-to-day basis due to my sporadic updating and varying types of content. The bounce rate is definitely something that needs to be addressed, as 72% is pretty terrible any way you present it. More often than not bounce rate is tied to usability issues: unclear navigation, display issues, and much more can all factor in to bounce rate. I like that there are actually RSS subscribers, even though it was difficult information for me to ascertain. I may end up implementing FeedBurner for the RSS feed simply as a way of more easily tracking who has subscribed to the site.

Next up, I want to see what my user’s capabilities are. This includes everything from their web browser to screen resolution to operating system. The numbers were pretty much on par with what I thought they’d be:

Then I decided to break down the top three browsers into their respective version numbers to gain a little more insight into who’s been checking in:

The site is optimized for all but two browser versions featured above: IE 5.5 and 6. It’s almost mind boggling to think that anyone in 2009 or 2010 has used Internet Explorer 5.5 – those folks are outliers and won’t be considered as part of my target audience. I’ve also already made it clear that IE6 isn’t supported on any current or future incarnations of my site. Currently, users of those browsers can still view my site content; moving forward with the new design they’ll be presented with a polite splash page encouraging them to get with the program.

What was really surprising were the amount of visitors using the latest version of Safari. The 23% of users running version 3 were from April 2009 to roughly July 2009 (Safari 4 was released in June). In the past 6 months, nearly 96% of all Safari visitors are running the most current build. I suppose that’s the benefit of proactively pushing out updates to your users (Microsoft, take note!).

Here are a few of the other stats worth noting:

• Operating systems were split pretty evenly between Mac and Windows (both roughly 46%). Some surprises in the OS list include: PlayStation 3, PlayStation Portable, and Blackberry
• Most common screen resolution is 1280×800. Smallest screen resolution (not including mobile) was 1024×768.

To Sum It All Up

My everyday visitor is running a recent version of Firefox or the most current version of Safari on a Mac or Windows PC with an average resolution of 1280×800, making it safe to assume they’re using a laptop. If they don’t leave immediately from the homepage, they tend to browse at least 2 pages of the site, spending roughly 1 minute on each page.

Moving Forward

In my next entry, I’ll start to address the goals of the site and what messaging (if any) I’d like to change to better convey what it is I offer. This will likely also touch on a bit of branding as well, though the only visuals we’ll be working with will most likely be graphs. Look for that article coming soon.

Design is the method of putting form and content together. Design, just as art, has multiple definitions; there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that’s why it is so complicated.

When I started down the path of web design it was with a small, but dedicated group of friends all beginning on Angelfire or Geocities (RIP) using WYSIWYG editors.  We quickly came to realize how stifling this method of design was and extended into coding our own HTML by hand (and learning it from the awesome HTMLGoodies.com).  From there, some of us began to explore the field of graphic design using Photoshop (5, at the time) to enhance the visuals of our designs while others took an interest in server side languages that were popular at the time, namely PHP and Perl.  We all helped each other in the areas we particularly excelled and there was always an air of camaraderie and constant collaboration as a means to success.

I don’t think any of us realized it at the time, but we were evolving and adapting as quickly as the web; embodying all of the underlying ideals that make it the impressively colossal entity it is today.  Those among us who contented themselves with a limited amount of knowledge either stagnated or lost interest completely.  The web has a funny way of separating the casual user from the digerati in swift fashion.

This spirit of constant improvement has to stay with you otherwise you’ll quickly lose footing in the field of web design or development. Are you a jQuery wizard?  Take the dive and master MooTools. Think you know PHP like the back of your hand? That means it’s time to learn Ruby on Rails to take your skills to the next level.   Do you know every Photoshop keyboard shortcut off the top of your head?  That doesn’t mean much unless you have a solid understanding of color theory and typography.

Every day the web makes tremendous strides in bold new directions and if you want to secure your place and be a part of it, then it’s almost a necessity to be constantly improving, learning new things, networking and, most importantly, applying yourself.  The wildly popular and successful tools that have been created to allow us to do these things quickly and easily (think Twitter, Facebook, LinkedIn, etc) were created by groups of people that probably started together not unlike my small circle years back.  If you keep the the spirit of change, collaboration, and camaraderie alive, you keep the spirit of the web alive.

Let me first say that this program is so feature rich I haven’t even scratched the surface of it’s capabilities.  However, the user interface is so completely alien to the Mac platform that I had to make mention of it somewhere:

The interface is written in Java. Users of the late Azureus will recognize similarities, especially in the tabs.

An interface like this will intimidate people who really just want to engage in the simple task of streaming media. For someone like myself who’s pretty well versed in video encoding and streaming this makes sense, but I think it’s safe to assume that the layperson doesn’t have a clue what “Force framerate parsed from FFMpeg” means. If cleaned up and made more, pardon the term, Mac-like, its appeal would instantly be broadened and people would flock to this incredibly powerful piece of free (as in beer) software.

A great program along the same lines that takes something complex and breaks it down so that anyone can use it is Handbrake.  Through the use of tooltips and plain English, Handbrake gives the user great insight into what are otherwise complex video encoding settings.  Its standard icons-across-the-top interface give you access to the most important actions of the app and through the use of native UI tabs, your options are further broken down into logical settings like Video, Audio, etc.

Handbrake advanced settings window

I don’t profess to know how daunting it is to build and maintain a program, especially one that fuses two things as complicated as networking and video, but I think we can all agree that clean, intuitive interfaces work well for everyone.  That little extra bit of polish is what can really hurtle your program ahead of the rest.

• I have a variety of dynamic sidebars throughout the site that change depending on where you are
• Instant Twitter updates thanks to the brilliant Alex King
• A nifty Sideblog powered by Delicious
• Flickr integration, also in the sidebar
• AJAX-ified contact form

Not too shabby for a 1.0 release of the site.  The portfolio isn’t up yet, but it’ll take me a while to get nice sampling of work together anyhow, so no worries there.

I didn’t want to go too crazy and overwhelm myself with needless code in this release, so in coming versions of the site you can look forward to the following:

•  sIFR plugin for fancy headings (update: 01/09/09 – Currently using the @font-face attribute of CSS3 to handle this for all modern browsers)
• jQuery for slicker sidebar showing/hiding
• Embedded audio/video players

That’s all I have to say for the time being. Now that this thing is finally up I can jam pack it full of as much content as possible. Small sidenote: I haven’t tested it, but this site will undoubtedly look awful in IE6 (but I don’t care).

1. When people reach your URL, you’re going to want to have a splash page featuring an obscure graphic or (preferably) a giant Flash file with a ridiculously slow progress bar. If at all possible, techno music should be playing during this experience and the only meaningful information you should have is a dim, barely visible “Enter” button to reach the “real” website.
2. To add insult to injury, you’re going to want the aforementioned splash page to resize the user’s browser without asking (go fullscreen whenever possible).  Never mind the fact that they might be up to meaningful work or have their browser set just right to accommodate tabs they use regularly. None of this is important because it’s YOUR site, not theirs.
3. Whenever possible, always opt for the cheaper route and host your site on Angelfire or Geocities. Since most users still use dial-up, they won’t notice your site choking for bandwidth.  When selecting which banner option you’d like to use in exchange for free hosting, call and let them know you’d like them all on there: the popup, the horizontal banner across the top, and the square banner in the navigation.  Insist that it’s your way of thanking them for “hooking you up”.
4. You’re going to want to use low-contrast combinations of colors whenever humanly possible. Try white text (#ffffff) on a light gray (#cccccc) background as a good example.
5. If a user is running Internet Explorer, require a few plugins to be installed.  If a user is running anything else, require an ActiveX control for the site to continue loading AND a few plugins to be installed. Serves them right for not viewing the site in you browser of choice.
6. A good domain name can make or break a site, which is why you should make it your prerogative to select one that’s either 1) confusing to spell or 2) is a double entendre.  An example of each, respectively is as follows: dash-hyphen-dot.com, actual site Experts Exchange has a great domain at www.expertsexchange.com
7. Some sites are thin, some are wide, but very few ever take advantage of the horizontal scrollbars.  Make every effort to have your site scroll in both directions so you can fit the absolute maximum amount of content on a page.  A good way to do this is to design for monitors with a resolution of 2560×1600 resolution as your baseline.
8. I cannot stress this next one enough: FRAMES! FRAMES! FRAMES!  Use as many frames as possible to make your site look as though it takes advantage of new-fangled technologies like AJAX.  One frame should be entirely dedicated to embedding your MySpace page.
9. Contrary to long-established beliefs, animated GIFs are still a really fantastic technology. Some people use them sparingly across a page, perhaps to draw the eye, but this is a mistake.  GIFs should almost always function as the background of the page for maximum effect. Example.
10. Who reads anymore?  The bulk of your content should be in YouTube Video form and embedded multiple times across your site to drive the point home.  Your About Me section can be a retrospective of your life starting with embarrassing home videos of you as a child all the way up to last weekend when you passed out in a shopping cart from one too many shots of tequila. Set them to autoplay simultaneously whenever given the option.