RaphaelJS

Chapter 8. Mobile, Global Variables, and Other Things That Hurt Less Than You Think

Up until about a year ago, my strategy for dealing with people with mobile browsers was to pretend they didn’t exist. This worked reasonably well. Alas, times change.

The number of viewers accessing a site from a phone or tablet varies dramatically depending on the type of site. For example, if you’re working on the website for the Laptop Fan Club, this might not be a concern. In almost any other situation, it’s something you have to deal with.

When it comes to visualizations, there are some practical decisions to be made about what’s realistic on different screen sizes. A county-level map is not going to be all that informative on a 300-pixel screen. But in many cases, you do want a visual to resize dynamically to fit whatever size screen is loading it.

This is generically known as responsive design, and there are sophisticated libraries out there like Bootstrap, an open-source project from Twitter that intelligently moves or hides parts of a page (like menus and sidebars) depending on the size of the screen. The idea is to code your website only once, not once for every type of device that might hypothetically access it.

Raphael predates the responsive design movement, but in fact scalable vector graphics are absolutely perfect for responsive design since they are, as you may have divined, scalable vectors. Since they’re drawn dynamically, you don’t have to worry about the nasty side effects you get ...