mobile,model-view-controller,seo , Convert MVC Website to be Responsive

Convert MVC Website to be Responsive


Tag: mobile,model-view-controller,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.


There are typically three methods for handling Responsive Design :

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; }}

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.


Stop Prevent Default in else clause

Hello I have a mobile nav where some items have a subnav so I have set a preventDefault to stop these doing there normal actions and open the sub menu but some don't have a submenu ad now these don't work as normal. Any help would be great here is...

Python MVC style GUI Temperature Converter

#The view ( import tkinter import Controller class MyFrame(tkinter.Frame): def __init__(self, controller): tkinter.Frame.__init__(self) self.pack() self.controller = controller #Output Label self.outputLabel = tkinter.Label(self) self.outputLabel["text"] = ("") self.outputLabel.pack({"side":"right"}) #Entry Space self.entrySpace = tkinter.Entry(self) self.entrySpace["text"] = ("") self.entrySpace.pack({"side":"left"}) #two convert buttons self.convertButton=tkinter.Button(self) self.convertButton["text"]= "Fahrenheit to...

Fix horizontal scrolling

Trying to fix horizontal scrollbar on the page I'm building, and can't figure out what might cause this issue... The issue appears only on max-width : 767px, where the width of the contentWrapper is off for some reason, causing horizontal scrollbar to appear....

Ninject 1.0 to 2.0 .Only

Hi I am following below link, I get error on line: kernel.Bind<IHttpController>().To<MyTESTController>() .Only(When.Context.Variable("controllerName") .EqualTo("CorporateRequirementsController")) .InjectPropertiesWhere(p => p.Name == "ActionInvoker"); I believe .Only is the syntax from Ninject 1.0, what is the equivalent in 2.0? The error I am getting is like this:...

Trying to Delete Message from List with Rails

So I have a simple list of messages that users can submit. I'm trying to put a delete button (that works) for each message. But as you can see here you get an error about an entirely different action if you click the button. I'm not totally sure about where...

Controlling a player using touch input on the mobile device

I am new to Unity, and was following the tutorials of roll a ball. I was to create it for both mobile and desktop and it is working but the only problem I have is that I am unable to create touch keys arrows(left,right,up,down) to control the player on the...

Extjs building form on metadata

I will build a FormPanel with ExtJs 4 configured by metadata received from server. The meta data (json array) looks like this: { "metaData": { [ { "allowBlank:": false, "fieldLabel:": "labelText1", "name:": "labelName1", "emptyText:": "null" }, { "allowBlank:": false, "fieldLabel:": "labelText1", "name:": "labelName1", "emptyText:": "null" } ] }, "success": true,...

Object is not a function (MVC Javascript)

When I run my app there is an error ` "Uncaught TypeError: object is not a function", source: file:///android_asset/www/js/controller.js (2) I have a class model.js : var posAttuale = { myLat : "myLat", myLng : "myLng", myComune : "myComune" }; and a class controller.js : var infoPos = new posAttuale;...

CMake simple MVC structure

I have a simple question about how to organize my simple MVC application in C++. I'm new to CMake and I'm just learning how to use it. Imagine a simple folder organization like the following: -Can someone please tell me if this structure is correct? -If so what is the...

Where and clause in codeigniter for voting system

I am implementing a voting system in codeigniter: The problem is that everytime a user clicks on upvote $this->db->set('up', 'up+1', FALSE); is executed and up is incremented by one. But it should only increment if count == 0. My Model code is : public function up_votes($id,$ip) { $query = $this->db->query("SELECT...

SimpleMembershipProvider WebSecurity.InitializeDatabaseConnection The login from an untrusted domain,database,exception,model-view-controller
I export the database to the server and i've problem. When I start application i see this error An exception of type 'System.Data.SqlClient.SqlException' occurred in System.Data.dll but was not handled in user code Login failed. The login is from an untrusted domain and cannot be used with Windows authentication. WebSecurity.InitializeDatabaseConnection("DefaultConnection",...

Formatting dates in an MVC Dropdown

I have a dropdown list on my page as so: - @Html.DropDownList("dd_dates", new SelectList(@Model.seasonDates), "Please Select") where seasonDates is an IList of dates. The problem is that when the dates are displayed in the dropdown they also have the time on them as well. How do I format the display...

bootstrap responsive navigation. Toggle button position

I'm working on a responsive template and I can not sort this out!!! So.... My header and navigation HAS TO LOOk like this in mobile screen: But I'm struggling because the natural behave of the navigation, as you see in desktop size: The navigation is the grey bar, so when...

ASP.NET Web Forms Switch from Site.Mobile.Master,mobile
I have an ASP.NET 4.5 Web Forms Application utilizing Bootstrap. I had a problem whereby Site.Mobile.Master was being utilized whenever the website was being rendered in Extra Small ViewPort. Since using Bootstrap I did not need this Site.Mobile.Master. I had implemented a solution that would cause Site.Mobile.Master to not...

Loopback passport mobile login

I'm developing an API with loopback and passport. I've seen this example, which is quite good: In the documentation, they say loopback follows this step to authenticate users via third party providers: A visitor requests to log in using Facebook by clicking on a link or button backed by...

How do you send data to controller with ajax.beginform?

This is my method on controller "sale" [HttpPost] [ValidateAntiForgeryToken] public ActionResult Create(Models.account account) { creaventa = new; //creaventa.account = cliente; creaventa.createdon = DateTime.Now; creaventa.idaccount =; creaventa.modifiedon = DateTime.Now; creaventa.status = 0; context.sales.Add(creaventa); context.SaveChanges(); // return "venta creada"; return View(); } and this is the partial view @model...

CI_Model not found in extending class

I can't instantiate my models manually on my controller using require_once, following is the problem: Controller <?php require_once './application/models/portion/portioncreatormodel.php'; class Payment extends CI_Controller { function sample() { $pc = new PortionCreatorModel(); echo 'OK'; } } Model <?php class PortionCreatorModel extends CI_Model { function __construct() { parent::construct(); } } When I...

rendering the partials in controller after the validation check

I have two partial views for two different sign up forms. On my home page , based on the link one clicks on, I'm rendering respective form.(views/application/index) = link_to 'Mentor', new_user_path(user_role: true), :class =>'btn' = link_to 'Mentee', new_user_path, :class =>'btn' In views/users/new.html.haml , I'm checking the user role and redirecting...

NullReference Error while assiging values of Modeltype in MVC View (Razor),razor,model-view-controller,model
I have the following MVC Model: Public Class Employee Public Property EmployeeID As Integer End Class Controller: Namespace Controllers Public Class EmployeeController Inherits Controller Function Details() As ActionResult Dim employee As Employee employee = New Employee employee.EmployeeID = 101 Return View() End Function End Class End Namespace View: @ModelType MVCDemo.Employee...

How to set :user_id with comment notifications?

Whenever a notification is created how can we set the :user_id for the user who made the comment (and in affect the notification)? When I check rails console for some reason all Notifications are showing up as user_id: 1 when some of them should be user_id: 2 since the latter...

How to show commenting user's id in notifications?

With a little help from my friends I got the user_id to set correctly for Comment & Notification: [2] pry(main)> Comment.find(8) id: 8, content: "test", goal_id: nil, habit_id: nil, valuation_id: 9, quantified_id: nil, commentable_id: nil, commentable_type: nil, user_id: 1, created_at: Thu, 11 Jun 2015 19:57:26 UTC +00:00, updated_at: Thu, 11...

Express get error

I am setting up routes to my application controller on a node server - var http = require('http'); var app = require('express')(); app.get('/<path>/<query type>', function(req, res) { //Expecting query parameter <query type>?name=<something> var query =; var path = '/<path>/<query type>?name='+query; var options = { host: 'localhost', port: 8080, path:...

MVC of a button to implement different types of button.Looping of the button element doesnot display all the elements in div

I want to implement MVC of a button. I have created a button using var btn = {btnElem : document.createElement('button')} ; now i want to inherit this button into different types of buttons like arthimetic or logical button. so I used this btn object to get the arthimetic button var...

Some doubts related this Swing MVC implementation. Opening a database connection should be a Controller task?

I am following a Java tutorial related to the implementation of the observer pattern (using Swing) and I have some doubts. My doubts are not related to the observer pattern but about the architecture of this tutorial application (that is based on something like an MVC logic) So it contains...

menu for mobiles no longer working

When I view this page for mobiles, the navigation menu no longer works.I don't know why because it was working before I put the image slider in . here is the html markup: <!DOCTYPE html> <html lang="en"> <head> <script src=""></script> <script src="assets/jquery.flexslider.js"></script> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider(); }); </script>...

How to show a dialog in SAPUI5 triggerd by the controller and not a view event? (Push notification)

In a SAPUI5 controller of a master view I trigger a request to read some data (async). This read will be done each time the page will be reached during navigation. onInit: function() { var that = this; this.getRouter().getRoute("PageName").attachMatched(this.onRouteMatched, this); }, onRouteMatched : function(oEvent) { ...; // this...

Efficiently sorting large arrays of people by their proximity to the user

So I'm trying to create a list of the 15 closest people in an array of varying sizes. The array will almost always be ~100 objects in size, but for the sake of testing, I'm trying to make it work with 10,000 (there may be need for the project to...

MVC - How to render a 'a href' link in a View that's been stored in a database?,,model-view-controller
Question background: I have an MVC4 app whos homepage data is supplied from a View Model. The Issue: Within the View Model I have a property called AboutUsDescOne This is set from the Controller and Action Method from data that has been retrieved from a database. Within the data set...

CKEditor 4.4.7 does not show up on any mobile browsers

I am creating an internal CMS for work, and it is important that all pages be mobile-friendly. When you view a page with CKEditor 4.4.7 installed from a phone, the editor shows up as a normal textarea and none of the HTML or text within it is properly formatted. I...

Mobile parallax with fixed background

I would like to know how to achieve the parallax effect in mobile devices with a fixed background. Is there any plugin available to achieve the same? I could see that background-attachment fixed not working on mobile. For eg: I need to achieve the same effect like the one in...

Unable to load tabbed pages with data

I have a task where I have to tab 3 different html pages under 3 tabs. All these pages load the grids with data as soon as user navigates to them. I am able to tab my html pages.There is a working plunkr of that. But the problem is...

Single page app viewport mobile using Foundation

I am using Foundation for a responsive website and have a problem with SOME mobile devices not properly scaling the viewport ONLY when you load another page via our ng-include. This loads new content into the page and the width of the page then breaks and requires horizontal scrolling. This...

Reading from database in Laravel 4

How can I get the image url stored in my database and render it on the page in laravel 4?

Deleting a view and onclick opening it again, as if it is new - SAPUI5

I have a multiple View setup, a main View and then modules who are opened on button click after certain actions. Right now the view is reset by me whenever its opened, but what I want to accomplish is, when the view is left, that its gone from the core...

link_to_remove_association is not removing?

How can we fix the nested_attribute: _result_fields.html.erb so that when a user clicks "Delete" that it actually deletes it? Whereas now clicking it does nothing. <%= f.text_field :result_value, class: 'form-control', placeholder: 'Enter Result' %> <%= f.date_select :date_value, :order => [:month, :day, :year], :with_css_classes => true, :class => "date-select" %> <%=...

How to select multiple selected value from select option

My controller code looks like $scope.items = [{ heading: 'Sports', types: [{ name: 'Football', }, { name: 'Persie', }, { name: 'Ronaldo', }, { name: 'Messy', }], id: '1' }, { heading: 'Cricket', types: [{ name: 'Tendulkar', }, { name: 'Lara', }, { name: 'Ponting', }], id: '2' }]; My...

Which could be the cause of a variable not being printing in an HTML template called from another PHP class?

I'm developing the base of an MVC project in PHP. I'm advancing with the View part, but something is now working as expected in the rendering of the HTML template. Here are some contents of the files I'm coding to make this work: my_project_root/views/templates/humans_list.php <!doctype html> <html> <head> <meta charset="utf-8">...

Variable price for mobile app for various countries [closed]

Can I provide a different price (not just a converted currency) for my app for different countries stores? p.s.1 I want to do this for apple's app store and google's play store. p.s.2 I don't want to upload a separate app for each country's store. I want it to be...

Disable a Tab in angularjs

I have created a demo at plnkr. I want to disable a particular tab say migration, I tried by writing disabled: true but it doesn't seem to work. html code: <!doctype html> <div ng-app="TabsApp"> <head> <script src=""></script> <script src=""></script> <script src="example.js"></script> <link...

Avoid long-tap behaviour on mobile devices while pressing a button

In my HTML there is a button that can be short- and long-clicked. If you click on it shortly (like on every other button) it executes a given callback function. When you keep pressing the button the callback will be repeatedly executed until a mouseup or mouseout event is detected....

My background isn't appearing on some mobile browsers

I know there are a few other similar posts to my question so apologies for that. I've tried out all the solutions that were offered in those posts before posting. I have a table on my page that has a background image using css. html { width:100% height: 100%; margin:...

Controller class contains too many methods [closed]

I am currently maintaining an application where unfortunately we have ended up in having too many Action methods. On top of this the architecture of this project is not fair from the beginning and every developer continued adding Business logic in the action methods of the Controller class instead of...

Sharing controller between views

I have a frame which holds 2 views. I want to use a common controller for both of them but not instantiate 2 controllers. How do i achieve this? Singleton? Send the controller as an argument? Note, the controller will hold temporary data (bad idea?) that will be sent away...

Play Scala activator compile command shows value userid is not a member of[models.Changepas sword]

I am new to play framework(Scala),In my project I need to update new Password for this I need to get user id which is Primary key for that user table. Based on this unique user id value i will update Password. What I need need to get user table's user...

return first element from array as computed property from Ember controller subclass

I am trying to return the first element of my array as a computed property to my template from my controller. My code is below. I am 100% about my array and template. Problem is my syntax about in the controller. Basically my array is works made of Work objects....

On rendering from controller, current_page method does not seem to work

I have a navigation bar included in application.html.erb. Because for some pages, such as the signup page, I need to place additional code inside the navigation bar, I have excluded those pages for showing the navigation bar through application.html.erb and instead included it in their respective view pages. See code...

Raw Database content showing up in Rails View

You can see here that it seems like the raw contents of my DB are being printed to the page. I can't see anywhere in my code why there would be the raw output of the db printed to the view. Here is the code for the index view: <div...

in ActiveRecord::Relation, is it preferable to scope by parent in the model or set @parent in the controller

I have a class which belongs to another. course.rb class Course < ActiveRecord::Base belongs_to :school I currently use a before_action to set the parent instance in the controller. courses_controller.rb class CoursesController < ApplicationController #returns @school. only: [methods] avoids trying to set @school when no school param expected before_action :set_school, only:...

Rendering Error with Devise and Mobylette

I am using Mobylette with Devise on my Rails 4 app. When I try to sign up, sign in, or reset my password on my mobile device I get this error: ActionController::MissingRenderer (No renderer defined for format: mobile) Has anyone else had this issue? I've tried setting up a fallback...

remote data fetching inside model object in objective c using AFNetworking

In all of my iOS application I use this approach to respect MCV, I want to be sure that my implementation is correct and respects the best practices and the MVC design pattern : Singleton of AFNetworking acting as API for network calls: MyAPI.h : #import "AFHTTPSessionManager.h" #import "AFNetworking.h" @interface...