Way to do content adaptation to mobile

Question

I creating a site and want turn it mobile ready, i see people talking about very very old technology but everything looks walking to an web mobile experience

I see people talking about frameworks] to mobile web development, also a friend told me about (wurfl)('http://wurfl.sourceforge.net/java/wall.php) to detect mobile features and build an apropriate css file doing content adaptation.

I see people defining three or four css files and using media queries to match device by screen size with responsive fluid design, someone told me that you cant create one content because flow is different in web and in mobile but cant see why!

I need to know if there is some css trick to make one page (load) some images in desktop plataform and (dont load)/(load another) in mobile in a progressive enhancement way, but someone here:

What's the most efficient way to hide content for a mobile version of a site?)

is saying that with css trick images are only hidden but are still requested from the server.

Is really necessary an mobile url version to same content ?

I will build using asp net mvc and IIS/ASP/ASP.net: How to structure web-site to expose mobile version recommends using different views.

Is this necessary ?

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

Thanks

Answer 1

To conditional image load 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 2

When use method of @liquidlay take care with viewport.
There is on quirksmode a very good explanation about viewport meta tag.
Dont forget test your site with css support disabled in browser, with this firefox extension you can do it.
I believe your target dont use [Feature phone] but [smartphone] or something better then css is really enought.

Answer 3

quickest and easiest method is to download the jquery mobile scripts

http://jquerymobile.com/

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

you then need to just detect if mobile platform and redirect 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\/|\-[a-w])|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 tested.

thats your quickest and probably robust method, however i am sure opinions will differ and this of course is just an opinion.

Answer 4

Since you're using MVC I would highly recommend using jquery mobile as well. I've recently worked on a project using MVC, Razor, FiftOne.Foundation and jquery mobile. Using razor views you can change the view being displayed by detecting if the browsers user agent reports that it's a mobile device. This way you don't have to change URLs MVC simply renders a different view.

I'll have to look for the tutorial I found and post a link to it

edit: Found it: Using 51Degrees.Mobi Foundation for accurate mobile browser detection on ASP.NET MVC 3

Answer 5

If you are doing it with Asp net MVC you should see the Microsoft guidelines to mobile with MVC here.
There is another question about mobile here.