12

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 
}
Improve this question
7
  • 7
    You should consider to use Media queries instead because it's a recommended standard by W3C since June 2012.
    – Zistoloen
    Apr 8, 2014 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, 2014 at 11:10
  • Yes. In any case, I think you will have a lot of CSS changes.
    – Zistoloen
    Apr 8, 2014 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, 2014 at 19:54
  • 4
    everything needs more jQuery (Disclaimer: do not take this seriously)
    – Darkhogg
    Apr 8, 2014 at 21:56

5 Answers 5

Reset to default
13

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; 
        ...
   }
Improve this answer
1
  • 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
    Apr 8, 2014 at 13:46
4

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.

Improve this answer
3

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.

Improve this answer
2

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.
Improve this answer
1
  • 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, 2014 at 17:40
1

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.

Improve this answer

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