After hearing that a dev/jailbreaker named Comex had already hacked a browser onto the Apple watch (source), we at MOBO decided to get one step ahead, ensuring our site was responsively designed and adapted for the Apple Watch.
We spent a fair amount of time researching if anyone has done this yet (preparing website’s for Apple Watch visits), and from what we could gather, no one has really done so thus far. As such this Apple Watch responsive design was very much a shot in the dark, we had no previous research to go on, nor any solid technological implementation practices by anyone else, and very little user experience usage or history to go by.
So luckily it has been a few fun days working with the Apple Watch and hacking the browser, doing all the work off our own backs and just generally playing around with settings.
In the end we’ve opted for a very simple implementation, giving our users 4 options:
- Twitter profile
- Click to call us which hooks up to the standard calling API
We’ve integrated this through 3 main responsive/device detection techniques, currently we’re mainly relying on User-Agent String sniffing from the PHP side (
$_SERVER['HTTP_USER_AGENT'];) as well as certain HTTP headers to detect Apple Watch’s browser – we’ll have to keep on eye on this method as further developers implement their own Jailbreak browsers. We have also got a backup CSS media query, but we really don’t want to rely on that as it involves loading the whole original site in the background, which is just pointless.