seo Question posted in
Some basic information to get you started with this can be found here.

Convert MVC Website to be Responsive – SEO

While investigating the Google SEO issue with respect to not having a mobile web site. I’ve learned recently that lack of proper mobile site would reduce the search ratings, and a different content for a mobile and a desktop sites might hurt your SEO as well.

Currently we have a MVC site that wasn’t designed to be responsive. I don’t want to create something that will require more maintenance. (IE new mobile site or creating new views for mobile versions..).

I’ve learned that converting the site to be responsive is technically possible but not recommended for the following two reasons:

  1. The current site might not work well on small screens.(CSS issues, modifying the CSS might be a pain and risky).
  2. We have too much stuff on the current site.

While googling, I found that this would be the best way to go.
Use the same controllers and views for both desktop and mobile browsers, but render the views with different Razor layouts depending on the device type. This option will require new CSS and new _Layout page for mobile devices.
and then modify the _ViewStart to be 

Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml" :"~/Views/Shared/_Layout.cshtml";

I would like to proceed with above approach, but If any one has any experience in this area, I would like to know the best practices, recommended approaches, and technical possibilities to achieve this.

Tags:

2

Answers


  2. 0

    There are typically three methods for handling Responsive Design :

    • Using A Responsive Design Framework

    • Using CSS Media Queries

    • Using Percentages

    The ease of using each of these will ultimately be based on how complex your existing Project is and how much you are willing to do and change to make it responsive.

    Consider a Responsive Design Framework (basically revising and updating all of the markup of your existing project)

    This will allow your site or application to run on basically any device (and look nice doing so) regardless of platform as long as it had an internet browser to access it and will make it much easier to develop as you will only need to create your page within one area and the beauty of Responsive Design is that it will style your pages appropriately based on the current platform and device.

    It isn’t really automatic and you will likely have to tinker with it a bit to get everything working and looking just as it should, but it is probably the best method of handling a situation like this (depending on the controls that you are using). There are Reponsive Design frameworks and boilerplates that you can use to implement these into your site such as Twitter Bootstrap.

    These could fairly easily be integrated into a Web Forms, MVC or Web Pages and would basically be all that you would need to use :

    The primary issue with using a framework here is that you already have your site designed and up and running. These frameworks work incredibly well when you use them from the beginning of the development of a project, however they will require a great deal more work when attempting to migrate an existing project to use them.

    These frameworks have very specific classes and styles that actually do a ton of different things regarding responsive design and you’ll have to use these new classes to replace basically all of your existing ones. It won’t be the easiest migration, but it is certainly isn’t impossible by any means and would be my recommendation.

    Using CSS Media Queries (a neccessity if you want to handle creating this responsiveness without a framework, but more work on your part)

    You can also accomplish this using CSS Media Queries, which target specific resolutions and screen sizes and style elements accordingly, however this is a bit more manual and you would have to write queries for each of the sizes that you are targeting.

    These will take a quite a bit more work than using a framework as you will have to write queries to target all of the different major resolutions that you want and then within each of these actually resize some of your elements manually. You’ll have to basically create a mini-stylesheet or media query for each of the resolutions that you want to target and manually enter the values that you want to use for that specific resolution.

    I’ve done this more “hands-on” form of Responsive Design previously, but it is much easier to let something tried and proven like one of the frameworks handle it for you. Check out the very simple example below that will demonstrate how CSS Media Queries work : 

            <style type='text/css'>
  /* Only affects 1600px width */
  @media only screen and (max-width: 1600px){ body { background: green; }}
  /* Only affects 1200px width */
  @media only screen and (max-width: 1200px){ body { background: blue; }}
  /* Only affects 900px width */
  @media only screen and (max-width: 900px){ body { background: yellow; }}
  /* Only affects 600px width */
  @media only screen and (max-width: 600px){ body { background: purple; }}
  /* Only affects 400px width */
  @media only screen and (max-width: 400px){ body { background: orange; }}
     </style>

    and as you resize your browser / window, the styles will be applied accordingly.

    Example (Editable Example)

    Using Percentages (another option to provide a “responsive” feel, but it will require CSS Media Queries as well to be truly “responsive”)

    You could also consider migrating everything to use percentage-based sizing instead of explicit pixel sizes, but this is will be even more work than implementing the above media queries.

    This will basically require you to scale everything on your site using percentages and defining minimum and maximum heights and widths for items. You’ll likely have to use this in combination with media queries to get a truly effective solution.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search