Responsive Websites in WordPress

mobile-wordpress-siteI started out coding mobile websites by hand several years ago (before the first iPhone came out, actually), and that is still how I prefer to do it sometimes! However, I have given that technique up as old-fashioned now when it comes to WordPress sites

It’s just too tricky to do your own coding on that platform without having lots of obstacles. Perhaps someday a mobile- and tablet-friendly approach will be built-in, but for now my favorite way to make WordPress websites is with one of two plugins: WPTouch and WP Mobile Detector.

WPTouch

WPTouch is the quickest mobile fix of the two. As soon as you activate it, your content is rendered in a slick, modern design on mobile phones. With a bit of customization, you can work around the blog-centric focus to make it work for a website, and suddenly your work is done.

The free version, however, doesn’t support tablets – those will continue to render the desktop version of your site. Once subscribed to the WPTouch Pro, your site magically works on tablets and mobile phones alike, and you have more themes to choose from.

My S.O.P here is to design a homepage specifically for mobile/tablet devices, then direct all of those devices there instead of the desktop homepage. Then I leave the rest of the pages as-is, but will go through them and code certain objects, with CSS, so that they don’t render on the mobile screen – although many will load in the background, unfortunately. I also look for any objects which I want to appear only on mobile/tablet devices, and I code appropriately.

WP Mobile Detector

This one takes a little more attention to look good, but in that sense you have more opportunities to crate you own design. It renders on mobiles and tablets, but the default is pretty ugly. With some doctoring up, however, you can get a smooth look across your whole site before long.