Skip to content

Responsive

Jump to bottom Edit New page
Thomas Claeys edited this page May 7, 2015 · 9 revisions

#Responsive

Responsive design techniques should be employed to ensure that we build a flexible experience that looks good at all reasonable viewport sizes.

##Mobile first

  • Make sure your pages are mobile-friendly and touch zooming is enabled, by using the following tag in the head:

      <meta name="viewport" content="width=device-width, initial-scale=1">

  • Design for mobile first, and organize your UI code accordingly.

  • Only load the relevant resources that are required for the rendering the page within the (visible) view port. Use lazy-load techniques sparingly.

##Layout

##Responsive images

Images needs to be fluid and adaptive. For each break point an optimized resolution of the image needs to be delivered. This will increase performance, as lower resolution images can be delivered to for example mobile devices.

Until all mayor browsers are supporting the HTML5 native<picture> and srcset elements, it's recommended to use Picturefill (v1) as solution to implement responsive images. Picturefill is a clientside solution, meaning that the correct image will be loaded via JavaScript based on media queries. No server side Device Capability detection is required for this approach.

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <span data-src="small.jpg"></span>
    <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
    <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
    <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</span>

##Feature detection

  • Use feature detection over using browser sniffing techniques. Modernizr is the preferred plugin that allows detecion using Javascript and CSS hooks.

  • Use CSS conditional classes techniques in order to support old IE versions.

    HTML

      <!-- Sample using CSS classes on HTML root element, but can be applied to any HTML element -->

  <!--[if IE 8]>
  <html class="ie8 "><![endif]-->
  <!--[if IE 9]>
  <html class="ie9 "><![endif]-->
  <!--[if (gt IE 9)|!(IE)]><!-->
  <html class="non-ie">
  <!--<![endif]-->

    CSS

      /* Default body text color black */
  body {
  	color: black;
  }

  /* IE8: body text color red */
  .ie8 body {
  	color: red;
  }
Add a custom footer
Add a custom sidebar
Clone this wiki locally