Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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 isn't very easy to work with - I can't just change the CSS.

Is it considered bad to detect the browser size and make the CSS changes with jQuery?

E.g.:

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}
share|improve this question
7  
You should consider to use Media queries instead because it's a recommended standard by W3C since June 2012. –  Zistoloen Apr 8 at 11:09
    
You mean to change style sheets? I thought that too, but I would still have to alter a lot of elements –  MeltingDog Apr 8 at 11:10
    
Yes. In any case, I think you will have a lot of CSS changes. –  Zistoloen Apr 8 at 11:13
2  
The sentence "I have been tasked to update a site to make it responsive" shouldn't be followed by "I can't just change the CSS" –  Francisco Presencia Apr 8 at 19:54
4  
everything needs more jQuery (Disclaimer: do not take this seriously) –  Darkhogg Apr 8 at 21:56

5 Answers 5

up vote 12 down vote accepted

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: http://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; 
        ...
   }
share|improve this answer
    
From my experience responsive design can be done with only css. As soon as your design also needs to become adaptive, you probably also need some Javascript. Keep in mind you want to keep the javascript as minimal as possible. –  Marco Franssen Apr 8 at 13:46

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.

share|improve this answer

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

  1. 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');
  1. 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.
share|improve this answer
    
The questioner mentioned "Responsive web design" (en.wikipedia.org/wiki/Responsive_web_design), which refers to designing for different screen sizes and capabilities. While it's not specific to phones, this was a huge factor in bringing this technique to the forefront. –  Jacob Hume Apr 11 at 17:40

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.

share|improve this answer

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.

share|improve this answer

protected by dan Apr 11 at 6:10

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.