Photo Dharma now supports Tablets and Phones

I started the Photo Dharma website prior to the tablet/smartphone revolution, which has changed the way people access the web enormously. At that time I designed the site to be seen on desktops and laptops where a certain width to the page could be guaranteed.

Because of that the thumbnails were organised into tables, with four thumbnails to a row, which made a nice stable presentation. They would then more or less appear as in the screenshot below (the screenshots are roughly 1/2 of actual size to fit into the post).

This is fine as long as the page is 960px+, but when people are accessing the site with tablets or smartphones the size of the screen can be much smaller than that, and so it was time to think again.

Fortunately I found some good css code courtesy of the Yahoo! developers on the Pure CSS page. There they have code to accomplish more than one sort of job, but what I wanted was the Grids CSS, which makes grids (or tables) which are responsive to the screen size.

When utilising that code if the screen size drops below a certain pixel rate the grids collapse, and we have just one column, as below:

That was a great improvement, but a little crude as it is a kind of “all-or-nothing” solution. With a little bit of hacking at the code I made it collapse to 2 columns on a larger tablet, and only collpase to one column on smartphone screens.

I had to remake all the pages on the site (around 200), which took quite a lot of time, but I don’t have a tablet or smartphone myself and I would appreciate some feedback from those who do, and can try it out.

I hope these improvements will give access to the site for a lot of people who otherwise would have difficulty viewing it and can now view photographs of our wonderful Buddhist heritage.