The way to adapt content to mobile

Question

I create a site and want to make it mobile, I see that people are talking about a very, very old technology, but everything looks like going to a web-based mobile experience.

I see people talking about frameworks] for mobile web development, and also a friend told me about (werfl) (' http://wurfl.sourceforge.net/java/wall.php ) to detect mobile functions and create a suitable file css performing content adaptation.

I see people defining three or four css files and using media queries to match the screen size to the screen size with a fluid fluid design, someone told me that you cannot create one content because the stream is different on the Internet and mobile phone, but can’t understand why!

I need to know if there is any css trick to make one page (upload) some images in the desktop plugin and (do not upload) / (upload another) on a mobile phone in a progressive way, but someone here:

What is the most effective way to hide content for the mobile version of the site?

says that with CSS tricks, the images are hidden, but are still being requested from the server.

Do you really need a mobile url version for the same content?

I will build using asp net mvc and IIS / ASP / ASP.net: how to structure a website to publish a mobile version , it is recommended to use different views.

It's necessary?

Im really new to mobile development and need advice on the best method to create a mobile version of an existing MVC website.

thank

Answer 1

Since you are using MVC, I would highly recommend using jquery mobile. I recently worked on a project using MVC, Razor, FiftOne.Foundation and jquery mobile. Using razor views, you can change the displayed view by detecting if the browser user agent reports that it is a mobile device. This way you do not need to change the urls. MVC just displays a different view.

I need to find the tutorial that I found and post a link to it

edit: Found: Using 51Degrees.Mobi Foundation to accurately detect mobile browsers on ASP.NET MVC 3

Answer 2

The fastest and easiest way is to download jquery mobile scripts

http://jquerymobile.com/

have a layout for mobile devices that will have the correct css, and then create separate views or use JSON to populate your content. which will work more or less on most phones.

you just need to determine if the mobile platform will be redirected accordingly

(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile'); 

created at http://detectmobilebrowser.com/ but not verified.

This is your fastest and probably reliable method, but I’m sure that opinions will differ and this, of course, is just an opinion.

Answer 3

To upload a conditional image, use it:

 #elid_01 { height:30em; width:30em; background-image:url(http://www.mysite.com/img_01.png); } #elid_02 { height:30em; width:30em; } <div id='elid_01'>it load image</div> <div id='elid_02'>it dont load image</div> 

about liquid layout there is an example here

Answer 4

When using the @liquidlay method, take care of viewing. There is a quirksmode of a very good explanation for the viewport meta tag.
Remember to check your CSS-enabled site in your browser, with this Firefox extension you can do it.
I believe that your target does not use [Feature phone], but [smartphone] or something is better than css.

Answer 5

If you do this using Asp net MVC, you should see Microsoft's recommendations for mobile devices with MVC here .
There is another question about mobile here .