Take the 2-minute tour ×

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.


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.

Are there any other better solutions?

Any advice would be greatly appreciated.

share|improve this question
add comment

2 Answers

You might want to check out Modernizr . It's easy to install and you can use it check for HTML5 support in a visitors browser, as well as the window width, for example:

if (Modernizr.mq('(min-width: 400px)')) {
 /* do this for tablets and desktops */
 /* do this for handhelds */

Good luck!


thanks, but then in that case would it not be better to do that straight with javascript - if (document.documentElement.clientWidth > 640)

You are right, for that specific instance of deciding whether or not to load a twitter feed, there probably isn't a big advantage of using my suggestion over your option 3. Thinking ahead though, with repsonsive design, mobile sites and now HTML5, the next questions you are going to come up against are how to customise the CSS for different viewpoints, or how to test if a visitor's browser supports a certain HTML5 feature.

You could certainly take a roll-your-own approach and write custom javascript for each case, or you could use Modernizr to test if the visitors browswer supports media queries, and if it doesn't load respond.js, or use Modernizr to test if the vistor's browser supports geolocation or html5 forms or certain video formats ..., and if it doesn't conditionally load a cross browser polyfill.

There are usually multiple ways of achieving the same goal, I'm strong on not reinventing the wheel ;)

share|improve this answer
thanks, but then in that case would it not be better to do that straight with javascript - if (document.documentElement.clientWidth > 640) - But this is option 3 in my question. –  Adam Mar 8 '13 at 20:23
add comment

Who says? Display:none; is one the best practices in showing and hiding elements for any specific viewport. And one thing Adam, mark-up is the least downloadable stuff for each device, they have to process some other things if you hide element by Jquery or Javascript. Because sometimes small devices either don't support loading them or take extra time that's why they are visible.

But it has the pitfall for SEO purposes. For SEO optimization along with hiding elements you can do one of these things with your CSS.


@media screen and (max-width:480px) {
    div { 
position: absolute;
left: -9999em;
width: 0;
height: 0;
overflow: hidden;

But it was the less efective because Google Webmaster takes care all such hacks. And You may be blacklisted from being Google indexed.So You should use one of these modern methods to hide elements.


    div { 
  position: absolute !important;
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important; 
  width: 1px !important; 
  overflow: hidden;

or, third,

div { 
    font:0/0 a;
share|improve this answer
Thanks for the response. You are correct, Display:none is not bad, and is in fact very useful, however when trying to load a whole chunk of content, that includes javascript such as the twitter feed, display:none should not be used in this instance, as the mobile will have to download that javascript even though the content will not be displayed. So simply hiding content is not what I am trying to do, I am trying to stop it loading altogether –  Adam Mar 8 '13 at 17:52
For that you'll have to go to Twitter feed box and check its class which is going to take responses from server and stop it either by breaking it on that instance or just simply just removing that from its parent element. it is more simple and fast in javascript. –  Akshaya Raghuvanshi Mar 8 '13 at 18:02
No the twitter feed is just an example. What if it is generic content? I am looking for the javascript solution. I don't think you understand the question properly. I am looking for the best way to conditionally load content as the screen gets bigger. –  Adam Mar 8 '13 at 18:23
add comment

Your Answer


