Going Mobile : Responsive Design

I ended my last post, Going Mobile : The Viewport with a small dilemma.

Now I have to decide which is more important -- having mobile visitors understand at a glance the full content of a page, or having Google rank my pages as mobile-friendly.

It turns out that both are possible. The technique is called Responsive Web Design and here's how Wikipedia defines it:-

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

Since no one comes to a chess blog to read about web design, I won't attempt to survey the many resources on the subject. One that I found particularly useful is the Responsive Design View tool in Firefox. This lets me experiment with the view of my pages the same way a mobile visitor sees them. The following image shows screen captures of the two home pages in both portrait and landscape orientation.

Mobile Views

Top row: World Chess Championship
Bottom row: Chess for All Ages (CFAA)

From this it's obvious that I can improve the look of both sites with just a few simple changes. The big Adsense banners, which serve mainly as counters, can be reduced in importance, and the CFAA logo can be reduced in size. I'll work on a different look for both pages and present the result in a future post.