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.
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.