CODEWITHSUNDEEP
phphtmlcssmobileresponsive-design
Adrian
Adrian

Reputation: 2012

alternative to display:none for mobile

Im currently building a practice responsive website, what I am doing is taking an exising website, building it up using twitter bootsrap js and css, meaning it will be fully responsive for mobile.

The issue is that there are some large carousels and images on the site. Ideally I would like to just completely remove certain elements, like a carousel for instance, and instead have the options within the carousel as a standard list menu.

It seems the main option is display:none based on media queries, but I am starting to foresee that I will run into big problems for loading time if the entire desktop site is still going to be loaded on the mobile, only elements hidden.

Are there ways to completely exclude html based on browser size? If anyone has any good links or articles that would be great. Or even just opinions, on whether there is actually need to exclude html or not.

Thank you

Upvotes: 1

Views: 621

Answers (4)

justinavery
justinavery

Reputation: 2596

First off it is really good to see that although you're talking about display:none; you actually still want to display the content without the bells and whistles of the image. Well done you.

The next thing I would look at is if you don't want to load images for a mobile then why are you adding it for the larger sites. If the image isn't providing a function, assisting in explaining the content better, then why not just drop it for the desktop size as well?

If in fact it does help tell a story then you can include the images and some of the popular image services like adaptive images, hiSRC, or PictureFill which will serve the mobile version of the image first and replace with a larger image at higher viewports (but remember, there's no bandwidth test).

Finally, if you do want to serve some different content, then take the advice of fire around including more content with ajax. The South Street toolbox from Filament group can help you out, pay particular attention to the AjaxInclude pattern (it also has a link to the picturefill).

Upvotes: 2

Evgeniy Chekan
Evgeniy Chekan

Reputation: 2655

You could consider storing heavy data JSON-encoded, and then creating elements and loading them on demand like so 

var heavyImage = new Image();
heavyImage.src=imageList[id];

Then you can append image element to a desired block. From my experience with mobiles this is more robust than requesting <img> via AJAX, since AJAX could be pretty slow sometimes.

You may also 'prefetch' images with this method (like 2-3 adjacent to visible at the moment), thus improving UX.

Upvotes: 2

Idrizi.A
Idrizi.A

Reputation: 12010

If you want you can use visibility:hidden, or if you use jQuery you can use 

$(element).remove() //to remove completely
$(element).hide() //to hide 
$(element).fadeOut(1) //to fadeout

Upvotes: 0

fire
fire

Reputation: 21531

You could pull in the heavy elements via AJAX so they wouldn't sit on the page initially, making it load faster. You could decide to do the AJAX call only if the screen size is larger than X.

Upvotes: 1

Related Questions