Responsive Website Content

Question

The design for the mobile sized browser is very different from the design for the full screen browser. i have come up with a solution that does work (display:none;) but is that a good way to do it? should i be doing something else?

@media only screen
and (max-width:480px){
#image01{
    /* sizing and positioning etc*/
    display:none;
}
#image02{
    /* sizing and positioning etc*/
}
h1#big{
    /*sizing and positioning etc */
    display:none;
}
h1#small{
    /*sizing and positioning etc */
}
@media only screen
and (min-width:992px){
#image01{
    /* sizing and positioning etc*/
}
#image02{
    /* sizing and positioning etc*/
    display:none;
}
h1#big{
    /*sizing and positioning etc */
}
h1#small{
    /*sizing and positioning etc */
    display:none;
}



<div id="image01">
    <img src="image01.jpg" alt="image01" />
</div>
<div id="image02">
    <img src="image02.jpg" alt="image02" />
</div>
<h1 id="big">Big header</h1>
<h1 id="small">Small header</h1>

Answer 1

Unless those images are part of the content, you should load them as background images. Then you control which image is loaded within your media queries

@media only screen
and (max-width:480px){
#image01{
    /* sizing and positioning etc*/
    background-image:none;
}
}

@media only screen
and (max-width:992px){
#image01{
    /* sizing and positioning etc*/
    background-image:url('path/to/image');
}
}

Answer 2

some elements that simply will not look right on a mobile device should be hidden like this. However in most cases everything can be either resized, moved or minimised with the ability to maximise with a tap (like menus).

Give this a read for more tips

Answer 3

You should not use display: none to hide content from smaller screens as it’s seen as a lazy approach.

Also, it’s bad from a performance point of view because your users still download this content, despite it being visibly hidden.