Semi-sticky page footer

Often, our site designer wants a web page footer that’s glued to the bottom of the page. I don’t mean position:fixed — it needs to be something that appears at the very bottom of the HTML document, whether the page scrolls or not.

So this how I do it. The technique uses a combination of height: 100% and absolute positioning of the footer. Here’s how it works: Continue reading Semi-sticky page footer

Respond.js

How did I never know about this before? Respond.js is “a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).”

In other words, it makes HTML5Boilerplate even better by eliminating the need to craft a separate, IE8-and-below stylesheet when you don’t want those browsers to see the mobile-first version of your site. Better yet, it works with Modernizr (also part of HTML5Boilerplate) by utilizing its media-query detection code.

I just add it at the bottom of my modernizr.js file (a mere 3K of extra data) so that it starts to run before the DOM is even loaded. Sadly, it uses AJAX to get the CSS file, so there’s still a flash of mobile-first styling. But the convenience is well worth it.

Two-column definition lists

In the spirit of completeness, here’s a second popular (at least for me) way to use definition lists: to create a simple two-column table.

This approach has some advantages over using actual HTML tables. One is that you don’t need to make sure you close your table rows, because there aren’t any. Another is that it’s more responsive, since you can use media queries to let the definition list revert to its usual styling for narrow screens. Continue reading Two-column definition lists

Inline defintion lists

I’m a big fan of semantic HTML. When content describes a list of things, a developer should use a <ul>. Even if you don’t want it to be a bulleted list, or maybe want the elements to all be on a single line, use the appropriate semantic tags — search engines and screen readers will appreciate the improved readability.

So what if you don’t want a list to look like a list? CSS has long since progressed to the point where it’s possible to display HTML elements any way we like.  Continue reading Inline defintion lists

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

KSB Legal

ksblegal

 

A small but heavily-JavaScripted site for Chicago-area law firm Kopecky, Schumacher, Bleakley and Rosenberg. Background images use modern CSS attributes to zoom to full-screen at any size, while hashchange events keep the news page down to a single document. Clicking on navigation links at the top open up an animated slider to show the attorneys’ photos, a scrolling news summary, or contact information.

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.

Break up a long form and show only one section at a time

Got a long form for users to fill out and want to make it a bit less intimidating? Here’s a quick jQuery function that will look for individual fieldset elements in your form and show them one at a time, adding a “continue” button to the bottom of the form to proceed to the next fieldset. Users with JavaScript disabled will get the entire form without any loss of functionality.

function pageThroughFieldsets(form) {
  var $cbtn = $('<button>Continue</button>').on('click',function(e) {
    e.preventDefault(); // don't submit the form 
    var $lastfs = $(this).closest('form').find('fieldset:visible').hide().next('fieldset').show().next('fieldset');
    $(window).scrollTop($(this).closest('form').offset().top);
    if ($lastfs.length <= 0) {
      $(this).remove(); // remove the "continue" button 
    };
  });
  $('fieldset',form).first().siblings('fieldset').hide().last().after($cbtn);
};
pageThroughFieldsets($('#id-of-your-form'));