Tips for single JQuery page supporting both Desktop and Mobile?

Question

I currently have a site that hosts a page that I want to both serve desktop and mobile browsers. The desktop design and implementation is already completed and uses JQuery.

I'd love to have this page to use a different layout when a user visits on a mobile browser that is supported by JQuery Mobile.

I'm trying to figure out the best way to do this but can't seem to find information on best practices for this. All the existing documentation/guides I can find on this assume that the jQuery page you're writing is exclusively supporting mobile browsers so doesn't address formatting for desktop.

Options that seem obvious:

1. Same page but just additional markup on top of existing content to reformat for mobile
2. Same page but with addtional markup that duplicates the existing content, but is formatted for mobile. If desktop browser, the non-mobile content is hidden/not rendered.
3. Some dynamic detection of mobile vs. non-mobile then route between 2 different pages (desktop vs. mobile)

I think #2 is probably the easiest, but I don't like the idea of duplicate content in the page. #1 seems unrealistic to think that I can just augment my existing content with a bunch of markup to magically have it format for mobile (while still supporting desktop).

I'd appreciate any tips and pointers to any guides that might exist that talks about best practices.

Clarification: Assume I'm not using Rails, ASP.NET MVC, etc.

Answer 1

CSS Media Queries are great for this. (beware, they're CSS3) based on the size of the viewing agent (and it updates dynamically!) certain content can be hidden or displayed, making it basically a morph of your options #1 and #2. You'd have a big full featured layout for desktop, with it's styling and jQuery, and when the screen is small (meaning it's a phone or a nerd resizing his browser) you hide some of the more detailed stuff and restyle a few things and maybe display a few other things. Read about Media Queries here: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html EDIT: Just to clarify, you can completely customize elements with media queries, so, at desktop size, a div might have a dotted border, rounded corners, 10px padding, etc., whereas on the phone the div has 1px padding, solid border, etc.

Answer 2

I'm sure you're way past this issue, being that this question is a couple of months old, but I thought I'd offer what I'm working on for the same type of issue.

Problem: I want a site that is acceptable on mobile devices, tablets, and large and small desktop screens.

Solution:

• CSS Media Queries are the obvious choice to let the page scale and "respond" to the user's viewport. There's a huge push right now and some interesting talks regarding responsive design, responsive images, etc. I'm designing for mobile first (another push) and using media queries to change layout/viewable content as the screen gets larger.

• The big problem then comes in with JavaScript. If I use a mobile JS framework, then that will be included with my desktop version as well - not ideal. If I use jQuery on both, then I get a lot of extra bandwidth in my mobile version that I'd rather not have. I've decided to use Modernizr to allow me to load scripts based on screen size with Modernizr's new media queries test. This has allowed me to keep one page and serve it to various screen sizes without sacrificing quality for mobile/tablet/or desktop. A simple modernizr media query check is below:

if (Modernizr.mq('only screen and (max-width: 480px)')) {  
    Modernizr.load('/mobile.js');  
} else if (Modernizr.mq('only screen and (max-width: 768px)')) {  
    Modernizr.load('/tablet.js');  
} else {  
    Modernizr.load('/desktop.js');  
}