Mobile Website Methods with Asp.Net MVC. Part 1 – Content Sites

I have a fair amount of experience building mobile sites. Mobile sites are essential now because so many people are using mobile phones and tablet devices to browse the internet. Many sites don’t have great mobile experience. They use flash, rely heavily on hover effects, or they have so much content that it takes forever for the page to load.

I’m going to show how I made a mobile version of my site in just a couple hours using Asp.Net MVC and jQuery mobile. My site is primarily content and has very little code involved on it. My website is very basic and very straight forward. I browsed through my site and decided to find the basic information I wanted to display on my mobile version. In my case, I wanted to display my portfolio, resume, about me, contact me, some of my social links, and an about my mobile page so people could see what technology I used.

In my project file, I added an Area for my mobile section. You could also just create an additional view area, but I wanted to keep everything separated. I created a view for all of the pages I wanted.

The first real step was to build out my master page and get all of my jQuery Mobile includes plugged in. jQuery hosts their mobile library so you can reference straight from them. You can read up more on the jQuery Mobile syntax here.

I then made a simple list view on my home page for navigation.

I then went back into my main project and moved the main content of my pages into partial views and updated those pages to reference the partial views.

I then went back into my Mobile Area and referenced the same partial view.

Now all I needed to do was style the page. This didn’t really take much effort because I wanted it to look the same. I adjusted font-sizes and margins to accommodate the mobile device. In the end, my custom CSS file was only 40 lines. jQuery Mobile has a really nice theme that takes care of themes. I’m not a designer at all so I really utilized this.

When it was all said and done I had a mobile site that looked like this:

Really simple to do. This project took me less than three hours to do.

Here are a few additional pointer to developing for mobile devices.

  1. Remember your developing for a mobile device. Don’t pull in 100 records on page load.
  2. Make sure your layout is flexible. A lot of people will swap between portrait and landscape. Also, remember not all screens have the same resolution.
  3. If you choose to do user agent detection, make sure your list of targeted user agents are easy to find so it will be easy to update.
  4. Always have a link to view your full site from a mobile device. Don’t force people to stay on your mobile site if they are on a mobile device

Thanks, there is plenty more to come!

I’m a Technology Architect for Rockfish Digital. I’ve been there since 2007. I love coding and spend most of my time in C# and JavaScript. I’m a firm believer in the Full Stack Developer.

Author: worthyd

I'm a Technology Architect for Rockfish Digital. I've been there since 2007. I love coding and spend most of my time in C# and JavaScript. I'm a firm believer in the Full Stack Developer.

12 thoughts on “Mobile Website Methods with Asp.Net MVC. Part 1 – Content Sites”

  1. It is perfect time to make a few plans for the long run and it is time to be happy. I have read this submit and if I may just I wish to counsel you some attention-grabbing things or suggestions. Maybe you could write next articles regarding this article. I desire to read more things approximately it!

  2. You could definitely see your expertise within the work you write. The world hopes for even more passionate writers like you who are not afraid to mention how they believe. At all times go after your heart.

  3. Someone essentially lend a hand to make seriously articles I’d state. That is the very first time I frequented your web page and up to now? I amazed with the research you made to make this particular put up extraordinary. Wonderful activity!

  4. I will right away take hold of your rss as I can’t find your e-mail subscription hyperlink or newsletter service. Do you’ve any? Kindly allow me recognize so that I could subscribe. Thanks.

  5. I can see that you are an knowledgeable at your subject! I’m launching an internet site quickly, and your data might be very useful for me.. Thanks for all your help and wishing you all the success in your business.

  6. You actually make it appear so easy with your presentation however I in finding this matter to be really one thing that I think I would by no means understand. It kind of feels too complex and extremely wide for me. I’m looking forward to your next post, I will attempt to get the grasp of it!

Leave a Reply

Your email address will not be published. Required fields are marked *