In today's installment of my series of making a mobile version of the MVC Music Store I am going to create the basic MVC infrastructure for the site by adding the controllers and views. This will probably be the most boring post in this series because the Music Store is a very simple application.
Normally when defining the architecture for a mobile web site there are many content related decisions that must be made. The rule of thumb is a mobile site should probably contain about 20% of the content found in a desktop web site. That sounds like it is very draconian, but in all honesty its not really. When you consider the usage context what you are doing is trimming content that actually gets in the way of a user finding success.
One of the most important design decisions you make when architecting any application is usage context and how to make someone successful as quickly as possible. Usage context drives the information architecture for any application. Mobile users, in theory, are on the go and want to find an answer or accomplish a task as quickly as possible. Of course there are exceptions, but in general this is a primary mobile use case.
The only part of the desktop MVC Music store I chose to eliminate from the mobile site is the administration section. Honestly including the admin section might be a good idea to make our store managers more flexible. But since this is phase I of a mobile presence I decided to leave it out. If the Music Store contains a lot more content there would be more places to trim content or at least its presentation.
Adding controllers to the mobile MVC site is pretty straight forward. Expand or simply select the Controllers folder. Right-click on the folder and select Add + Controller. You will then be prompted to enter the controller name, do not check the Add action methods checkbox. This creates a basic controller with an Index action.
You can chose from a list of Controller Templates, but I typically use the Empty Controller because I like to drive what views my controllers contain. The other templates will automatically add views for reading and writing.
To complete the mobile Music Store add controllers for CheckOut, ShoppingCart, Store and StoreManager. The default site already contains a Home and Accounts controllers. At this point in the process you can actually copy the controllers from the desktop site. I will modify them as needed as we go through this tutorial.
As far as the Views go you can also copy the corresponding Views from the desktop site. Or you can add them manually by right-clicking in each Action method and choosing the Add View. Starting tomorrow I will begin modifying the markup and Action method changes that need to be made to make the mobile version work.
At this point I realize I have not done anything terrible exciting. That will start changing now the core site infrastructure is in place. The next entry will focus on the home page architecture. Here I will start illustrating decisions that must be made when creating a mobile web site. These include content layout and dealing with touch interfaces.