BBC HOMEPAGE and BBC NEWS MEDIA QUERIES

using frames to emulate media queries on BETA BBC NEWS website

by Leo Lanese

HTML

<section>
    <article class="iframe">
        
        <h1>BBC Homepage: Using static image server</h1>
        
      473/210<!-- 473/210 --><iframe src="http://static.bbci.co.uk/h4discoveryzone/ic/newsimg/media/images/473/210/67369000/jpg/_67369020_stuart-hall_guilty_020413_el.jpg">
      </iframe>
                        
        296/132<!-- 296/132 --><iframe src="http://static.bbci.co.uk/h4discoveryzone/ic/newsimg/media/images/296/132/67369000/jpg/_67369020_stuart-hall_guilty_020413_el.jpg">
      </iframe>
        
      144/81<!-- 144/81 --><iframe src="http://static.bbci.co.uk/h4discoveryzone/ic/newsimg/media/images/144/81/67369000/jpg/_67369020_stuart-hall_guilty_020413_el.jpg">
      </iframe>

    </article>
    
    
    <article class="iframe">
        
        <h1>BBC News</h1>
        
      <iframe src="http://wwwnews.live.bbc.co.uk/media/images/67431000/jpg/_67431205_firing.jpg">
      </iframe><!-- 473/210 -->
                        
      235px<!-- 235 -->  
      <iframe src="http://ichef.bbci.co.uk/news/235/media/images/67431000/jpg/_67431205_firing.jpg">235px
      </iframe>

    </article> 
    
    
    m.bbc.co.uk/news (international version)
    <article>
        
        96px<br> 
        <iframe src="http://ichef.bbci.co.uk/news/96/media/images/68536000/jpg/_68536395_68536394.jpg"></iframe>
        

                               
    235px<br>  
        <iframe src="http://ichef.bbci.co.uk/news/235/media/images/68536000/jpg/_68536395_68536394.jpg"></iframe> 
         
                 
     410px<br>  
        <iframe src="http://ichef.bbci.co.uk/news/410/media/images/68536000/jpg/_68536395_68536394.jpg"> </iframe>
        
    </article>
        
        
<section>
<!-- Disclamer: All images are BBC and BBC News copyrights -->

CSS

/* playing with the size */
article.iframe {
    width: 14em;
    padding: 1em 0 3em 3em;
}

article#imgs {
    padding:15px;
}

#imgs >img {
    padding: 3em;
    border: 1px solid #000;
}

JavaScript

/*

There are two steps to adding responsive images to a BBC page:

1) Creating multiple versions of the same image at different resolutions
2) Deciding which image to use at run time


BBC Blog: 
http://responsivenews.co.uk/post/50092458307/images
 
*/