Mobile Thumbnail

Feedback: no comments

Adaptive design is here

The upcoming new default Textpattern CMS theme has built-in adaptive styling so that it looks good on all devices and screen sizes. With the proliferation of handheld devices, adaptive design using media queries seems to be the way forward, especially now that HTML5 and CSS3 are being adopted by browser manufacturers. It seems pretty future-proof (is there such a thing?)

But what about images?

There is one major obstacle that could spoil things, however, and most articles about adaptive or responsive design usually avoid mentioning it – what to do about images? For many designers it does not seem to be an obstacle – they simply put a width: 100%; max-width: 1000px; kind of styling on the images so they are fluid and fit within any container size. This is fine in many instances but for those who want high quality images at all times and for mobile users who want fast downloads, this solution is not ideal. Resizing images causes loss of quality and large images on slow networks cause bandwidth problems for users and servers.

Textpattern CMS has the solution

Aren’t we the lucky ones?! The combination of adi_mobile, smd_thumbnail and the new theme is the perfect solution for Textpattern users! They make it easy to deliver the perfect size and quality of content to specific devices to suit all screen sizes. For sites that rely on high quality graphics such as fashion photographers, glossy magazines and sports news sites, there is now a simple way for them to reach people on the move and yet retain their high quality image. Users will no longer be deterred by cumbersome scrolling or long delays and be able to keep in touch with their favourite sites whilst out and about as well as when sat at their desktops.

The way it works

Quite simply, adi_mobile detects the device and viewport width and delivers the appropriate content depending on that detection. The different sizes of content (images) are rapidly and easily created by smd_thumbnail. TXP tags inserted in the head and body of pages pull out the correct content for the correct device. When all this is done within a great adaptive design like the upcoming new default Textpattern CMS theme we have a fast, easy to implement method of delivering great content for most contexts. Caveat: browsers need Java enabled (which is the case for 99%).

smd_thumbnail

Smd_thumbnail was created by Textpattern CMS core developer Stef Dawson aka Bloke and is very popular because of the ease with which images and batches of thumbnails of any size can be organized and manipulated. I have used it at Gobbinland to automatically create 8 thumbs whenever an image is uploaded. The quality is good enough for that site but when an especially high quality image is uploaded it is easy to replace one or two thumbs with higher quality ones created in a graphics package.

adi_mobile

Adi_mobile was made by another keen Textpattern CMS plugin author, Adi Gilbert aka Gomedia. There is not much said on the support forum about it probably because it simply works, is easy to use and people don’t have any problems with it. Even I found it quite easy to use and I am possibly the world’s worse when it comes to conditionals and variables and other rocket science that Textpattern coders seem to find simple.

Example code

You can read how I used adi_mobile and smd_thumbnail for the Gobbinland article images over at TXP Tips – Using images in adaptive design. Please remember I am stupid with regards to code, so you can probably improve it. I hope you don’t have to correct it, although it wouldn’t surprise me if you did. I love Textpattern because the tags are mostly easy to understand and I love these 2 plugins because they are also easy to follow, mostly. If I can make adaptive websites that deliver the right content to the right device, then so can anyone – that’s how good Textpattern CMS is. Thank you.