- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘Other’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi guys
I am about to create my first ‘mobile-first’ website and am unsure on the best way to conditionally load content as the viewport increases.
For example, lets say I wish to load a twitter feed only for desktop browsers, not mobile, how would I do this?
Option 1) Display: none – This is bad as content still loads for mobile
Option 2) Have content in markup, but remove.element with javascript – I believe this content still loads first, then is removed after? If so, not good.
Option 3) Using javascript, if viewport is wide enough, load content – This seems to be the recommended approach, from what i’ve read, but Is it a good idea to have markup in javascript? I am thinking about accessibility, semantics and seo.
Any advice would be greatly appreciated.
I’m not exactly a JS expert (basically a n00b really) but is there a reason why the content could be already sitting as a separate HTML ‘slug’ sitting on your web server waiting to be injected when the browser hits a certain width?
HMTL markup isn’t in the JS, it’s a div id on a ‘separate pgae’ waiting to be injected….if that makes any sense.
@Paulie_D – Of course! So when you conditionally load content in javascript, all you do is an ajax call to load in that snippet? This could be the missing piece of the puzzle I was after.
The reason for this is let’s say I wish to display a latest tweet on the webpage. This obviously needs javascript. It’s just a small addition in the footer which doesn’t really need to be served to mobile users, so would rather not serve that to them, especially as social API’s tend to slow down pages.
I was also asking as a general technique as I may wish to use this elsewhere.
Thanks again for your help