Tag Archives: iOS

Sometimes I wonder if anyone at Apple actually uses their products in the real world, episode #532,464: the iPhone QR Code Scanner app

QR codes are a convenient way to open a URL with your phone without having to type a long string of text (especially since it’s hard to avoid typos in a URL on a phone touchscreen).

But.

The iPhone’s QR Code Scanner app in the Control Center has a really annoying feature: It doesn’t open URLs in the Safari app; it opens them in its own embedded browser.

I’m not really sure why Apple chose to do this, or why they don’t realize what an issue it can create for users. What is that issue?

If you leave the app, when you go back to it, you’re back to the camera view for scanning a new QR code, rather than whatever web page you were interacting with.

There is no “history” in Code Scanner. No “back” button on the camera screen.

Sometimes this can be trivial. Sometimes not. Here’s a scenario I just went through that turned out not to be an issue, but it very well could have been.

It was time to renew the vehicle registration on my car with Minnesota Driver and Vehicle Services. (Yes, in most states we’re talking about the DMV, but since Minnesota always has to be different, here it’s DVS.) DVS is getting into the 21st century, and they’ve started emailing out the renewal notices instead of sending paper copies. And, the email included a QR code for me to jump-start the renewal process. Cool!

So, I scanned the code (off my Mac screen) with my iPhone, and started the process. (Maybe it’s possible for the Mac to read QR codes out of an on-screen PDF… I should investigate that.)

At the end of the process, since I was paying with my debit card, I got a pop-up alert from my bank’s app about the transaction. I would have ignored that, but I got two alerts from the bank. Worried I had double-submitted, I jumped over to the bank app. No, it was fine; the second charge was just the 2.15% credit card processing fee the DVS website had warned me about.

But now… oh no! I had been completing all of the process in the Code Scanner app, so the little “back” link at the top left of my iPhone screen took me back there, which of course forgot about that complex series of web form screens I had just stepped through, and blithely displayed the camera again for me to scan a new code. Damn! Was the process complete? Probably. I hope so. I opened up my email and saw a confirmation from DVS, so presumably everything was finished. But I won’t know for sure until I get my tabs in the mail. Ugh.

Now see, here’s the thing I keep forgetting in the moment. When you scan a QR code with Code Scanner, and that QR code is a web URL, Code Scanner opens the page in its own embedded browser. But there’s a little button at the bottom right to open the page in Safari.

If you have the foresight (or memory) to tap on that little Safari compass icon as soon as you’ve scanned a QR code, all will be well with the world. But if you’re just focused on whatever you’re trying to do with the web page you’ve just opened, it’s really easy to ignore the subtle interface differences between the two apps.

I shouldn’t have to play “Can you spot the differences?” like this is a kids’ placemat at a family restaurant in the 1980s. I shouldn’t have to remember to tap the Safari icon if I’m about to embark on a seven-part journey through the minds of the lowest-bid contractors who won the job to develop a government website.

Apple needs to understand how its products are used in the real world.

A passable but imperfect solution for full-bleed background images on Android and iOS

I’m working on a site right now that has a fixed, full-bleed (i.e. background-size: cover) background image on the <body>. The content flows over it, mostly obscuring it completely, but the background is occasionally revealed in the spaces between content blocks. Some blocks have a semi-transparent background so you can see the fixed background as if through frosted glass.

Here’s the CSS:

body {
  background: rgb(255,255,255) url('../images/ui/body_bg.jpg') center center no-repeat fixed;
  background-size: cover;
}

It’s a cool effect, but it really, really does not want to play nicely on mobile. Various odd things happen on both Android and iOS, and they are completely different.

Quick side note: Yes, the background image is a JPEG. Normally I only use PNG or SVG images in UI elements, but I had good reason to use JPEG here: even though it’s only two colors (with some in-between colors due to antialiasing), the pattern in the background is incredibly complex, and a JPEG version of the file is about 1/5 the size of the PNG. And since it’s an illustration, I tried making an SVG version first, but the pattern is so large that the SVG was about 2 MB! So JPEG it is… which may be a factor in the issue I’m having on Android, but I haven’t tested a PNG version of the image to verify that.

iOS Problems

I’m an iPhone user, so I mainly test responsive sites on iOS. I do own an Android phone (a Motorola Moto E, which I highly recommend as a cheap-but-decent Android phone for testing), but I generally only break it out during the final round of browser testing prior to launching a site.

The issues with background images on iOS are well-known to most web developers. iOS has a number of rather arbitrary seeming limitations imposed upon the Mobile Safari browsing experience, generally for one of three reasons: 1) performance, 2) touch interface usability, 3) the whims of the ghost of Steve Jobs. In the case of background images, background-attachment is not supported. I’m not really sure how this would impact either (1) or (2) — although I think with the early underpowered iPhone generations, it did impact performance — so I think we’re dealing mostly with (3) here. At any rate, because you can’t have an attached background on iOS, I added this in my media queries:

@media screen and (max-width: 782px) {

  body {
    /* For background handling on iOS */
    background-attachment: scroll; background-repeat: repeat;
  }

}

Another quick side note: Why is my phone break point at 782 pixels, you ask? Because that’s where WordPress has its break point for the admin interface. I’m not exactly sure why the WP team chose that number, but why fight it?

Besides the background attachment, there’s also the issue that background-size: cover on a phone is going to make the background image huuuuuuuuuge because it’s scaling it to fit the height of the page content, not the screen size. I initially solved that with background-size: 100%;, since we’re now allowing the background to repeat. As you’ll see, however, that led to problems on Android, so I ended up scrapping it.

Android Problems

Yes, Android has problems. Don’t even get me started! But I wasn’t prepared for this.

I opened the page in Android, and, although the background image was displaying as I expected in terms of size and attachment, it looked… awful. The original source image I am working with is a generous 2400 x 1857 pixels, enough to look reasonably sharp on most displays, even at high resolution. And it looks great on my Mac, great on my iPhone. But on the Android phone it was splotchy and low-res looking… like it had been reduced to 200 pixels and then upscaled (which is maybe what Android is doing, somehow… and here is where I’m wondering if the image being a JPEG is a factor, but that’s just a stab in the dark).

I tried a number of possible solutions, the most obvious being to set exact pixel dimensions for the image. I tried 1200 x 929, basically a “x2” size for high-res devices. Still looked like crap. I even tried setting it to 2400 x 1857, the actual dimensions of the image, and it looked like crap… and I don’t mean pixel-doubled, which is what it actually should be; I mean the same splotchy weirdness I had been seeing at other sizes.

And then I discovered David Chua’s solution:

html {
  /* For background image scaling on Android */
  height:100%; min-height:100%;
}

Yet another quick side note: Here I am not placing this inside a media query. We don’t want to only fix this issue on phone screens. Granted, the iOS solution above needs to work on iPads, too… something I haven’t really solved here. I’m workin’ on it!

This change for Android worked perfectly! By this point I had, temporarily at least, removed the iOS workarounds I mentioned above, so on Android the background image was not only perfectly scaled to the browser window, looking sharp and clean, but it was even fixed-position, just like on desktop!

But… the image was back to being huuuuuuuuuge on iOS. Apparently this html trick for Android does absolutely nothing on iOS, so you’re left trying to find another solution that won’t simultaneously break Android.

An uneasy compromise

It’s not perfect, but I found that if I put both of these tricks together, everything works… the only thing we lose is the fixed-position treatment that Android allows but iOS does not. But the background looks great on both platforms and most importantly, behaves consistently on both.

Here’s the complete code I’m rolling with, for now:

html {
  /* For background image scaling on Android */
  height:100%; min-height:100%;
}

@media screen and (max-width: 782px) {

  body {
    /* For background handling on iOS */
    background-attachment: scroll; background-repeat: repeat;
  }

}

As noted above, this doesn’t really address iPads. A simple solution would be to change the media query to @media screen and (max-width: 1024px), but a) that doesn’t account for the larger iPad Pro and b) it also means a desktop display will lose the proper background effect if the window is smaller than that size. I don’t really have a solution; an adaptive treatment using either server-side or JavaScript-based browser detection would be a consideration, but I don’t really like resorting to that sort of thing for something as basic as this.

It doesn’t help that I recently gave my iPad to my daughter so I don’t currently have a tablet of any kind for testing. That’s about to change as I have a newly ordered Kindle Fire arriving today, but of course that’s not going to give me the answer for an iPad. I can try Responsive Design Mode in desktop Safari, but that’s not always a perfect representation of the quirks of an actual mobile device.

Still… this combined solution for phones is an improvement over the default behavior in both cases.

It’s totally crazy, but I think I want to buy an iPhone 5c… now

topic_iphone_5cNext Tuesday, Apple will be announcing the iPhone 6. Supposedly they’re also announcing an “iWatch” or whatever. The latter is still shrouded in mystery but it really seems like we already know everything there is to know about the iPhone 6.

And honestly… I’m not sure I want it. Thinner? Yes, that would be great. That’s always great. But it’s not like my iPhone 5 is “thick.” Bigger screen? I guess. I’m fine with the size of my iPhone 5 screen, and I don’t want a larger slab to carry around in my pocket. Faster processor? Who would say no to that? Although to be completely honest, my iPhone 5 seems perfectly snappy to me.

So, yeah… I’m pretty happy with my iPhone 5. In fact, there’s only one reason I’m even interested in getting a new phone at all when my contract runs out this month. About a year and a half ago, I dropped my iPhone 5 on asphalt, and dinged the corner right by the camera. Since then, the inside of the camera lens has gradually accumulated dust, to the point where my photos are noticeably blurry, washed-out, and occasionally infested with weird splotches.

Would I be happy replacing my iPhone 5 with another iPhone 5? Yes. I’d be perfectly happy with that. But they don’t sell the iPhone 5 anymore. Instead they sell the iPhone 5c, which is basically the exact same phone but in a cheaper-to-produce (and possibly more resistant to the kind of damage mine suffered) plastic casing. And it comes in bright colors.

I want one. I want the obnoxious yellow one. And I’ve wanted it almost since they came out. For me, the only thing the iPhone 5s had going for it over the 5c was the A7 processor. But, again, I haven’t had any problems with the performance of the 5’s A6 processor.

So, I am left with a strange quandary. I am sure any of my fellow Apple fans will think I am an idiot (or worse) for seriously considering buying an iPhone 5c (actually, two of them) right now, on the cusp of the big iPhone 6 announcement. But here I am.

Apple always has three iPhone models available: the latest-and-greatest (currently the 5s), the last-year’s-model (in this case the 5c, a modified 5), and the two-years-old-model (the 4s). I am wondering what Apple is going to do with their new low-end phone after next Tuesday. Right now it’s the aging 4s, which will be discontinued. That would generally mean it’s time for the 5c to drop into that spot. If I wait until then, I might be able to get a 5c for “free” (“subsidized” by the carrier)!

But… the lowest-end model has only ever been available in a 16 GB size. I’ve learned over the years with iOS devices that I can’t really get by with less than 32 GB of storage. Right now the iPhone 5c is available in 16 and 32 GB models. But after next Tuesday, assuming it becomes the low-end model, the 32 GB version might disappear.

And what of the mid-level model? Will the 5s be downgraded to colorful plastic and renamed the 5sc or some other strange appellation? Would I want that instead? (Yes, I probably would, especially since it would most likely still come in a 32 GB version.)

At the moment I am considering hedging my bets, and buying two 32 GB iPhone 5c’s right now. Yes. Buy them. Keep them in the package. And for the love of all that is good in the universe keep the receipt. Then, wait and see. If I actually want something that gets revealed on Tuesday, I could return the 5c’s. If not, I have them.

Am I crazy?

The Outside Scoop: Thoughts on Android Wear and a possible iWatch

The big news in tech today is Google’s announcement of Android Wear, a version of their Android OS specifically optimized for “wearables” like watches.

The tech media is erupting with ridiculously titled blog posts that refer to this as Google’s “answer” to the iWatch, a product that Apple has not announced, nor even acknowledged working on.

Surprisingly, for the first time I actually found one of these wearables mildly interesting, the Moto 360. But I am still skeptical of wearables in general, smart watches in particular, and especially the idea that Apple is working on one. But I’ve learned from my past mistakes, when I was convinced Apple was neither working on a smartphone in late 2006 nor a tablet in late 2009. So, in my world at least, my adamant belief that Apple is not developing a watch should probably be my biggest clue that they are.

So where is Apple’s “iWatch”? Aren’t all of these competitors eating Apple’s lunch (before it’s even cooked)? Perhaps. But consider this:

Remember the original iPod. It came into a market that already existed (but sucked), and delivered a radically superior user experience, and was a huge hit. Remember the iPhone. Once again, it came into a market that already existed (but sucked) and totally revolutionized it.

The thing is… a smart watch market doesn’t really exist (or didn’t when rumors of an “iWatch” first started to circulate). It almost seems like Apple got the wheels of the rumor mill turning deliberately, to goad their competition into creating the market, thinking they were beating Apple to the punch but in fact creating the exact environment of suck Apple needs to release a product into.

What’s so Neue about Helvetica?

fonts
So, I was just reading Rani Molla’s post on GigaOM called What’s all the fuss about Apple and Helvetica Neue? and I felt compelled (as I so often do, about so many things) to comment on the issue here.

Contrary to how the GigaOM article seems to frame it, the controversy — the, if you will, fontroversy (I regret it already) — when Apple demoed iOS 7 at WWDC last month was not that they were switching to Helvetica Neue as the iOS 7 system font. It’s that they were switching to Helvetica Neue Ultra Light, a particularly delicate weight of the general Helvetica Neue font family. (I’ve read some things that suggest they’re reversing course on that decision based on developer feedback, but the GigaOM post doesn’t even touch that.)

The fact is, Helvetica Neue has been the iOS system font ever since the introduction of the iPhone 4. When the iPhone was first introduced, it used plain old Helvetica as the system font. But with the introduction of the Retina Display, Apple switched to the slightly more refined Helvetica Neue.

So the concern with iOS 7 is not Helvetica Neue itself — that’s been working out just fine. It’s this extra thin weight of the font, which becomes difficult to read at smaller sizes.

Personally I like Helvetica Neue Ultra Light. I think it continues the trend towards refinement Apple began with the switch to Helvetica Neue itself, and is demonstrated effectively in Cabel Sasser’s animated GIF featured in the GigaOM article. The version using Helvetica Neue Regular feels heavier and clunkier to me. That said, I do understand and appreciate the legibility concerns with Ultra Light at very small sizes.

I’m not sure how this will work itself out. I doubt Apple will switch to a different typeface, though they may increase the weight of the font in the final version of iOS 7. But part of the reason Apple went with Helvetica in the first place is that it’s neutral (at least in principle). It gets out of the way and isn’t distracting. It doesn’t convey any particular personality. It’s a “blank canvas” of a font, which makes it a perfect fit for iOS devices, where the device itself disappears and becomes the app you’re using. Developers don’t have to use the system font in their apps, but a lot of them do, and by keeping the system font as neutral as possible, Apple avoids predisposing apps to a certain personality or style.

This is exactly the opposite of the opinions expressed in the closing of the GigaOM article, and is I think the opposite of Apple’s intentions with the iOS experience. Using a custom font that “reinforces a more distinctive brand voice” would be the equivalent of sticking a big Apple logo on the front of the iPhone. Apple’s branding goes on the back (where it can be an effective marketing tool). It’s never a part of the user experience.