Tip: Don't rely on plugins to deliver a mobile site

[Elpie]

Warning - this is a *rant*.
I'm increasingly unable to visit sites, particularly WordPress-based sites, this year as more and more of them are using plugins to add "mobile support". If the site includes Flash, or a lot of JavaScript, my phone baulks at loading. But, the worst situation occurs on desktop. The most popular mobile-enabling plugins, such as WP-Touch, rely on device detection. This isn't always accurate. Alarmingly, if referrers are not set, or 3rd party cookies disabled, they automatically assume that the device is mobile and serve the mobile site.

Now comes the killer - for some of these plugins, if JavaScript isn't on (which is often the case for people with disabilities but also for people behind corporate firewalls) the mobile site is served and content is overlaid with a large warning about JavaScript. The content isn't visible and cannot be read until CSS is disabled, which is something many people wouldn't know to do.

In trying to make sites accessible to mobile devices some of these plugins are making the site inaccessible to a lot of other people. Techcrunch.com is a good example of this happening.

Unfortunately, these plugins fool people into thinking that all they need do to serve a mobile site is to add the plugin and serve the corresponding mobile theme. It just doesn't work that way, unless the site is already optimised for mobile and page size is correspondingly small. AND it doesn't rely on JavaScript to serve content.

/* End of rant */

[Martin]

Never have had a problem with Mobile plugins.

It is always good to get a mobile plugin that is updated regularly and also has a mobile browser list that you can update so it's compatible with the latest mobile phone browsers.

[Ryan]

Browser sniffing sucks. Unfortunately, so too does serving different CSS files to different devices based on device width.

[Elpie]

Browser sniffing sucks. Unfortunately, so too does serving different CSS files to different devices based on device width.

Yep, completely agree. Just as well we don't need to do either of those things now. Media queries work well with modern browsers and most reasonably-modern mobile devices but if a site is designed to be completely flexible even those can be kept to a minimum.

[Otto]

Media queries are based on device width, as Ryan stated. And they still kinda sorta suck.

For example, the iPhone's media query is media="only screen and (max-device-width: 480px)".

The iPad's is media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)".

It's better than sniffing, but still...

[WPDave]

Browser sniffing sucks. Unfortunately, so too does serving different CSS files to different devices based on device width.

I've had nothing but problems with this on one site so scrapped it all together as the normal site worked just fine.

[Jeffro]

Revisiting this thread, it seems like the more reasonable approach would be this new found thing called "Responsive Web Design" where the page readjusts according to the device it's being viewed on without any disruption, as if were meant to be that way all along. Can anyone verify that Responsive Design would be a good answer to this problem? Or am I thinking of different things?

[MiroslavGlavic]

WordPress Mobile Pack has been doing awesome for me.

[PressedIn]

@Jeffro - Responsive Design & CSS works wonders. Both BuddyPress & WooThemes feature Responsive Designs that scale quite well. On an iPhone, iPad, and Motorola Atrix I've had no issues. The only time I have is when I specifically put something in the header that was not designed to shrink and scale.