Rails 3.1+ way to serve both mobile & desktop clients - ruby-on-rails

What the going "best practice" for serving both mobile & desktop browsers from a Rails application?
I'm not talking about custom apps on the mobile side but, mainly (entirely?!?), mobile Webkit.
I watched Railscast 199 which shows a technique of rendering and returning different views depending on whether the browser is mobile or not. Wondering if this is still preferable? What about just offering different CSS (assuming the content is largely the same)? Ideally the solution could take advantage of one of the mobile JQuery libraries (JQuery Mobile, JQTouch, Sencha Touch, etc.) How would things be handled through the asset pipeline?

Since you mention mobile Webkit, I think using CSS3's media query to adapt various devices would be a good choice. Here are some blog posts that are related:
Responsive Design with CSS3 Media Queries
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

Mobile_fu is still a great way to do it.
You'll need a separate layout file. For my apps which serve up both versions, I have separate JS and CSS folders at /assets/application & /assets/mobile.
I've had good luck with JQuery Mobile, but I've heard good things about Sencha too so that's probably personal preference.

Related

Need help on the Need of Responsive website

I have created a fully functional good looking website but it is not responsive as of now, I tried to make it responsive but the code is not developed that way.
So Now I am thinking to go for an alternative. i:e Jquery Mobile.
So there will be two websites one is for desktop and one is for mobile device(to be coded newly in jquery mobile). Whenever user visit with any mobile device, I will redirect the user to the mobile version.
So I just wanted to confirm if it could be the good practice or not. Will it impact SEO or Would there be any problem for the website in future if I go that way?
I have several sites that use jQuery Mobile and they all rank well and pass the Google Mobile Friendly Test, so I don't think you need to be too concerned about SEO being affected if you have two sites.
Having standalone mobile sites does have some advantages, for example you can make the page weight of your mobile sites lighter without any complicated javascript.
One to the downsides is that you'll have two versions on the same site to maintain. The only reason I still have some jQuery Mobile sites is that they are older and were designed before responsive web design was cross-browser reliable.
So I just wanted to confirm if it could be the good practice or not?
You can go either way. I found jQuery Mobile easy to implement and it has been very reliable and low maintenance. Personally I go for responsive design now, but I'm sure you'll find plenty of developers that prefer using standalone mobile sites and jQuery Mobile.
Good luck!

How to make My MVC4 application to mobile /tab compatibility?

Its my basic question, but I think it is worth it. I have MVC4 application which is working absolutely on my PC/laptop browser. What next to do work in mobiles/tab also? The application has all latest Jquery, bootstrap, HTML5 and Razor engine code.
Will same application open mobile browser in smaller size? How to make to work?
There are three alternatives.
You can create a native mobile application (IOS, Android and so on) for your web application. Assuming you want to stick with your current app, this choice is useless for you.
There are frameworks such as jQuery Mobile that enables you to write views for your web application that are used in when your application is accessed via mobile devices such as tablets and phones.
Last option is using responsive design techniques. This is especially good when most of the content on the pages are static. If you have used bootstrap, as far as I know, it is a front-end framework that is responsive. In that case, you do not need to do anything.
You can test your application behavior using Chrome developer tools (F12). Just go to settings in developer tools and override the device metrics to resolution you want to test. It should do the trick.
http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-803T?ocid=aff-n-in-loc--hr
You have all u want here in above link...

Single Page Template and Multipage Templates in jquery mobile and their processing speeds?

I am having concerns with html5 based mobile Apps.
In jquery mobile I have seen some of the multipage templates which are working good on chrome as a webpage but if i consider mobile Apps single page templates works good but so many lines of code in one html file is very much hard to understood.
Is there any tool that can bind multiple HTML files in a single file which helps in fast processing?
also which are the best practices that i can follow as to handle these issues.
Hi I'm trying to make sense of your question and I think you should probably go with something like http://www.codiqa.com/
There you can use a GUI to build jQuery Mobile apps.
They have a 15 day free trial (formerly 30), so you can check it out before you decide.

Sencha touch vs Dojo Mobile vs jQuery Mobile?

I've read the Sencha Touch docs. I feel its MVC model is very attractive but it seems to has a long start-up time, especially with external JavaScript (eg:map).
Although I'm comfortable using jQuery in a web site, I have concerns about the maturity of jQuery Mobile. (I haven't tested it yet)
I have no idea about Dojo's mobile framework.
Which of these alternatives do you like? Why?
So what exactly are you requirements? Each framework has different several advantages and disadvantages....
Me personally I use Jquery Mobile, which is now at it's first official release. Don't let version numbers fool you, this has been developed 1 year long and actually works pretty good!
The others provide different capabilities:
sencha is based on javascript controls - you create the whole layout from within javascript using JSON notation for properties/actions/events
jqm allows you to use your "standard" HTML and enhances it "auto-magically". In my opinion this is the closest to HTML you'll ever get
Dojo is more about MVC and allows a more structured environment. Haven't used it personally so I can't say too much about it...
Hope this helps

javascript framework for ipad safari browser and desktop web browser

i am in the process of selecting a technology for building an application which would be targeted on the ipad safari browser or the normal desktop web browser. I am leaned towards YUI since it has mobile support and custom libraries. i am not going for DOJO since it doesnt support addition of custom features on their libraries and not GWT because it is a single page application which causes the flow between pages very slow. any ideas are welcome
I would go with jQuery mobile.
Sencha Touch uses all the latest doodads in webkit, and if you're only looking at Apple OS's you would be insane not to look at it as a framework - but then again, I do work for Sencha. In addition to the aforementioned JQuery Mobile, you should also take a look at jqTouch if you want to stick with a markup based approach. (BTW, there's nothing inherently slow about an SPA. A well programmed SPA should be lower latency than a page-driven one.)

Resources