I'm working on a mobile version of a large site. There's a lot of content from the full site that's not needed for mobile.

What is the best way to hide this? i.e. What will cause the least amount of work for the browser, so it stays responsive?

• CSS display:none

• jQuery's .remove() method, for example (not tested):

  var elements_to_remove = [
    '#sidebar',
    '#footer',
    '#etc'
  ];
  
  $.each(elements_to_remove, function() {      
    if ($(this).length > 0) {
      $(this).remove();
    }
  });
  

The advantage I can see for .remove() is that the elements are actually removed from the DOM tree, reducing memory usage.

For the jQuery route, is there a better event to hook on to before document.ready? (i.e. while the DOM tree is being made).

Also, any remendations for how to benchmark this?

Update: Providing a custom mobile version is not an option, it should work with the existing content / be 'responsive'.

I'm working on a mobile version of a large site. There's a lot of content from the full site that's not needed for mobile.

What is the best way to hide this? i.e. What will cause the least amount of work for the browser, so it stays responsive?

• CSS display:none

• jQuery's .remove() method, for example (not tested):

  var elements_to_remove = [
    '#sidebar',
    '#footer',
    '#etc'
  ];
  
  $.each(elements_to_remove, function() {      
    if ($(this).length > 0) {
      $(this).remove();
    }
  });
  

The advantage I can see for .remove() is that the elements are actually removed from the DOM tree, reducing memory usage.

For the jQuery route, is there a better event to hook on to before document.ready? (i.e. while the DOM tree is being made).

Also, any remendations for how to benchmark this?

Update: Providing a custom mobile version is not an option, it should work with the existing content / be 'responsive'.

• javascript
• css
• performance
• mobile

• 10 It's better to not to do any of this, but to render a mobile version of the site where the unwanted content isn't even in the HTML. The platform your targeting has the least horsepower and bandwidth, it's better on both to not send the content and not run extra scripts. – Nick Craver Commented Jul 6, 2010 at 11:40
• 2 For your update: With respect to your available options, you want to send a 50kb page that runs additional script and have it respond on a mobile device like a 10kb page with no script...you can't have your cake/eat it here, if you want the performance, you need to avoid sending all the unused/wasted content to the client in the first place. – Nick Craver Commented Jul 6, 2010 at 12:10
• I should have said that a custom mobile version is not an option in this case, updated the question. – meleyal Commented Jul 6, 2010 at 12:11
• There is someone telling how conditional load images here: stackoverflow./questions/6844020/… – user866616 Commented Jul 28, 2011 at 2:40
• I'd re-iterate the point that even if you can't produce a mobile specific version you should at least customise towards mobile in the initial design. Taking an existing site and making it work on mobile may be possible but is it going to be usable (both in UX and speed terms)? – Andy Davies Commented Nov 28, 2011 at 9:33

5 Answers 5

The most efficient way will be to not include the content on the page in the first place.

Mobile users will thank you for not wasting their data tariff with elements that are not shown on the page and will be happy if they don't need JavaScript in order to view the page correctly.

Both HTML and CSS provide ways of doing this without JavaScript.

As per the above link, you can specify different stylesheets for different devices using:

<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld"/>

Or if you want to use a single stylesheet:

@media screen { /* rules for puter screens */ } 
@media handheld { /* rules for handheld devices */ }

or with @import:

@import "screen.css" screen; @import "handheld.css" handheld;

A mobile portal is probably the best option since mobile users likely have different surfing patterns and different uses (are looking for different info, using different features, etc.) for the site. But if you want to maintain a single portal, then just make use of what is already provided in the HTML and CSS specifications.

Note: If you're adhering to the MVC design pattern, then it should be relatively easy to build a single application and render different Views to the user depending on whether they access the site via http://myapp. or http://mobile.myapp.. This means your Controllers and Models stay the same, and you just need to create separate views for the parts of the app that mobile users will access. The same technique would be used for generating RSS feeds or implementing a REST API.

Edit: The issue of newer non-pliant mobile browsers is a bit tricky. On the one hand, the reason they render both spreadsheets is because they felt that web devs were dumbing/stripping down their sites too much for mobile users (for good reason, as many older, less advanced mobile browsers are still used), and mobile browsers are catching up to desktop browsers in rendering capabilities. But OTOH, the resolution difference and screen size is still an issue.

So what I would do is use 2 sets of spreadsheets, but design for 3 sets of users:

• desktop users: loads screen.css only
• new mobile users: loads screen.css and handheld.css
• old mobile users: loads handheld.css only

The cascading nature of CSS means that, with some careful testing, you should be able to cater to all 3 demographics. There may be some browser-detection tricks that you could apply, but that doesn't seem necessary.

If you are developing for mobile, your first priority is to reduce bandwidth. The responsiveness of the site on mobile is usually less dependent on how fast it is rendered, but by how fast it is loaded (without even mentioning that users often pay for traffic).

On a related note - keep in mind the smaller screens on mobiles. It often makes sense to make a lighter site (both in bells in whistles and in content per page).

Given the case where the content for mobile is much smaller than the original version, it is a good idea to not share code as much as possible. Put your code in a seperate folder for the mobile app. You don't state how small is small, but it may be worth your while to do this even if it means a smalll amount of duplication.

Sometimes it is better to be pragmatic rather than follow to the letter a set of rules, such as DRY.

A very fast way to add or remove HTML is to use innerHTML, something like:

node.innerHTML = '';
node.parentNode.removeChild(node);

And you can place these mands in a SCRIPT tag at the end of the BODY tag.