title: Responsive Development - Don't load 'id' instead of display none
body: <p>Recently I have seen some really cool mobile responsive websites that look perfect from a UI standpoint, then when the browser is scaled to desktop size it looks perfect also.</p>
  
  <p>When I have developed starting with a mobile first approach my desktop layout always lacks content because it was built with a mobile first approach.</p>
  
  <p>So for example take a look at the Land Rover website: <a href="http://www.landrover.co.uk/index.html" rel="nofollow">http://www.landrover.co.uk/index.html</a></p>
  
  <p>As you can see the mobile website is completely different to the desktop site. They have a video that loads on the desktop but not the mobile dimensions.</p>
  
  <p>If I don't want to display a certain section within my mobile dimensions such as a navbar that has a HTML structure that I could not style for the mobile I usually use a media query to display none on that section. The issue with this is that it still loads and if you do this to many elements on a page it soon makes your mobile layout quiet heavy as it is loading content that it wont use.</p>
  
  <p>So my question is how do I stop certain elements loading until the browser has been scaled up or down? I can see that Land Rover stops their Video's from loading when you scale down the browser however when you scale it up the video loads.</p>
  
  <p>I'm sure this is probably done with JS however I am unsure what is the best practice?</p>