Creating an iPhone-optimized version of this site

▼ I've been pretty happy with the redesign of this website that I did last year. It's clean but still has some character. I kept the width of the text to 540 pixels because long lines are hard to read, and the text size is a bit larger than average. Still, on the iPhone the site looks tiny:

Double tapping to zoom in on the text helps a bit, but it's still not really readable. So I decided to make an iPhone-optimized version of this site. As often in the web world, it turned out there's a bunch of tools to help with this, but it's still not an easy thing to do!

Safari on the iPhone renders websites as if they're displayed on a window that's 980 pixels wide. However, this can be adjusted by using a "viewport" setting. I use a viewport of 568 pixels. That's the width of the iPhone 5 screen in landscape. (Well, it's 1136 really but iOS quietly doubles all pixel sizes behind the scenes and 568 x 2 = 1136.)

The result is that it's no longer necessary to double tap to zoom, as Safari now renders the site as if it's displayed on a window that's 568 pixels wide. However, on devices such as iPads everything would get too big, so I also use a maximum-scale setting of 1.0. This means that if the screen is actually narrower than 568 pixels, the device will shrink the page to fit. But if the screen is wider than 568 pixels (such as 768 pixels for an iPad in portrait orientation), the page won't be zoomed.

All of the above is accomplished using the following line in the HTML of every page:

<meta name="viewport" content="width=568, maximum-scale=1.0">

But even with these settings in place, in portrait mode, the text is just too small to read. Turns out you can use "media queries" to adjust your CSS stylesheet when the page is shown on certain devices. The styles below are applied only when displaying on a screen if that screen is no more than 360 pixels wide and in portrait orientation. (The iPhone 5's screen is 320 pixels wide before doubling.)

<style type="text/css" media="only screen and (max-device-width: 360px) and (orientation: portrait)">
  body { font-size: 200%; }
</style>

So on these small screens the font size gets doubled. On devices with screens between 361 and 720 pixels, such as the iPhone 6 at 375 and the 6+ at 414 pixels, the font size is 60% bigger than the standard size:

<style type="text/css" media="only screen and (min-device-width: 361px) and (max-device-width: 720px) and (orientation: portrait)">
  body { font-size: 160%; }
</style>

(There are some more settings for headings and footers.)

This worked for the most part, except that the body text was actually slightly larger than the heading text. Turns out that mobile Safari automatically bumps up font sizes if it thinks those are too small. As I'm trying to control all of this myself I turned this off with the following CSS setting in the body section of the main stylesheet:

-webkit-text-size-adjust: 100%;

The result:

Nice and readable, even if I do say so myself. Turns out that the font size I used is exactly the same as the default one in the "reader" mode in Safari. And when you turn the phone sideways, in landscape you get the exact same view you get with the desktop version of Safari:

Compare the image above to that first paragraph:

After six years of using one, it's not often that I stumble upon an iPhone trick I didn't know before. But here's one. When looking at the lock screen when audio is playing, press the home button and the audio controls are replaced with the large clock that the lock screen normally shows when no audio is playing.

Looking good or not so good on your system? Send me a screenshot!

Permalink - posted 2014-10-01

I for one welcome our new NFC payment overlords

▼ So next month American iPhone 6 and 6+ users can start paying wirelessly. That's pretty cool. However, in many parts of the world you don't need to buy an expensive new phone to get that ability. Let me explain how all of this works here in the Netherlands.

Back in the 1980s, we had checks that you could use to pay in stores. But those quickly fell out of use as magstripe debit cards were introduced. At first, you could use those to get cash out of an ATM, and soon stores started adding the magnetic stripe readers so you could use them to pay when shopping. Note that here in Holland at least, this always required entering a PIN. So the store had to have some kind of connection to the bank network in order for the payment terminal to check whether there was enough money in your account and if you had entered the correct PIN.

I know that elsewhere in Europe the PIN wasn't always necessary. Paying in stores and restaurants with these debit cards typically works throughout Europe these days, but it was pretty hit-and-miss in the past. ATMs were better. I've also been able to get cash from American ATMs with my Dutch debit card for as long as I can remember, although it can be hard to find one that doesn't add a significant extra charge. For me, in Europe there's no extra charge getting cash out of a foreign ATM.

What about credit cards, you say? They're not really used by Dutch people. They're mainly accepted in places that cater to visitors.

Back in the 1990s, small stores used a dial-up phone line for the payment authorization, which made using a debit card relatively slow and expensive. So in 1996, a new system was added to the mix, called "chipknip" ("knip" is slang for wallet). You add credit to the chip on the chipknip and then you can use that credit to may (small) payments without the need to enter a PIN. Without the need to connect to the payment network, this is very fast. Unfortunately, each country has (or had) its own version of this system. Although it wasn't a complete failure, it was never hugely popular, and the chipknip will go away at the end of the year.

We hear tons of stories about credit card numbers being stolen from payment systems in the US. With the European debit card + PIN systems this is a bit harder. What has been quite popular overhere is "skimming" where criminals attach little magstripe readers to payment terminals and then intercept the PIN using a camera. They then write a copy of the original card's magnetic stripe on a blank card and use that card along with the PIN to get money out of ATMs, usually in a far-away country.

To combat this issue, the banks started using cards with a chip. The chip has a little CPU that holds a secret key that it uses to encrypt communication with the bank and it won't let itself be copied, so the chip + PIN system is much more secure than magstripe + PIN. (Or magstripe without PIN...) It's now in use for both debit cards and credit cards in much of Europe and also places like Canada, although the magstripe is still present for backward compatibility. I believe it's also coming to the US in the coming year. As far as I know, everyone uses the EMV standard for these cards, so there's no reason why cards from another country wouldn't be accepted.

Finally, NFC!

So what about NFC? Basically, someone decided that having to insert your card into a payment terminal and then typing a PIN is a chore. So they came up with an RFID/NFC version of the EMV chip. Foregoing the PIN on a card that can—in theory—be read through your wallet and clothes/bag sounds rather insane at first blush. But PIN-less payments are limited to small amounts, which the banks are happy to cover in the case of loss or fraud. Here in the Netherlands, you can make individual payments up to 25 euros and/or payments adding up to 50 euros without entering a PIN. If you go over these amounts, you still have to enter your PIN. So if you lose your card or a hacker with a big antenna reads it from across the street, you're out no more than 50 euros. Which the bank will reimburse.

Two of the three big banks in the Netherlands (ING and ABNAMRO) are giving out NFC-enabled debit cards when existing cards expire, and my bank even lets you order a new NFC card for free if you don't want to wait that long. I got mine today, and I have to say that the new system is super convenient. I haven't tried paying without taking the card out of my wallet, but there's no reason that shouldn't work. There also doesn't seem to be any conflict between the bank card and the NFC card used for public transport.

I tried the card three times today: first at a little super market at the train station (AH to go), where it didn't work. Could have been that the card first needed to be enabled by doing a normal transaction. I then went to the Burger King, where it worked just fine, and finally to a takeout place that used to only accept cash until earlier this year. They have a portable card reader that included NFC capability, although I didn't see the contactless payment logo on it. The logo and the NFC reader are typically on the left side of the payment terminal.

Now, what about Apple Pay? Although it seems that Apple added a whole bunch of its own secret sauce, at the bottom of the Apple Pay page it says "look for this icon at checkout" and then shows the standard contactless payment logo on it (see above).

So it seems that payment terminals don't have to explicitly support Apple Pay. Rather, Apple Pay works with regular NFC payment systems. Which presumably means that all the places that support Apple Pay also support contactless payments using a card with NFC.

It looks like Apple Pay has three advantages over a card with a built-in NFC chip: you can use your fingerprint in lieu of a PIN, the merchant doesn't get to see your card number and other details, and you don't have to carry the physical cards. I'm thinking in the case of credit cards, not having to expose the credit card number to potentially insecure payment terminals would be helpful. In the case of debit cards, this isn't really an issue. Using your fingerprint could be more convenient than a PIN, but it's also more secure. You can load a bunch of different cards on the iPhone and thus you wouldn't have to carry these cards anymore—once you can pay using NFC everywhere. That's going to take a long time, so I don't see that advantage materialize anytime soon. (I wonder when ATMs will start being NFC-capable.)

However, I do think that the existence of Apple Pay will be helpful in making NFC payments reach critical mass in the United States. It's even possible that the US will end up skipping the chip + PIN system and immediately go to NFC. I'm very interested to see if my NFC-enabled debit card will work in the US. I'm also looking forward to see if we get NFC payments with the iPhone 6/6+ and the Apple Watch here in Europe.

In the past, I would typically use my debit card for large payments and cash for groceries and the small stuff. I don't trust all this electronic stuff enough to start leaving the house without any cash on me, but I can certainly see myself paying small items using PIN-less NFC, as it's so much faster than paying with cash or using the chip + PIN system.

So I, for one, welcome our new NFC payment overlords.

Permalink - posted 2014-09-24