AppIndie Development Blog

I’ve been working toward finishing up the Mockup Process, and have a few things to show the group, and try to get some feedback on.  Here is the current mockup:

A couple of things to note:

1. Clearly defined edges between navigation buttons.
2. Clearly defined edges between story previews.
3. Each main Section is represent with the last few published stories.
4. The “Top Story” module is highlighted to grab attention.
5. The Footer is empty (more about this topic later)

I think that this mockup represents a clean, more modern approach to the vast amount of information that we are trying to portray throughout the site.  We have many sections and categories, so things can get a little hairy when talking about navigation around the site.

Top Story

The Top Story module is not quite pinned down with its functionality.  We could present the most recent article in that module, but that could lead to some tension between writers.

Two articles posted within an hour of each other would mean that the first article may not be highlighted and seen by our readers.  We are going to create some sort of algorithm to determine what the top story of the day should be (to be changed once a day, unless otherwise manually changed).  Most likely, it will involve something like this:

P / (Dp – Dc) – Tt

That formula looks a bit confusing, but hover over each of the letters in it for an explanation of its purpose.  This functionality will be hammered out when it comes time to start the coding process. (very soon)

Menu Structure

The menu at the top is a bit different from the current sidebar menu.  This is by design, and hopefully will give a better user experience for our readers.

Here are the menus as they are currently laid out:

As described before, the “Subscribe” menu will be different, and have a different set of features, offering ways for our readers to get automatic updates to our posts on the various online networks to which we belong.

A menu will be activated by simply pointing your mouse cursor over the menu name (which will be a direct link to either a Section or a Category itself), and it appears, allowing you to choose an option.

Member Login

As described before, the Member Login menu will be located at the very top of the page, and will fade in once the “Member Login” button is clicked.  It will look similar to this:

After a member has logged in, they will be presented with a User Menu, which will contain actions for the user to perform, such as:

• Submitting an Article
• Sending Feedback
• Logging Out
• Making a donation (this may remove the banner on the right sidebar, but maybe not)
• View/Edit their user details

Alright, this is the extent to which I have been working, and look forward to at least one more post in the Mockup Process series.  I will be contemplating the scenarios where the Footer section will be useful through delivering dynamic relevant information, possibly including:

• Writer Photo
• Writer Bio
• Writer Contact Information
• Related Articles

This hasn’t been set in stone yet, but I will be figuring out exactly what should be done, and how it will specifically benefit our readers.

As always, leave me feedback.  I need to know what everyone thinks of this setup, so I can modify things in a pleasing manner.  Thanks for reading!

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.