Webdesign « snedled.dk

Rethinking the Mobile Web (Yiibu)

An approach to responsive design and mobile web by Yiibu. Slides first and then their proof of concept; their website.

And a little thing to remember:”move away from device specific break points – connect to content instead”

- Ethan Marcotte

Læs mere...

Inspirerende: The Great Discontent

Was intrigued by The Great Discontent website, for their use of responsive images, responsive design and changing images when you scroll down. Deconstructed below!

1. Responsive Images

The main article image is available in several size.

800 x 533 px

1600x1200px

Download the Responsive Images script from github: https://github.com/filamentgroup/Responsive-Images

2. Scrolling changes header image

When you scroll down, the header image changes to an image with different focus. Interesting simple effect achieved by this simple jquery:

(function(){
  if( $("html").hasClass("rwd-imgs-lrg") ){ // class set by the responsive images script
  var imageUrl = "/-/2012/img/mall/dan-balance.jpg"; // image which that will fade over the original
  var threshold = 190; // px scrolled until we fade in
  var duration = 500; // fade duration in ms var showing = false;
  var heroA = $("article header img");
  var heroB = $("&lt;img src='"+imageUrl+"' style='width:100%; position:absolute; display:none;'&gt;");
  heroA.wrap("&lt;div style='width:100%; display:inline-block'&gt;&lt;/div&gt;");
  heroA.before( heroB );
  $(window).scroll(function(event){
    var scroll = parseFloat($(window).scrollTop());
    if( !showing &amp;&amp; scroll &gt;= threshold ){
      heroB.fadeIn( duration );showing = true;
    } else if( showing &amp;&amp; scroll &lt; threshold ) {
      heroB.fadeOut( duration );showing = false;
    }
  });
}})();