Rome wasn’t built in a day, but your WordPress site could be iphone-friendly in less!
The Talent website uses a WordPress theme (dt-slash) that does the job that they need – showing full-screen images of the band in action so that potential customers can see them in action.
However, as the site was built a couple of years ago, ‘responsiveness’ (the ability for one site to work on iphone-up-to-desktop screen sizes) was not on the agenda. In their case, the theme doesn’t work very well at all on iphones and they were worried that this would be turning people away.
As they didn’t want the ‘desktop’ version of the site to change, the challenge was just to make the ‘iphone’ version better – and this was done in a day.
In One Day?!
Yes really. So the theme they use on the (let’s call it) ‘main site’ is all very good and nice on a desktop screen – it has large landscape images (the wide ones that fill your monitor), and on many of the pages just a small amount of text in the bottom right hand corner.
As the screen size gets smaller, the images still work on an iPad, and then menu comes a smaller affair at the top of the page. However, on an iphone, you get part of the image (as the screen is smaller) and the text disappears. Now that’s just silly. Arriving at the site for the first time you might just sit there waiting for the text to arrive… …and it never does.
What to do. Well it’s all very well hacking around with somebody elses WordPress theme – and I’ve been known to do that in some cases (by use a child-theme of course) – but in this case a different tack was much simpler.
By using a plugin called ‘Any Mobile Theme Switcher’ you can run a completely different theme for the devices of your choosing – and you choose them by device. Want a different base for Blackberry’s? No bother. Alternate angle for Android? Not aproblem. By default the smaller-screened devices are chosen for you. So, I installed a different theme, (Graphene Mobile Neo in this case) and then set about checking how the content works with that theme.
WIth Graphene Mobile Neo, it has useful options such as optional slide-in sidebars, and all the usual colour and header options. It also has the option for extra menus, as you might not want all the same pages on the ‘mobile’ version of the site.
So all that is left to do is work through each page, or at least a selection of pages to check the template styles and make sure everything works and browses nicely on a device such as an iphone.
If you are happy with your site, but are worried about how it looks on mobile devices, you can simply check it – even borrow a device from a friend for 5 minutes and check your site. If you have concerns, or would like advise or site changes to make it work better on mobile devices, please get in touch.