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!

If you have not read Mockup Process: Day 1, please go back and read that, as this post will be building on the concepts that we have put forth in the first article.

Day 2 of the Mockup Process got me thinking about how we use the Front Page on AppIndie.org.  Currently we have a blog format, where the newest posts are listed with their summaries.  When looking at sites like CNN.com, Time.com, and other high-profile news sites, we see that they are providing more content on the front page, so that someone coming to the site can see a wide variety of topics at a glance.

I’m not saying that I prefer this layout scheme to the current blog layout, but I wanted to toy with the idea, and see what I could come up with.  Here is the preliminary mockup that I created for this idea:

I have changed not only the initial story layout in this mockup, but also tweaked some of the concepts and styles that were originally done in the first mockup.

Layout

The layout is drastically different in this mockup, and is meant to show the way that we can present a larger variety of the current stories that come into the site.

First and foremost, we have a “Top Story” section, which provides the reader with a preview of a photo being used in the post, as well as a snippet of the article.  This would change each time a new story is uploaded and published to the Front Page.

Next, we have a general “Recent Stories” section directly to the right.  This pulls from all of the sections.  Each listing includes some information pertaining specifically to that post:

The elements represent:

1. Media Icon – This is a quick fire way for the reader to know if there is any certain media being used in the article.  In this case, there are images in the article.  When there would be a video, there would be a video icon.  (Note: these icons were just quick and dirty mockups, not indicative of the final product)
2. Title of Article
   
3. Writer’s Name
4. Category of Article
5. Date Published

I believe for this concept, that would be the way to go in regards to representing the most data about an article in that listing.

Below those two featured sections, we have a listing of each Section and the top three newest articles in them.  This is done in a similar format to the “Recent Stories” section.  (I copy and pasted the articles here, to illustrate the point without going overboard on time spent)

Tweaks

I made the “Member Menu” a little bit smaller, which gives more room to the logo and the New Voices badge.

I’ve lightened the color of the “Subscribe” button to allow for better contrast and readability.

Around each of the gradients in the titles of sections and the sidebar, I have placed one pixel-wide lines which give the layout a bit more depth.

Sidebar

I failed to mention the functionality and purpose of the sidebar in the previous post, so let me expand on the concept here.

As we get into the new frontiers of Social Networking and Multimedia, we are going to want to give our users an easy way to preview this new content.  In the sidebar, you will see three widgets:

1. Flickr – The Flickr widget will link to our Photo Stream on Flickr.  Our photo stream will contain images used in the articles, and any supplementary images that we may have taken in covering events, whether or not they were used directly in an article. (More on this functionality later, with full tutorials)
2. YouTube – As we begin to use our YouTube channel more, this widget will show the latest video, or possibly a randomly selected video from our channel.
3. Digg – The Digg widget will show the latest ten articles from AppIndie which have been submitted to the social news networking site, Digg.com.  This will allow our users to support us through their diggs, and be able to see what’s new.  (The mockup just has a generic widget selection of articles.  These are obviously not on AppIndie.org.  More on this functionality later, with tutorials)

As we work more and more through the mockup process, we may choose to add different widgets to this sidebar to showcase other outlets for our content.

Footer

We have the beginnings of the layout for a “Footer” section at the very bottom of this mockup.  Though the final ideas haven’t been nailed down yet, some possible uses for this footer could be:

• Related articles (when viewing a single article)
• Recent comments
• Information about the author
• Community section happenings

As always, there will be further mockups coming in the future.  I would appreciate any comments, criticisms or suggestions about what we already have done here, so that I can better tailor the new theme to everyone’s ideas (or at least some sort of common ground) before I get started on the coding portion of the process.

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.

The Appalachian Independent recieved some extra funding from our benefactors at J-Labs so that we can develop a better experience for the readers of our online newspaper.

We are currently working on plans to move AppIndie into the modern world of the Web.  This includes (but is not limited to):

• New, more modern theme
• Community Section
• Social Networking
• Online Multimedia (such as videos, photos)

This blog serves as a way for the Tech Team at AppIndie to give the Core Staff and our members up-to-date information on how things are going, and to provide an extra line of interaction while we are developing these new features.

I will be posting updates as I continue on with the Mockup process, and then onto converting those mockups into the actual AppIndie 2.0 website.

If you would like to recieve automatic updates every time that I post something new on this site, please subscribe to the RSS feed.

Look forward for a few posts on the first couple of days of the Mockup process, as well as explanations of the motivations of the decisions we have made for the new theme and functionality.  I want to invite everyone to give feedback in the comments section of each blog post, so that we can get on-the-fly feedback, rather than having to wait until we have the full product.