I’ve just installed the new WordPress Twenty Twelve theme on my blog here. Twenty Twelve is a responsive design – meaning that it works well across not just traditional computer displays but also on mobile devices with much smaller screens – exactly my goal.
This is a significant upgrade from the old, original WordPress Twenty Ten theme that I have been running for a couple of years since migrating this blog from Typepad to WordPress.org two years ago this month. That theme didn’t dynamically adjust in response to smaller screen sizes – and with so much more of the visits coming from mobile and tablet devices, I needed a new theme that worked well with them.
With the responsive design of this new theme, I’ve noticed one glitch. I frequently embed an image – using embed code I copy from my Flickr portfolio. The code Flickr provides includes a hard coded height and width in the HTML based on the selection I make when copying it – historically I’ve been using 640 px wide images because that was the original width of this blog’s main content column. When viewed on a tablet or mobile phone, these images were being squished – with their aspect ratio being changed to “fit” the image.
To fix this problem, I need to edit the HTML inserted in the post to change the height to 100% and to remove the width specification. Once that’s done, everything scales beautifully!