Responsive and Adaptive Web Design

By: Chad W. Stoker (MCTS, MCP, MCAD) President & Chief Technology Officer

 Responsive Web Design means what???

◦ Hardware form factors… ◦ ◦ Re-thinking web layout… As always, balance between existing skill-sets and project priorities…

Responsive Web Design intro

      HTML5 – This should be the new target for all of your web development. Think about how to achieve this with ASP.NET versus ASP.NET MVC.

Fluid Grids Fluid Images Media Queries CSS3 Javascript

Tools

   Modernizr http://www.modernizr.com/ Example: ◦ if (Modernizr.canvas) { ◦ ◦ ◦ // let's draw some shapes!

} else { // no native canvas support available :( ◦ }  W/O Modernizr : return !!document.createElement('canvas').getContext;

Pre-requisites (1)

 HTML5 shim for IE… ( http://code.google.com/p/html5shiv/ ) ◦  CSS3 Media Queries Shim… ( http://code.google.com/p/css3-mediaqueries js/ ) ◦ ◦ Note: Doesn't work on @import'ed stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the and