Elastic, Responsive and Adaptive Design

Considering the terms, elastic, responsive and adaptive, when designing for web sites, many people are using them interchangeably. To help communicate with project members, it would be nice to define theses terms.

It would be a good practice to keep web designs to be elastic to screen size with a fluid layout, responsive to viewport with various layouts, and adaptive to device capacities with various layouts and/or contents.

  • Elastic
    Pages with a fluid layout are capable of rearranging elements properly when the screen or window size changes; a fluid layout defines element size in terms of percentage instead of pixels.
  • Responsive
    Pages are responsive by changing layouts when the viewport (or screen/window size) changes and the current layout cannot deliver and present contents effectively.
  • Adaptive
    Pages are adaptive by changing layouts and selecting contents according to the device capabilities; screen or window size is just one of the many device capabilities to consider. Flash animations, for example, may be delivered on desktops but filtered or hidden on mobile devices.


ASP.NET OpenAuth Login Failed in Facebook Page Tab

ASP.NET 4.5 supports Facebook authentication with OpenAuth. Developers who embed web applications into Facebook page tab may be faced with login failure because the page tab is rendered as an iframe and some browser will not submit cookies from iframes by default. Chrome, Firefox, Safari and Opera work fine but IE by default won’t send cookies from iframes and you will get some trouble when logging in from the Facebook page tab.

To solve this problem, you have to add the following p3p HTTP header to have IE send cookies from iframes:

Response.AddHeader(“p3p”, “CP=\”IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\””);