8 Ways to Bake Mobile Performance and Functionality Into Your ASP.NET MVC Site

For those looking for a more responsive website, here are some tips on how to make your site even more mobile-ready.

Based on the latest mobile statistics, if you don't have a mobile-ready web site, you may be left in the dust by your competition. While using a number of blogging platforms, you can easily create a mobile-ready website in an afternoon.

Yet, if you want to create a new feature or add-on for the website, your requirements for this feature just went up. What happens when there isn't a plugin, add-on, or module that you can download?

You may need to code the feature into your existing website while adhering to the standards of mobile web development.

So as a web developer, how do you write mobile-friendly code to provide the best mobile experience for your users?

To be honest, I've been doing mobile web for five years and I've learned a number of tips and tricks on how to make your website more responsive.

Here are my top tips to make sure your site already has mobile-friendly components baked in. 

1. Don't Reinvent the Wheel; Use a Framework
   
   When building a brand new website, the best way to start is with a framework. Most of the frameworks nowadays already have mobile initiative baked into it. Frameworks already take care of the heavy lifting of creating CSS styles and other mobile bells and whistles.
   
   Some of the more famous frameworks that allow you to build desktop, tablet, and mobile websites are Bootstrap, Foundation, Skeleton, and YAML 4.
   
   If you want to compare other frameworks, I would recommend the CSS Frontend Frameworks.
   
   How is it baked in? Each framework has their own way of handling multiple screens on multiple devices. You only need to modify the HTML instead of the code (Declarative instead of Programmatic).
   
   
2. Use Responsive CSS
   
   This goes along side the framework mentality. When choosing a framework, make sure their responsiveness doesn't use JavaScript, but responsive CSS.
   
   For example, while deciding to display three smaller blocks of text below in a desktop display, you can easily add a class of "col-lg-4 col-md-4," but on smaller devices, each one would have a class of "col-sm-12 col-xs-12" to display each one on their own row.
   
   The framework allows specific CSS for other devices making development and designing easier in the long run.
   
   How is it baked in? As mentioned above, you can choose whether to use the mobile CSS or decide to leave it out until later. That's the joy of each framework. You can add or remove pieces as you need them.
   
   
3. Create Responsive Image Sizes
   
   For those who adhere to the W3C standard of explicitly adding widths and heights to their images, responsive images require only:
   
   img { max-width: 100% }
   
   This allows your images to scale automatically when displaying them on any device, no matter what the image size, but I would also create different image sizes for your devices as well.
   
   How is it baked in? If you have this set once in a main CSS file, you won't have to worry about scalable images at all on any device. 
   
   
4. Use Responsive Logos for different widths
   
   One of the coolest techniques you can use for logos (or any images for that matter), is to use the CSS breakpoints to display different images based on device width.
   
   One great example is the Responsive Logos website that demonstrates this "too-cool" idea. Resize the browser window and watch the logos change.
   
   If you allow these logos to become responsive, you allow the branding to continue throughout the site without the logos or images becoming overbearing and annoying.
   
   There is also a tutorial over at GetFlyWheel.com about Using CSS Sprites to Make Your Logo Responsive.
   
   How is it baked in? While this tip is not baked into the process, once you set up these logo images, this technique can be used on multiple images for your site.
   
   
5. Compress your JavaScript/CSS
   
   Of course, if you've been using ASP.NET MVC for a while, you know that your production JavaScript and CSS should be compressed (or minified) so it loads quickly on any device.
   
   These JS and CSS compressions occur in the BundleConfig.cs in the App_Start folder. Define your JS and CSS bundles in there and use them in your specific Views by using:
   
   @Scripts.Render("~/scripts/MyBundle")
   
   How is it baked in? This should be a standard procedure for all web developers. This comes with MVC out of the box and should be implemented on production code. This is actually part of making the payload smaller to deliver to the user. Therefore, it'll be baked into the build process to help mobile devices deliver a minimal amount of HTML as well as JS and CSS.
   
   
6. Perform as much caching as necessary
   
   If you want a fast mobile site, you must be able to create either a page, application, or database caching strategy to provide users with the fastest results to a user hungry for information.
   
   For Page Caching Strategy, use an OutputCache attribute on each page you want cached.
   
   For an Application Caching Strategy, cache your ViewModels so you don't need to create them every single time.
   
   For a Database Caching Strategy, wrap your specific repositories with a caching repository to speed up lookup tables and repetitive parameter queries.
   
   How is it baked in? Again, this should already be part of your development process and it also provides a speedy delivery mechanism for your mobile users as well. Cache the Sh*t out of your data where applicable because your users may be on mobile...and they hate to wait!
   
   
7. Minimize the amount of calls to the database
   
   If you absolutely HAVE to call the database, try to make the smallest amount of database calls to make your data team (DBAs) smile.
   
   As they say, the best SQL call is the one never called.
   
   One technique I've used over the years with Entity Framework is to make a single database call and return multiple result sets. This allows your app to cache the data if necessary and quickly deliver the results to your audience.
   
   How is it baked in? I hate to sound like a broken record, but again, it's part of your development process. If the screen takes a while to appear on a mobile device, you need to minimize the amount of calls to the database as well as cache the data.
   
   
8. Use newer technologies and services for speedy site enhancements
   
   What do I mean by this? Most services are already integrating mobile technologies into their offerings to make the user experiences even better on any device they choose.
   
   SignalR, for example, is a relatively new technology that uses Ajax/Web Sockets to minimize the amount of postbacks that could easily interrupt a user's experience. I'm using this technology on every page (see?). It also works on mobile as well. 
   
   Another example is Disqus. Disqus is a JavaScript commenting engine where all you need to add is a JS script to your code and you immediately have a commenting system that you don't need to update or administer.
   
   The best part is that Disqus loads the comments AFTER the entire page loads, so you don't need to worry about it.
   
   How is it baked in? If you use these technologies on your site already, try to look at it from a pair of fresh eyes...on a mobile device. Look at your page load speed. Also, see if you can remove that custom commenting system and place Disqus on the page to speed it up. It could 1). load the page faster because you removed the custom commenting system, 2). you won't be making any extra database calls to grab the comment data, and 3). you don't need to manage it because it's a third-party service.

Conclusion

While these features are considered baked into the frameworks, your development environment, and libraries, this shouldn't stop you from testing and benchmarking your site using Chrome Page Speed, WooRank, or Yahoo! YSlow.

These tips should all be part of your web development best practices for building exceptional web sites whether they are for desktop, tablets, or smart phones.

Did I miss a tip that could make your mobile development with HTML, JS, and CSS easier? Post a comment below.