Site Design, Responsive Design, and Progressive Enhancement

  1. As you know from our previous work, a site should be easy to use and accesible to all.
    There are some beautiful designed sites out there.
    For fun, here are two of my favorites: and
    The first of these allows you to “walk” through some of the most famous classic Japanese gardens, and allows you to click on the view from various points on your walk.
    The second one allows you to graph the prices of various stocks and mutual funds. ( I have put in the US and foreign developed stock markets for a start.) Look at the sliders near the bottom and see how easy it is to change the time frame.
    Both of these sites work well because they understand what the user wants, how the user thinks, and present easy self-explanatory ways for the user to explore the resource.
    We will explore this further when we discuss user interface design.
  2. Today, as we design for user with different types of devices (smart phones, tablets, laptop and desktops) and with different abilities (normal vision, color-blind, blind, javascript turned off, etc.) we need to design sites which will work for many different conditions. This is known as responsive design. That is, your design responds to the screen size and other similar conditions. (e.g. Is touch an available input method, as it is on some smart phones?)
  3. One way to implement responsive design is called progressive enhancement. In this approach we do as much as we can with good HTML, then we add as much functionality as we can with CSS, and finally, we use JavaScript.
    Progressive enhancment grew out of the idea of graceful degradation (die nicely), which you probably encountered in your other courses.
  4. OK, so we are going to use progressive enhancement (depend first on the HTML, then on the CSS and then on JavaScript) and responsive design (design sites which work for various browser and user capabilities.) But that doesn’t solve all our problems.
    To complicate life even more, while most(but not all) users are pretty good about updating their browsers on their laptops and desktops (Firefox, controversially, automatically updates the version), most people own a phone for at least 2 years (because that is the way the various phone companies price their phone plans) and they are much less good about updating those, if that is even possible.
    So, anything designed for a hand-held needs to work on 2-year-old technology (or older) and many mobile browsers of that age did not implement a lot of the the newer HTML5 and CSS3 innovations. Both quirksmode.org and html5please.com (see below) provide information about what is implemented in various browsers.
  5. How do we handle browser implementation issues?
  6. Before you depend heavily on some relatively new technique, you might want to be sure it is widely implemented.
    The best tables on browser compatibility are at Click on the Compatibility link and then examine both the Older Tests table and follow the Current Tests links for CSS, HTML5, etc.
    There are separate tables for mobile browsersat Here, for example, you can see that SVG (Scalable Vector Graphics, which are supposed to work on mobile devices) doesn’t work on Android phones and that Canvas (for drawing on the fly) works on newer phones but not older ones.
    Two other useful sites for HTML5 and CSS3 innovations are and are also well worth consulting.
    has a table for which browsers support which CSS3 properties, but the table does not include mobile browsers. Unfortunately for HTML5 tags you need to look at each tag separately (e.g. ) and check the browser icons to see who is supporting what. Again, mobile browsers are not included.
    There is a list of the CSS2.1 which you should expect on mobile devices(CSS3 for mobile devices is a work in progress) at but that doesn’t mean these are implemented.
    So, use quirksmode.org and html5please.com and caniuse.com
    The page at has straightforward advice on making sure your page works in older browsers.
  7. The open source library at tests the user’s browser and allows you to create code which is conditional upon what Modernizr detects.
    The “How to Use Modernizr” tutorial on the home page is a start, but the best examples also use jQuery. (Both coming soon.)
    You will sometimes see modernizr and other pieces of codes referred to as a polyfill. According to Remy Sharp (who is always worth listening to ) “A polyfill or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.”( See Often it is used to work around somemissing capabilities of older browsers.
  8. jQuery is an open source library of JavaScript functions, which we will learn about soon. Bascially, jQuery and Modernizr together allow you to test the browser for its capabilities and then do things like change the styling (sometimes by changing the class of an element) when the browser is missing certain capabilities.
  9. So where does this leave us?
  • You should use Progressive Enhancement, but
  • Be wary of the HTML5 and CSS3 innovations – check first at quirksmode and html5please.
  • If you are going to use something which is widely available for desktops but not for mobile devices, use separate stylesheets.
  • Use jQuery and Modernizr to make your life easier.
  1. HIGHLY RECOMMENDED
  • video on progressive enhancement