: Is it OK to use jQuery for responsive web design? I have been tasked to update a site to make it responsive and appear correctly on smart phones. Unfortunately, the site in its current form

@Harper822

I would say try using media queries first. One method I found easier when dealing with a design that was originally only for desktop was this:

Start with two separate stylesheets. One for the new responsive design, and the other for the old desktop version:

<link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 960px)" href="css/desktop.css">


All the old styles can be contained in the desktop.css. Meanwhile you can start from scratch in the mobile.css. You may find you can make a nice single column layout in that mobile CSS that works for tablets as well.

This approach lets you have a fresh start and you can style specifically for just the mobiles and tablets and not have the desktop styles coming through and overriding stuff. You can hide/show/position elements as required just for mobile.

If you really need to alter the desktop code to make it work with mobile and desktop you can refactor the markup. Alternatively if you find you can't realistically refactor the HTML for both the responsive and mobile versions you can put a class on the desktop code e.g. class "desktop" and use CSS in the mobile version to hide it. Then write some new HTML for that section and give it a class="mobile". Then style it accordingly in the mobile.css and hide it in the desktop.css.

Vote Up Vote Down

@Candy875

I worked on a site that used that method, and I had problems with screen rotation on mobile devices. Since JavaScript will only detect once on page load, if the user rotates the device it won't expand to the full width the way it will with media queries. It was easier for me at the time just to switch to CSS, but perhaps a JS expert would know if there's a way to detect a change in viewport width. It seems like there should be a way with AJAX but I'd be willing to bet anything you found would be overkill as far as performance goes, like megasteve describes.

Vote Up Vote Down

@Kristi941

Responsiveness and "appear correctly on smart phones" are completely different tasks.


Presumably, responsiveness refers to eliminating--where possible--extra round trips to the server. Error checking, Ajax to retrieve requested data, and dynamic DOM manipulation are the tasks that typically improve responsiveness. The use of JavaScript (or JavaScript framework) is an effective way to do this. Over the last few years I've moved from JavaScript to jQuery for these implementations. In many cases jQuery has built-in browser compatibility which has obvious advantages. The plugins for datepicker, autocomplete and menus save hours of development.


It should not be the main source of styling. That's the job of CSS. However, the two can be used together effectively. In a simple example, text may be styled differently depending on the results of some action. jQuery can be used to change the CSS defined class.

$('#result').removeClass('red').addClass('green');



It's tempting to try to re-use a standard page for mobile by dynamically changing the styling. My experience is that it provides an unsatisfactory solution. The CSS is completely different and different client side scripting is required to take advantage of the mobile features. My preference is to create separate dedicated HTML pages rather than one page requiring logic to select the styling or functions to be used.

Vote Up Vote Down

@Margaret670

We used to used the popular 960.gs css framework for our sites.

We wanted to make it responsive.

Someone had made a JS based responsive plugin for the 960 gs so we thought hay why not just use that as we would not have to make any changes to the structural site templates.

It worked but was laggy in most browsers including the good ones. You would typically get a 'flash of un-styled content' that would vary greatly depending upon page complexity.

Despite the JS solutions working they are not ideal, CSS 3 media queries are the best choice if possible. In the end we just re-did our site templates using Twitter Bootstrap which was very good fit for our needs.

Although it might be apealing to take short cuts it often works out being more time consuming / painful in the long run.

Vote Up Vote Down

@Reiling115

Sure. Obviously, it would be better to use CSS alone but if you can't, use what you have. Do as much as you can with CSS and use JS as needed. Not sure why you can't change the existing CSS but you can add a style sheet with JS.

(function() {
//create a new element
var newStyle = document.createElement("link");

//set the required attribute for a valid css file
newStyle.rel = "stylesheet";
newStyle.href = "http://example.com/the/location/of/your/css/stylesheet.css";

//and then append it to the <head>
document.getElementsByTagName("head")[0].appendChild(newStyle);
})();


Source: christian-fei.com/add-stylesheets-after-the-head-using-javascript/
then go nuts with CSS/media queries.

Or with jQuery:

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');


I've done responsive 'skins' where some stuff just wasn't possible to do without changing the DOM. If you don't have access to the HTML, JS DOM manipulation is sometimes the only answer.

EDIT:
Depending on the visual requirements of your small screen version you might be surprised at how far this CSS snippet will get you along the way to 'mobile friendly'.

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
float: none !important;
max-width: 96% !important; /* breathing room on the sides */
margin-left: auto
margin-right: auto;
}


If the original CSS developer was overly fond of !important and you can't get to the HTML you can use jQuery/JS to add an ID to the body or high level container and add that to your selector.

#i -will-beat-you-important div,
#i -will-beat-you-important p,
#i -will-beat-you-important ul {
float: none !important;
...
}

Vote Up Vote Down