Responsive Web Design - Mon, 20 Aug 2012

So … a couple of days ago I posted my thinking about ways to make a mobile version of my website. A few hours later, I found Google Developers recommendation to use “Responsive Web Design” and I added that to the post. I concluded that I’ll probably use it.

Now guess what was on my mind after that. Yup. I wanted to try it. It sounded right and didn’t sound too hard. In only four hours, I was able to set it up so that it worked for most of the Behold website. (Just a few wide images, the forum, and the User Guide have a bit of design work left).

Overall, I love the effect. This website is now fluid. It will size itself appropriately depending on the device you are on. All content will appear with full features on all devices. I’ll only need to maintain this one website. It really is the best solution.

Try it out. You’re now looking at this blog page. This is what it looks like if you are on a Desktop or device that has a physical screen width of 800 pixels or more:

Now grab the right side of the browser window and pull it to the left to make the window narrower. You’ll see how the right hand column seems to vanish (it actually moves to the bottom) and the rest of the content gets squeezed to fit the space.

Now make it even narrower. This is about the width of an iPhone:

And this is how it might look in the iPhone (courtesy of iphonetester.com):

So now the job’s effectively done, and I’m set for the future. And the future’s not too far away. I was checking my Google analytics data, and during the past month, a full 5% of the people who came to my Behold site did it from a smartphone (excluding my own accesses, of course). In the next few years, as smartphones become standard issue, that percentage will continue to go up.

Behold’s site can now be classified as Mobile friendly! As with everything, it’s not perfect yet. But over time I’ll find and clean up the glitches.

p.s. Check out your other favorite genealogy sites with your handheld. How good do they look? Are they usable?

This blog post is dedicated to Douglas Hofstadter.