What's the most efficient way to hide content for a mobile version of a site?

Question

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 recommendations for how to benchmark this?

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

Answer 1

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).

Answer 2

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.

Answer 3

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 computer 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.com or http://mobile.myapp.com. 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-compliant 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.

Answer 4

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 commands in a SCRIPT tag at the end of the BODY tag.