Retinafy Your Sites

Retinafy Your Sites

Thomas Fuchs has released a new e-book about setting up your websites to handle variable DPI sites. You probably know Thomas as the creator of Scriptaculous as well as part of the Slash7 team (with Amy Hoy) that teaches the JavaScript master class and also run the great productivity web apps of Let’s Freckle and Charm Desk.

For those of us who may be new to dealing with media queries or responsive web design techniques, this book may be a bit of a jump. If that sounds like you, I recommend you start off your adventure (after reading our book, of course) with Responsive Web Design by Ethan Marcotte.

The book covers the background of what “retina”, or more accurately “high DPI”, screens are how to target them. It reviews bitmapped images, vector graphics, file size optimization, icons, image optimization, and troubleshooting.

Thomas is speaking from experience here. He’s already built retina-ready versions of the Slash7 “Every Time Zone” tool site using SVG, Canvas, and other tips, and their CharmDesk web app is also running with retina assets.

These techniques are relatively cutting edge, so if you need to support older MSIE versions, you may need to consider applying a Mobile First approach. This will result in browsers that do not support media queries showing the simplest version of the site. You can then used media queries to target higher dpi screens and serve unique assets.

Good luck retinafying!

Modernizr: Why We Do The Config We Do

In The Rails View (page 23 for those of you following along at home) we cover how to roll your own version of the Modernizr library, but we don’t really dive into which items you want to use in that library. The list of potential items keeps growing and can be somewhat overwhelming at times. We can’t possibly cover every piece of this framework, so if there’s something you’re curious about, we suggest that you deep dive on the Modernizr documentation.

How does Modernizr do the things it does? Well, in the documentation it’s explained as:

For a lot of the tests, Modernizr does its “magic” by creating an element, setting a specific style instruction on that element and then immediately retrieving it. Browsers that understand the instruction will return something sensible; browsers that don’t understand it will return nothing or “undefined”.

Let’s look at the options on the custom build page and see what we may need.

The Core

The core pieces that we absolutely need are actually listed under the “Extra” heading on the right side of the grey area. The html5shiv is a tool that allows “the use of HTML5 sectioning elements in legacy Internet Explorer, as well as default HTML5 styling in Internet Exporer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.” The end point of the shiv is that it allows us to use HTML5 elements in almost any production site by telling the DOM that they exist and letting us print and style those HTML5 elements. If you need printing, you need to select the “w/printshiv” option.

The other part of the Modenizr core is YepNopeJS, which is a simple javascript that detects for a condition (if something can be handled by the browser) and applys one class if yes and another if no. It can be used in its native form to serve certain files based on that condition. This loader is optional and around 3k in size. It gives you access to the Modenrizr.load() function, so if you want that, you need to have this checked.

We also use Media Queries in many of our sites, so we want to turn that on as well. That covers the “Extra” section (which I would call the “core” section) and from there, it’s not too complex. This is effectively Respond.js, so if you want to use that outside of Modernizr, you can do so.

The last is “Add CSS classes” and it will add CSS classes to your HTML tag for the page. If you want to do support detection for CSS3 features, you need to check this.

CSS & HTML

The CSS3 section contains detection and support for various CSS3 elements. If you plan to use them, you should include them. For the book, you really only need @font-face, CSSGradients, box-shadow, and rgba(). The rest are fun to play with, and as your view skills grow you will find yourself using many of these.

The HTML5 area is actually not the HTML5 tags, as those were activated with the HTML5Shiv discussed in “The Core” above. This area includes those elements that are more part of the extended family of technologies that make up “HTML5”. The only things we discuss in the book are the Input Attribtutes and Input Types (both discussed in the Forms chapter).

Remember that each item you add increases the size of this file and is another test that is running on each page load.

Misc. & Add-ons

At this point, if you’re diving into these items, you’re probably pretty familiar with polyfills, modernizr, and the like. This gives you access to some of the more complex (or just fun) items available in some browsers. If you’re interested in switching to box-sizing: border-box then you probably want to check that polyfill off.

For almost anything that can be detected, someone has created a polyfill for it. Remember, if you don’t need to support older browsers, then many of these things are simply noise.

Finally for further reading, The 2010 article by Faruk Ateş entitled “Taking Advantage of HTML5 and CSS3 with Modernizr” at A List Apart is an excellent resource on pragmatically approaching the use of this tool.

Good luck!

Date Picker has landed in Chrome

If you’re playing with Chrome Canary or Chromium, you can now abuse some new HTML5 form element hotness: the Date picker.

<input type="date" min="2010-08-14" max="2012-08-14" value="2010-08-14"/>

This will give you a pre-styled element that looks like this:

example image from the author

You will notice that dates that fall before the “min” range are disabled and that the “value” uh, value shows up as a highlighted, pre-selected date.

Paul Irish replied in the comments that this does not currently support styling as there’s great discrepancies between how different browsers (mobile vs desktop) handle these elements, so if having those stylings is important to you, you probably want to stick with jQuery for now.

Internet Explorer 10 to No Longer Support Conditional Comments

We use conditional comments to target specific versions of Microsoft’s Internet Explorer browser (MSIE), mainly through our ie_conditional_tag. This returns a block of markup that applies various class names to the tag, like this:

    <!DOCTYPE html>
    <!--[if lt IE 7]><html class="ie ie6 some-custom-class"><![endif]-->
    <!--[if IE 7]><html class="ie ie7 some-custom-class"><![endif]-->
    <!--[if IE 8]><html class="ie ie8 some-custom-class"><![endif]-->
    <!--[if IE 9]><html class="ie ie9 some-custom-class"><![endif]-->
    <!--[if gt IE 9]><html class="ie some-custom-class"><![endif]-->
    <!--[if !IE]><!--><html class="some-custom-class"><!--<![endif]-->
      <head>
        <title>New HTML5 page</title>
      </head>
      <body>
        <!-- your content -->
      </body>
    </html>

This lets us target older versions of MSIE specifically to improve our experience across browsers. Microsoft’s development team intends to remove "the less-successful legacy features" in Internet Explorer 10, and one of those is conditional comments.

The main reason for conditional comments and targeted styles has been the slow pace at which enterprise IT departments upgrade their systems. There are just a lot of users on older browsers, and by ignoring them, we are ignoring customers. That may be considered a good thing for certain markets, but not everyone has that luxury

Many enterprise companies recently upgraded to IE7, which was initially released in 2006. This is due to large amounts of legacy enterprise software ("legacy" and "enterprise" being two words which keep us up at night) that rely on browser specific code, mainly in versions of JavaScript or other proprietary scripting. That code must be rewritten to an open standard (ideally) before it is usable in newer browsers.

Playing Nice While Looking Forward

It’s almost impossible to have a stylesheet targeted at new browsers work flawlessly in old ones. We can use Modernizr to provide HTML5 elements and access to other polyfills.

Internet Explorer 9 is already a very robust browser and has support for many of the cutting edge elements in HTML and CSS that we’ve started to explore. Microsoft has also announced that it will begin doing automatic updates on browsers in Windows XP, Vista, and 7

This doesn’t mean that our conditional tag won’t continue to do what it’s always done. Older browsers will self-register and add the class to the tag. And by writing valid markup, we can avoid a lot of the issues between browsers. For those of us who still have to make MSIE6 and it’s younger cousins work, there’s a lot of documentation out there to get us there.

If we need to target in the future, we can use a browser detection javascript and then use a conditional array to add classes on document.ready to our page. While it requires javascript, the default rails applications do as well for the destroy method, so this shouldn’t be a major problem for most of us.

Have fun in the trenches!