Red Chair Project – Mobile Website Design

This week I’m going to do something a little different.  Instead of analyzing a mobile website that someone else has developed, I’m going to analyze my own.  This particular website is the mobile version of The Red Chair Project, and can be found at  There is no stylesheet for a full desktop version of this site, so if you want to see first hand what I am talking about I recommend visiting this site on an iPhone, or at

The first thing I wanted to do was decide what content is most important, and come up with a basic navigation structure to access all of this content.  After analyzing the desktop version of this site, I was able to break down the majority of the content into 3 main categories: Ticket Categories, Organizations, and Venues.  If you are looking at the home screen you see that set aside against the red background are these 3 categories listed in a vertical navigation menu.  To help direct the user, I made this the primary focus of the home screen, with the only other option being to check out Facebook and Twitter links.

The ticket categories is a simple way for users to search for events by category.  This page displays the same vertical navigation menu that the home screen has, just with more options.  I have included all of the options that the desktop version has, with exception to Visual Arts.  The reason I left this out is because with the current font size and spacing, I only had room for 10 categories.  Out of all of the options, Visual Arts seemed to be the most repetitive.  Technically, almost all of the categories listed could fall under the category of Visual Arts.

Clicking on an individual ticket category takes you to a page that displays query results of all events that fall under that category.  For the purpose of this assignment, I created a database, and added 3 events from each category.  I’m sure that by the time you are reading this article, these events will be outdated, but try to imagine this is part of a real website that is being updated daily.  This page gives a limited amount of information, even though the database has fields for almost all of the information that the desktop version has.  This is so that someone could update one database and both the mobile and desktop versions will be simultaneously updated.  For a more elaborate version of this mobile website, functionality should be added that allows users to click on an event and view more detailed information about it.  I would event want to go as far as giving users the option to purchase tickets from their mobile device, but for now I’m just focusing on displaying content.

The next two categories are Organizations and Venues.  Currently, these 2 sections simply display a list of all of the organizations and venues that are hosting events listed on this website.  Further functionality would add a 3rd layer to these sections, giving users the option to view all of the events hosted by or at a specific organization or venue.  This would be beneficial to people that work or attend local organization or venue on a regular basis, and would give them the option to quickly learn about upcoming events from their mobile browser.  For now I’m just looking to give them a list, and to give a general idea as to how I can improve my own work.

Next I want to talk about the overall style of the website.  To stay consistent with the desktop version, I used the same background color, but decided to switch up the content area colors.  In the mobile version, the content area has a white background, but in the desktop version it has a brownish color.  With mobile sites the content is key, and the presentation has to be clean in order not to frustrate your users.  The content displays clearly against the white background.  Also less important parts of the site are displayed outside of the main content area, so I can separate what I really want the user to be focusing on.

Another thing that I decided to implement is hiding the URL bar.  By default, the iPhone’s mobile Safari browser leaves the URL bar at the top of the screen when you visit the website.  This takes up a decent amount of pixels, so to regain this valuable screen space I run a JavaScript function that shifts the screen down 100 pixels.  This allows me to maximize the amount of space that I have to display my content.

I also wanted users to always know where they are in the site.  This is why I decided rather than having a consistent header, I would create a dynamic header with breadcrumbs.  These breadcrumbs not only tell the user where they are within the website, but tells them where they have been, and gives them the ability to quickly return to a previous page.  Each breadcrumb is a hyperlink, so if a user is busy checking out upcoming Film events, they can quickly return to the home screen to look through Venues or Organizations.

The breadcrumbs is another area that has room for improvement.  Rather than using simple text to display the user’s current location, buttons or icons would be more effective.  This would make the functionality of the breadcrumbs more clear to the user.  With simple text, the user has to actually click on the link to learn its functionality.  With a button, the user can assume that clicking the button is going to cause something to happen.

Some other minor features that I decided to leave out of the mobile website are featured events, advertisements, and some of the “more info” pages.  Perhaps some of this stuff would be important to the actual company, but as an outsider looking in stripping these things increases the visual appeal of the site, and gives more room for more important content.  If you have visited this site and have any suggestions for improvement, please leave me a comment and let me know about it.

  • Delicious
  • Facebook
  • Digg
  • Reddit
  • StumbleUpon
  • Twitter

One Response to “Red Chair Project – Mobile Website Design”

  1. Brett, did you design the Red Chair website? I have an extra ticket for the event if you want to go. Look forward to meeting you someday and thanks for all you do.

Leave a Reply