AppIndie Development Blog

Bear with me here, this is going to be a long post.

I’ve started the process of mocking up what I feel will be the look and feel of the new site.  Shown and discussed in this post will be my first day’s work (which was on 5/18/09).  I will have another post about what changed with regards to the work I have completed on 5/19/09.

This early planning stage is essential when building a new theme, or modifying a layout of a currently existing page.  By using an image editing software suite, I can easily throw together the elements of what I am imagining will be on the site in the future.  These are not working prototypes, but simply flat images of where I plan on going.

In each post, I will touch on key points that come up during the decision making process, and attempt to justify them in some way using outside sources, or some sort of tangible evidence.

First Considerations

The first things I look at when I see the current AppIndie website, and think about how I can improve it include:

• Resolution independence
• Amount of space for the actual articles
• The outdated feel of the current theme

Resolution Independence

Resolution Independence might be a new term for some of you, so let me explain what I mean by this.  When looking at The Appalachian Independent home page on the recommended resolution of 1024×768, you don’t notice much being wrong with the way things are laid out.  Everything just sort of fits on screen:

This is all well and good, but when a user runs their desktop at a higher resolution (which is becoming more and more common), things start to lose their flavor.  Take for instance what it looks like on my monitor:

As you can see, almost half of the screen is not afforded for content, but just the default blue background.  So, one of the goals in developing AppIndie 2.0 will be to allow the content to stretch to the full width of the user’s desktop resolution.  This will allow for more space for users with resolutions over 1024×768, and will let them enjoy more content on each screen.

Article Screen Real Estate

Much like the issue above with the amount of space used up by the blue background, when reading an article, you notice that not much of that tiny sliver of content is actually used for the article itself.  This limits the size (width & height) of images and videos that we may post, and compresses the text in order to provide for the navigation elements on either side.

In order to free up more screen real estate for the articles themselves, one of the goals of AppIndie 2.0 will be to modify the navigation scheme in a way that will give the article 70% or more of the left hand side of the browser window.  This will let us post more and larger images and video clips.  This will also centralize the navigation, so that we don’t have both a top nav bar and a side nav bar.

Outdated Feel

The decision was made early on to focus on the content, rather than taking the time to have a new theme built just for our site.  This was absolutely the correct decision, as we now have over 450 published articles and growing.

But I think it’s time for a bit of a change.  The default theme works, and provides the functionality that we currently need as an online newspaper, but as we reach out into the world of Web 2.0 and Social Media, we are going to accrue more traffic, and we are going to want to include functionality derived from those other sites and applications.

If we take a look at some of the news outlets on the web, we can draw a bit of inspiration from their styles, themes and layouts.  The main topic I want to hit is the idea of having a clean site layout.  Take a look at these sites, so you can understand what I mean:

• Hulu
• CNN
• Digg

These sites pack a lot of information into a smaller space without sacrificing elegance.  That is something I am hoping to achieve with the new theme for AppIndie 2.0.

05/18/09 Mockup

Let’s take a look at the first mockup that I prepared on 05/18/09 (click to view a larger image):

You’ll notice a couple of differences between this theme and the one we are currently using.

First, there is no left sidebar with navigation elements.  The sidebar has been moved to the top, just under the logo, allowing for an all-in-one place for the menus.

Next, the member login functionality has been moved to the top.  The “Register Now!” link will lead a new user to the registration page, where they will be able to sign up for an account.  The “Member Login” link will cause a login bar to appear at the top of the screen.  This will use a JavaScript fade effect (a little too geeky to discuss, but once the first prototype is up and running, hopefully you’ll agree that it looks good).  Here is what the login box will look like:

Once a user is logged in, the top bar will be changed to a menu of all of the activities that a user can do on the site.  This would include sending feedback, submitting articles, modifying their profiles, etc.

Next thing you may notice about this mockup is that the “Subscribe” button on the main navigation bar is a different color.  (I have changed the color of the green, as the contrast isn’t enough to be visible on some monitors–see the forthcoming post about the 05/19/09 mockup)  Because we are keeping AppIndie ad-free, the most important thing for us to get users to become more interactive with the site is to allow them multiple ways to receive our content in an automated way.  If we draw attention to the “Subscribe” button, we can have more first time users subscribe to our content.

When a user hovers their mouse cursor over the “Subscribe” button, they will see this (or something very similar–the icons/background isn’t set in stone) menu:

You’ll notice there are many options for a user to subscribe to our content.  Since we will be taking advantage of the social networks out there, it’s best to give the user a wide variety of choices, and allow them to pick the method they use most to get our content.

“RSS Feeds” is plural due to the planned overhaul of the RSS feed system on the site.  There will be separate RSS feeds for:

• The Front Page
• Each Section (separately)
• Everything (all sections/categories)

The “Email Newsletter” option will be based on the RSS Feeds, and will allow a user to receive new articles through their email address, rather than having to use a separate RSS feed reader.

The Front Page here represents the current layout that we have, which is the articles listed in order of publication.  The mockup for 05/19/09 goes a different route, which is similar to what CNN has on their page.

This mockup is most definitely not set in stone, and we will be evolving the layout and style as time goes on.  Please leave me your feedback for this particular mockup in the comments.  If you think it is terrible, let me know.  If you love it, I’d be more than happy to hear that as well.