Responsive design with “switch to desktop site” option

In my latest responsive design creation, I wanted to follow Jakob Nielsen’s guidelines and allow mobile users to have easy access to the full desktop site, if desired. This is relatively straightforward to do if you have a CMS, but a static site has to be a bit more creative.

Here’s the solution I came up with. It uses JavaScript, a small browser cookie, and that magical tool no web developer should be without, Modernizr. Continue reading Responsive design with “switch to desktop site” option

Use HTML 5 datepickers instead of jQuery-UI

Did you know Modernizr will test for the existence of certain HTML 5 input elements? Since Google Chrome and most mobile browsers have a built-in datepicker for <input type="date"> elements, you can use yepnope (automatically provided as part of Modernizr) to dynamically load jQuery-UI (a relatively large file, even when only the datepicker code is included) only when needed.

HTML:

<input type="date" id="from_date" name="from_date">

JavaScript:

yepnope({ /* included with Modernizr */
  test : Modernizr.inputtypes.date,
  nope : {
    'css': '/path-to-your-css/jquery-ui-1.10.3.custom.min.css',
    'js': '/path-to-your-js/jquery-ui-1.10.3.datepicker.min.js'
  },
  callback: { // executed once files are loaded
    'js': function() { $('input[type=date]').datepicker({dateFormat: "yy-mm-dd"}); } // default HTML5 format
  }
});

 

See the Pen Use HTML 5 datepickers instead of jQuery-UI by Martin Blase (@mblase75) on CodePen.