Mobile responsive design web design is the new standard. Even Google has announced that they prefer responsive design and weight it as a ranking factor. Sites created with responsive design tend to load slower on mobile devices, however, as they often download both desktop and mobile resources, even though only mobile resources are shown.

Recently read a few excellent articles that discussed this problem. One pointed to a few great methods to selective download content for mobile devices using CSS and media queries.

Here they are:

http://cloudfour.com/examples/mediaqueries/image-test/#t3

http://cloudfour.com/examples/mediaqueries/image-test/#t5

Here’s the original article that referenced these.

http://www.bypeople.com/responsive-design-problems/

Another article mentioned using JavaScript “Window MatchMedia” to conditionally load content. I thought this could be great, especially because it doesn’t rely on JQuery, however, doing actual testing proved that it actually ran much slower. 

http://jsperf.com/matchmedia-vs-jquery-width

I’d be very curious to hear what others have experienced on this. Respond in the comments below.